/* ==========================================================================
   v12-sections.css — Hot Right Now, Recommendations, For You, Daily Picks
   ========================================================================== */

/* ===== SHARED SECTION TITLE ===== */
.section-title {
  font-size: var(--fs-xl);   /* 20px — snap na token škálu (dřív 19px off-scale) */
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.2px;
  line-height: 1.2;
  margin: 0 0 var(--sp-3);
  min-height: 28px;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  position: relative;
  padding-left: 14px;
  text-transform: capitalize;
}
.section-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 0.95em;          /* škáluje s velikostí písma → H1(25px)≈24px, H2(20px)≈19px */
  background: var(--accent);
  border-radius: 2px;
  flex-shrink: 0;
}
.section-title.has-flame::before {
  display: none;
}
.section-title.has-flame {
  padding-left: 0;
}
/* Homepage-bottom sekce (Articles/Newest/Actors/Tags) používají sdílený .shorts-subhead + h2 label;
   ikona v labelu nese .hb-title-ico (šedá jako horní eyebrow ikony). */
.hb-title-ico { color: #bbbbbb; flex-shrink: 0; }
/* Textový "view all" odkaz se šipkou — žádný pill (bez rámečku/pozadí). */
.section-view-all {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 0;
  border: none;
  background: none;
  color: var(--text-secondary);   /* sekundární (tlumenější než nadpis) → vedle titulku nesplývá */
  font-size: 12px;   /* 13→12 (2026-07-08): vedle nadpisů působila 13 příliš velká; filter (.new-sort-label) zůstává 13 — je to primární control */
  font-weight: 400;  /* = .new-sort-label — jednotná váha tichého textu v řádcích nadpisů; dotted underline má jen filter (signál dropdownu) */
  line-height: 1;   /* utáhnout box → text sedí na baseline vedle nadpisu, neplave */
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  margin-left: 0;
}
/* svg jako block → bez inline baseline mezery, ikona sedí na ose textu */
.section-view-all svg { flex-shrink: 0; display: block; }
/* Button nesmí dědit text-transform:capitalize z .section-title (For You header) → konzistentní malé písmo */
.section-title .section-view-all { text-transform: none; }
@media (hover: hover) {
  .section-view-all:hover { color: #fff; }
}
/* V subhead řádku (Shorts + spodní sekce): view-all hned vedle labelu (4 + gap 8 = 12px odstup).
   Pravé zarovnání (margin auto) zkoušeno 2x a definitivně vráceno 2026-07-06 — na širokém
   monitoru (container 2040) akce ztrácí vazbu na nadpis.
   (Chip varianta --chip smazána 2026-07-06 — trvalý border byl starý glass jazyk, view-all je čistý text.) */
.shorts-subhead .section-view-all { margin-left: 4px; }

/* H1 modifier — slightly larger, no bottom margin (lives inside flex row) */
.section-title--h1 {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 0;
  min-height: 0; /* H1 v top baru nepotřebuje min-výšku → žádné mrtvé místo pod textem (hlavně mobil) */
  padding-left: 0; /* H1 bez svislé accent čárky (::before) — není v mockupu */
}
.section-title--h1::before { display: none; }
/* Mezistupeň H1: 24 (≥1250) → 23 (768–1249) → 20 (mobil, řeší mobilní blok) */
@media (min-width: 768px) and (max-width: 1249.98px) {
  .section-title--h1 { font-size: 23px; }
}
/* (.section-title--gap SMAZÁN 2026-07-10 — mrtvý kód, žádné použití v PHP ani JS.) */
.flame-title-ico {
  flex-shrink: 0;
  margin-right: -2px;
}
/* Hot-section country flag — circular, clickable (opens GTranslate popup) */
.hot-flag-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  text-decoration: none;
  border-radius: 50%;
  overflow: hidden;
  border: 1.5px solid var(--border-strong);
}
.hot-flag-img {
  width: 18px;
  height: 18px;
  object-fit: cover;
}
/* ===== HOT RIGHT NOW ===== */
/*
 * Z-index stack (sequential, no gaps) — platí pro STARÉ .hot-card karty (Newest pás .hb-newest-scroll).
 * HOT sekce dnes renderuje .new-vcard (loop-video) — ring je tam .thumb::after (z-5), ne ::before.
 *   1 — gradient overlay (::after)
 *   2 — info, duration, badge (visual overlays, no interaction)
 *   3 — stretched link (covers entire card, handles clicks)
 *   4 — video preview (trailer, pointer-events: none always)
 *   5 — cinematic ring (::before, above trailer so border stays visible)
 *   5 — progress bar (pointer-events: none)
 *   6 — playlist button (only interactive element above link)
 *   8 — loading spinner (::before on card)
 */

.hot-section {
  padding: 30px 0 0;   /* rytmus sekcí 28→30 (2026-07-06, jednotně všude) */
}
.hot-scroll-wrap {
  position: relative;
}
.hot-scroll {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
  overscroll-behavior-x: contain;
  will-change: scroll-position;
  contain: content;
}
.hot-scroll::-webkit-scrollbar { display: none; }

/* Card container */
.hot-card {
  flex: 0 0 250px; /* Hot teaser base (desktop/tablet) — sdíleno s Newest pásem */
  scroll-snap-align: start;
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  contain: layout paint;
  aspect-ratio: 16/9; /* ratio drží karta (jako .for-you-thumb) → obrázek vyplní 1:1, brání iOS sub-pixel škvíře na spodku */
}
/* ===== HOT sekce — desktop/tablet = horizontální teaser rail (scroll); mobil = mřížka bez scrollu =====
   Base .hot-scroll (flex scroll) platí na desktopu/tabletu; grid se aplikuje až na mobilu.
   Karty v railu mají šířku sloupce hlavního gridu (≥1550 = 6 · 1250–1549 = 5 · 1000–1249 = 4 · 600–999 = 3 sl.) přes calc().
   Přepínač rail↔grid posunut 768 → 600 (2026-07-10, Jan) — zrcadlí žebřík hlavního gridu (custom.css). */
.hot-section .hot-scroll > .new-vcard {
  flex: 0 0 calc((100% - 5 * 8px) / 6);   /* = šířka sloupce v 6-col gridu (col gap 8px) → 6 karet vidět, zbytek scroll */
  scroll-snap-align: start;
}
/* (Grid toggle odstraněn 2026-07-06 — data-cols/data-dcols zrcadlení railu smazáno, šířky řídí breakpointy.) */
/* 1250–1549 = hlavní grid má 5 sloupců → rail karta = 1/5 šířky. */
@media (min-width: 1250px) and (max-width: 1549.98px) {
  .hot-section .hot-scroll > .new-vcard { flex-basis: calc((100% - 4 * 8px) / 5); }
}
/* 1000–1249 = hlavní grid má 4 sloupce → rail karta = 1/4 šířky. */
@media (min-width: 1000px) and (max-width: 1249.98px) {
  .hot-section .hot-scroll > .new-vcard { flex-basis: calc((100% - 3 * 8px) / 4); }
}
/* 600–999 = hlavní grid má 3 sloupce → rail karta = 1/3 šířky (gap 8 z base — mobilní gap 6 platí až ≤599). */
@media (min-width: 600px) and (max-width: 999.98px) {
  .hot-section .hot-scroll > .new-vcard { flex-basis: calc((100% - 2 * 8px) / 3); }
}
/* Desktop/tablet Hot rail = "teaser" karty (starý HOT look): titulek přes thumb + tmavý gradient,
   meta skrytá. Duration zůstává NAD gradientem (z-3 > gradient z-2). Ring = .thumb::after (už existuje).
   Mobil (<600) = standardní karta (titulek + meta pod thumbem) — viz blok níže. */
@media (min-width: 600px) {
  .hot-section .new-vcard .infos {
    position: absolute;
    inset: auto 0 0 0;        /* spodní pruh přes thumb */
    z-index: 2;               /* nad img/gradient, POD duration(3)/link(3)/trailer(4) → title je pod duration i pod trailerem */
    padding: 28px 48px 9px 10px;  /* nahoře prostor pro fade; vpravo místo pro duration badge */
    background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.78) 75%);
    pointer-events: none;     /* klik řeší stretched .hot-card-link (z-3 nad gradientem) */
  }
  .hot-section .new-vcard .infos .title {
    min-height: 0;            /* zrušit 38px rezervu → block obtáhne text */
    color: #fff;
    text-shadow: 0 1px 4px rgba(0,0,0,0.5);
    transition: opacity 0.1s;
  }
  .hot-section .new-vcard .video-datas { display: none; }
  .hot-section .new-vcard .tagiconclass { display: none; }   /* vlajky/tag ikony skryté na desktopu (jako meta) */
}
/* Hover (desktop): titulek zmizí → čistý trailer. Duration/badge už skrývá base .new-vcard:hover (video-card.css). */
@media (hover: hover) and (min-width: 600px) {
  .hot-section .new-vcard:hover .infos .title { opacity: 0; }
}

/* Mobil (≤599.98) = mřížka 2 sloupce BEZ scrollu: lead full-width + lead+6. */
@media (max-width: 599.98px) {
  .hot-section .hot-scroll {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    overflow: visible;
    scroll-snap-type: none;
    contain: none;                 /* zruší base .hot-scroll contain:content (scroll verze) */
    will-change: auto;             /* grid mód → žádný scroll → zrušit zbytečnou compositor vrstvu z base .hot-scroll */
  }
  .hot-section .hot-scroll > .new-vcard {
    flex: none;                    /* grid item (1fr) — žádná flex-basis ze scroll verze */
    scroll-snap-align: none;
  }
  .hot-section .hot-scroll > .new-vcard:nth-child(n+8) { display: none; }       /* lead + 6 */
  /* Grid mód nescrolluje → fade/šipky scroll systému sem nepatří (pojistka proti
     zastaralému .is-visible stavu např. po resize přes breakpoint). */
  .hot-section .hot-scroll-wrap .scroll-fade,
  .hot-section .hot-scroll-wrap .scroll-btn { display: none; }
}

/* === HOT LEAD (1.85:1 overlay) — fáze 2 (mockup 06B, Jan 2026-07-09) ===
   Lead = širokoúhlý crop (žebřík 21:9 → 2:1 → 1.85:1, Jan postupně „lehce zvětšit výšku";
   pořád nižší než 16:9) s titulkem a meta V thumbu — mobilní port
   desktopového teaser vzoru výše (@min-width:768px: .infos absolute + gradient 0.78).
   Infos jsou overlay → karta nemá text pod thumbem, sekce je kratší.
   JEN 2sloupcový režim (≥340px): hero vzhled dává smysl, když je lead větší než karty pod ním.
   Pod 340px (1 sloupec, viz níž) jsou všechny karty full-width → lead se ukazuje normálně
   (title pod thumbem, 16:9) jako ostatní (Jan 2026-07-09). */
@media (min-width: 340px) and (max-width: 599.98px) {
  /* Karta + thumb */
  .hot-section .hot-scroll > .new-vcard:first-child {
    grid-column: 1 / -1;           /* lead přes celou šířku */
    margin-bottom: 8px;            /* hero se nadechne od mřížky malých karet (celkem 10 gap + 8 = 18) */
  }
  .hot-section .hot-scroll > .new-vcard:first-child .thumb { aspect-ratio: 1.85 / 1; }
  .hot-section .hot-scroll > .new-vcard:first-child .thumb img { object-position: 50% 30%; } /* crop drží horní třetinu — proti uříznutým hlavám */
  .hot-section .hot-scroll > .new-vcard:first-child .tagiconclass { display: none; } /* vlaječky dole vlevo kolidují s overlay textem — skrýt (Jan 2026-07-09; desktop teaser je skrývá taky) */

  /* Overlay s textem */
  .hot-section .hot-scroll > .new-vcard:first-child .infos {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    z-index: 2;
    padding: 26px 48px 9px 10px;   /* right 48 = místo pro duration badge (shodné s desktop teaserem) */
    pointer-events: none;           /* klik řeší stretched link karty (jako desktop teaser) */
    background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.78) 75%);
  }
  .hot-section .hot-scroll > .new-vcard:first-child .infos a.title,
  .hot-section .hot-scroll > .new-vcard:first-child .infos a.title-link {
    font-size: 15px;
    font-weight: 600;
    min-height: 0;
    line-height: 1.35;
    color: #fff;
    text-shadow: 0 1px 4px rgba(0,0,0,0.5);
  }

  /* Meta řádek: ▶ views · kategorie/herečka — vše v barvě řádku (0.85) */
  .hot-section .hot-scroll > .new-vcard:first-child .video-datas {
    margin-top: 4px;
    font-size: 12px;
    gap: 8px;
    line-height: 1.4;
    color: rgba(255,255,255,0.85);
  }
  /* Play CTA — bílý trojúhelník jako první položka meta řádku (mockup
     2026-07-10_hot-lead-play-cta.html varianta C). Pseudo-element na .video-datas (flex)
     = flex item, gap řádku ho odsadí sám; žádný DOM navíc mimo hero režim. */
  .hot-section .hot-scroll > .new-vcard:first-child .video-datas::before {
    content: "";
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") no-repeat center / contain;
  }
  /* Kategorie/herečka dědí šedou ze základní karty (meta pod thumbem na tmavé ploše) —
     přes fotku s gradientem ztrácí kontrast → sjednotit s barvou řádku. Pozor: barvu nese
     nejen .vcard-cast, ale i vnitřní __ico/__name (#999) a __more (#555). */
  .hot-section .hot-scroll > .new-vcard:first-child .video-datas .vcard-cast,
  .hot-section .hot-scroll > .new-vcard:first-child .video-datas .vcard-cast__ico,
  .hot-section .hot-scroll > .new-vcard:first-child .video-datas .vcard-cast__name,
  .hot-section .hot-scroll > .new-vcard:first-child .video-datas .vcard-cast__more {
    color: inherit;
  }
}
/* === konec HOT LEAD bloku === */
/* (FÁZE 3 hero za pillami zkoušen a smazán 2026-07-09 — viz change-log; UX verdikt: banner-blindness
   slot, #1 mimo sekci, mrtvý DOM. Kdyby se koncept vracel, jedině přes A/B test CTR.) */

/* Velmi malé mobily (<340): 2 karty vedle sebe už jsou moc těsné → hero-grid přechází na 1 sloupec
   (zrcadlí žebřík hlavního gridu v custom.css). Lead tu NEMÁ hero overlay (blok výše je ≥340px)
   → ukazuje se jako běžná karta: 16:9, title pod thumbem, typografie z video-card.css. Jan 2026-07-09. */
@media (max-width: 339.98px) {
  .hot-section .hot-scroll { grid-template-columns: 1fr; }
}


/* Thumbnail */
.hot-card-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--kot-gradient-card);
}

/* Cinematic inset ring */
.hot-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: var(--kot-ring-inset);
  pointer-events: none;
  z-index: 5;
}

/* Gradient overlay — bottom half only for title readability */
.hot-card::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: calc(50% + 1px);
  /* žádný vlastní border-radius — karta klipuje přes overflow:hidden;
     bottom:-1px + výška navíc = subpixel pojistka proti 1px sliveru dole */
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.75) 100%);
  pointer-events: none;
  z-index: 1;
}

/* Duration badge — bottom right (matched to .new-vcard .duration) */
.hot-card-duration {
  position: absolute;
  bottom: var(--sp-2, 8px);
  right: var(--sp-2, 8px);
  z-index: 2;
  background: rgba(0,0,0,0.85);
  color: var(--text-primary); /* #eee → e3 (P7 2026-07-11): sjednocení světlých šedých na token */
  font-size: 11px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: var(--radius-sm); /* 5→6 (P9 2026-07-11): sjednocení s thumb badge */
  pointer-events: none;
  font-variant-numeric: tabular-nums;
  transition: opacity 0.1s;
}

.hot-card-title {
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.3;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
  padding-right: 50px;
  transition: opacity 0.1s;
}

/* Stretched link — entire card is clickable; also hosts the title anchored to bottom */
.hot-card-link {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--sp-6) var(--sp-3) var(--sp-3);
  color: inherit;
  text-decoration: none;
}

/* Play CTA — injected by JS after trailer plays */
.hot-play-cta {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 55px;
  height: 55px;
  background: rgba(255,255,255,0.9);
  border: none;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0,0,0,0.35);
  color: #121212;
  font-size: 21px;
  line-height: 55px;
  text-align: center;
  padding-left: 4px;
  z-index: 7;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.85);
  opacity: 0;
  animation: playCta 0.35s ease forwards;
}
@keyframes playCta {
  to { opacity: 0.85; transform: translate(-50%, -50%) scale(1); }
}

/* Video preview — purely visual, never captures clicks */
.hot-card .video-preview {
  position: absolute;
  inset: 0;
  z-index: 4;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.1s ease;
}
.hot-card .video-preview video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hot-card.trailer-playing .video-preview {
  opacity: 1;
}

/* Progress bar — visible only when trailer plays */
.hot-card-preview {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 5;
  background: rgba(0,0,0,0.3);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.1s;
}
.hot-card-preview .bar-fill {
  height: 100%;
  width: 0; /* width driven by JS: video.currentTime / video.duration */
  background: #fff;
  border-radius: 0 2px 2px 0;
}
.hot-card.trailer-playing .hot-card-preview { opacity: 1; }


/* Playlist button — only element above the link */
.hot-card-playlist {
  position: absolute;
  z-index: 6;
  right: 6px;
  top: 6px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(30,30,30,0.6);
  border: 1px solid rgba(0,0,0,0.2);
  color: rgba(255,255,255,0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.1s, transform 0.1s, background 0.1s;
}
.hot-card-playlist svg {
  display: block;
}
.hot-card-playlist.in-playlist {
  color: rgba(255,255,255,0.35);
}

/* Hover effects — desktop only */
@media (hover: hover) {
  .hot-card:hover .hot-card-playlist {
    opacity: 1;
    transform: scale(1);
  }
  .hot-card-playlist:not(.in-playlist):hover {
    background: #e6e6e6;
    border-color: #e6e6e6;
    color: #121212;
  }
  .hot-card:hover .thumb-badge,
  .hot-card:hover .hot-card-duration,
  .hot-card:hover .hot-card-title {
    opacity: 0;
  }
}

/* ===== FOR YOU (Shorts) ===== */
/* Vertikální rytmus vrchní části: Hot + Shorts = jeden těsný cluster railů
   (label s hairline linkou je sám o sobě oddělovač → stačí 8px), velký předěl
   24px až před H1 top-barem (zlom discovery → mřížka). */
.for-you-section {
  padding: 30px 0 0;      /* 30 nad (rytmus sekcí 28→30, 2026-07-06); 0 pod — předěl Shorts→H1 vlastní padding-top .new-top-bar (30, custom.css); tier 900–1549 těsněji (viz media blok níže) */
  margin-bottom: 0;
}
/* Pod-předěl „Shorts" — jemný uppercase label místo plného .section-title.
   Sdíleno s nadpisem „Now Trending" přes .hot-subhead → oba nadpisy vypadají stejně. */
.shorts-subhead {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 25px;   /* rezerva pro vlaječku jazyka (.hot-flag-btn 20px) → řádek neskáče mezi plamínkem (16) a vlaječkou (20) na překladu */
  margin: 0 0 12px;   /* mezera nadpis→karty (8→12, 2026-07-06 vzdušnější; mobil vrací 8 — vlastní rytmus) */
}
/* Now Trending — vlaječka jazyka hned za nadpisem (ne u kraje stránky). */
.hot-subhead .hot-flag-btn { flex-shrink: 0; }
.shorts-subhead-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;            /* mezera ikona→text (sjednoceno se spodními sekcemi) */
  margin: 0;            /* nadpis je <h2> → zrušit defaultní margin user-agenta */
  font-size: 15px;     /* 14→15 + 700 (2026-07-06): sekční nadpisy výraznější, jasnější hierarchie pod H1 */
  font-weight: 700;
  line-height: 1.2;    /* 1 → 1.2 (2026-07-10): při zalomení na 2 řádky (delší geo/přeložené titulky na mobilu)
                          se řádky s lh 1 dotýkaly; 1.2 = konvence nadpisů (.section-title), 1řádkový stav beze změny */
  color: var(--text-primary);
  white-space: nowrap;
}
/* Section eyebrow ikona — vede label, nese barvu sekce (flame = HOT s pulzem, shorts glyf = statický). */
.shorts-subhead-label .subhead-ico {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
/* HOT plamínek jemně „dýchá" (opacity blik — žádné scaling/kroužky). Reduced-motion vypne globální pravidlo v theme.css. */
.hot-subhead .subhead-ico     { color: #ff6b35; }  /* oranžová = live/hot */
.for-you-section .subhead-ico { color: #bbbbbb; }  /* shorts = světlejší šedá (blíž barvě labelu; accent jen u Hot = oranžová live). Accent varianta zkoušena 2026-07-02 → vráceno, šedá vypadala líp */
/* Stack (shorts) sjednocen na 16px se všemi subhead ikonami (fáze 1, mockup 03 — Jan 2026-07-09);
   dřívější 18px optická kompenzace „vzdušného" tvaru zrušena ve prospěch jednotného boxu. */
.for-you-section .subhead-ico--stack { width: 16px; height: 16px; }
/* Nadpis gridu = H1 + toggle (.new-top-bar, custom.css) — bývalý „Popular" H2 (.vloop-subhead)
   nahrazen přesunutým H1 (2026-07-06); CSS vloop smazáno. */
/* Rytmus ≤1549 (menší karty v gridu) → těsnější než desktop base 30.
   Platí až dolů vč. telefonu (2026-07-10, Jan): telefonní zhuštění 16/10/8 zrušeno — působilo
   naplácle; jednotný rytmus 25 na všech šířkách pod 1550 (= vzhled, který Jan chválil na 787).
   Blok MUSÍ být až za base pravidly .hot-section/.for-you-section (stejná specificita). */
@media (max-width: 1549.98px) {
  .hot-section { padding-top: 25px; }
  .for-you-section { padding-top: 25px; }
}

/* Hot eyebrow = stejný label jako ostatní sekce (15/700 z base .shorts-subhead-label);
   dřívější „decentní" override (14/500) odstraněn 2026-07-06 — Jan chce všechny sekční nadpisy 700.
   Rozlišení sekcí nese ikona (oranžový plamínek vs šedý glyf). */

.for-you-scroll {
  display: flex;
  align-items: flex-start;   /* shorty se NEroztahují na výšku banneru → thumbnail vždy vyplní kartu (text nezůstane mimo obrázek) */
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
  padding: 0 0 2px;           /* karty u kraje, zarovnané s nadpisem */
  will-change: scroll-position;
  contain: content;
}
.for-you-scroll::-webkit-scrollbar { display: none; }

/* Telefon (≤599): těsnější spáry karet — 2sloupcová mozaika snese 6px (Jan 2026-07-09).
   .hot-scroll pokrývá Hot hero-grid i Newest pás (sdílí třídu), .for-you-scroll = shorts rail.
   Hranice 768→600 (2026-07-10): v zóně 600–767 raily drží gap 8 (= sloupcový spár gridu, lícování).
   HOT hero-grid navíc řádkový gap 10 (fáze 1, mockup 03) — řádky karet se nelepí, sloupcový spár 6. */
@media (max-width: 599.98px) {
  .hot-scroll,
  .for-you-scroll { gap: var(--gap-scroll); }
  .hot-section .hot-scroll { gap: var(--gap-row) var(--gap-scroll); }
}

/* End-cap dlaždice „All shorts" — jasný konec railu (mizí pocit nekonečného scrollu).
   Není .video-block/.for-you-short → bez trailer logiky a mimo počítání karet. */
.for-you-endcap {
  flex: 0 0 135px;
  scroll-snap-align: start;
  aspect-ratio: 2/3;      /* = ratio thumbu shorts karet (.for-you-thumb) → endcap vždy stejně vysoký jako karty */
  padding: 10px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--radius-md);
  border: 1px dashed var(--border-strong);
  background: rgba(255,255,255,0.02);
  color: var(--text-body);
  text-decoration: none;
}
.for-you-endcap:hover {
  border-color: var(--accent);
  color: #fff;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.for-you-endcap-arrow {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 2px solid currentColor;
  display: flex;
  align-items: center;
  justify-content: center;
}
.for-you-endcap-label { font-size: 12px; font-weight: 600; }

.for-you-card {
  scroll-snap-align: start;
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;

  position: relative;
  display: block;
  text-decoration: none;
  color: inherit;
}
/* Shorts karty + endcap na desktopu = 140 (V3 „taboos" karta: jméno + popis + meta řádek potřebují šířku;
   override šířky z pluginu noso-shorts; mobil ≤767 řeší plugin).
   Vyšší specificita (.for-you-scroll …) → vyhraje bez ohledu na pořadí načtení; držíme v tématu (dev), plugin nesaháme. */
@media (min-width: 768px) {
  .for-you-scroll .for-you-short,
  .for-you-scroll .for-you-endcap { flex: 0 0 140px; }
}
/* (Grid toggle odstraněn 2026-07-06 — data-cols/data-dcols zvětšování shorts karet smazáno.) */
/* Tiery pod 1550: grid má 5/4/3 sloupců (menší video karty) → shorts karty adekvátně menší (140 → 130 → 120 → 110). */
@media (min-width: 1250px) and (max-width: 1549.98px) {
  .for-you-scroll .for-you-short,
  .for-you-scroll .for-you-endcap { flex-basis: 130px; }   /* 5 sl. */
}
@media (min-width: 1000px) and (max-width: 1249.98px) {
  .for-you-scroll .for-you-short,
  .for-you-scroll .for-you-endcap { flex-basis: 120px; }   /* 4 sl. */
}
@media (min-width: 768px) and (max-width: 999.98px) {
  .for-you-scroll .for-you-short,
  .for-you-scroll .for-you-endcap { flex-basis: 110px; }   /* 3 sl. */
}
/* Telefon <600 (Jan 2026-07-10): větší shorts karty — plugin tiery 112/100/92 (shorts-cards.css)
   přebíjí specificita (0,2,0). Žebřík 150/138/124 = ~2,4–2,9 karty na šířku, peek další karty zůstává.
   Zdroj thumbu 300×450 → i na 150px kartě 2× DPR ostrý. Zóna 600–767 drží 112 z pluginu. */
@media (max-width: 599.98px) {
  /* mandatory+center (2026-07-10): proximity+start nebylo na telefonu znát (stejná lekce jako strip pilly)
     → při scrollu vždy zaklapne karta na střed; desktop drží start+proximity (šipky stránkují) */
  .for-you-scroll { scroll-snap-type: x mandatory; }
  .for-you-scroll .for-you-short,
  .for-you-scroll .for-you-endcap { flex: 0 0 150px; scroll-snap-align: center; }
}
@media (max-width: 440px) {
  .for-you-scroll .for-you-short,
  .for-you-scroll .for-you-endcap { flex-basis: 138px; }
}
@media (max-width: 359px) {
  .for-you-scroll .for-you-short,
  .for-you-scroll .for-you-endcap { flex-basis: 124px; }
}

/* „All …" na telefonu = full-width tichý button pod sekcí (2026-07-10) — 38px tap v ose palce,
   přichází až po konzumaci sekce; drobný view-all (12px) v subheadu je na <600 redundantní → skrýt.
   Jednotný vzor .section-more pro všechny HP sekce (shorts/blog/newest/actors/tags — Jan 2026-07-10).
   Tichý styl záměrně: accent CTA na stránce = jen load-more, nekonkurovat. Desktop: view-all u nadpisu. */
.section-more { display: none; }
@media (max-width: 599.98px) {
  .shorts-subhead .section-view-all { display: none; }
  .section-more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 38px;      /* 40→38 (Jan 2026-07-10): 40 působilo mohutně */
    margin-top: 8px;
    border: 1px solid var(--border-medium);   /* Akční jazyk (Jan 2026-07-11): pill výplň splývala s obsahovými chipy
       (např. „All tags" vedle tag pilulek) → buttony = --bg-hover + medium border + text-primary,
       chipy = --bg-chip + hairline + text-active. Stejné patro jako .hb-blog-card-btn. */
    border-radius: var(--radius-md);
    background: var(--bg-hover);
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 500;  /* 600→500 (Jan 2026-07-10): tichý sekundární CTA, 600 jen pro primární/active */
    text-decoration: none;
  }
  .section-more svg { flex-shrink: 0; }
  /* Ghost varianta pro hb pás ZRUŠENA (Jan 2026-07-11): všechna .section-more jednotně
     ve stylu strip pillů (chip výplň + hairline z base pravidla výš) — dřívější verdikt
     „přeboxovaně" z 10. 7. přehodnocen. */
}

/* (Lead banner odstraněn — sekci nese H2 nadpis + tvar karet. CSS .for-you-lead / .fyl-* smazáno.) */

/* .for-you-short::before (ring) je definovaný v pluginu noso-shorts/css/shorts-cards.css — neduplikovat zde */
/* Cinematic inset ring kolem shortů (HD pocit) — stejný token jako video/hot karty (.new-vcard .thumb::after). */
.for-you-scroll .for-you-short::before { box-shadow: var(--kot-ring-inset); }
/* V2: 2:3 thumb (= asset 300×450, bez cropu). JEDINÝ zdroj aspect-ratio pro shorts karty —
   vyšší specificita (0,3,0) přebije plugin .for-you-short .for-you-thumb (9/13). Base .for-you-thumb už ratio NEnastavuje (bylo mrtvé). */
.for-you-scroll .for-you-short .for-you-thumb { aspect-ratio: 2/3; }
.for-you-thumb {
  position: relative;
  width: 100%;
  background: var(--kot-gradient-card);
  overflow: hidden;
}
.for-you-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.for-you-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--sp-2);
  z-index: 2;
  background: linear-gradient(transparent, rgba(0,0,0,0.85));
}
/* V3 „taboos" info blok: hutnější/vyšší gradient pro jméno + popis + meta řádek.
   Specificita (0,3,0) přebíjí plugin .for-you-short .for-you-info (gradient + padding-top 30px). */
.for-you-scroll .for-you-short .for-you-info {
  padding: 9px 8px 8px;
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.55) 35%, rgba(0,0,0,0.92) 100%);
}
/* Titulek = sekundární popis pod jménem (tlumený, 2 řádky) */
.for-you-card-title {
  font-size: 11px;
  font-weight: 400;
  color: rgba(255,255,255,0.72);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.35;
}
/* Jméno herečky — primární řádek karty (tučně, bez kroužku iniciály) */
.for-you-actor-name {
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  line-height: 1.25;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Meta řádek dole — views vlevo, likes vpravo */
.for-you-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 7px;
  font-size: 11px;
  color: rgba(255,255,255,0.78);
}
.for-you-meta span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.for-you-meta .kot-icon { flex-shrink: 0; } /* plná opacity — ikony 14px mají být čitelné jako text (2026-07-06) */


/* ===== TABLET (≤1023.98px) ===== */
/* Now Trending + Shorts dědí desktop — Hot 250px (desktop menší → víc katalogu; mobil má velké karty níž).
   Záměrně NEzmenšujeme Hot na tabletu: zmenšení 16:9 karty pod výšku 9:12 Shorts
   karty by Shorts opticky zvětšilo (porušení hierarchie). */

/* ===== VELKÝ MOBIL (≤767.98px) — jen UI vrstva (typografie, tap targety) ===== */
@media (max-width: 767.98px) {
  .section-title:not(.section-title--h1) { font-size: var(--fs-base); margin-bottom: var(--sp-2); } /* H2 nadpisy 14px = shodné s desktop --hb i horními eyebrow labely (15px rozjíždělo ikonu 16px vedle textu) */
  .section-title--h1 { font-size: 20px; letter-spacing: -0.3px; display: block; } /* H1 mobil: 22→20 (Jan 2026-07-10 — 22 se zalamovala a dominovala moc; hierarchie nad 15px labely drží); block kvůli zalomení na víc řádků */
  .hot-card-link  { padding: var(--sp-2); }
  .section-view-all { padding: 6px 0; }                    /* tap target ≥24px box (fáze 1) — layout drží align-items:center subheadu */
}

/* ===== TELEFON (≤599.98px) — VIZUÁLNÍ mezera sekcí sjednocena na 28 (Jan 2026-07-10, podle HOT→Shorts):
   HOT 28 (pilly nad ním končí hranou) · for-you 20 + 8 spodní padding infos HOT karet = 28
   · H1 bar 28 (custom.css) · hb-alt 28 (homepage-bottom.css). Při změně paddingu .new-vcard .infos přepočítat!
   Label→karty 8 (desktop 12): těsnější vazba nadpis→obsah na malém displeji.
   Blok MUSÍ být až ZA blokem „Rytmus ≤1549" (stejná specificita, obě media platí <600). ===== */
@media (max-width: 599.98px) {
  .hot-section    { padding-top: var(--sp-5); }  /* 28→24 (Jan 2026-07-11): nepatrné zhutnění strip→HOT */
  .for-you-section{ padding-top: 18px; }  /* 20→18 (Jan 2026-07-11, doladěno z 16 — „jen o 2"): HOT→Shorts; H1 bar drží 28 (zlom discovery→grid) */
  .shorts-subhead { margin-bottom: var(--sp-2); }
}

/* ===== MALÝ MOBIL (≤479.98px) ===== */
@media (max-width: 479.98px) {
  .hb-newest-scroll .hot-card { flex: 0 0 240px; } /* Newest pás 240 (Now Trending dědí 270 z ≤767.98) */
}