/* ==========================================================================
   FKRCCI homepage — highlights section + image carousel (carousel.css)
   Pairs with js/carousel.js. Loaded only by index.html, so other pages are
   unaffected. The carousel itself is plain CSS/JS (no WebGL, no gating) —
   it must always work, on every device, with or without the 3D layers.
   ========================================================================== */

/* ---- in-hero photo collage: 1 big carousel + 2 small stills below ----
   Lives inside .hero__content (the narrow center column), so it stays
   compact and the background video reads clearly around it. */
.hero-collage {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  max-width: 27rem;
}
@media (min-width: 1200px) {
  /* Matches .hero__grid's 3-column breakpoint in style.css (that grid
     overflows below 1200px, so it falls back to a 1-column stack there —
     this collage sizing must switch over at the same point, or it'll try
     to apply viewport-height math meant for the 3-column layout while
     .hero__media is actually just a stacked block, not a real column). The
     collage just needs to fill its own column at a sensible width, no
     manual push-to-edge margins.

     .hero stays min-height:100vh (see style.css) — the collage must fit
     ABOVE that fold, not grow the section past the viewport. So it's
     capped by height (max-height, in vh) rather than by width alone: the
     big 16:9 slide + the row of two 4:3 stills + gaps all scale down
     together on shorter screens instead of overflowing past .hero. */
  .hero-collage {
    width: 100%;
    /* The base (mobile-first) rule above sets max-width:27rem — reset it
       here, otherwise it silently keeps capping the collage at 27rem even
       though width:100% says otherwise, and the "extra width" the column
       gained just becomes visible empty space to its right. */
    max-width: none;
    /* flex:N children with min-height:0 and no intrinsic image height
       collapse to zero unless the column itself has a real height to
       distribute — max-height alone doesn't give them anything to grow
       into. height, clamped so it never pushes past the fold. */
    height: clamp(20rem, calc(100vh - var(--navbar-height, 130px) - 22rem), 30rem);
  }
}
.hero-collage__big.fk-carousel {
  /* Below 1024px .hero-collage has no explicit height (only max-width) —
     aspect-ratio:auto with no height to fall back on collapses the whole
     slide to 0px there. Keep a real aspect-ratio as the mobile default;
     the ≥1024px rule below switches to flex+height:clamp() instead, where
     aspect-ratio:auto is what's actually needed (see that block). */
  aspect-ratio: 16 / 10;
  box-shadow: 0 14px 30px -14px rgb(34 27 20 / 0.45);
}
.hero-collage__big .fk-carousel__caption {
  padding: 2.25rem 1.25rem 1.1rem;
  font-size: 1.0625rem;
}
.hero-collage__big .fk-carousel__dots { bottom: 3rem; }
.hero-collage__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.55rem;
}
.hero-collage__small.fk-carousel {
  aspect-ratio: 4 / 3;
  border-radius: 0.625rem;
  box-shadow: 0 10px 22px -12px rgb(34 27 20 / 0.4);
}
/* The default 2.5rem arrow buttons are sized for the big slide — much too
   large against a tile this small, so scale them down here. */
.hero-collage__small .fk-carousel__arrow { height: 1.5rem; width: 1.5rem; }
.hero-collage__small .fk-carousel__arrow--prev { left: 0.4rem; }
.hero-collage__small .fk-carousel__arrow--next { right: 0.4rem; }
@media (min-width: 1200px) {
  /* At this breakpoint (matches .hero__grid's 3-column switch in
     style.css) .hero-collage switches to a fixed, viewport-based height
     (clamp(), set above) instead of sizing from aspect-ratio, so the big
     slide + small-tile row can scale to fit whatever vertical budget is
     left in the hero. flex + min-height:0 let each row shrink below its
     content size to fit that shared height; aspect-ratio would fight that
     shared height, so it's switched off here only. */
  .hero-collage__big.fk-carousel { aspect-ratio: auto; flex: 3 1 0; min-height: 0; }
  .hero-collage__row { flex: 2 1 0; min-height: 0; }
  .hero-collage__small.fk-carousel { aspect-ratio: auto; height: 100%; }
}
@media (max-width: 1199px) {
  /* Hero content isn't the narrow center column below 1200px (see
     .hero__grid in style.css, which stacks to 1 column there) — give the
     collage a bit more room. */
  .hero-collage { max-width: 28rem; }
}
@media (min-width: 1024px) {
  /* style.css sets a flat padding-top:12rem here, sized for the original
     title-only hero. Tie it to the *actual* navbar height instead of a
     guessed constant, with just a small buffer — the flat value was
     leaving a large, unintentional gap between the navbar and the title.
     Anchor to the top (not center) so the title never risks being pushed
     down behind the fixed navbar as the collage below it grows/shrinks.
     (This one stays at 1024px — it's just padding on the stacked layout
     too, no column-width math involved.) */
  body.home-3d .hero {
    justify-content: flex-start;
    padding-top: calc(var(--navbar-height, 130px) + 1.5rem);
    padding-bottom: 3rem;
  }
}

/* ---- carousel ---- */
.fk-carousel {
  position: relative;
  overflow: hidden;
  border-radius: 0.75rem;
  aspect-ratio: 4 / 3;
  background: var(--navy-50);
  box-shadow: 0 18px 40px -18px rgb(34 27 20 / 0.35);
}
@media (min-width: 640px) { .fk-carousel { aspect-ratio: 16 / 11; } }

.fk-carousel__track {
  position: relative;
  height: 100%;
  width: 100%;
}

.fk-carousel__slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.7s ease;
}
.fk-carousel__slide.is-active {
  opacity: 1;
  visibility: visible;
}
.fk-carousel__slide img {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  /* contain (not cover): these photos vary in aspect ratio and a crop was
     cutting heads/edges off. Show the whole image, letterboxed on the
     carousel's background where it doesn't fill the box. */
  object-fit: contain;
  object-position: center center;
}
.fk-carousel__caption {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  margin: 0;
  padding: 2.5rem 1.25rem 1.25rem;
  font-family: var(--font-heading);
  font-size: 1.0625rem;
  font-weight: 600;
  font-style: italic;
  color: #fff;
  background: linear-gradient(to top, rgb(34 27 20 / 0.78), transparent);
}

.fk-carousel__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: flex;
  height: 2.5rem;
  width: 2.5rem;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgb(246 238 221 / 0.85);
  color: var(--ink);
  box-shadow: 0 2px 8px -2px rgb(34 27 20 / 0.4);
  transition: background-color 0.2s, transform 0.2s;
}
.fk-carousel__arrow:hover { background: var(--turmeric); color: var(--warm-paper); }
.fk-carousel__arrow--prev { left: 0.75rem; }
.fk-carousel__arrow--next { right: 0.75rem; }

.fk-carousel__dots {
  position: absolute;
  z-index: 2;
  bottom: 3.5rem; /* clear of the caption text sitting in the bottom scrim */
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.35rem;
}
.fk-carousel__dot {
  height: 0.3125rem;
  width: 0.3125rem;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.55);
  box-shadow: 0 0 0 1px rgb(34 27 20 / 0.25);
  transition: background-color 0.2s, transform 0.2s, width 0.2s;
}
.fk-carousel__dot.is-active {
  background: var(--turmeric);
  width: 1rem;
  border-radius: 999px;
}
.fk-carousel__dot:hover { background: rgb(255 255 255 / 0.85); }

@media (prefers-reduced-motion: reduce) {
  .fk-carousel__slide { transition: none; }
}