/* ===== Live: player, on-air card, up-next, channels, player states, mini-player ===== */
.player{border-radius:var(--r-lg);aspect-ratio:16/9;background:var(--c-player);position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;color:#fff;outline:none;box-shadow:var(--c-shadow)}
.player:focus-visible{box-shadow:0 0 0 3px var(--c-primary)}
.player video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000;cursor:pointer}
/* A YouTube broadcast plays inside an embed, which brings its own controls — ours would be a
   second set of buttons that do nothing, so the bar and the big play button stand down. */
.player__yt{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000}
/* Our own bar drives the embed, so it stays — minus the controls a cross-origin frame cannot give
   us: no quality switching (YouTube ignores it), no AirPlay, no picture-in-picture, and no seeking
   back into a live edge we do not own. */
.player--yt .player__quality,.player--yt [data-player-airplay],.player--yt [data-player-pip],
.player--yt [data-player-live],.player--yt .player__prog,.player--yt .player__time{display:none}
.player--yt .player__play{z-index:4}
/* The frame sits under the controls but still takes the clicks that are meant for it. */
.player--yt .player__yt{z-index:1}
.player--yt .player__bar,.player--yt .player__top,.player--yt .player__unmute{z-index:3}
/* Autoplay has to start muted, so the way back to sound must be obvious and must not sit over
   YouTube's own controls along the bottom. */
.player__unmute{position:absolute;left:16px;bottom:58px;z-index:3;display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border:0;border-radius:999px;background:rgba(20,22,62,.82);backdrop-filter:blur(8px);color:#fff;font:700 13px/1 var(--ff-ui);cursor:pointer;transition:background .2s,transform .2s}
.player__unmute:hover{background:var(--c-primary);transform:translateY(-1px)}
.player__unmute .ic{width:15px;height:15px}
.player__unmute.is-gone{display:none}
@media (max-width:575.98px){.player__unmute{left:12px;bottom:50px;padding:9px 13px;font-size:12px}}
.player__play{width:74px;height:74px;border-radius:50%;background:rgba(65,69,197,.92);display:flex;align-items:center;justify-content:center;z-index:2;box-shadow:0 18px 50px rgba(65,69,197,.35);color:#fff;transition:transform .15s}
.player__play:hover{transform:scale(1.06)}
.player__play svg{width:26px;height:26px}
.player.is-playing .player__play{display:none}
.player__top{position:absolute;top:16px;left:16px;right:16px;z-index:3;display:flex;align-items:center;gap:12px;pointer-events:none}
/* The channel burns its own bug into that corner: while the picture is on, the overlay goes and
   the LIVE pill + programme name sit as the first row of the control bar instead. */
.player.is-playing .player__top{display:none}
.player__nowrow{display:flex;align-items:center;gap:10px;min-width:0;margin-bottom:10px}
.player:not(.is-playing) .player__nowrow{display:none}
.player__now{font:700 14px/1.2 var(--ff-display);text-shadow:0 1px 8px rgba(0,0,0,.6);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.player__bar{position:absolute;left:0;right:0;bottom:0;padding:14px 16px 16px;background:linear-gradient(transparent,rgba(7,12,26,.92));z-index:3;transition:opacity .25s}
.player.is-playing.is-idle .player__bar,.player.is-playing.is-idle .player__top{opacity:0}
.player__prog{height:3px;background:rgba(255,255,255,.18);border-radius:2px;margin-bottom:12px;position:relative}
.player__prog>span{display:block;height:3px;background:var(--c-live);border-radius:2px;width:100%}
.player__ctl{display:flex;align-items:center;gap:10px;color:#fff}
.player__btn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:var(--r-md);color:#fff;transition:background .15s}
.player__btn:hover{background:rgba(255,255,255,.14)}
.player__btn svg{width:20px;height:20px}
.player .i-pause,.player.is-playing .i-play{display:none}.player.is-playing .i-pause{display:inline-flex}
.player .i-mute,.player.is-muted .i-vol{display:none}.player.is-muted .i-mute{display:inline-flex}
.player__vol{display:flex;align-items:center;gap:6px}
.player__range{-webkit-appearance:none;appearance:none;width:0;height:4px;border-radius:2px;background:rgba(255,255,255,.35);outline:none;transition:width .2s,opacity .2s;opacity:0;cursor:pointer}
.player__vol:hover .player__range,.player__range:focus{width:90px;opacity:1}
.player__range::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:#fff}
.player__range::-moz-range-thumb{width:12px;height:12px;border:0;border-radius:50%;background:#fff}
.player__time{font:600 12px/1 var(--ff-ui);color:#DCDFEA;margin-left:4px}
.player__backlive{font:700 12px/1 var(--ff-display);letter-spacing:.06em;color:#FBA48D;border:1px solid rgba(249,97,66,.5);padding:6px 10px;border-radius:var(--r-pill)}
.player__backlive[hidden]{display:none}
.player__ctl .right{margin-left:auto;display:flex;align-items:center;gap:4px}
.player__quality{font:700 11px/1 var(--ff-display);letter-spacing:.08em;color:#fff;border:1px solid rgba(255,255,255,.4);padding:5px 7px;border-radius:var(--r-xs);margin-right:6px}
/* states */
.player__state{position:absolute;inset:0;z-index:4;background:var(--c-player);display:none;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:20px;text-align:center;color:#fff}
.player__state svg{width:30px;height:30px;color:#5A5E8A}
.player__state b{font:700 17px/1.3 var(--ff-display);color:#DCDFEA}
.player__state .mu{line-height:1.5;max-width:380px;color:#9FA3C9}
.player__state .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.35);margin-top:6px}
.player[data-state="offline"] .player__state--offline,.player[data-state="georestricted"] .player__state--georestricted,.player[data-state="ad"] .player__state--ad{display:flex}
.player[data-state]:not([data-state="live"]) .player__bar,.player[data-state]:not([data-state="live"]) .player__play,.player[data-state]:not([data-state="live"]) .player__top{display:none}
.player__state--ad{background:linear-gradient(135deg,#26296B,#1B1D52 60%,#1E205D)}
.player__state--ad .prog{position:absolute;left:0;right:0;bottom:0;border-radius:0;height:3px;background:rgba(255,255,255,.15)}
.clock-ring{width:44px;height:44px;border-radius:50%;border:2px solid #2E3C66;display:flex;align-items:center;justify-content:center;color:#8B8FE6}
.clock-ring svg{width:18px;height:18px;color:#8B8FE6}
/* channels */
/* fullscreen: fill the screen, never crop, square corners */
.player:fullscreen,.player:-webkit-full-screen{border-radius:0;width:100%;height:100%;aspect-ratio:auto;max-height:none}
.player:fullscreen video,.player:-webkit-full-screen video{object-fit:contain}
.player.is-fs .player__bar{padding:14px 22px 20px}
/* raised tap targets on the bar (visual 36px, hit area 44px) */
.player__btn{position:relative}
.player__btn::before{content:"";position:absolute;inset:-4px}

/* docked mode: same element, fixed bottom-right; the slot keeps its place */
.player-slot{display:none}
.player-slot.is-active{display:flex;align-items:center;justify-content:center;height:var(--slot-h);border-radius:var(--r-lg);background:var(--c-raised);border:1px dashed var(--c-line-2);color:var(--c-muted);font:600 14px/1.5 var(--ff-ui);padding:20px;text-align:center}
.player-slot.is-active+.player{position:fixed;right:24px;bottom:24px;width:min(420px,calc(100vw - 32px));z-index:1090;border-radius:var(--r-card);box-shadow:0 24px 60px rgba(20,22,62,.5);animation:dock-in .25s ease-out}
.player__undock{display:none;position:absolute;top:10px;right:10px;z-index:6;width:32px;height:32px;border-radius:50%;border:0;background:rgba(20,22,62,.65);color:#fff;place-items:center;padding:0;backdrop-filter:blur(6px)}
.player__undock svg{width:15px;height:15px}
.player.is-docked .player__undock{display:grid}
.player.is-docked .player__now{max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.player.is-docked .player__time,.player.is-docked .player__quality,.player.is-docked [data-player-pip],.player.is-docked [data-player-airplay]{display:none}
.player.is-docked .player__play{width:54px;height:54px}
.player.is-docked .player__bar{padding:8px 10px 10px}
.player.is-docked .player__nowrow{margin-bottom:6px;padding-right:36px}
@keyframes dock-in{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.player-slot.is-active+.player{animation:none}}
@media (max-width:991.98px){.player-slot.is-active+.player{right:12px;left:auto;width:min(320px,calc(100vw - 24px));bottom:calc(16px + env(safe-area-inset-bottom))}}
/* phones: above the tab bar */
@media (max-width:767.98px){.player-slot.is-active+.player{bottom:calc(74px + env(safe-area-inset-bottom))}}


/* ===== Band A — the first block (home/live.php) =====
   Two equal columns: the five lead stories rotate on the left, the player with a now/next strip
   and the "Programi i sotëm" button on the right. The columns stretch to each other — the slider
   fills whatever height the player and its strip take, never less than 16:9 (a container unit,
   measured on the column's content box). "Programi i sotëm" unfolds the day under both columns
   as a 0fr→1fr grid row, so the block grows in place; modules/hero-block.js flips .is-open. */
.stage .row{align-items:stretch}
.stage__tv{display:flex;flex-direction:column;gap:14px}
/* the programmes after "next" (kept for the Live page; the homepage no longer prints it, DECISIONS #176) */
.stage__upnext{display:none;list-style:none;margin:0;padding:4px 16px 0;flex:1;flex-direction:column;justify-content:flex-end;gap:0}
.stage__upnext li{display:flex;align-items:baseline;gap:12px;padding:9px 0;border-top:1px solid var(--c-line);font:500 13.5px/1.3 var(--ff-ui);color:var(--c-text);min-width:0}
.stage__upnext li:first-child{border-top:0}
.stage__upnext .num{font:700 12.5px/1 var(--ff-cond);letter-spacing:.04em;color:var(--c-muted);flex:none;width:44px}
.stage__upnext a{color:inherit;text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stage__upnext a:hover{color:var(--c-primary)}
@media (min-width:992px){.stage:not(.stage--solo) .stage__upnext{display:flex}}
.stage__lead{display:flex;flex-direction:column;container-type:inline-size}
.stage__lead .lead-sw{flex:1 1 0;width:100%;min-height:56.25cqw} /* a true 16:9 slide; the player column grows to meet it (stage__upnext) */ /* Swiper centres itself with auto margins, which would stop the stretch */
/* side by side the slide takes the column's height, not its own ratio: a ratio here would feed
   the row's height back into the slide's width and the box runs away */
@media (min-width:992px){.stage:not(.stage--solo) .lead{aspect-ratio:auto}}
/* the strip alone (home_live = card): it takes the player's place and breathes */
.stage__tv:not(:has(.player)) .nownext{flex:1;justify-content:center;padding-block:14px}
.stage__tv:not(:has(.player)) .nownext__row{padding-block:18px}
.stage__tv:not(:has(.player)) .nownext__t{font-size:19px;white-space:normal}
/* the slider alone (home_live = off): full width, so it stays a band and not a wall */
.stage--solo .stage__lead{display:block}
.stage--solo .stage__lead .lead-sw{min-height:0}
@media (min-width:768px){.stage--solo .lead{aspect-ratio:21/9}}

/* --- the lead slider --- */
.lead-sw{position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--c-shadow-lg);background:var(--c-player)}
/* a grid, not an absolute caption: the caption is the last grid row, so the title's stretched link
   (Bootstrap's ::after) covers the whole slide, picture included */
.lead{display:grid;grid-template-columns:minmax(0,1fr);align-content:end;position:relative;aspect-ratio:16/9;height:100%;color:#fff;isolation:isolate}
.lead__media{position:absolute;inset:0;z-index:-1;overflow:hidden}
.lead__media img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s}
.lead:hover .lead__media img{transform:scale(1.03)}
.lead__media::after{content:"";position:absolute;inset:0;background:var(--scrim-b)}
.lead__cap{min-width:0;padding:26px 28px 24px;display:flex;flex-direction:column;gap:10px}
.lead:hover .lead__t{color:#DCDFEA}
.lead__kick{display:flex;align-items:center;gap:10px}
.lead__t{display:block;font:900 clamp(26px,2.6vw,38px)/1.08 var(--ff-display);letter-spacing:var(--track-tighter);text-shadow:0 2px 20px rgba(0,0,0,.35);color:#fff;-webkit-line-clamp:2}
.lead__t:hover{color:#DCDFEA}
.lead__x{font:400 15px/1.5 var(--ff-serif);color:#DCDFEA;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lead__by{display:flex;align-items:center;gap:12px;font:600 13px/1 var(--ff-ui);color:#DCDFEA;margin-top:4px}
.lead__by .mu{color:#C9CBEA}
.lead__read{display:inline-flex;align-items:center;gap:6px;color:#fff;font-weight:700}
.lead__read svg{width:14px;height:14px;transition:transform .2s}
.lead:hover .lead__read svg{transform:translateX(3px)}
.lead:hover{color:#fff}
/* pager capsule, top right where no text sits: "there are more, and you can move through them" */
.lead-sw__ui{position:absolute;right:14px;top:14px;z-index:6;display:flex;align-items:center;pointer-events:none}
.lead-nav{pointer-events:auto;display:flex;align-items:stretch;border-radius:var(--r-pill);overflow:hidden;background:rgba(20,22,62,.55);border:1px solid rgba(255,255,255,.22);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 8px 24px -10px rgba(0,0,0,.5)}
.lead-nav__b{width:40px;display:grid;place-items:center;padding:0;color:#fff;background:none;border:0;transition:background .2s,color .2s}
.lead-nav__b:hover{background:rgba(255,255,255,.18)}
.lead-nav__b:active{background:var(--c-primary)}
.lead-nav__b svg{width:16px;height:16px}
.lead-nav__b[data-swiper-prev] svg{transform:rotate(90deg)}
.lead-nav__b[data-swiper-next] svg{transform:rotate(-90deg)}
.lead-nav__frac{display:grid;place-items:center;min-width:64px;height:36px;padding:0 10px;color:#fff;font:700 12px/1 var(--ff-cond);letter-spacing:.1em;border-inline:1px solid rgba(255,255,255,.2)}

/* --- now / next strip (light, under the player; modules/on-air.js keeps it ticking) --- */
.nownext{display:flex;flex-direction:column;padding:0 18px;border-radius:var(--r-card)}
.nownext__row{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;align-items:baseline;column-gap:10px;padding:13px 0}
.nownext__row+.nownext__row{border-top:1px solid var(--c-line)}
.nownext__dot{align-self:center;width:9px;height:9px;border-radius:50%;background:var(--c-live);box-shadow:0 0 0 3px var(--c-live-soft-bg);animation:pulse 1.4s infinite}
.nownext__next .nownext__dot{background:var(--c-primary);box-shadow:0 0 0 3px var(--c-primary-soft);animation:none}
.nownext .kick{color:var(--c-live);white-space:nowrap}
.nownext__next .kick{color:var(--c-primary)}
.nownext__t{font:700 15px/1.25 var(--ff-display);color:var(--c-text);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
a.nownext__t:hover{color:var(--c-primary)}
.nownext__tm{font:700 12.5px/1 var(--ff-cond);letter-spacing:.04em;color:var(--c-muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.nownext__prog{grid-column:1/-1;height:3px;margin-top:4px}
.nownext__none{display:none}
/* off air: the strip is about what comes next — no red, no pulse, "starts in …" on the right */
.onair--off .nownext__now{display:none}
.onair--off .nownext__next{border-top:0}
.nownext:not(.onair--off) [data-onair-starts]{display:none}
.nownext:not(:has(.nownext__next:not([hidden]))) .nownext__none{display:grid;grid-template-columns:1fr}
.nownext:not(:has(.nownext__next:not([hidden]))) .nownext__now{display:none}

/* --- "Programi i sotëm" --- */
.stage__btn{display:flex;align-items:center;gap:10px;width:100%;padding:13px 16px;border:1px solid var(--c-line-2);background:var(--c-card);border-radius:var(--r-card);font:600 14px/1 var(--ff-ui);color:var(--c-text);text-align:left;cursor:pointer;transition:border-color .2s,background .2s}
.stage__btn:hover{border-color:var(--c-primary);background:var(--c-primary-soft)}
.stage__btn>svg{width:17px;height:17px;color:var(--c-primary);flex:none}
.stage__btn .mu{font-weight:400;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-left:auto;min-width:0}
.stage__btn .stage__chev{color:var(--c-muted);transition:transform .35s cubic-bezier(.16,1,.3,1)}
.stage__btn[aria-expanded="true"] .stage__chev{transform:rotate(180deg)}
.stage__btn--sheet{display:none}
.stage__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s cubic-bezier(.16,1,.3,1)}
.stage__panel-in{overflow:hidden;min-height:0;visibility:hidden;transition:visibility 0s linear .45s}
.stage.is-open .stage__panel{grid-template-rows:1fr}
.stage.is-open .stage__panel-in{visibility:visible;transition-delay:0s}
.stage__panel-head{display:flex;align-items:center;gap:12px;padding:24px 0 6px}
.stage__panel-head .kick{color:var(--c-primary)}
.stage__panel-line{flex:1;height:1px;background:var(--c-line)}
/* rows reveal with a stagger (--i set by hero-block.js, capped) once the panel opens */
.stage__panel .epgl__row{opacity:0;transform:translateY(8px);transition:opacity .35s ease,transform .45s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--i,0) * 40ms)}
.stage.is-open .stage__panel .epgl__row{opacity:1;transform:none}

/* --- the day's rows (inline panel and the phone sheet share them) --- */
.epgl__rows{list-style:none;margin:0;padding:0;column-gap:36px}
.epgl__row{display:grid;grid-template-columns:52px minmax(0,1fr) auto;align-items:center;gap:12px;padding:11px 0;border-top:1px solid var(--c-line);border-radius:var(--r-xs);break-inside:avoid}
.epgl__row:focus-visible{outline:2px solid var(--c-primary);outline-offset:2px}
.epgl__row--empty{grid-template-columns:1fr}
.epgl__tm{font:700 14px/1 var(--ff-cond);color:var(--c-muted)}
.epgl__body{display:flex;align-items:center;gap:8px;min-width:0;flex-wrap:wrap}
.epgl__t{font:600 14.5px/1.3 var(--ff-ui);color:var(--c-text)}
.epgl__kind{padding:4px 8px;font-size:10.5px}
.epgl__live{display:none;align-items:center;gap:6px;color:var(--c-live);font:700 11px/1 var(--ff-cond);letter-spacing:var(--track-label);text-transform:uppercase}
.epgl__live .dot{background:var(--c-live);animation:pulse 1.4s infinite}
.epgl__row.is-now .epgl__live{display:inline-flex}
.epgl__row.is-now .epgl__tm{color:var(--c-live)}
.epgl__row.is-past .epgl__tm,.epgl__row.is-past .epgl__t{color:var(--c-muted);opacity:.85}
.epgl__row.is-past .epgl__kind,.epgl__row.is-past .epgl__go{opacity:.6}
.epgl.is-hide-past .epgl__row.is-past{display:none}
.epgl__go{display:inline-flex;align-items:center;gap:5px;font:600 12.5px/1 var(--ff-ui);color:var(--c-link);white-space:nowrap}
.epgl__go svg{width:13px;height:13px}
.epgl__go:hover{color:var(--c-link-hover)}
.epgl__past{border:0;background:none;padding:0 0 10px;color:var(--c-link);font:600 13px/1 var(--ff-ui);cursor:pointer}
.epgl__past:hover{color:var(--c-link-hover)}
.epgl__all{display:inline-flex;align-items:center;gap:8px;margin-top:16px;font:700 14px/1 var(--ff-ui);color:var(--c-primary)}
.epgl__all svg{width:15px;height:15px}
.epgl__all:hover{color:var(--c-link-hover)}
/* wide: two columns read down, then across — the day stays in order */
@media (min-width:992px){.stage__panel .epgl__rows{columns:2}}
@media (prefers-reduced-motion:reduce){
  .stage__panel,.stage__panel-in,.stage__panel .epgl__row,.stage__btn .stage__chev,.lead__media img,.lead__read svg{transition:none}
  .nownext__dot,.epgl__live .dot{animation:none}
}
/* tablets and phones: the columns stack, the slider full width */
@media (max-width:991.98px){
  .stage__lead{display:block}
  .stage__lead .lead-sw{flex:none;min-height:0}
  .lead__cap{padding:20px}
}
/* phones and tablets: the stories first, then the player with the strip and the button; on
   phones the button opens the schedule as a bottom sheet instead of unfolding the panel */
@media (max-width:991.98px){
  .stage__lead{order:1}
  .stage__tv{order:2}
}
@media (max-width:767.98px){
  .stage__btn--panel,.stage__panel{display:none}
  .stage__btn--sheet{display:flex}
  .stage__tv{gap:12px}
  .nownext{padding:0 14px}
  .nownext__row{column-gap:8px;padding:11px 0}
  .nownext__t{font-size:14px}
  .epgl__row{grid-template-columns:46px minmax(0,1fr)}
  .epgl__go{grid-column:2;justify-self:start}
}
@media (max-width:575.98px){
  .lead__t{font-size:24px}
  .lead__x{display:none}
  .lead__cap{padding:14px 14px 12px}
  .lead-nav__b{width:36px}
  .lead-nav__frac{min-width:54px;height:34px;padding:0 8px;font-size:11.5px;letter-spacing:.06em}
  .stage__btn .mu{display:none}
  /* the countdown / "until" goes under the title rather than squeezing it */
  .nownext__row{grid-template-columns:auto auto minmax(0,1fr);row-gap:4px}
  .nownext__tm{grid-column:3;justify-self:start}
}

/* ===== On-air HERO card (vp_onair_card hero option): cinematic, matches the player ===== */
.onair--hero{position:relative;isolation:isolate;overflow:hidden;border:0;border-radius:var(--r-lg);background:var(--c-player);color:#fff;box-shadow:0 24px 70px -18px rgba(65,69,197,.4),0 10px 30px -12px rgba(30,32,93,.35)}
.onair__bg{position:absolute;inset:0;z-index:-1;overflow:hidden}
/* The artwork behind this card is a backdrop, not a picture to read: programme posters and the
   branded stand-in cards both carry their own type, and it was surfacing straight through the
   up-next list. Softened and darkened at the source, it still reads as the programme's own image
   while every line on top of it stays legible. The slight scale hides the blur's soft edges. */
.onair__bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.1);filter:blur(5px) saturate(.95) brightness(.6);transition:opacity .6s}
.onair__bg img.is-entering{opacity:0}
.onair__bg::after{content:"";position:absolute;inset:0;background:var(--scrim-card)}
.onair--hero .onair__in{display:flex;flex-direction:column;height:100%;padding:20px 22px}
.onair--hero .onair__head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:auto}
.onair--hero .onair__kick{color:#A7AAE8;margin:0}
.onair--hero .onair__title{font:900 26px/1.08 var(--ff-display);letter-spacing:var(--track-tight);margin-top:15px;text-shadow:0 2px 16px rgba(0,0,0,.45)}
.onair--hero .onair__title a{color:#fff}
.onair--hero .onair__title a:hover{color:#C9CBEA}
.onair--hero .onair__meta{color:#DCDFEA;margin-top:6px}
.onair--hero .prog{margin:12px 0 6px;background:rgba(255,255,255,.16)}
.onair--hero .prog span::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);background-size:220% 100%}
.onair--hero .onair__elapsed{color:#9FA3C9;font-size:12px}
.onair--hero .onair__next-head{display:flex;align-items:center;gap:12px;margin:16px 0 10px}
.onair--hero .onair__next{display:inline-flex;align-items:center;gap:7px;color:#C9CBEA;margin:0;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);padding:7px 11px;border-radius:999px}
.onair--hero .onair__next svg{width:13px;height:13px;color:#A7AAE8}
.onair--hero .onair__next-line{flex:1;height:1px;background:linear-gradient(90deg,rgba(255,255,255,.25),transparent)}
.onair__next-head{display:flex;align-items:center;gap:12px;margin:20px 0 10px}
.onair__next-head .onair__next{margin:0;display:inline-flex;align-items:center;gap:7px}
.onair__next-head .onair__next svg{width:13px;height:13px}
.onair__next-head .onair__next-line{flex:1;height:1px;background:var(--c-line)}
.onair--hero .next__tm{color:#A7AAE8}
.onair--hero .next__nm{color:#DCDFEA}
.onair--hero .next__nm:hover{color:#fff}
.onair--hero .next__row{padding:3px 0}
.onair--hero .chip{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.22);color:#DCDFEA}
.onair--hero .chip:hover{background:rgba(255,255,255,.16);color:#fff;border-color:rgba(255,255,255,.35)}
.onair--hero .next__day{color:#A7AAE8}
.onair--hero .onair__foot{border-top:1px solid rgba(255,255,255,.14);color:#fff}
.onair--hero .onair__foot:hover{color:#C9CBEA}
.onair--hero .next{scrollbar-color:rgba(255,255,255,.25) transparent}
.onair--hero .next::-webkit-scrollbar-thumb{background:rgba(255,255,255,.25)}
.onair--hero .onair__morebtn{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:#fff;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:var(--r-card);padding:14px 16px}
.onair--hero .onair__morebtn svg{color:#A7AAE8}
.onair--hero .onair__morebtn .mu{color:#DCDFEA;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:46%}
.onair--hero .onair__morebtn:active{transform:scale(.98)}
@media (max-width:991.98px){
  .onair--hero{border-radius:var(--r-lg);min-height:280px}
  .onair--hero .onair__in{padding:18px}
  .onair--hero .onair__title{margin-top:76px;font-size:25px}
  .onair--hero .onair__meta{font-size:13px}
}

/* on-air card (live page, guide, live-blog rail; the home strip is .nownext below) */
.onair{display:flex;flex-direction:column}
.onair__kick{color:var(--c-live-soft);margin-bottom:14px}
/* off air: the card is about the next programme — primary, no red, no pulse */
.onair--off .onair__kick{color:var(--c-primary)}
.onair--hero.onair--off .onair__kick{color:#A7AAE8}
.onair--off .onair__elapsed{margin-top:6px}
.onair__title{font:700 24px/1.2 var(--ff-display)}
.onair__title--lg{font-size:26px;line-height:1.18}
.onair .prog{margin:16px 0 8px}
.onair__desc{font:400 14px/1.6 var(--ff-serif);color:var(--c-body);margin-top:14px}
.onair__links{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
.onair__links .tag{padding:7px 12px;font-size:12px}
.onair__next{color:var(--c-muted);margin:24px 0 12px}
.next{display:flex;flex-direction:column;gap:12px;max-height:340px;overflow:auto;padding-right:4px;scrollbar-width:thin}
.next::-webkit-scrollbar{width:6px}.next::-webkit-scrollbar-thumb{background:var(--c-line-2);border-radius:var(--r-xs)}
.next__row{display:flex;align-items:center;gap:12px}
.next__tm{font:700 14px/1 var(--ff-display);color:var(--c-muted);width:42px;flex:none}
.next__nm{font:600 14px/1.25 var(--ff-ui);flex-grow:1;color:var(--c-text)}
.next__nm:hover{color:var(--c-link-hover)}
.next__day{color:var(--c-dosje);margin-top:6px}
.onair__foot{margin-top:auto;padding-top:20px;border-top:1px solid var(--c-line);display:flex;align-items:center;justify-content:space-between;font:600 14px/1 var(--ff-ui)}
.onair__foot svg{width:16px;height:16px}
/* compact on-air (article rail) */
.onair-mini{display:flex;flex-direction:row;align-items:center;gap:12px}
.onair-mini__th{width:104px;height:64px;border-radius:var(--r-md);flex:none;display:flex;align-items:center;justify-content:center}
.onair-mini__th .p{width:26px;height:26px;border-radius:50%;background:rgba(249,97,66,.92);display:flex;align-items:center;justify-content:center;z-index:2;color:#fff}
.onair-mini__th .p svg{width:11px;height:11px}
.onair-mini b{display:block;font:700 16px/1.2 var(--ff-display)}
/* catch-up (VOD) cards handled by .vcard in news.css; without a video the card is a plain row */
/* continue-watching mini — same design language as the docked player */
/* live page */
@media (max-width:575.98px){.player{border-radius:var(--r-card)}.player__bar{padding:10px 10px 12px}.player__ctl{gap:4px}.player__time,.player__quality{display:none}.player__play{width:56px;height:56px}.player__play svg{width:20px;height:20px}.player__now{font-size:12px}}

/* ---- Live TV page: the first block without the stories ---- */
.live-page .sh{margin-top:10px}
.live-page__ad{margin:18px 0 22px}
.live-page__ad--bottom{margin-top:36px}
.live-page__mpu{margin-top:auto;align-self:center}
.stage--page{margin-top:0}
/* the player sits in the other column here, so the "strip alone" stretch must not apply */
.stage--page .stage__tv .nownext{flex:none;justify-content:flex-start;padding:0 14px}
.stage--page .stage__tv .nownext__row{padding-block:11px}
.stage--page .stage__tv .nownext__t{font-size:15px;white-space:nowrap}
.stage--page .stage__panel-in{padding-top:8px}
/* no JS: the schedule is simply there */
.stage--page.is-open .stage__panel{grid-template-rows:1fr}
/* phones: the Live TV page keeps the inline schedule (there is nothing else on the page) */
@media (max-width:767.98px){
  .stage--page .stage__btn--panel,.stage--page .stage__panel{display:grid}
  .stage--page .stage__btn--panel{display:flex}
  .stage--page .stage__btn--sheet{display:none}
  .stage--page .live-page__mpu{display:none}
}

/* ===== pre-roll: a booked clip inside the player before the stream (DECISIONS #122) ===== */
.preroll{position:absolute;inset:0;z-index:6;background:#000;color:#fff;isolation:isolate}
.preroll[hidden]{display:none}
.preroll__stage,.preroll__stage .ad,.preroll__stage .ad__link,.preroll__stage .ad__video{position:absolute;inset:0;margin:0;max-width:none;width:100%;height:100%;display:block;line-height:0}
.preroll__stage .ad__tag{display:none}
.preroll__stage video{width:100%;height:100%;object-fit:contain;background:#000;border-radius:0}
.preroll__stage .ad__link{cursor:default}
.preroll__top{position:absolute;left:0;right:0;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;background:linear-gradient(180deg,rgba(0,0,0,.55),transparent)}
.preroll__brand{display:inline-flex;align-items:center;gap:9px}
.preroll__brand img{width:26px;height:auto;display:block;filter:drop-shadow(0 2px 6px rgba(0,0,0,.4))}
.preroll__tick{width:3px;height:18px;border-radius:2px;background:var(--c-live)}
.preroll__kick{font:700 11px/1 var(--ff-cond);letter-spacing:.14em;text-transform:uppercase;color:#DCDFEA}
.preroll__left{font:700 12.5px/1 var(--ff-cond);letter-spacing:.06em;color:#fff;background:rgba(30,32,93,.55);padding:8px 11px;border-radius:var(--r-pill);font-variant-numeric:tabular-nums;backdrop-filter:blur(4px)}
.preroll__bottom{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;align-items:center;gap:10px;padding:14px 16px 18px;background:linear-gradient(0deg,rgba(0,0,0,.6),transparent)}
.preroll__mute,.preroll__visit,.preroll__skip{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;border:0;border-radius:var(--r-pill);font:700 13px/1 var(--ff-ui);cursor:pointer;color:#fff;transition:background .2s,opacity .2s,transform .15s}
.preroll__mute{background:rgba(255,255,255,.16);backdrop-filter:blur(6px)}
.preroll__mute:hover{background:rgba(255,255,255,.28)}
.preroll.has-sound .preroll__mute{display:none}
.preroll__visit{background:rgba(255,255,255,.16);text-decoration:none;backdrop-filter:blur(6px)}
.preroll__visit:hover{background:rgba(255,255,255,.28);color:#fff}
.preroll__skip{margin-left:auto;background:#fff;color:var(--c-primary-dark);padding-right:12px}
.preroll__skip:disabled{background:rgba(255,255,255,.18);color:rgba(255,255,255,.75);cursor:default}
.preroll__skip:not(:disabled):hover{transform:translateY(-1px)}
.preroll__mute svg,.preroll__visit svg,.preroll__skip svg{width:16px;height:16px}
.preroll__prog{position:absolute;left:0;right:0;bottom:0;height:4px;z-index:3;background:rgba(255,255,255,.18)}
.preroll__prog>span{display:block;height:100%;width:0;background:var(--c-live);transition:width .2s linear}
/* while the spot runs, the player's own chrome stands down */
.player.is-preroll .player__play,.player.is-preroll .player__bar,.player.is-preroll .player__top,.player.is-preroll .player__unmute,.player.is-preroll .player__state{display:none}
@media (max-width:575.98px){
  .preroll__top{padding:10px 12px}
  .preroll__bottom{padding:10px 12px 14px;gap:8px}
  .preroll__mute span,.preroll__visit{display:none}
  .preroll__mute{padding:0 10px}
}

/* the latest edition under the player (DECISIONS #176): the player's twin — a 16:9 tile the width
   of the column, the picture behind a scrim, kick + title over it, a tap opens the popup player */
.edcard{position:relative;display:block;width:100%;aspect-ratio:16/9;padding:0;border:0;border-radius:var(--r-lg);overflow:hidden;background:var(--c-player);color:#fff;text-align:left;isolation:isolate;box-shadow:var(--c-shadow)}
.edcard__media{position:absolute;inset:0;z-index:0}
.edcard__media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease}
.edcard:hover .edcard__media img{transform:scale(1.03)}
.edcard__media::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(20,22,62,.96) 0%,rgba(20,22,62,.7) 38%,rgba(20,22,62,.15) 70%,transparent 100%)}
.edcard__media .play{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);z-index:2;width:54px;height:54px}
.edcard__media .play svg{width:20px;height:20px}
.edcard__body{position:absolute;left:0;right:0;bottom:0;z-index:1;display:flex;flex-direction:column;gap:4px;padding:16px 18px 16px}
.edcard .kick.edcard__k{align-self:flex-start;background:var(--c-primary);color:#fff;padding:5px 9px;border-radius:var(--r-xs);margin-bottom:4px}
.edcard__t{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font:800 17px/1.25 var(--ff-display);letter-spacing:var(--track-tight);text-shadow:0 2px 14px rgba(0,0,0,.4)}
.edcard__m{font-size:12px;color:var(--c-on-dark-muted)}
@media (max-width:575.98px){.edcard__body{padding:12px 14px}.edcard__t{font-size:15.5px}}