/* ===========================================================================
   landing-gallery.css — the five Lottie-hero landing variations
   (/landing-3, /landing-5, /landing-6, /landing-7, /landing-8).
   ---------------------------------------------------------------------------
   Loaded AFTER landing-2.css + landing-3.css, so it reuses ALL of:
   - the Lottie tiling/windowing math (.dc-h3-lottie / .dc-h3-tile + the inner
     <dc-block-richmedia-lottie> offset/width window + the scaleY(-1) mirror),
   - the pixel-grid fallback (.dc-h3-grid + dc-cellmorph),
   - the brand classes (.dc-gradient, .dc-gradient-text, .dc-cta, .dc-dark,
     .dc-on-dark*, .dc-marquee, .dc-eyebrow) and @keyframes dc-fade-in.

   It adds ONLY the per-layout hero wrappers. There is no Tailwind build step in
   this project (the compiled astro.*.css is static), so every split width /
   panel height the homepage utilities can't express is set here as explicit CSS
   — never as a new arbitrary `w-[NN%]` class (those won't be generated).

   The wrappers deliberately use a fresh `.dc-lh-*` namespace and NOT `.dc-hero3`,
   so the homepage's pinned scroll choreography (scoped to .dc-hero3) never fires:
   these are STATIC heroes — the Lottie just loops in place.
   =========================================================================== */

/* Hero shell + the two columns. Mobile: stacked (copy first, field below as a
   16:9 band). Desktop (lg): side-by-side, each column's width set per page. */
.dc-lh-hero { position: relative; }
.dc-lh-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
}
.dc-lh-panel {
  position: relative;
  overflow: hidden;            /* clip the tiled field's overflow / dead navy */
  width: 100%;
  aspect-ratio: 16 / 9;        /* mobile: a tidy band; desktop overrides to full height */
}

@media (min-width: 1024px) {
  .dc-lh-row { display: flex; flex-direction: row; align-items: stretch; }
  .dc-lh-panel { aspect-ratio: auto; height: auto; }   /* fill the row height instead */

  /* per-page column splits (the load-bearing replacement for w-[NN%] utilities) */
  .dc-lh-w-44 { width: 44%; }   .dc-lh-w-56 { width: 56%; }   /* landing-3 */
  .dc-lh-w-40 { width: 40%; }   .dc-lh-w-60 { width: 60%; }   /* landing-5 */
  .dc-lh-w-58 { width: 58%; }   .dc-lh-w-42 { width: 42%; }   /* landing-6 */
  .dc-lh-w-50 { width: 50%; }                                 /* landing-7 */
  .dc-lh-w-45 { width: 45%; }   .dc-lh-w-55 { width: 55%; }   /* landing-8 */

  /* tall, immersive panels (height beyond one viewport comes from more tiles,
     clipped by overflow:hidden — same mechanism the homepage uses) */
  .dc-lh-fill { min-height: 100dvh; }

  /* a thin rule between copy and field, so the field reads as a framed window */
  .dc-lh-divider { border-right: 1px solid var(--color-border-primary, #6e84a8); }
  .dc-lh-divider-left { border-left: 1px solid var(--color-border-primary, #6e84a8); }
}

/* landing-8 — the Lottie sits inside an inset dark card floating in whitespace.
   This is an absolutely-positioned inner wrapper (inset from the panel edges),
   so it never widens the sized column. The .dc-h3-grid/.dc-h3-lottie inside it
   are absolute inset-0 and so fill THIS card (it's their positioned ancestor). */
.dc-lh-inset {
  position: absolute;
  inset: 1rem;
  background: #011c46;                               /* Oxford blue */
  border: 1px solid var(--color-border-primary, #6e84a8);
  overflow: hidden;
}
@media (min-width: 1024px) { .dc-lh-inset { inset: 2rem; } }

/* landing-7 — centred copy column (symmetric composition) */
.dc-lh-copy--center { text-align: center; align-items: center; }
.dc-lh-copy--center .dc-h3-cx-btn,
.dc-lh-copy--center .dc-cta { align-self: center; }

/* mono micro-labels framing the landing-6 rail */
.dc-lh-rail-label {
  letter-spacing: 0.14em;
  color: var(--color-text-tertiary);
}

/* Static-hero headline fade (reuses @keyframes dc-fade-in from landing-3.css).
   The .dc-hero3-scoped fade doesn't apply here since we don't use that class. */
.dc-lh-title { animation: dc-fade-in 1s 0.15s ease both; }

@media (prefers-reduced-motion: reduce) {
  .dc-lh-title { animation: none; opacity: 1; }
}