/* ============================================================
   CELL 4 · SELECTED WEDDINGS — LIKAZOO Wedding Barn
   Scoped entirely under #cell-4. Tokens only (no raw brand hex except
   documented paper/ink tints derived from the brand family).
   Authority: G1 cell-4 GRID DISCIPLINE — a confident hero-anchored
   asymmetric mosaic (one large center anchor + balanced surrounding tiles
   of varied aspect), NOT G4's flatter uniform grid.
   Radius 16px · base #F5EFE5 (data-bg="marble") · alive at t0 · honest crops.
   Dropped chrome: no filter-nav bar, no overlaid "SEE MORE" circle,
   no floating unanchored caption (contract §0.2).
   ============================================================ */

#cell-4 {
  /* faint pressed-paper warmth over the Hearth-Paper base (data-bg="marble"),
     mirroring the cell-1 hero ground so same-family sections read continuous.
     A whisper of clay in the far corner ties the mosaic to the accent without a
     wash (C1 light-led). */
  background:
    radial-gradient(120% 80% at 8% 4%, rgba(255, 255, 255, 0.5), transparent 58%),
    radial-gradient(130% 110% at 100% 108%, rgba(168, 97, 71, 0.045), transparent 55%),
    var(--marble-50);
  overflow: clip;
}

/* ═══════════════════ HEAD — the ONE anchored caption ═══════════════════ */
#cell-4 .sw__head {
  max-width: 46rem;
  margin-bottom: clamp(2.25rem, 1.5rem + 3vw, 3.75rem);
}
#cell-4 .sw__eyebrow {
  color: var(--clay);
  margin-bottom: clamp(0.65rem, 0.4rem + 0.8vw, 1rem);
}
#cell-4 .sw__title {
  color: var(--meadow);
  font-size: var(--step-section);        /* the ONE "section" size bucket (base law) */
  line-height: 1.05;
  letter-spacing: -0.008em;
  text-wrap: balance;
  margin-bottom: clamp(1rem, 0.6rem + 1.1vw, 1.5rem);
}
#cell-4 .sw__title .em { color: var(--clay); font-style: italic; }

/* antique-brass hairline rule (CSS-drawn, no illustrated icon) — the tile's
   restrained ornament budget: one hairline, not a wax seal. */
#cell-4 .sw__rule {
  display: block;
  width: clamp(3.5rem, 2rem + 6vw, 5.5rem);
  height: 1px;
  margin-bottom: clamp(1rem, 0.6rem + 1.1vw, 1.5rem);
  background: linear-gradient(
    90deg,
    var(--clay-soft) 0%,
    rgba(168, 97, 71, 0.32) 55%,
    transparent 100%
  );
}
#cell-4 .sw__lede {
  color: var(--text-on-paper);
  font-size: var(--step-1);
  line-height: 1.55;
  max-width: 40rem;
  opacity: 0.92;
}

/* ═══════════════════ THE MOSAIC ═══════════════════
   Explicit 12-col grid; rows are a fluid unit so tiles hold real height.
   The composition (G1): a large center ANCHOR occupies the middle span across
   two tall rows; portraits flank it; landscapes fill the wide slots. Every tile
   corner is anchored to the grid — nothing floats (T2.8 calm corner anchoring). */
#cell-4 .sw__mosaic {
  --sw-gap: clamp(0.6rem, 0.4rem + 0.9vw, 1.1rem);
  --sw-row: clamp(6.5rem, 3rem + 11vw, 12.5rem);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(4, var(--sw-row));   /* explicit row height — tiles must own real vertical space */
  grid-auto-flow: dense;
  gap: var(--sw-gap);
  grid-template-areas:
    "a a a  n n n n n n  b b b"
    "a a a  n n n n n n  b b b"
    "c c c  n n n n n n  g g g"
    "d d d  e e  f f f f  g g g";
}

/* Grid-area assignment — the disciplined asymmetric composition. */
#cell-4 .sw-tile--anchor { grid-area: n; }   /* 65 sunset dip (1:1) — the heart */
#cell-4 .sw-tile--a { grid-area: a; }        /* 69 porch bridesmaids (4:5) */
#cell-4 .sw-tile--b { grid-area: b; }        /* 12 party lineup (4:3) */
#cell-4 .sw-tile--c { grid-area: c; }        /* 58 couple fall trees (2:3) */
#cell-4 .sw-tile--d { grid-area: d; }        /* 43 reception tables (4:3) */
#cell-4 .sw-tile--e { grid-area: e; }        /* 31 bride hug (2:3) */
#cell-4 .sw-tile--f { grid-area: f; }        /* 36 barn daylight (4:3) */
#cell-4 .sw-tile--g { grid-area: g; }        /* 24 sparkler send-off (4:5) */

/* Tile frame — softened stationery corner, warm shadow, isolate for the media. */
#cell-4 .sw-tile {
  position: relative;
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--marble-100);           /* warm placeholder before the img paints */
  box-shadow:
    0 16px 34px -26px rgba(51, 65, 58, 0.4),
    0 2px 6px -4px rgba(51, 65, 58, 0.2);
  isolation: isolate;
}
/* Each tile's frame honors the grid rows; the image fills it (position:absolute;
   inset:0 so <img> obeys the frame box — the render-bug gotcha). object-position
   is tuned per subject to hold faces/subject and trim cleanly (honest, not warped). */
#cell-4 .sw-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* one consistent warm grade across the mosaic (DESIGN.md photography law) */
  filter: saturate(1.03) contrast(1.01) brightness(1.01);
  transform: scale(1.001);                 /* kill sub-pixel edge seam on hover-scale */
  transition: transform 620ms var(--ease-out), filter 620ms var(--ease-out);
  will-change: auto;
}

/* Per-subject object-position — keep the subject centered/faces in frame. */
#cell-4 .sw-tile--anchor img { object-position: 50% 42%; }  /* couple + warm sky */
#cell-4 .sw-tile--a img { object-position: 50% 34%; }       /* group + faces up top */
#cell-4 .sw-tile--b img { object-position: 50% 46%; }
#cell-4 .sw-tile--c img { object-position: 50% 40%; }
#cell-4 .sw-tile--d img { object-position: 50% 54%; }       /* tables + candle run */
#cell-4 .sw-tile--e img { object-position: 50% 32%; }
#cell-4 .sw-tile--f img { object-position: 50% 58%; }       /* barn face, trim sky */
#cell-4 .sw-tile--g img { object-position: 50% 40%; }       /* dip under sparklers */

/* A whisper-soft warm floor gradient inside the anchor so its scale + presence
   reads as the composition's focus without any overlaid text or chrome. */
#cell-4 .sw-tile--anchor::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    202deg,
    transparent 58%,
    rgba(51, 65, 58, 0.06) 82%,
    rgba(51, 65, 58, 0.16) 100%
  );
}

/* ═══════════════════ QUIET CLOSE — the ONE outbound link ═══════════════════ */
#cell-4 .sw__more {
  margin-top: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
  display: flex;
  justify-content: center;
}
#cell-4 .sw__more-link {
  font-size: var(--step-1);
  color: var(--clay);
}
/* .link-arrow (base.css) supplies the → glyph + hover slide; nothing overlaid. */

/* ═══════════════════ MOTION (scoped) ═══════════════════
   Hover = scale-not-shift on the image inside its fixed frame (the frame stays
   put, the photo grows a touch → a calm, contained lift; never a jumping tile).
   Gated to real hover pointers; states resolve on touch. Cards-in-a-grid scale
   1.04 per the aliveness contract. */
@media (hover: hover) {
  #cell-4 .sw-tile img { will-change: transform; }
  #cell-4 .sw-tile:hover img {
    transform: scale(1.045);
    filter: saturate(1.06) contrast(1.02) brightness(1.02);
  }
  /* the anchor is already the focus — a gentler grow so it doesn't overpower */
  #cell-4 .sw-tile--anchor:hover img { transform: scale(1.03); }
}

/* ═══════════════════ RESPONSIVE ═══════════════════ */

/* Tablet / narrow desktop: keep the hero-anchor discipline but simplify the
   flanks into a tidier 6-col field so tiles never crush below ~ a card width. */
@media (max-width: 1040px) {
  #cell-4 .sw__mosaic {
    --sw-row: clamp(7rem, 4rem + 12vw, 11rem);
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(6, var(--sw-row));
    grid-template-areas:
      "n n n n a a"
      "n n n n a a"
      "n n n n c c"
      "b b b g g g"
      "d d e e g g"
      "f f f g g g";
  }
}

/* Mobile: the mosaic becomes a calm ranked run — anchor first (the heart), then
   a tight 2-up field of the rest. Content-complete, alive, no horizontal scroll. */
@media (max-width: 640px) {
  #cell-4 .sw__mosaic {
    --sw-gap: 0.55rem;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: minmax(9rem, auto);
    grid-template-areas:
      "n n"
      "n n"
      "a b"
      "c d"
      "e f"
      "g g";
  }
  /* On mobile every tile is a fixed 4:5-ish cell of the auto-row grid; drop the
     desktop row var so the auto-rows drive height. */
  #cell-4 .sw-tile { min-height: 100%; }
  #cell-4 .sw__lede { font-size: var(--step-0); }
}

@media (max-width: 380px) {
  /* Very narrow: single column ranked run — one honest photo at a time. */
  #cell-4 .sw__mosaic {
    grid-template-columns: 1fr;
    grid-auto-rows: minmax(11rem, auto);
    grid-template-areas: "n" "a" "b" "c" "d" "e" "f" "g";
  }
}

/* ═══════════════════ REDUCED MOTION / SOLO ═══════════════════
   Content-complete and dead-still: no hover-scale residue, no will-change.
   (Reveal-gating is already absent — every tile is present at t0 via CSS.) */
@media (prefers-reduced-motion: reduce) {
  #cell-4 .sw-tile img { transition: none; will-change: auto; transform: none; }
}
.is-solo #cell-4 .sw-tile img,
.is-reduced-motion #cell-4 .sw-tile img { transition: none; will-change: auto; transform: none; }