/* press.css · owner: press-agent · DESIGN_SPEC §5, motion.md §4.
   Grid of media tiles: 3 video tiles + 5 quote tiles (4 cols), 6 tiles at 3 / 2 cols.
   Hover: 250ms --ease-inout both ways. No scroll animation. */

/* ---------- Shell ---------- */
#press {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 120px var(--gutter) 80px;
  background: var(--color-bg-dark);
  color: var(--color-text-inverse);
  overflow: clip;
}

/* ---------- Grid ---------- */
.press__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 164px;
  gap: var(--space-12);
  width: var(--container);
}

/* Grid item. No z-index here, so every glow (z 0) sits under every tile (z 1)
   inside the grid's stacking context. */
.press__cell {
  position: relative;
  --press-r-tl: var(--radius-8);
  --press-r-tr: var(--radius-8);
  --press-r-br: var(--radius-8);
  --press-r-bl: var(--radius-8);
  --press-radius: var(--press-r-tl) var(--press-r-tr) var(--press-r-br) var(--press-r-bl);
  --press-fill: var(--grad-placeholder-dark); /* glow fill; video tiles glow with their "video" */
  --press-ink: var(--color-text-inverse);
}
.press__cell--fill-1 { --press-fill: var(--color-press-fill-1); }
.press__cell--fill-2 { --press-fill: var(--color-press-fill-2); }
.press__cell--fill-3 { --press-fill: var(--color-press-fill-3); }
.press__cell--fill-4 { --press-fill: var(--color-press-fill-4); }
.press__cell--fill-5 { --press-fill: var(--color-press-fill-5); --press-ink: var(--color-text); }

/* Outer corners, 4 columns × 2 rows (tiles 1, 4, 5, 8) */
.press__cell:nth-child(1) { --press-r-tl: var(--radius-16); }
.press__cell:nth-child(4) { --press-r-tr: var(--radius-16); }
.press__cell:nth-child(5) { --press-r-bl: var(--radius-16); }
.press__cell:nth-child(8) { --press-r-br: var(--radius-16); }

/* ---------- Glow clone (behind the tile) ---------- */
.press__glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: var(--press-radius);
  background: var(--press-fill);
  opacity: 0;
  filter: blur(0);
  pointer-events: none;
  transition: opacity var(--t-hover), filter var(--t-hover), transform var(--t-hover);
}

/* ---------- Tile ---------- */
.press__tile {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  height: 100%;
  padding: var(--space-20);
  border-radius: var(--press-radius);
  background: var(--color-surface-glass-dark);
  overflow: clip;
  cursor: pointer;
  transition: transform var(--t-hover);
}

/* Logo slot: 137×63, contain, centered, white text wordmark at .5 */
.press__logo {
  grid-area: 1 / 1;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 137px;
  height: 63px;
  color: var(--color-text-inverse);
  white-space: nowrap;
  opacity: 0.5;
  transition: opacity var(--t-hover), transform var(--t-hover);
}

/* ---------- Video tile ---------- */
/* 243×164 placeholder "video" (ratio 1.482), left −1, cover; clipped by the tile. */
.press__video {
  position: absolute;
  top: 0;
  left: -1px;
  width: 243px;
  height: 100%;
  background: var(--grad-placeholder-dark);
  opacity: 0;
  transition: opacity var(--t-hover);
}

.press__mute {
  position: absolute;
  top: var(--space-12);
  right: var(--space-12);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-50);
  background: var(--color-scrim-40);
  -webkit-backdrop-filter: blur(var(--blur-pill));
  backdrop-filter: blur(var(--blur-pill));
  color: var(--color-text-inverse);
  opacity: 0;
  transition: opacity var(--t-hover);
}
.press__mute-icon {
  width: 14px;
  height: 14px;
}
.press__tile[data-muted="true"] .press__mute-icon--on,
.press__tile[data-muted="false"] .press__mute-icon--off {
  display: none;
}

/* ---------- Quote tile ---------- */
.press__fill {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--press-fill);
  opacity: 0;
  transition: opacity var(--t-hover);
}

.press__quote {
  grid-area: 1 / 1;
  position: relative;
  z-index: 1;
  width: 100%;
  margin: 0;
  color: var(--press-ink);
  text-align: center;
  opacity: 0;
  transition: opacity var(--t-hover);
}

/* Two 3px lines, gap 4 (10 tall), inset 16 from the top / bottom / sides */
.press__rules {
  position: absolute;
  left: var(--space-16);
  right: var(--space-16);
  height: 10px;
  border-top: 3px solid var(--press-ink);
  border-bottom: 3px solid var(--press-ink);
  opacity: 0;
  transition: opacity var(--t-hover);
}
.press__rules--top { top: var(--space-16); }
.press__rules--bottom { bottom: var(--space-16); }

/* ---------- Hover (pointer devices only; motion.md §13) + keyboard focus ---------- */
@media (hover: hover) {
  .press__cell:hover .press__tile { transform: scale(1.05); }
  .press__cell:hover .press__glow {
    opacity: 0.8;
    filter: blur(var(--shadow-press-glow-blur));
    transform: scale(1.05);
  }
  .press__cell--video:hover .press__video,
  .press__cell--video:hover .press__mute,
  .press__cell--video:hover .press__logo { opacity: 1; }
  .press__cell--quote:hover .press__logo { opacity: 0; transform: scale(0.95); }
  .press__cell--quote:hover :is(.press__fill, .press__quote, .press__rules) { opacity: 1; }
}

.press__cell:has(:focus-visible) .press__tile { transform: scale(1.05); }
.press__cell:has(:focus-visible) .press__glow {
  opacity: 0.8;
  filter: blur(var(--shadow-press-glow-blur));
  transform: scale(1.05);
}
.press__cell--video:has(:focus-visible) :is(.press__video, .press__mute, .press__logo) { opacity: 1; }
.press__cell--quote:has(:focus-visible) .press__logo { opacity: 0; transform: scale(0.95); }
.press__cell--quote:has(:focus-visible) :is(.press__fill, .press__quote, .press__rules) { opacity: 1; }

/* ---------- Tablet: 3 columns, tiles 1–6 ---------- */
@media (max-width: 1199.98px) {
  .press__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .press__cell:nth-child(n + 7) { display: none; }

  .press__cell:nth-child(3) { --press-r-tr: var(--radius-16); }
  .press__cell:nth-child(4) { --press-r-tr: var(--radius-8); --press-r-bl: var(--radius-16); }
  .press__cell:nth-child(5) { --press-r-bl: var(--radius-8); }
  .press__cell:nth-child(6) { --press-r-br: var(--radius-16); }
}

/* ---------- Phone: 2 columns, tiles 1–6 ---------- */
@media (max-width: 789.98px) {
  .press__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .press__cell:nth-child(2) { --press-r-tr: var(--radius-16); }
  .press__cell:nth-child(3) { --press-r-tr: var(--radius-8); }
  .press__cell:nth-child(4) { --press-r-bl: var(--radius-8); }
  .press__cell:nth-child(5) { --press-r-bl: var(--radius-16); }
}

/* ---------- Reduced motion: hover durations are zeroed in tokens.css; keep content swaps instant ---------- */
@media (prefers-reduced-motion: reduce) {
  .press__tile,
  .press__glow { transition: none; }
}