/* ============================================================================
   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: #0E8C7E;
  --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 ---------- */
.bc-grid { max-width: var(--container); margin: 0 auto; padding: 26px 32px 80px; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 22px; }

/* ---------- 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; }
  .bc-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 18px; }
}
@media (max-width: 700px) {
  .bc-top { flex-direction: column; align-items: flex-start; }
  .bc-switchwrap { align-items: flex-start; }
  .bc-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .bc-ka__title { font-size: 18px; }
}
@media (max-width: 520px) {
  .bc-header__inner, .bc-top, .bc-grid { padding-left: 16px; padding-right: 16px; }
  .bc-grid { grid-template-columns: 1fr; }
}
@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%; }