/* ============================================================
   PAGE · SELECTED WEDDINGS (full gallery) — LIKAZOO Wedding Barn
   "A gallery of all the best." An editorial best-of mosaic, hero-anchored
   asymmetric grid (G1 discipline), generous breath, ONE consistent grade,
   light captions (venue/moment only), one warm Check-your-date close.

   Scoped entirely under .gallery (page root). Tokens only — no raw hex
   except documented paper/scrim tints derived from the brand family.
   Radius 16px · light-led (Hearth Paper) with a Meadow-Ink close anchor ·
   alive at t0 · hover = scale-not-shift · no representational SVG icons.
   ============================================================ */

.gallery {
  /* the page owns a light-led paper world; each movement paints its own
     data-bg family, so same-family neighbours read as one continuous breath. */
  overflow: clip;
}

/* One faint pressed-paper warmth on the light movements (data-bg marble/cream),
   consistent with the cells' ambient paper drift at rest (alive, no motion gate). */
.gallery .section[data-bg="marble"] {
  background:
    radial-gradient(125% 90% at 8% 0%, rgba(255, 255, 255, 0.5), transparent 58%),
    radial-gradient(140% 120% at 100% 120%, rgba(168, 97, 71, 0.045), transparent 55%),
    var(--marble-50);
}
.gallery .section[data-bg="cream"] {
  background:
    radial-gradient(120% 85% at 92% 0%, rgba(255, 255, 255, 0.42), transparent 56%),
    radial-gradient(150% 130% at 0% 120%, rgba(78, 98, 87, 0.05), transparent 58%),
    var(--cream);
}

/* ─────────────────────────────────────────────────────────────
   INTRO — the light invitation head. Clears the fixed nav.
   ───────────────────────────────────────────────────────────── */
.gallery__intro {
  padding-top: calc(var(--nav-h) + clamp(2.5rem, 1.5rem + 5vw, 6rem));
  padding-bottom: clamp(2rem, 1.4rem + 2.5vw, 3.5rem);
}
.gallery__intro-inner { max-width: 60rem; }

.gallery__eyebrow {
  color: var(--clay);
  margin-bottom: var(--space-s);
}
.gallery__title {
  font-size: var(--step-hero);
  line-height: 1.02;
  color: var(--support);            /* Meadow-Ink display headline */
  letter-spacing: -0.005em;
  text-wrap: balance;
}
.gallery__title .em { color: var(--clay); }   /* the single clay emphasis */

.gallery__rule {
  display: block;
  width: clamp(3rem, 2rem + 4vw, 5.5rem);
  height: 2px;
  margin: clamp(1.25rem, 0.9rem + 1.4vw, 2rem) 0 clamp(1.1rem, 0.8rem + 1.2vw, 1.6rem);
  background: linear-gradient(90deg, var(--clay), transparent);
  border-radius: 2px;
}
.gallery__lede {
  font-size: var(--step-1);
  line-height: 1.6;
  max-width: 52ch;
  color: var(--stone-700);
  opacity: 0.92;
}

/* ─────────────────────────────────────────────────────────────
   MOVEMENT — a paper breath + a quiet numbered head + its mosaic.
   Generous vertical rhythm between movements (breath).
   ───────────────────────────────────────────────────────────── */
.gallery__movement { padding-block: clamp(3rem, 2rem + 5vw, 6.5rem); }

.gallery__movement-head {
  display: flex;
  align-items: baseline;
  gap: clamp(0.75rem, 0.4rem + 1.4vw, 1.4rem);
  margin-bottom: clamp(1.75rem, 1.2rem + 2.4vw, 3rem);
}
.gallery__movement-kicker {
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--clay);
  padding-bottom: 0.15em;                 /* baseline-align with the serif name */
  white-space: nowrap;
}
.gallery__movement-kicker::before {
  content: "";
  display: inline-block;
  width: clamp(1.5rem, 1rem + 2vw, 2.75rem);
  height: 1px;
  margin-right: 0.7em;
  vertical-align: middle;
  background: var(--clay);
  opacity: 0.55;
}
.gallery__movement-name {
  font-size: var(--step-section);
  line-height: 1.02;
  color: var(--support);
}

/* ─────────────────────────────────────────────────────────────
   MOSAIC — hero-anchored asymmetric grids (G1). Explicit template-areas
   per movement so the composition is a disciplined layout, not auto-flow.
   Named areas keep one large anchor + balanced tiles of varied aspect.
   ───────────────────────────────────────────────────────────── */
.mosaic {
  display: grid;
  gap: clamp(0.75rem, 0.5rem + 1vw, 1.4rem);
}

/* MOVEMENT 1 · Arrival & vows — big estate anchor top-left, ceremony tiles
   fanning right + a golden-hour wide across the bottom. */
.mosaic--vows {
  grid-template-columns: repeat(6, 1fr);
  grid-template-areas:
    "anchor anchor anchor anchor a a"
    "anchor anchor anchor anchor b b"
    "c      c      c      d      d d";
}
.mosaic--vows .tile--anchor { grid-area: anchor; }
.mosaic--vows .tile--a { grid-area: a; }
.mosaic--vows .tile--b { grid-area: b; }
.mosaic--vows .tile--c { grid-area: c; }
.mosaic--vows .tile--d { grid-area: d; }

/* MOVEMENT 2 · The celebration — the sunset-dip anchor is the clear hero
   (4/12 cols × 2 rows, square → the largest element); a confident portrait
   flanks each side; the party lineup + reception land wide; the bottom band is
   four balanced tiles closing on the sparkler. 12-col grid → every tile ≥3 cols,
   no thin runts. */
.mosaic--celebration {
  grid-template-columns: repeat(12, 1fr);
  grid-template-areas:
    "a      a      a      anchor anchor anchor anchor b      b      b      d      d"
    "a      a      a      anchor anchor anchor anchor c      c      c      d      d"
    "e      e      e      f      f      f      g      g      g      h      h      h"
    "e      e      e      f      f      f      g      g      g      h      h      h";
}
.mosaic--celebration .tile--anchor { grid-area: anchor; }
.mosaic--celebration .tile--a { grid-area: a; }
.mosaic--celebration .tile--b { grid-area: b; }
.mosaic--celebration .tile--c { grid-area: c; }
.mosaic--celebration .tile--d { grid-area: d; }
.mosaic--celebration .tile--e { grid-area: e; }
.mosaic--celebration .tile--f { grid-area: f; }
.mosaic--celebration .tile--g { grid-area: g; }
.mosaic--celebration .tile--h { grid-area: h; }

/* MOVEMENT 3 · The weekend here — lodging anchor leads; the animals sit as a
   quiet, clearly-secondary trailing row (smaller share of the grid → C4). */
.mosaic--weekend {
  grid-template-columns: repeat(6, 1fr);
  grid-template-areas:
    "anchor anchor anchor a a b"
    "anchor anchor anchor a a b"
    "c      c      d      d e e";
}
.mosaic--weekend .tile--anchor { grid-area: anchor; }
.mosaic--weekend .tile--a { grid-area: a; }
.mosaic--weekend .tile--b { grid-area: b; }
.mosaic--weekend .tile--c { grid-area: c; }
.mosaic--weekend .tile--d { grid-area: d; }
.mosaic--weekend .tile--e { grid-area: e; }

/* ─────────────────────────────────────────────────────────────
   TILE — an image frame + a quiet caption below it.
   The frame clips to radius 16px; the <img> fills the frame absolutely
   (position:absolute;inset:0 — an <img> won't fill an aspect frame otherwise);
   hover scales the IMAGE inside the clip → scale-not-shift, zero layout jump.
   ───────────────────────────────────────────────────────────── */
.tile {
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin: 0;
}
.tile__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;               /* default; anchors/portraits override below */
  border-radius: var(--radius);
  overflow: clip;
  background: var(--marble-100);      /* warm paper placeholder before load */
  box-shadow:
    0 1px 0 0 rgba(255, 255, 255, 0.5) inset,
    0 18px 34px -26px rgba(51, 65, 58, 0.42);
}
.tile__frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* ONE consistent grade across every mixed-source photo: a whisper of warmth
     + gentle contrast so the whole gallery reads as one look (photography
     treatment: bright-to-golden, true whites held warm — DESIGN.md). */
  filter: saturate(1.04) contrast(1.015) brightness(1.008) sepia(0.05);
  transition: transform 620ms var(--ease-out);
  will-change: auto;
}

/* Per-tile aspect ratios — set to each image's NATIVE crop (honest crops, T2.18)
   so nothing is distorted. Landscape defaults to 4:3; portraits/square override. */
.tile--anchor .tile__frame { aspect-ratio: 3 / 2; }               /* barn estate 47 (3:2) */
.mosaic--celebration .tile--anchor .tile__frame { aspect-ratio: 1 / 1; }   /* sunset dip 65 (1:1) */
.mosaic--weekend .tile--anchor .tile__frame { aspect-ratio: 4 / 3; }       /* lodging 21 (4:3) */

/* portrait tiles */
.mosaic--celebration .tile--a .tile__frame,          /* 69 porch 4:5 */
.mosaic--celebration .tile--d .tile__frame,          /* 31 hug 2:3 (tall narrow) */
.mosaic--celebration .tile--e .tile__frame,          /* 58 fall-trees 2:3 */
.mosaic--celebration .tile--h .tile__frame,          /* 24 sparkler 4:5 */
.mosaic--weekend .tile--b .tile__frame,              /* 50 welcome/bible 3:4 */
.mosaic--weekend .tile--d .tile__frame {             /* 34 goats portrait */
  aspect-ratio: 3 / 4;
}

/* the two celebration tiles that own tall 2-row areas read best a touch taller */
.mosaic--celebration .tile--a .tile__frame,
.mosaic--celebration .tile--e .tile__frame { aspect-ratio: 3 / 4; }

/* Hover = scale-not-shift (the image grows a touch inside its clipped frame;
   the tile itself never moves → no layout jump, calm corner-anchored feel). */
@media (hover: hover) {
  .tile:hover .tile__frame img { transform: scale(1.04); }
  .tile:hover .tile__frame {
    box-shadow:
      0 1px 0 0 rgba(255, 255, 255, 0.6) inset,
      0 26px 46px -24px rgba(51, 65, 58, 0.5);
  }
}

/* Caption — Mini-Sans, quiet, anchored under the tile. Venue/moment ONLY.
   Colour: a warm muted brown from the stone family (#756350 — between
   --stone-500 and --stone-700). Quiet enough to read as a caption, dark
   enough to clear 4.5:1 body contrast on Hearth Paper AND cream (5.0/4.8:1). */
.tile__cap {
  margin-top: 0.7rem;
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.03em;
  line-height: 1.35;
  color: #756350;
}

/* Animal tiles: a subtle clay hairline flags them as the by-arrangement,
   clearly-secondary layer without adding an icon (C3/C4). */
.tile--animal .tile__frame {
  box-shadow:
    0 1px 0 0 rgba(255, 255, 255, 0.5) inset,
    0 18px 34px -26px rgba(51, 65, 58, 0.42),
    0 0 0 1.5px var(--clay-tint);
}
.tile--animal .tile__cap { color: var(--clay-deep); }   /* deeper clay → 5.58:1 on paper */

/* honest animal-placement note under the weekend movement */
.gallery__animal-note {
  margin-top: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  max-width: 58ch;
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--stone-700);
  opacity: 0.9;
}

/* ─────────────────────────────────────────────────────────────
   CLOSE — warm Meadow-Ink anchor (matches the site's dark-close rhythm),
   one clay Check-your-date CTA → index.html#cell-7 + a quiet back link.
   ───────────────────────────────────────────────────────────── */
.gallery__close { text-align: center; }
.gallery__close-inner {
  max-width: 46rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.gallery__close-eyebrow { color: var(--clay-soft); margin-bottom: var(--space-s); }
.gallery__close-title {
  font-size: var(--step-section);
  line-height: 1.06;
  color: var(--text-on-dark);
  text-wrap: balance;
}
.gallery__close-title .em { color: var(--clay-soft); }   /* clay reads warmer on green */
.gallery__close-lede {
  margin-top: var(--space-m);
  font-size: var(--step-1);
  line-height: 1.6;
  max-width: 42ch;
  color: var(--text-on-dark-muted);
}
.gallery__close-actions {
  margin-top: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-m);
}
.gallery__close-back { color: var(--clay-soft); }

/* ═════════════════════════════════════════════════════════════
   RESPONSIVE — tablet regroups, mobile = one FEATURE image then a
   ranked single-column run (DESIGN.md mobile plan / page contract).
   ═════════════════════════════════════════════════════════════ */

/* Tablet (≤ 900px): relax the 6-col compositions into simpler 2-col hero-anchored
   grids — the anchor still leads full-width, tiles ranked beneath it. */
@media (max-width: 900px) {
  .mosaic--vows,
  .mosaic--celebration,
  .mosaic--weekend {
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas: none;
  }
  .mosaic .tile { grid-area: auto !important; }
  /* the movement anchor stays the feature image: spans both columns */
  .mosaic .tile--anchor { grid-column: 1 / -1; }
  .mosaic .tile--anchor .tile__frame { aspect-ratio: 16 / 9; }
  /* uniform, calm ratio for the ranked tiles so the pairs read as siblings */
  .mosaic .tile:not(.tile--anchor) .tile__frame { aspect-ratio: 4 / 5; }
}

/* Mobile (≤ 620px): ONE feature image, then a ranked single-column run.
   Gallery density reduces sharply; every tile is one clean stacked card. */
@media (max-width: 620px) {
  .gallery__intro { padding-top: calc(var(--nav-h) + clamp(2rem, 1.5rem + 6vw, 3.5rem)); }
  .gallery__title { font-size: clamp(2.9rem, 2rem + 9vw, 4.2rem); }

  .mosaic--vows,
  .mosaic--celebration,
  .mosaic--weekend {
    grid-template-columns: 1fr;
    gap: clamp(1rem, 0.7rem + 2vw, 1.6rem);
  }
  /* feature (anchor) first, wide; then a single-column ranked run beneath */
  .mosaic .tile--anchor .tile__frame { aspect-ratio: 4 / 3; }
  .mosaic .tile:not(.tile--anchor) .tile__frame { aspect-ratio: 4 / 3; }
  /* portraits keep a taller, honest crop even in the single column */
  .mosaic--celebration .tile--a .tile__frame,
  .mosaic--celebration .tile--c .tile__frame,
  .mosaic--celebration .tile--e .tile__frame,
  .mosaic--celebration .tile--h .tile__frame,
  .mosaic--weekend .tile--b .tile__frame,
  .mosaic--weekend .tile--d .tile__frame { aspect-ratio: 4 / 5; }

  .tile__cap { margin-top: 0.55rem; }
  .gallery__movement-head { flex-direction: column; align-items: flex-start; gap: 0.3rem; }
}

/* Reduced motion: kill the hover scale transition (content is already whole). */
@media (prefers-reduced-motion: reduce) {
  .tile__frame img { transition: none; }
}