/*
|--------------------------------------------------------------------------
| CRR (California Resort) overrides for the shared AGR components
|--------------------------------------------------------------------------
|
| Load AFTER:
|   assets/css/blog/style.css      (shared with AGR: blog listing/detail/cards)
|   assets/css/home-sections.css   (shared with AGR: highlights/reviews/FAQs)
|
| Only what differs from AGR lives here:
|   1. CRR fonts (Playfair Display + Open Sans) and gold, via the variables
|   2. Sizes/spacing measured from the CRR Figma frames
|   3. Blog banner + detail offset for CRR's fixed, solid 120px header
|   4. The redesigned homepage gallery (carousel), which AGR does not have
|
*/

.home-section,
.blog-page,
.blog-hero {
  --home-heading-font: "Playfair Display", Georgia, serif;
  --home-body-font: "Open Sans", Arial, Helvetica, sans-serif;
  --home-heading: #000;
  --home-accent: #b88344;
  --home-accent-dark: #966a34;

  --blog-display: "Playfair Display", Georgia, serif;
  --blog-heading-font: "Playfair Display", Georgia, serif;
  --blog-ui: "Open Sans", Arial, Helvetica, sans-serif;
  --blog-body: "Open Sans", Arial, Helvetica, sans-serif;
  --blog-heading: #000;
  --blog-ink: #000;
  --blog-accent: #b88344;
  --blog-accent-dark: #966a34;
}

/* CRR content sits in .main-wrapper, not the AGR float layout */
#main.blog-page {
  float: none;
}

/*
|--------------------------------------------------------------------------
| 1. Type scale (Playfair Display runs larger than Philosopher)
|--------------------------------------------------------------------------
*/

.home-section .home-section-title,
.home-section .home-highlight__title {
  font-size: 40px;
  line-height: 1.33;
}

.home-section .home-faq__question-text {
  font-size: 18px;
  line-height: 24px;
}

/* Card titles: Playfair 18 / 24 in the CRR frames, at every width */
.blog-page .blog-listing__grid .blog-card__title {
  font-size: 24px;
  line-height: 1.4;
}

@media only screen and (max-width: 1199px) {
  .home-section .home-section-title,
  .home-section .home-highlight__title {
    font-size: 36px;
  }
}

@media only screen and (max-width: 991px) {
  .home-section .home-section-title {
    font-size: 32px;
  }
  .home-section .home-highlight__title {
    font-size: 30px;
  }
}

@media only screen and (max-width: 767px) {
  .home-section .home-section-title,
  .home-section .home-highlight__title {
    font-size: 28px;
  }

  .home-section .home-faq__question-text {
    font-size: 17px;
    line-height: 23px;
  }
  .blog-page .blog-listing__grid .blog-card__title {
    font-size: 18px;
  }
}

@media only screen and (max-width: 575px) {
  .home-section .home-section-title {
    font-size: 26px;
  }
  .home-section .home-highlight__title {
    font-size: 24px;
  }
  .home-section .home-faq__question-text {
    font-size: 16px;
    line-height: 22px;
  }
}

/*
|--------------------------------------------------------------------------
| 2. CRR Figma spacing (desktop only; AGR's responsive spacing applies below)
|--------------------------------------------------------------------------
*/

@media only screen and (min-width: 1200px) {
  .home-highlights,
  .home-reviews,
  .home-faq,
  .home-blog {
    padding-top: 120px;
  }

  /* Image 656 · gap 47 · text 629   |   text 633 · gap 53 · image 626 */
  .home-highlight {
    column-gap: 47px;
  }
  .home-highlight--reverse {
    column-gap: 53px;
  }
  .home-highlight__body {
    padding-top: 41px;
  }

  .home-section .home-section-subtitle {
    margin-top: 15px;
  }
  .home-reviews__embed {
    margin-top: 47px;
  }

  .home-faq__list {
    margin-top: 50px;
  }
  .home-blog .home-blog__grid {
    margin-top: 50px;
  }

  /* FAQ rows: 30 above/below the question, answer 20 under it */
  .home-section .home-faq__toggle,
  .home-section .home-faq__toggle:hover,
  .home-section .home-faq__toggle:focus,
  .home-section .home-faq__toggle:active {
    padding-bottom: 30px;
  }

  .home-section .home-faq__answer {
    margin-top: -10px;
    padding-bottom: 30px;
  }
}

/*
|--------------------------------------------------------------------------
| 3. Blog banner and detail page under CRR's fixed 120px header
|--------------------------------------------------------------------------
*/

.blog-hero.blog-hero--crr {
  position: relative;
  overflow: hidden;
  padding-top: 120px;
  background: #3a3a3a;
}

.blog-hero--crr > .main-title-section-bg {
  position: absolute;
  inset: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.blog-hero--crr .blog-hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 280px; /* 400px banner including the header */
  padding: 0 16px;
}

/* ID needed to beat the shared "#main.blog-page { padding: 0 }" */
#main.blog-page--details {
  padding-top: 120px;
}

@media only screen and (max-width: 767px) {
  .blog-hero--crr .blog-hero__inner {
    height: 220px;
  }
}

@media only screen and (max-width: 575px) {
  .blog-hero--crr .blog-hero__inner {
    height: 170px;
  }
}

/*
|--------------------------------------------------------------------------
| 4. Homepage gallery — 3-up carousel with prev/next (CRR only)
|--------------------------------------------------------------------------
|
| Figma: title, then 423 x 357 images with 22px gaps across 1312px and
| 51 x 46 arrow boxes overlapping the outer edges.
|
*/

.home-gallery {
  padding-top: 120px;
}

.home-gallery__carousel {
  position: relative;
  max-width: 1312px;
  margin: 50px auto 0;
}

.home-section .home-gallery__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 44px) / 3);
  gap: 22px;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.home-gallery__track::-webkit-scrollbar {
  display: none;
}

.home-section .home-gallery__item {
  margin: 0;
  padding: 0;
  scroll-snap-align: start;
}

.home-gallery__link {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 423 / 357;
  background: #f2f0ec;
}

.home-gallery__link img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.home-gallery__link:hover img,
.home-gallery__link:focus-visible img {
  transform: scale(1.04);
}

.home-gallery__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 28px 18px 14px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0));
  font-family: var(--home-body-font);
  font-size: 14px;
  line-height: 20px;
  color: #fff;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.home-gallery__link:hover .home-gallery__caption,
.home-gallery__link:focus-visible .home-gallery__caption {
  opacity: 1;
}

.home-section .home-gallery__nav,
.home-section .home-gallery__nav:hover,
.home-section .home-gallery__nav:focus {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: flex;
  float: none;
  align-items: center;
  justify-content: center;
  width: 51px;
  height: 46px;
  margin: -23px 0 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: #bc7928;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.home-section .home-gallery__nav--prev {
  left: -26px;
}
.home-section .home-gallery__nav--next {
  right: -26px;
}

.home-section .home-gallery__nav[disabled] {
  opacity: 0.4;
  cursor: default;
}

/* All images fit: no arrows needed */
.home-gallery__carousel.is-static .home-gallery__nav {
  display: none;
}

.home-gallery__nav img {
  display: block;
  width: 24px;
  height: 24px;
  max-width: none;
  filter: invert(1);
}

.home-gallery__nav--prev img {
  transform: rotate(90deg);
}
.home-gallery__nav--next img {
  transform: rotate(-90deg);
}

@media only screen and (max-width: 1399px) {
  .home-section .home-gallery__nav--prev {
    left: -12px;
  }
  .home-section .home-gallery__nav--next {
    right: -12px;
  }
}

@media only screen and (max-width: 1199px) {
  .home-gallery {
    padding-top: 90px;
  }
}

@media only screen and (max-width: 991px) {
  .home-section .home-gallery__track {
    grid-auto-columns: calc((100% - 22px) / 2);
  }
}

@media only screen and (max-width: 767px) {
  .home-gallery {
    padding-top: 72px;
  }
  .home-gallery__carousel {
    margin-top: 32px;
  }

  .home-section .home-gallery__track {
    grid-auto-columns: 82%;
    gap: 14px;
  }

  .home-section .home-gallery__nav--prev {
    left: 6px;
  }
  .home-section .home-gallery__nav--next {
    right: 6px;
  }

  .home-gallery__caption {
    opacity: 1;
  }
}

@media only screen and (max-width: 575px) {
  .home-gallery {
    padding-top: 60px;
  }

  .home-section .home-gallery__nav,
  .home-section .home-gallery__nav:hover,
  .home-section .home-gallery__nav:focus {
    width: 42px;
    height: 40px;
    margin-top: -20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-section .home-gallery__track {
    scroll-behavior: auto;
  }
  .home-gallery__link img,
  .home-gallery__caption {
    transition: none;
  }
}