/* ============================================================
   518 Official — THE WALL (wall.html)
   css/pages/wall.css?v=2 — loads AFTER tokens.css + site.css.
   Layout only: never restyles the shared shell, never overrides
   tokens, never declares :root.

   WHAT THIS PAGE IS: Rizz's own Instagram posts, playable on site.
   The design job is to let a phone-shot feed read as a wall without
   pretending it is a magazine — the frames arrive in every aspect
   ratio Instagram allows, so the grid absorbs that rather than
   cropping it away.

   FACE-SAFE: no tile cover-crops a face. Photographs are contained
   inside their cell, so nothing is ever cut. That is why this page
   registers no focal points — see docs/ARCHITECTURE.md §4.
   ============================================================ */

/* ---------- Hero film ---------- */
.wl-sect--film { position: relative; overflow: hidden; }

.wl-film {
  position: absolute; inset: 0;
  height: clamp(300px, 42vh, 460px);
  z-index: var(--z-bg);
}

/* hero-4-dj measured 39.7% 15.2% (3 faces) — the registered focal. */
.wl-film video,
.wl-film .vslot-poster { object-fit: cover; object-position: 39.7% 15.2%; }

.wl-grade {
  position: absolute; inset: 0;
  height: clamp(300px, 42vh, 460px);
  z-index: var(--z-base); pointer-events: none;
  background: linear-gradient(to top,
    var(--bg) 0%,
    rgba(10, 10, 10, 0.88) 32%,
    rgba(10, 10, 10, 0.54) 64%,
    rgba(10, 10, 10, 0.36) 100%);
}

.wl-sect--film > .container { position: relative; z-index: var(--z-content); }
.wl-sect--film > .container > .sect-head { padding-top: clamp(1.75rem, 7vh, 4rem); }

.wl-h1 { max-width: 14ch; }

.wl-meta {
  font-family: var(--font-label);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ivory-60);
  margin-top: var(--sp-4);
}

.wl-links {
  display: flex; flex-wrap: wrap; gap: var(--sp-3);
  margin-top: var(--sp-5);
}

/* The honest line about what the buttons do. Tertiary over photography
   is --ivory-60, never --smoke (see docs/ARCHITECTURE.md §6). */
.wl-note {
  margin-top: var(--sp-3);
  font-size: var(--fs-small);
  color: var(--ivory-60);
  max-width: 46ch;
}

/* ---------- The grid ----------
   A masonry-ish column flow: phone frames vary wildly in shape and a
   fixed grid would either crop them or leave holes. Columns let each
   frame keep its own height. */
.wl-grid {
  list-style: none;
  margin: clamp(2rem, 5vw, 3.5rem) 0 0;
  padding: 0;
  columns: 1;
  column-gap: var(--sp-4);
}

@media (min-width: 560px)  { .wl-grid { columns: 2; } }
@media (min-width: 900px)  { .wl-grid { columns: 3; } }
@media (min-width: 1240px) { .wl-grid { columns: 4; } }

.wl-cell {
  break-inside: avoid;
  -webkit-column-break-inside: avoid; /* Safari <15 ignores the unprefixed one */
  margin-bottom: var(--sp-4);
}

.wl-tile {
  position: relative;
  margin: 0;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}

/* THE FRAME IS THE MEDIA, and only the media. It is the containing
   block for the clip and the badge, so neither can reach the caption.
   Sizing it from the still (which carries width/height, so its box is
   reserved before it loads) means the clip lands on the still 1:1 —
   same box, same framing, no cover-crop when it arms. */
.wl-frame { position: relative; display: block; }

.wl-tile .wl-media,
.wl-tile .wl-poster,
.wl-tile picture { display: block; width: 100%; height: auto; }

/* The clip sits over its own poster once it can play, so a refused
   autoplay leaves the still rather than a blank rectangle. */
.wl-cell.is-video .wl-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.wl-cell.is-video .wl-poster { position: relative; z-index: 0; }

.wl-badge {
  position: absolute; top: var(--sp-3); right: var(--sp-3); z-index: 2;
  font-family: var(--font-label);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ivory);
  background: rgba(10, 10, 10, 0.72);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-xs);
  padding: 0.2rem 0.5rem;
}

.wl-cap {
  padding: var(--sp-4);
  border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: var(--sp-2);
}

.wl-cap time {
  font-family: var(--font-label);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--rizz-text);
}

/* His words. Kept at body size and full contrast — this is the voice of
   the brand, not a decorative caption. white-space:pre-line preserves
   the line breaks he typed. */
.wl-words {
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--ivory-80);
  white-space: pre-line;
  /* He pastes ticket links. A bare URL is one unbreakable token wider
     than a column, and .wl-tile clips its overflow — so without this
     the middle of the link is silently cut off the card. Wrapping is
     presentation: not one character of his words changes. */
  overflow-wrap: anywhere;
}

.wl-foot {
  margin-top: clamp(2rem, 5vw, 3rem);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
  font-family: var(--font-label);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--smoke);
}

@media (prefers-reduced-motion: reduce) {
  .wl-cell.is-video .wl-media { display: none; }
}