/* ==========================================================================
   Vizion Plus — design tokens & base ("Blu, video-first, i errët")
   Source: design canvas "Vizion Plus Redesign" → Sistemi vizual.

   The brand palette, by the names the brand uses (DECISIONS #88):
     Primary    #4145C5  → --c-primary, --c-link, --c-lajme
     Gradient   #1E205D  → --c-primary-dark, --c-dark, --c-text  (and every scrim)
     Text       #DCDFEA  → --c-on-dark-muted, --c-line
                           Text on DARK surfaces only: 11.1:1 on #1E205D, but 1.21:1
                           on the light page background — light pages read #1E205D.
     Secondary  #F96142  → --c-live  (LIVE / Breaking, nothing else)

   Everything else here is a tint or shade of those four, kept so the sections can
   carry their own hue. Red is reserved for LIVE / Breaking. Sections are hues of blue (sport included).
   Customizer may override --c-primary / --c-link / --c-live inline.
   ========================================================================== */
:root{
  /* surfaces — light mode */
  --c-bg:#F3F4F9;--c-card:#FFFFFF;--c-raised:#E9EBF4;--c-line:#DCDFEA;--c-line-2:#C8CCDE;--c-footer:#E9EBF4;--c-player:#14163E;--c-dark:#1E205D;
  /* brand & action */
  --c-primary:#4145C5;--c-link:#4145C5;--c-link-hover:#1E205D;--c-primary-dark:#1E205D;--c-primary-light:#6A6FDD;--c-live:#F96142;
  --c-primary-soft:rgba(65,69,197,.10);--c-primary-soft-2:rgba(65,69,197,.16);--c-live-soft-bg:rgba(249,97,66,.10);--c-shadow:0 10px 30px rgba(30,32,93,.08);--c-shadow-lg:0 24px 60px rgba(30,32,93,.16);
  /* sections */
  --c-lajme:#4145C5;--c-sport:#3C40B3;--c-emisione:#575CD4;--c-seriale:#575CD4;--c-seriale-soft:#6A6FDD;--c-video:#575CD4;--c-dosje:#4145C5;--c-emisione-soft:#575CD4;--c-live-soft:#F96142;
  /* text */
  --c-text:#1E205D;--c-body:#2B3A5A;--c-muted:#5A5E8A;--c-muted-2:#9FA3C9;--c-prose:#2A2D66;--c-lead:#4A4E7E;--c-dot:#C8CCDE;
  /* text on dark media overlays (player, hero images) */
  --c-on-dark:#F4F5F9;--c-on-dark-muted:#DCDFEA;
  /* type */
  --ff-display:'Roboto',system-ui,Arial,sans-serif;--ff-ui:'Roboto',system-ui,Arial,sans-serif;--ff-serif:'Roboto',system-ui,Arial,sans-serif;
  /* labels, times and scores use the condensed cut — the broadcast voice of the brand */
  --ff-cond:'Roboto Condensed','Roboto',system-ui,Arial,sans-serif;
  --track-label:.14em;--track-pill:.1em;--track-tight:-.02em;--track-tighter:-.035em;
  /* type scale — six steps; every hero/page/section title reads one of these */
  --fs-display-xl:clamp(38px,5vw,62px);--fs-display-lg:clamp(32px,4.2vw,50px);--fs-display-md:clamp(28px,3.4vw,40px);
  --fs-h1:clamp(24px,2.6vw,30px);--fs-h2:20px;--fs-h3:18px;
  /* shape */
  --r-xs:6px;--r-sm:8px;--r-md:10px;--r-card:14px;--r-lg:18px;--r-xl:22px;--r-pill:999px;
  /* one scrim system for every image overlay */
  --scrim-b:linear-gradient(0deg,rgba(20,22,62,.94) 0%,rgba(20,22,62,.55) 45%,rgba(20,22,62,.05) 82%);
  --scrim-b-soft:linear-gradient(0deg,rgba(20,22,62,.85),rgba(20,22,62,.22) 55%,transparent 88%);
  --scrim-cap:linear-gradient(0deg,rgba(20,22,62,.95),rgba(20,22,62,.35) 60%,transparent);
  --scrim-x:linear-gradient(90deg,rgba(20,22,62,.94) 0%,rgba(20,22,62,.6) 48%,rgba(20,22,62,.3) 82%,rgba(20,22,62,.45) 100%);
  --scrim-top:var(--scrim-top);
  --wash:linear-gradient(180deg,rgba(65,69,197,.14),rgba(20,22,62,.05));
  /* The card carries the programme's own artwork, so the top stays open enough to see it behind the
   title, and the panel goes solid from the point the up-next list begins — reading a schedule over
   a picture is where legibility was actually being lost. */
	--scrim-card:linear-gradient(180deg,rgba(20,22,62,.42) 0%,rgba(20,22,62,.72) 22%,rgba(20,22,62,.94) 44%,var(--c-player) 62%);
  --container:1440px;--gutter:64px;--band:72px; /* content 1312px at 1440 wide, 1152px on a 1280 laptop (was 1120 max) */
  /* Bootstrap bridge (components we still use: collapse) */
  --bs-body-bg:var(--c-bg);--bs-body-color:var(--c-text);--bs-border-color:var(--c-line);--bs-link-color:var(--c-link);--bs-link-hover-color:var(--c-link-hover);
  --bs-primary:var(--c-primary);--bs-danger:var(--c-live);--bs-body-font-family:var(--ff-ui);--bs-border-radius:var(--r-md);
}
@media (max-width:991.98px){:root{--gutter:16px;--band:48px}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}
body{overflow-x:clip}
body{margin:0;background:var(--c-bg);color:var(--c-text);font-family:var(--ff-ui);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,h5,h6{font-family:var(--ff-display);margin:0;letter-spacing:-.02em;font-weight:700;line-height:1.2}
p{margin:0}
a{color:var(--c-link);text-decoration:none}a:hover{color:var(--c-link-hover)}
img{display:block;max-width:100%;height:auto}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--c-primary);outline-offset:2px}
/* the same ring reads white wherever the surface is dark */
.band--dark :focus-visible,.band--blue :focus-visible,.player :focus-visible,.site-footer :focus-visible,.topbar :focus-visible,.utility :focus-visible,.breaking :focus-visible,.shero :focus-visible,.chero :focus-visible,.phero :focus-visible,.hslide :focus-visible,.swall :focus-visible,.sportp-hero :focus-visible{outline-color:#fff}
::selection{background:var(--c-primary);color:#fff}
.visually-hidden-focusable:not(:focus):not(:focus-within){position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important}
.skip-link{position:absolute;top:8px;left:8px;z-index:3000;background:var(--c-primary);color:#fff;padding:10px 16px;border-radius:var(--r-sm)}

/* --- primitives (names follow the canvas) --- */
.kick{font:700 11px/1 var(--ff-cond);letter-spacing:var(--track-label);text-transform:uppercase}
/* numerals in times, scores and counters: condensed + tabular so columns line up */
.num,.next__tm,.latest__tm,.desk__tm,.tb-tm,.tl-hour span,.player__time,.sw-nav__frac,
.mostread__n,.day-btn .dnum,.day b,.day small,.gn-pb+.gn-rem,.lrow__meta{
  font-family:var(--ff-cond);font-variant-numeric:tabular-nums}
.mu{color:var(--c-muted);font-size:13px}
.card{display:block;background:var(--c-card);border:1px solid var(--c-line);border-radius:var(--r-card);overflow:hidden;color:inherit;box-shadow:0 1px 2px rgba(30,32,93,.04)}
a.card{transition:transform .18s,box-shadow .18s,border-color .18s}
a.card:hover{transform:translateY(-2px);box-shadow:var(--c-shadow);border-color:var(--c-line-2)}
.card--row{display:flex;flex-direction:row}
.card--pad{padding:20px}
.ph{background:linear-gradient(135deg,#D8DBEA,#C8CCDE 60%,#E5E7F3);position:relative;overflow:hidden}
.ph--dark{background:linear-gradient(135deg,#26296B,#1B1D52 60%,#1E205D)}
.ph>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
:where(.ph)>img~*{position:relative;z-index:2}
.tick{width:4px;height:22px;border-radius:2px;display:block;background:var(--c-lajme);flex:none}
.dot{width:7px;height:7px;border-radius:50%;background:currentColor;display:inline-block;flex:none}
.sep{width:4px;height:4px;border-radius:50%;background:var(--c-dot);display:inline-block;flex:none}
.serif{font-family:var(--ff-serif);color:var(--c-body)}

/* buttons / chips / tags */
.btn-primary,.btn-ghost,.btn-live,.chip,.tag:not(body),.pill{display:inline-flex;align-items:center;justify-content:center;gap:7px;white-space:nowrap;font-family:var(--ff-ui);line-height:1;cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.btn-primary{background:var(--c-primary);color:#fff;padding:12px 20px;border-radius:var(--r-md);font-weight:700;font-size:14px}
.btn-primary:hover{background:#6A6FDD;color:#fff}
.btn-ghost{border:1px solid var(--c-line-2);background:var(--c-card);color:var(--c-body);padding:12px 20px;border-radius:var(--r-md);font-weight:600;font-size:14px}
.btn-ghost:hover{border-color:var(--c-link);color:var(--c-text)}
.btn-live{background:linear-gradient(135deg,#DD4E31,var(--c-live));color:#fff;padding:8px 14px;border-radius:var(--r-pill);font:700 12px/1 var(--ff-display);letter-spacing:.1em}
.btn-live:hover{background:#F96142;color:#fff}
.btn-live .dot{background:#fff;animation:pulse 1.4s infinite}
.chip{border:1px solid var(--c-line-2);background:var(--c-card);color:var(--c-body);padding:8px 14px;border-radius:var(--r-pill);font-weight:600;font-size:13px}
.chip:hover{border-color:var(--c-link);color:var(--c-text)}
.chip.is-active{background:var(--c-primary);border-color:var(--c-primary);color:#fff;font-weight:700}
.chip--sm{padding:5px 10px;font-size:11px;color:var(--c-muted)}
.chip--sq{border-radius:var(--r-sm);padding:7px 13px}
.chip.is-on{border-color:var(--c-link);color:var(--c-link)}
/* :not(body) — WordPress gives a tag archive's <body> the class "tag" too (DECISIONS #172) */
.tag:not(body){background:var(--c-primary-soft);color:var(--c-link);padding:8px 13px;border-radius:var(--r-pill);font-weight:600;font-size:13px}
.tag:not(body):hover{background:var(--c-primary-soft-2);color:#fff}
.pill{border-radius:var(--r-pill);padding:4px 8px;font:700 10.5px/1 var(--ff-cond);letter-spacing:var(--track-pill);text-transform:uppercase}
.pill--live{background:rgba(249,97,66,.10);border:1px solid rgba(249,97,66,.45);color:var(--c-live-soft)}
.pill--live .dot{background:var(--c-live)}
.pill--new{background:var(--c-primary);color:#fff;border-radius:var(--r-xs);padding:3px 7px;font-size:9px}
.badge-breaking{background:var(--c-live);padding:5px 10px;border-radius:var(--r-xs,6px);font:700 11px/1 var(--ff-cond);letter-spacing:.1em;color:#fff;text-transform:uppercase}

/* overlays inside .ph */
.ph .play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;background:rgba(65,69,197,.92);display:flex;align-items:center;justify-content:center;z-index:2;color:#fff}
.ph .play svg{width:16px;height:16px}
.ph .dur{position:absolute;right:8px;bottom:8px;background:rgba(30,32,93,.85);padding:3px 7px;border-radius:var(--r-xs);font:600 11px/1 var(--ff-ui);z-index:2;color:#fff}

/* progress bar */
.prog{display:block;height:4px;background:var(--c-line);border-radius:2px;overflow:hidden}
.prog>span{display:block;height:100%;background:var(--c-live);border-radius:2px;width:0;transition:width .4s}
.prog--primary>span{background:var(--c-primary)}

@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}html{scroll-behavior:auto}}

/* ===== Section breaks (blue) ===== */
/* The rule between two bands.
   Every section title already carries a 4×22 rounded tick in its own colour; this is the same
   shape lying down, so the divider belongs to that system instead of being the full-width coloured
   bar every site draws. The hairline carries the width, the tick carries the colour — and the
   colour is read from the heading underneath with :has(), so a sport band divides in sport red
   without a single template knowing about it. */
.band{position:relative}
/* The break between bands (user, 13 Sep 2026): a coral signal — one long bar, one short echo —
   on a hairline that fades away to the right. The secondary colour marks every break, light or
   dark band alike; the section hue stays in the heading tick underneath. */
.band::before,.band::after{content:"";position:absolute;top:calc(-1 * var(--band) / 2);pointer-events:none}
.band::before{left:0;right:0;height:1px;background:linear-gradient(90deg,transparent 0,transparent 112px,var(--c-line-2) 124px,var(--c-line-2) 30%,var(--c-line) 55%,transparent 82%)}
.band::after{left:0;width:44px;height:5px;margin-top:-2px;border-radius:3px;background:var(--c-live);transform:skewX(-24deg);transform-origin:left center;box-shadow:52px 0 0 -1px rgba(249,97,66,.45)}
.band--dark::before,.band--blue::before{background:linear-gradient(90deg,transparent 0,transparent 112px,rgba(220,223,234,.5) 124px,rgba(220,223,234,.35) 30%,rgba(220,223,234,.18) 55%,transparent 82%)}
.band--first::before,.band--first::after,.band--nobrk::before,.band--nobrk::after{display:none}

/* ===== Preloader (brand veil; JS fades it on load, CSS fallback removes it without JS) ===== */
.preloader{position:fixed;inset:0;z-index:2000;display:grid;place-items:center;background:radial-gradient(120% 120% at 20% 10%,#4145C5 0%,#1E205D 62%,#14163E 100%);animation:preload-kill .4s ease 3.4s forwards}
.preloader.is-done{opacity:0;visibility:hidden;transition:opacity .45s ease,visibility 0s .45s;animation:none}
.preloader__box{position:relative;display:flex;flex-direction:column;align-items:center;gap:26px}
/* the V and the plus are two shapes in the artwork, so the plus can wait on its own */
.preloader__mark{position:relative;display:block;width:118px;aspect-ratio:400/354;filter:drop-shadow(0 8px 26px rgba(20,22,62,.5))}
.preloader__mark img{position:absolute;inset:0;width:100%;height:auto;display:block}
.preloader__v{animation:preload-in .7s cubic-bezier(.2,.7,.3,1) both}
.preloader__plus{transform-origin:76% 21.5%;animation:preload-plus 1.9s cubic-bezier(.34,1.32,.5,1) infinite}
.preloader__track{display:block;width:150px;height:2px;border-radius:2px;background:rgba(220,223,234,.18);overflow:hidden}
.preloader__track i{display:block;width:40%;height:100%;border-radius:2px;background:linear-gradient(90deg,transparent,#DCDFEA,transparent);animation:preload-sweep 1.4s ease-in-out infinite}
@keyframes preload-in{from{opacity:0;transform:translateY(10px) scale(.94)}to{opacity:1;transform:none}}
/* the mark spends most of the loop whole; the plus leaves late and lands early */
@keyframes preload-plus{0%{opacity:0;transform:translate(14%,-22%) scale(.4)}28%{opacity:1;transform:translate(0,0) scale(1.1)}38%,90%{transform:none;opacity:1}100%{opacity:0;transform:translate(14%,-22%) scale(.4)}}
@keyframes preload-sweep{0%{transform:translateX(-110%)}100%{transform:translateX(310%)}}
@keyframes preload-kill{to{opacity:0;visibility:hidden}}


/* ===== Swipe rows: pill / result strips drag horizontally (modules/dragrow.js) ===== */
.chips,.days-epg,.fixtures,.guide__filters,.days,.hero-thumbs{
  scrollbar-width:none;-ms-overflow-style:none;overscroll-behavior-x:contain}
.chips::-webkit-scrollbar,.days-epg::-webkit-scrollbar,.fixtures::-webkit-scrollbar,
.guide__filters::-webkit-scrollbar,.days::-webkit-scrollbar{display:none;height:0}
.chips.is-scrollable,.days-epg.is-scrollable,.fixtures.is-scrollable,
.guide__filters.is-scrollable,.days.is-scrollable{cursor:grab}
.is-dragging{cursor:grabbing!important;scroll-snap-type:none!important;user-select:none}
.is-dragging *{pointer-events:none}
/* the fade only shows on the side that still has content */
.chips.is-scrollable:not(.at-end),.days-epg.is-scrollable:not(.at-end),
.fixtures.is-scrollable:not(.at-end),.days.is-scrollable:not(.at-end){
  mask-image:linear-gradient(90deg,#000 88%,rgba(0,0,0,.15));
  -webkit-mask-image:linear-gradient(90deg,#000 88%,rgba(0,0,0,.15))}
@media (max-width:991.98px){
  .chips,.days-epg,.fixtures,.guide__filters,.days{
    display:flex;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;
    touch-action:pan-x;-webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;scroll-padding-inline:16px;padding-bottom:4px}
  .chips>*,.days-epg>*,.fixtures>*,.guide__filters>*,.days>*{flex:0 0 auto;scroll-snap-align:start}
  /* comfortable touch targets on the strips */
  .chips .chip{min-height:40px;display:inline-flex;align-items:center}
  .day-btn{min-height:44px}
}

/* ===== Content standards (DECISIONS #51) =====
   One rule set keeps every title inside its box: card/list titles clamp to 2 lines,
   display titles to 3, tight single-line contexts ellipsize. Pair with vp_excerpt()
   (22 words lead · 16 cards · 14 opinion) and the image registry in inc/setup.php. */
.ncard__t,.kcard__t,.hcard__t,.scard__t,.mcard__t,.ocard__t,.lrow__t,.wcard__t,.mega__t,
.latest__t,.next__nm,.mostread__row span,.desk__rt,.desk__opt,.opinion-card__t,
.vcard__t,.poster__t,.vcard-v__t,.grow__t,.wk__t,.avideo__t{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lead__t,.desk__t,.hslide__t,.swall__t,.onair--hero .onair__title,.lb__t{
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.gn-t b,.fxt__match b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* media boxes never distort: every registered crop pairs with a fixed ratio + cover */
.ncard__media,.desk__media,.kcard__media,.lead__media,.hcard__media,.lrow__media,
.scard__media,.wcard__media{overflow:hidden}
.ncard__media img,.desk__media img,.kcard__media img,.hcard__media img,.scard__media img{object-fit:cover;width:100%;height:100%}