/* ============================================================
   SNS Valley View — Experience + Gallery
   .experience and .gallery's box (position, overflow, min-height, the 1b
   height clamp above 1600px) were ported from
   design_handoff_sns_valley_view/styles.css lines 258-346 and are
   unchanged by phase 1c. The gallery's contents are no longer ported
   photography: phase 1c (docs/DECISIONS.md) replaced the four-image
   crossfade with a looping graded drone video — see
   docs/builds/1c-gallery-video.md.
   ============================================================ */

.experience {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 520px;
}

.experience__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 80px 64px;
}
.experience__copy .overline { margin-bottom: 24px; }

.experience__title {
  margin: 0;
  font-family: var(--f-display);
  font-size: 52px;
  font-weight: 300;
  line-height: 1.05;
  color: var(--c-cream);
}

.experience__body {
  max-width: 400px;
  margin: 28px 0 0;
  font-size: 15px;
  line-height: 1.85;
  color: var(--c-cream-55);
}

/* Gallery: a single looping graded drone video fills the box (phase 1c —
   see docs/DECISIONS.md). The reduced-motion fallback picture sits in the
   same box, hidden by default; the media query below swaps which of the
   two is visible instead of toggling animations on one element, since a
   <video> can't be "paused" without JS the way the old crossfade's
   animations could be silenced with animation: none. */
.gallery {
  position: relative;
  overflow: hidden;
  background: var(--c-bg-raised);
  min-height: 420px;
}

.gallery__video,
.gallery__poster-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.gallery__video {
  object-fit: cover;
}

.gallery__poster-fallback {
  display: none;
}

.gallery__poster-fallback-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ============================================================
   Responsive
   Switches to one column AT the 1024px edge, not below it — this is the
   edge the gallery's `sizes` string assumes: "(min-width: 1024px) 50vw"
   only holds if the gallery is still 2-column for the whole 1024-1279
   range, and its "100vw" floor only holds once it's genuinely full-width.
   Moving this breakpoint without updating that string would make the
   browser under-fetch image width right in that range. See
   docs/DECISIONS.md.
   ============================================================ */
@media (max-width: 1024px) {
  .experience { grid-template-columns: 1fr; }
  .experience__copy { padding: 64px 32px; }
  .gallery { min-height: 380px; }
}

@media (max-width: 680px) {
  .experience__copy { padding: 48px 24px; }
  .experience__title { font-size: 38px; }
  .experience__body { font-size: 14px; }
  .gallery { min-height: 320px; }
}

/* Above 1280px the site is full-bleed (docs/DECISIONS.md) and the gallery
   column is exactly half the viewport, but its height still comes from
   the copy column's stretch — pinned to .experience's 520px min-height,
   since the 400px-capped paragraph never grows taller. Held flat, the
   photo's crop ratio would run to 2.46:1 at 2560px, reading as a banner
   rather than a scene. This ramp grows the gallery's height linearly from
   1600px (520px, matching the pre-existing value — no jump) to 2560px
   (712px, holding the crop at 1.8:1, the agreed ceiling), then keeps
   ramping at the same rate past 2560px rather than hitting a hard stop,
   so a wider display than we tested degrades gently instead of jumping
   back to a fresh banner crop. clamp()'s 820px ceiling is a defensive
   backstop past ~3100px, not a measured value — nothing in this build's
   viewport matrix (1280/1920/2560) exercises it. */
@media (min-width: 1600px) {
  .gallery {
    height: clamp(520px, calc(520px + (100vw - 1600px) * 0.2), 820px);
  }
}

/* Respect the OS reduced-motion setting — a moving drone shot is a
   motion-sickness trigger, not a nice-to-have to preserve. There is no JS
   to call video.pause(), so the video is hidden outright (display: none)
   rather than merely stilled; the static graded poster takes its place. */
@media (prefers-reduced-motion: reduce) {
  .gallery__video { display: none; }
  .gallery__poster-fallback { display: block; }
}