/* ============================================================
   Layout — containers, section rhythm, bento grid, card grid
   ============================================================ */

.container {
  width: var(--container);
  margin-inline: auto;
}

.container--wide {
  width: var(--container-wide);
  margin-inline: auto;
}

/* Section rhythm — base plus modifiers for hero/last.
   Every section is a stage; padding = curtain call. */
.section {
  padding-block: var(--section-y);
  position: relative;
}

.section--tight {
  padding-block: clamp(1.125rem, 3vw, 2rem);
}

.section--large {
  padding-block: var(--section-y-large);
}

.section--large-bottom {
  padding-bottom: clamp(4rem, 8vw, 6.5rem);
}

.section--last {
  padding-bottom: clamp(4rem, 8vw, 6.5rem);
}

/* Dark section — full-width continuation of a dark hero backdrop.
   The container class constrains content width, so a clipped spread shadow
   paints the band to the viewport edges without changing the DOM. */
.section--dark {
  background: var(--color-forest);
  --color-text: var(--color-ink-on-dark);
  --color-text-muted: var(--color-body-on-dark);
  box-shadow: 0 0 0 100vmax var(--color-forest);
  clip-path: inset(0 -100vmax);
}

/* Deeper pine — same trick, one step darker for editorial sections
   that want a heavier, moon-lit atmosphere. */
.section--pine-deep {
  background: #112118;
  --color-text: var(--color-ink-on-dark);
  --color-text-muted: var(--color-body-on-dark);
  box-shadow: 0 0 0 100vmax #112118;
  clip-path: inset(0 -100vmax);
}

/* Photo-pair front frame reads as a light bezel by default. On dark
   contexts, match the surrounding surface so the frame disappears
   into the section instead of ringing it in cream. */
.section--dark .photo-pair__front { border-color: var(--color-forest); }
.section--pine-deep .photo-pair__front { border-color: #112118; }

/* Cinematic story-flow — a whisper of warm mist bleeds up from the previous
   section so blocks read as chapters of one continuous narrative, not
   stacked slabs. Pointer-transparent so it never gets in the way.
   The section itself is full-width (no container class); the .container--wide
   wrapper *inside* the section handles content constraint. This avoids the
   `100vw`-inside-a-centered-container pattern that overflows by scrollbar-
   width on classic-scrollbar browsers (Firefox, older Chromium). */
.section--mist::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: clamp(6rem, 14vw, 12rem);
  background: linear-gradient(180deg, oklch(0.94 0.02 55 / 0.5), transparent 100%);
  pointer-events: none;
  z-index: 0;
}

.section--mist > .container--wide { position: relative; z-index: 1; }

/* ─────────────────────────────────────────────────────────────
   PARALLAX SCENE — static separator image.
   The scroll-driven pinned/parallax version was removed to keep scrolling
   native and distortion-free. The scene now renders as a simple full-width
   image band between the two sections.
───────────────────────────────────────────────────────────── */
.parallax-scene {
  position: relative;
  width: 100%;
  height: auto;
  margin-top: 0;
}

.parallax-scene__sticky {
  position: static;
  height: auto;
  overflow: visible;
}

.parallax-scene__layer {
  position: relative;
  will-change: auto;
  transform: none !important;
}

.parallax-scene__layer--base img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: center 55%;
}

.parallax-scene__layer--mist,
.parallax-scene__layer--scrim {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .parallax-scene,
  .parallax-scene__sticky,
  .parallax-scene__layer,
  .parallax-scene__layer--base img {
    transform: none !important;
  }
}

/* Dark-forest section — sits flush beneath the separator. Full-width
   background applied directly to the section (no `100vw` pseudo needed
   because the section itself spans the body, and the .container--wide
   wrapper inside handles content constraint). */
.section--forest {
  background-color: var(--color-forest);
}
/* When a parallax-scene separator sits directly above, the section flows
   seamlessly beneath it — kill the top padding. Otherwise keep the normal
   .section rhythm so the section-head isn't shoved under the sticky nav. */
.parallax-scene + .section--forest {
  padding-top: 0;
}
#expeditions { background-color: #10281D; }
.section--forest > .container--wide { position: relative; z-index: 1; }

.section--forest .section-head h2 {
  color: var(--color-ink-on-dark);
}
.section--forest .section-head p {
  color: var(--color-body-on-dark);
}

/* Editorial hairline — a warm hair-thin gradient rule you can place at the
   top of a section for a "chapter break" feel without visual weight. */
.section--rule::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(200px, 40vw);
  height: 1px;
  background: linear-gradient(90deg, transparent, oklch(0.7 0.05 55 / 0.5), transparent);
  pointer-events: none;
}

/* Bento grid — 12 col grid on wide screens, flex column on mobile.
   Gap uses the site-wide --grid-gap token so bento and card-grid inhale
   at the same rate; adjust one place, the whole page follows. */
.bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: minmax(150px, auto);
  gap: var(--grid-gap);
}

@media (max-width: 860px) {
  .bento {
    display: flex;
    flex-direction: column;
    gap: var(--grid-gap);
    grid-auto-rows: initial;
  }
  .bento > * {
    grid-column: unset !important;
    grid-row: unset !important;
  }
}

/* Convenience span classes for bento children */
.span-2  { grid-column: span 2; }
.span-3  { grid-column: span 3; }
.span-4  { grid-column: span 4; }
.span-5  { grid-column: span 5; }
.span-6  { grid-column: span 6; }
.span-7  { grid-column: span 7; }
.span-8  { grid-column: span 8; }
.span-9  { grid-column: span 9; }
.span-10 { grid-column: span 10; }
.span-11 { grid-column: span 11; }
.span-12 { grid-column: span 12; }
.row-2   { grid-row: span 2; }
.row-3   { grid-row: span 3; }

/* Card grid — auto-fit for content lists (trips, workshops, cards).
   `min(100%, Xpx)` lets columns collapse below the target width on
   narrow viewports (avoids ~320px horizontal overflow). */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: var(--grid-gap);
}

.card-grid--narrow {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: var(--grid-gap);
}

.card-grid--wide {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(1.875rem, 5vw, 3.75rem);
  align-items: center;
}

.card-grid--testimonials {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 900px) {
  .card-grid--testimonials {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .card-grid--testimonials {
    grid-template-columns: 1fr;
  }
}

/* Split — two-column with fluid centering (for intro sections). */
.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(2.25rem, 6vw, 4.5rem);
  align-items: center;
}

.split--start {
  align-items: start;
}

/* Text-plus-media */
.media-frame {
  position: relative;
  width: 100%;               /* required — otherwise aspect-ratio derives
                                width from min-height and can exceed viewport
                                on mobile (e.g. 440px height × 4/3 = 587px). */
  min-height: 440px;
  border-radius: var(--radius-tile);
  overflow: hidden;
}

/* Images inside .media-frame must fill the container, not dictate its
   width from their intrinsic dimensions. */
.media-frame > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* On narrow viewports, drop min-height so the frame can shrink cleanly
   below the 440px floor. Aspect ratio still governs internal proportion. */
@media (max-width: 640px) {
  .media-frame {
    min-height: 0;
  }
}

.media-frame--tall {
  min-height: 460px;
}

/* Photo pair — layered two-image composition for Camp Sites intro */
.photo-pair {
  position: relative;
  min-height: 460px;
}

.photo-pair__back,
.photo-pair__front {
  position: absolute;
  border-radius: var(--radius-tile);
  overflow: hidden;
}

.photo-pair__back {
  inset: 0 44px 44px 0;
}

.photo-pair__front {
  right: 0;
  bottom: 0;
  width: 48%;
  height: 54%;
  border: 8px solid var(--color-page);
  border-radius: 20px;
}

@media (max-width: 640px) {
  .photo-pair {
    min-height: 320px;
  }
  .photo-pair__back {
    inset: 0 28px 28px 0;
  }
}

/* Camp-site gallery (2x2 with feature + strip) */
.mini-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 180px;
  gap: 14px;
}

@media (max-width: 720px) {
  .mini-gallery {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 160px;
  }
  .mini-gallery > * {
    grid-column: unset !important;
    grid-row: unset !important;
  }
}

/* Breadcrumb */
.breadcrumb {
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: oklch(0.86 0.02 88 / 0.7);
  margin-top: 18px;
}

.breadcrumb a {
  color: inherit;
  text-decoration: none;
}

.breadcrumb a:hover,
.breadcrumb a:focus-visible {
  color: var(--color-amber);
}