/* ============================================================================
   DICE Buyer Catalogue — FLAT REFERENCE STYLESHEET
   Full-bleed 2:3 poster cards, type-aware (channels logo-led, never cropped).
   BOTH card styles ship in one sheet; switch via a class on the root:
     <div class="bc bc--overlay"> … </div>   (title/meta over a navy scrim)
     <div class="bc bc--caption"> … </div>   (slim light caption beneath the art)
   The developer wires the `layout` setting → that root class. No duplicate markup.
   Plain CSS, literal values, full responsive layer at the bottom.
   ========================================================================== */

:root {
  --navy: #071E32;
  --ink: #0B1B2B;
  --text: #3D4754;
  --muted: #595959;
  --accent: #0B599C;
  --bg: #FFFFFF;
  --bg-subtle: #F8F8F8;
  --border: #E2E6EA;
  --border-strong: #CBD2D9;
  --surface-page: #FFFFFF;
  --pillar-entertainment-fill: #ECE3F7; --pillar-entertainment-ink: #4A148C; --pillar-entertainment-base: #7B2FBE;
  --pillar-sports-fill: #D7F0EC;        --pillar-sports-ink: #00504A;        --pillar-sports-base: #0C7C6F;
  --pillar-channels-fill: #FBEFCC;      --pillar-channels-ink: #6B4A00;      --pillar-channels-base: #C08A12;
  --font: "Open Sans", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --radius: 6px;
  --radius-lg: 10px;
  --shadow-xs: 0 1px 2px rgba(7,30,50,0.06);
  --shadow-sm: 0 1px 3px rgba(7,30,50,0.08), 0 1px 2px rgba(7,30,50,0.04);
  --shadow-card-hover: 0 14px 36px rgba(7,30,50,0.20);
  --container: 1320px;
}

*, *::before, *::after { box-sizing: border-box; }
.bc { margin: 0; font-family: var(--font); color: var(--text); background: var(--surface-page); min-height: 100vh; -webkit-font-smoothing: antialiased; }
.bc img { display: block; }
.bc button { font-family: var(--font); cursor: pointer; }

/* ---------- header ---------- */
.bc-header { background: var(--navy); }
.bc-header__inner { max-width: var(--container); margin: 0 auto; padding: 18px 32px; display: flex; align-items: center; gap: 24px; }
.bc-header__inner img { height: 21px; }
.bc-header__crumb { font-size: 13px; color: rgba(255,255,255,0.55); border-left: 1px solid rgba(255,255,255,0.2); padding-left: 16px; }

/* ---------- title row + toggle ---------- */
.bc-top { max-width: var(--container); margin: 0 auto; padding: 30px 32px 0; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; }
.bc-top h1 { font-size: 26px; font-weight: 800; color: var(--ink); margin: 0; letter-spacing: -0.01em; }
.bc-top p { font-size: 14.5px; color: var(--muted); margin: 6px 0 0; }
.bc-switchwrap { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.bc-switch { display: inline-flex; background: var(--bg-subtle); border: 1px solid var(--border); border-radius: 999px; padding: 3px; }
.bc-switch__btn { font-size: 13px; font-weight: 600; border: none; border-radius: 999px; padding: 8px 16px; background: transparent; color: var(--muted); }
.bc-switch__btn--active { background: #fff; color: var(--ink); box-shadow: var(--shadow-xs); }
.bc-switch__note { font-size: 11.5px; color: var(--muted); }

/* ---------- grid ---------- */
/* ★ SSoT — the base geometry BOTH card-grid families share. .cat-grid itself lives in
   catalogue-b3.css; this block is declared HERE, in the EARLIER-loading sheet, and that
   placement is load-bearing rather than tidy: .bc-grid and .lst-related__grid
   (catalogue-b3.css:533) are both 0,0,1,0, so nothing but source order separates them.
   Putting this block in catalogue-b3.css would have placed it AFTER .lst-related__grid and
   flipped the detail-related grid's tracks 150 -> 220 — a change no "we moved no
   grid-template-columns" argument protects against, and one no viewport sweep could catch,
   because that element reports clientWidth 0. Measured on the served DOM, not inferred.
   BASE ONLY — every @media rule stays in its own family block, untouched, because the
   responsive tracks and gaps genuinely differ (.cat-grid 180/18 @1080, 160 @860, 2col/14
   @600 · .bc-grid 190/18 @1080, 2col/16 @700, 1col @520) and gap is an argument to the
   auto-fill track-count function — migrating one would move columns. max-width stayed out
   for the same class of reason: .cat-grid has never had one, so folding it in would have
   capped the catalogue at 1320px without any declaration visibly "differing". */
.cat-grid,
.bc-grid { display: grid; justify-content: start; align-items: start; }
/* ★ track ladder + gap + breakpoints for .cat-grid AND .bc-grid are single-sourced in
   catalogue-b3.css (the later co-loaded sheet). D1 §1b: bare .bc-grid is now a pure alias
   of the .cat-grid canonical set — its old 220/190/2col/1fr ladder is removed below. Only
   .bc-grid's page-frame (max-width/margin/padding) stays here: padding is a genuine
   per-surface difference (.bc-grid runs full --container; .cat-grid sits ancestor-padded)
   and is deliberately NOT unified. */

/* .bc-grid keeps its own page-frame props and its own min track, 220, against .cat-grid's 210.
   ⚠ SCOPE OF THAT 220 — measured on the served DOM, QA 2026-07-25, superseding an earlier
   "220 by design (detail-page related rail)" note here that was measured-FALSE:
   the 220 does NOT reach the detail-related element. There .lst-related__grid
   (catalogue-b3.css:533 — later sheet, equal 0,0,1,0) supplies the tracks at 150 and outranks
   every .bc-grid track rule, the @1080/@700/@520 ones included. .bc-grid DOES supply that
   element's display, gap, justify/align and max-width — which is why its column-gap steps
   22->18->16 while its tracks never move.
   No surface has yet been MEASURED on which .bc-grid's 220 governs tracks. It is kept because
   removing it would be a behaviour change on any surface not yet measured — not because a
   governing surface has been demonstrated. Do not restate "220 by design" without naming the
   surface it governs. */
.bc-grid { max-width: var(--container); margin: 0 auto; padding: 26px 32px 80px; }

/* ---------- card + poster ---------- */
.bc-card { font-family: var(--font); cursor: pointer; }
.bc-poster { position: relative; width: 100%; aspect-ratio: 2 / 3; border-radius: var(--radius-lg); overflow: hidden; background: var(--navy); box-shadow: var(--shadow-sm); transition: transform 0.25s cubic-bezier(0.22,1,0.36,1), box-shadow 0.25s cubic-bezier(0.22,1,0.36,1); }
.bc-card:hover .bc-poster { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); }

/* type badge */
.bc-badge { position: absolute; top: 10px; left: 10px; z-index: 3; padding: 4px 9px; border-radius: 999px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; background: rgba(255,255,255,0.92); color: var(--ink); backdrop-filter: blur(4px); }
.bc-badge--live { background: #E5484D; color: #fff; }

/* faux key-art grounds (placeholders standing in for real posters/stills) */
.bc-ka { position: absolute; inset: 0; }
.bc-ka__inner { position: absolute; left: 0; right: 0; top: 36%; transform: translateY(-50%); text-align: center; padding: 0 16px; color: #fff; text-shadow: 0 2px 14px rgba(0,0,0,0.4); }
.bc-ka__kicker { font-size: 10px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; opacity: 0.82; margin-bottom: 8px; }
.bc-ka__title { font-size: 21px; font-weight: 800; line-height: 1.05; }
.bc-grain::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px); background-size: 4px 4px; opacity: 0.6; mix-blend-mode: overlay; }
.bc-art--noir { background: radial-gradient(120% 80% at 50% 8%, rgba(214,151,72,0.55), transparent 55%), linear-gradient(180deg, #1a2433 0%, #0c1622 55%, #060d16 100%); }
.bc-art--aurora { background: radial-gradient(130% 70% at 50% 100%, rgba(40,210,160,0.5), transparent 60%), radial-gradient(90% 60% at 80% 10%, rgba(120,80,200,0.45), transparent 60%), linear-gradient(180deg, #0d1430 0%, #122a3a 70%, #0a1822 100%); }
.bc-art--action { background: radial-gradient(120% 80% at 50% 0%, rgba(231,72,77,0.6), transparent 55%), linear-gradient(180deg, #2a0e14 0%, #14202e 60%, #0a141d 100%); }
.bc-art--cold { background: radial-gradient(130% 70% at 50% 0%, rgba(170,205,235,0.6), transparent 55%), linear-gradient(180deg, #6f93b4 0%, #355875 45%, #14222f 100%); }
.bc-art--ember { background: radial-gradient(120% 80% at 50% 6%, rgba(240,180,90,0.5), transparent 55%), linear-gradient(180deg, #3a2412 0%, #1c1410 55%, #0c0a08 100%); }
.bc-art--violet { background: radial-gradient(120% 80% at 30% 0%, rgba(150,90,210,0.55), transparent 58%), linear-gradient(180deg, #1a1238 0%, #140f2a 60%, #0a0817 100%); }

/* --- ART MODE 2: blur-fill (off-ratio / landscape art) --------------------
   Blurred, dimmed cover copy of the same image fills the frame; the full
   image sits on top via object-fit: contain, centred — no crop.
   In production the image drives both layers (see runtime notes); here the
   art gradients stand in. */
.bc-blur__fill { position: absolute; inset: 0; filter: blur(22px) brightness(0.62); transform: scale(1.25); }
.bc-blur__dim  { position: absolute; inset: 0; background: rgba(7,30,50,0.30); }
.bc-blur__img  { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); width: 100%; aspect-ratio: 16 / 9; overflow: hidden; box-shadow: 0 6px 20px rgba(0,0,0,0.35); }
.bc-blur__img .bc-ka__inner { top: 50%; }
.bc-blur__img .bc-ka__kicker { font-size: 9px; letter-spacing: 0.2em; margin-bottom: 6px; }
.bc-blur__img .bc-ka__title { font-size: 19px; }
/* real build: <img class="bc-blur__fill"> and <img class="bc-blur__img" style="object-fit:contain"> point at the same src */

/* channel logo tile (type-aware: logo centred, NOT cropped into poster art) */
.bc-tile { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
/* channel-logo lockup: centred, ~80% tile width / ~65% height, 12px inset (enlarged) */
.bc-tile { padding: 12px; }
.bc-tile img { width: 80%; max-width: 80%; max-height: 65%; object-fit: contain; opacity: 0.96; }
.bc-tile--sports { background: linear-gradient(160deg, #eafaf6 0%, var(--pillar-sports-fill) 100%); }
.bc-tile--ent { background: linear-gradient(160deg, #f5eefc 0%, var(--pillar-entertainment-fill) 100%); }
.bc-tile--channels { background: linear-gradient(160deg, #fdf6e2 0%, var(--pillar-channels-fill) 100%); }

/* ---------- captions: overlay-dark (poster), overlay-light (channel), caption-below ---------- */
.bc-cap-dark, .bc-cap-light, .bc-cap-below { display: none; }

.bc-cap-dark { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 14px 13px 13px; background: linear-gradient(to top, rgba(7,30,50,0.94) 0%, rgba(7,30,50,0.74) 42%, rgba(7,30,50,0.12) 82%, transparent 100%); }
.bc-cap-dark .t { font-size: 14.5px; font-weight: 700; color: #fff; line-height: 1.22; margin: 0 0 4px; }
.bc-cap-dark .m { font-size: 12px; color: #C6D2DE; margin: 0 0 9px; }

.bc-cap-light { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 13px; background: linear-gradient(to top, rgba(255,255,255,0.97) 0%, rgba(255,255,255,0.82) 60%, transparent 100%); }
.bc-cap-light .t { font-size: 14.5px; font-weight: 700; color: var(--ink); margin: 0 0 4px; }
.bc-cap-light .m { font-size: 12px; color: var(--muted); margin: 0 0 9px; }

.bc-cap-below { padding: 11px 3px 0; }
.bc-cap-below .t { font-size: 14.5px; font-weight: 700; color: var(--ink); line-height: 1.22; margin: 0 0 3px; }
.bc-cap-below .m { font-size: 12px; color: var(--muted); margin: 0 0 8px; }

/* territory chips */
.bc-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px; }
.bc-chip--dark { background: rgba(255,255,255,0.14); color: #EAF1F8; border: 1px solid rgba(255,255,255,0.22); }
.bc-chip--light { background: var(--bg-subtle); color: var(--ink); border: 1px solid var(--border); }
.bc-dot { width: 5px; height: 5px; border-radius: 999px; }
.bc-chip--dark .bc-dot--all { background: #7FB3F2; }
.bc-chip--dark .bc-dot--terr { background: #5FD0BF; }
.bc-chip--light .bc-dot--all { background: var(--accent); }
.bc-chip--light .bc-dot--terr { background: var(--pillar-sports-base); }

/* ============================================================================
   LAYOUT SWITCH — the only thing the `layout` setting changes.
   ========================================================================== */
.bc--overlay .bc-card--poster .bc-cap-dark { display: block; }
.bc--overlay .bc-card--channel .bc-cap-light { display: block; }
.bc--caption .bc-cap-below { display: block; }

/* ============================================================================
   RESPONSIVE LAYER — 1080 / 700 / 520 + reduced motion
   ========================================================================== */
@media (max-width: 1080px) {
  .bc-header__inner, .bc-top, .bc-grid { padding-left: 24px; padding-right: 24px; }
}
@media (max-width: 700px) {
  .bc-top { flex-direction: column; align-items: flex-start; }
  .bc-switchwrap { align-items: flex-start; }
  .bc-ka__title { font-size: 18px; }
}
@media (max-width: 520px) {
  .bc-header__inner, .bc-top, .bc-grid { padding-left: 16px; padding-right: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .bc *, .bc *::before, .bc *::after { transition-duration: 0.001ms !important; animation-duration: 0.001ms !important; }
}

/* OFF-7 build-owned runtime additions (per README): clickable-card link + empty state.
   Cover art uses <img class="bc-ka" style="object-fit:cover">; off-ratio art is upgraded to
   blur-fill by dice-bc.js (bc-ka cover -> .bc-blur__fill + .bc-blur__dim + .bc-blur__img). */
a.bc-card { text-decoration: none; color: inherit; display: block; }
.bc-empty { max-width: var(--container); margin: 0 auto; padding: 26px 32px 80px; color: var(--muted); }
.bc-empty a { color: var(--accent); }
img.bc-ka { width: 100%; height: 100%; }

/* DH batch-6 #3: channel logo tiles on the browse/aggregate grid used object-fit:contain, so
   landscape channel logos letterboxed/floated in the tile. Fill the tile like the detail art
   (.pl-dtl__art--real uses cover). Higher specificity than the CD base `.bc-tile img` so it
   survives a CD resync; DH/CD to land the same contain->cover in the CD master. */
.bc-tile--channels img { object-fit: cover; width: 100%; max-width: 100%; height: 100%; max-height: 100%; }