/* === Cinematic cards, gutters, and cosmetics === */
:root{
  --gutter: clamp(12px, 4vw, 28px);
  --page-max: 1440px;
  --tile-radius: 14px;
  --tile-shadow: 0 6px 18px rgba(0,0,0,.25);
  --tile-border: 1px solid rgba(255,255,255,.06);
}

/* Center page content with side breathing space */
.fullbleed{max-width:var(--page-max);margin:0 auto;padding:0 var(--gutter)}

/* Mosaic density (keep small) */
.section--fullbleed .mosaic{
  grid-template-columns:repeat(24,minmax(0,1fr));
  grid-auto-rows:3.4vw;
}
@media (min-width:1200px){
  .section--fullbleed .mosaic{ grid-auto-rows:24px; }
}

/* Tile sizing tokens */
.tile{position:relative;overflow:hidden;border-radius:var(--tile-radius);box-shadow:var(--tile-shadow);border:var(--tile-border);background:#0b1220}
.tile[data-size="1x1"]{grid-column:span 2;grid-row:span 2}
.tile[data-size="1x2"]{grid-column:span 2;grid-row:span 4}
.tile[data-size="2x2"]{grid-column:span 4;grid-row:span 4}
.tile[data-size="3x2"]{grid-column:span 6;grid-row:span 4}

.tile img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.001) translateZ(0);transition:transform .25s ease, filter .25s ease}
.tile:hover img{transform:scale(1.03) translateZ(0);filter:saturate(1.05)}

/* Cinematic meta panel: hidden by default, slides up on hover/focus/tap */
.tile .meta{
  position:absolute;left:0;right:0;bottom:0;
  transform:translateY(110%);
  background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 38%, rgba(0,0,0,.85) 100%);
  color:#fff;padding:10px 12px 12px;
  transition:transform .22s ease;
  will-change:transform;
}
.tile:hover .meta,
.tile:focus-within .meta,
.tile.touch-show .meta{ transform:translateY(0) }

.tile .meta h3{margin:0;font-size:12px;line-height:1.25;font-weight:700;text-shadow:0 2px 10px rgba(0,0,0,.35)}
.tile .badges{display:flex;gap:6px;margin-top:6px}
.badge{display:inline-block;border-radius:999px;padding:3px 8px;font-size:10px;font-weight:700}
.badge--new{background:#1f9cff;color:#041420}
.badge--hot{background:#ff7a18;color:#1b0e00}

/* Brand/ticker tiles get the same rounding and shadows */
.tile--brand,.tile--ticker{display:flex;align-items:center;justify-content:center}
.tile--brand img{max-width:66%;max-height:66%;border-radius:12px}

/* Make wrap headings align with gutters */
.wrap{max-width:var(--page-max);margin:0 auto;padding:0 var(--gutter)}

/* Footer tabbar: leave page gutters visible */
.tabbar{left:0;right:0}