/* ==========================================================================
   custom.css — v12 Filter Bar + Video Grid + Pagination
   ========================================================================== */

/* ===== H1 BAR (nad hlavním gridem) ===== */
/* H1 přesunuta pod Shorts (2026-07-06, místo bývalého „Popular" H2). */
.new-top-bar {
  padding: 30px 0 12px; /* 30 nad (for-you bottom 0 → předěl Shorts→H1 = 30, rytmus sekcí 28→30 2026-07-06), 12 pod (H1→grid). Tier/mobil overridy níž. */
}
/* H1 + sort label v jednom řádku (desktop). Baseline = 24px H1 a 13px label sedí na společné lince textu.
   Row-gap 2 se uplatní jen na mobilu (flex-wrap → sort na vlastním řádku, viz mobilní blok). */
.new-top-inner {
  display: flex;
  align-items: baseline;
  gap: 2px 12px;
}
/* .new-top-h1 — now uses .section-title.section-title--h1 base classes in HTML */

/* ===== SORT — „Sorted by …" mikro-label pod H1 (mockup D, 2026-07-06) =====
   Strip filtr + grid toggle odstraněny 2026-07-06. Dotted underline na hodnotě = konvence webu
   „klikni pro víc" (stejně jako cast na video kartách). Hodnoty 1:1 z .agents/mockups/2026-07-06_filter-umisteni.html. */
.new-sort { position: relative; display: inline-block; } /* hned za H1 (gap 12 z .new-top-inner) — pravé zarovnání zkoušeno a vráceno 2026-07-06; mobil vlastní řádek (flex-wrap níž) */
.new-sort-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  font-size: 13px;   /* 12→13 (2026-07-06): klikatelné controls = 13 (jako .new-sort-opt), 12 je pasivní meta */
  font-weight: 400;  /* = .section-view-all — jednotná váha tichého textu; filter se odlišuje jen dotted underline */
  color: #7a7a7a;    /* dim #555 → #7a7a7a (P1, Jan 2026-07-11: čitelnější — 2.67→4.6:1, ale „ne až tolik světle" jako muted #8a8a8a; hodnota .new-sort-val #999 zůstává zřetelně světlejší) */
  font-family: inherit;
}
.new-sort-val {
  color: var(--text-secondary);
  text-decoration: underline dotted rgba(255,255,255,0.4);
  text-underline-offset: 3px;
}
@media (hover: hover) {
  .new-sort-label:hover .new-sort-val { color: #fff; text-decoration-color: #fff; }
}
.new-sort.is-open .new-sort-val { color: #fff; text-decoration-color: #fff; }

/* Dropdown — stejný pattern jako header suggestions (--dropdown-bg, radius-md), otevírá se doprava pod label.
   Pozadí sjednoceno 2026-07-08 (dřív #1b1b1b — jediný dropdown mimo --dropdown-bg, audit nález #24). */
.new-sort-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 170px;
  background: var(--dropdown-bg, #1a1a1a);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 28px rgba(0,0,0,0.55);
  padding: 6px;
  z-index: 30;
  display: none;
}
.new-sort.is-open .new-sort-menu { display: block; }
.new-sort-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 10px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--text-body);
  text-decoration: none;
  white-space: nowrap;
}
.new-sort-check { flex-shrink: 0; color: var(--accent); visibility: hidden; }
.new-sort-opt.active { background: rgba(255,255,255,0.08); color: #fff; font-weight: 600; }
.new-sort-opt.active .new-sort-check { visibility: visible; }
@media (hover: hover) {
  .new-sort-opt:not(.active):hover { background: rgba(255,255,255,0.05); color: #fff; }
}

/* ===== VIDEO GRID ===== */
.video-loop {
  display: grid;
  gap: 12px 8px;             /* globální hodnota, breakpoint overridy smazány (2026-07-08) */
  grid-template-columns: repeat(6, 1fr);
  padding: 0 0 var(--sp-5);   /* 32→24 (2026-07-02): těsnější mezera poslední řada → Load more; tier 900–1549 = 20 */
}
/* Grid items smí shrinknout pod min-content → zabrání grid blowoutu:
   for-you-section scroller (overflow-x) jinak v 1-sloupcovém režimu nafoukne 1fr track na šířku obsahu (Chrome). */
.video-loop > * { min-width: 0; }

/* Žebřík sloupců 6/5/4/3/2(/1): ≥1550 → 6 · 1250–1549 → 5 · 1000–1249 → 4 · 600–999 → 3 · 340–599 → 2 · <340 → 1.
   3 sloupce prodlouženy z 768 na 600 (2026-07-10, Jan): karta při 600px = ~189px — stejná šířka jako 2sloupcová
   mobilní karta, typografie (title 13px) sedí; 600 = standardní small-tablet šířka.
   (Grid density toggle + cookie data-cols/data-dcols/data-mcols odstraněny 2026-07-06 — sloupce řídí čistě breakpointy.)
   <500 → 1 sloupec ZRUŠEN 2026-07-09 (mobilní audit KRITICKÉ #3 + jednomyslný judge panel 5:0):
   48 velkých karet = 15 000px tunel (spodních 5 sekcí nedosažitelných) a 374px karta = 3,5× upscale
   z 320px zdroje (rozmazané thumby); 2 sloupce = ostré 1:1 karty + stránka ~12 600px + konzistence
   s 500–767 (otočení telefonu už nemění hustotu). Revize až po upgrade thumbnail pipeline (srcset). */
@media (max-width: 1549.98px) {
  .video-loop { grid-template-columns: repeat(5, 1fr); }   /* 1250–1549 → 5 */
}
@media (max-width: 1249.98px) {
  .video-loop { grid-template-columns: repeat(4, 1fr); }   /* 1000–1249 → 4 */
}
@media (max-width: 999.98px) {
  .video-loop { grid-template-columns: repeat(3, 1fr); }   /* 600–999 → 3 */
}
@media (max-width: 599.98px) {
  .video-loop {
    grid-template-columns: repeat(2, 1fr);  /* ≤599 → 2 (vč. <500) */
    gap: var(--gap-row) var(--gap-scroll);  /* sloupcový spár 6 (mozaika, Jan 2026-07-09); řádkový 10 (fáze 1, mockup 03) — řádky karet se nelepí; tokenizace audit 2026-07-11 */
  }
}
@media (max-width: 339.98px) {
  .video-loop { grid-template-columns: 1fr; }  /* velmi malé mobily (<340): 2sloupcová karta by klesla pod ~160px → 1 sloupec */
}

/* Hide non-video children (ad placeholders) inside grid. */
.video-loop > :not(.video-block):not(nav):not(.vloop-skel):not(.vloop-shorts) {
  display: none;
}

/* (Gap override pro view-all odsazení smazán 2026-07-06 — view-all je teď vpravo přes margin-left:auto, v12-sections.css.) */


/* (Telefonní zhuštění .new-top-bar 8/12 ZRUŠENO 2026-07-10, Jan: působilo naplácle — telefon jede
   rytmus 20/12 jako všechny šířky pod 1550, viz blok „Rytmus ≤1549" níž.) */

/* ===== MOBIL (≤767.98): layout H1 baru (zalomení, sort na vlastním řádku) ===== */
@media (max-width: 767.98px) {
  /* .new-strips mobil margin-top → header.css (custom.css je v cascade dřív, tady bylo mrtvé rule) */

  /* H1 smí zalomit na víc řádků. Velikost/margin/display H1 řeší v12-sections.css (mobil) — tady jen flex layout. */
  .section-title--h1 { flex: 1 1 auto; min-width: 0; }

  /* Sort na mobilu = vlastní řádek pod H1 (vedle zalomené H1 není místo); row-gap 2 z base .new-top-inner.
     (Viditelný tap padding 8px 0 ZRUŠEN 2026-07-10, Jan — přidával vzduch H1→grid.) */
  .new-top-inner { flex-wrap: wrap; }
  .new-sort { flex: 0 0 100%; margin-top: -3px; } /* přiblížení k H1 (Jan 2026-07-10): row-gap nejde záporně → záporný margin stáhne řádek sortu nahoru (-4 bylo moc, Jan odladil na -3) */
  /* Tap target bez vlivu na layout (audit #2, rozšířeno P1 2026-07-11): padding zvětší prstový box
     na ~44px (Apple HIG), záporný margin ho v layoutu vyruší → vizuálně stejně těsné jako padding 0.
     Překryv boxu s H1 nahoře neškodí (H1 není klikatelná) a karty pod ním jsou v DOM později → vyhrávají hit-test. */
  .new-sort-label { padding: 14px 0; margin: -14px 0; }
}


/* ===== MOBILNÍ GRID TOGGLE (<600) — mockup 2026-07-10_mobil-grid-toggle.html, varianta B =====
   Sort vlevo, toggle vpravo v jednom řádku pod H1. Ikona ukazuje CÍLOVÝ stav (kostka → 1 sloupec,
   2 obdélníky → zpět 2). Stav drží html[data-mcols="1"]: inline skript v header.php ho nastaví
   z cookie PŘED prvním paintem (sdílená CF/W3TC cache → čistě klientský stav), kliky řeší header.js.
   Blok MUSÍ být až ZA mobilním blokem ≤767.98 (přepisuje .new-sort flex). */
.kot-mgrid { display: none; }   /* ≥600 neexistuje (desktop hustotu řeší breakpointy) */
@media (max-width: 599.98px) {
  .kot-mgrid {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;         /* nenápadný textový control (Jan 2026-07-10 — pill box byl moc výrazný) */
    border: none;
    color: #777777;   /* mezi --text-muted 8a a --text-dim 55 (Jan 2026-07-10 „ještě ubrat světlost" — 55 by byla moc) */
    padding: 7px;                   /* tap box 30×30 (> WCAG 24)… */
    margin: -7px -7px -7px auto;    /* …záporná kompenzace = layout jen 16px ikona, řádek se nezvedá; auto vlevo = doprava */
    cursor: pointer;
    align-self: center;
    -webkit-tap-highlight-color: transparent;
  }
  .kot-mgrid svg { display: block; }
  /* Ikona = AKTUÁLNÍ stav (Jan 2026-07-10, prohozeno z „cílového"): 2 kostky při 2 sloupcích, 1 kostka při 1. */
  .kot-mgrid .kot-mgrid-one { display: none; }
  html[data-mcols="1"] .kot-mgrid .kot-mgrid-one { display: block; }
  html[data-mcols="1"] .kot-mgrid .kot-mgrid-two { display: none; }

  /* Řádek sortu: H1 vždy plná šířka (dřív ji lámalo .new-sort 0 0 100%), sort + toggle sdílí druhý řádek */
  .section-title--h1 { flex-basis: 100%; }
  .new-sort { flex: 1 1 auto; align-self: center; }

  /* 1sloupcový režim gridu (řádkový gap 10 zůstává z 2sloupcového bloku) */
  html[data-mcols="1"] .video-loop { grid-template-columns: 1fr; }
}
@media (max-width: 339.98px) {
  .kot-mgrid { display: none; }   /* <340 je grid 1 sloupec vždy — toggle by neměl co přepínat */
}


/* ===== AD CONTAINERS ===== */
.textovka_mobile { display: block; width: 100%; height: auto; margin: 0; padding: 0; }
.textovka_mobile.padd { padding-top: 4px; }


/* ===== PAGINATION ===== */
.kot-pg {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px;
  width: 100%;
  margin: 4px 0 8px;
  padding: 0;
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 12px;
}
.kot-pg__label {
  margin-right: 10px;
  color: var(--text-muted); /* dim→muted (audit 2026-07-10 A): 2.67:1 → 4.9:1, „1 of N" čitelné */
}
/* Rytmus ≤1549 (menší karty) → těsnější než desktop base. Platí až dolů vč. telefonu
   (2026-07-10, Jan: telefonní zhuštění 8/12 zrušeno — jednotný rytmus 20/12 pod 1550).
   Blok až ZA base pravidly .new-top-bar/.video-loop/.kot-pg (stejná specificita). */
@media (max-width: 1549.98px) {
  .new-top-bar { padding-top: var(--sect-gap-tight); }     /* Shorts → H1 = 20 (for-you bottom 0; drží rytmus 20, base 28) */
  /* .new-strips margin-top 20 → header.css (custom.css je v cascade dřív, tady bylo mrtvé rule) */
  .video-loop { padding-bottom: var(--sect-gap-tight); }   /* poslední řada → Load more (base 24) */
}
/* Telefon: vizuální mezera sekcí = 28 (Jan 2026-07-10; shorts karty nad H1 končí hranou thumbu → padding = celá mezera).
   Bottom 8 = konzistence s nadpisy sekcí (.shorts-subhead mb 8 na telefonu; desktop má obojí 12).
   Blok MUSÍ být až ZA ≤1549 blokem (obě media platí <600). */
@media (max-width: 599.98px) {
  .new-top-bar { padding-top: var(--sect-gap-m); padding-bottom: var(--sp-2); }
}
.kot-pg__num,
.kot-pg__dots {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 9px;   /* 4→6 svisle (audit 2026-07-10 #3): tap ~26px > WCAG 24 */
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  border: 1px solid transparent;
  text-decoration: none;
}
@media (hover: hover) {
  .kot-pg__num:hover {
    background: rgba(255,255,255,0.05);
    color: #fff;
    text-decoration: none;
  }
}
.kot-pg__num.is-active {
  background: rgba(255,255,255,0.08);
  color: #fff;
  cursor: default;
}
.kot-pg__dots {
  color: var(--text-dim);
  padding: 4px 2px;
}
/* Arrows hidden (load-more handles "next" for users); links stay in DOM for SEO */
.kot-pg__arrow {
  display: none;
}

/* Load more button */
.load-more-wrap {
  display: flex;
  justify-content: center;
  margin: 4px 0 8px;
}
.load-more-btn {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  background: color-mix(in srgb, var(--accent) 90%, transparent);
  border: 1px solid var(--accent);
  color: #fff;
  padding: 15px 50px; /* 14→15 (2026-07-10): kompenzace line-height labelu 20px → jednořádková výška zůstává přesně 52px (2×15+20+2 border) */
  border-radius: var(--radius-md);
  font-size: 15px;
  font-weight: 600;   /* 500→600 (2026-07-06): primární CTA = 600 jako ostatní aktivní/důležité prvky (sort active, pilly active, blog CTA) */
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
}
.load-more-label { text-align: center; line-height: 20px; } /* dlouhé překlady (GTranslate) se na malých mobilech zalomí na 2 řádky — centrované + těsné řádky (zděděná lh ~22.5 dělala mezi řádky moc vzduchu); 20px v páru s paddingem 15 na btn */
@media (hover: hover) {
  .load-more-btn:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    text-decoration: none;
  }
}
.load-more-btn.is-loading {
  opacity: 0.5;
  pointer-events: none;
}
/* Desktop: pevná minimální šířka místo šířky od textu — CTA drží stejný rozměr napříč délkami labelu/překlady (Jan 2026-07-10) */
@media (min-width: 600px) {
  .load-more-btn { min-width: 400px; justify-content: center; padding: 15px; }
}
/* Mobil (zóna 2sloupcového gridu): široké CTA — větší tap plocha, dlouhé překlady se nelámou.
   90 % místo full width (Jan 2026-07-10: 100 % působilo divně) — okraje ho odliší od karet gridu. */
@media (max-width: 599.98px) {
  .load-more-btn { width: 90%; justify-content: center; padding: 15px 16px; }
}

/* Skeleton cards — injected directly into .video-loop grid (fill partial last row) */
.vloop-skel { display: flex; flex-direction: column; }
.vloop-skel-thumb {
  aspect-ratio: 16/9;
  border-radius: var(--radius-md);
  background: var(--kot-gradient-card);
  position: relative;
  overflow: hidden;
}
.vloop-skel-thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.03), transparent);
  animation: vloopShimmer 1.2s ease-in-out infinite;
}
.vloop-skel-line {
  height: 11px;
  border-radius: 4px;
  margin-top: 9px;
  background: rgba(255,255,255,0.06);
}
.vloop-skel-line.short { width: 55%; margin-top: 6px; }
@keyframes vloopShimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}


/* ==========================================================================
   ACTOR HOVER TOOLTIP (floating card) — ported from production kolortube.
   Triggered by .actor-avatars hover; markup built in main.js buildTooltipHtml.
   ========================================================================== */

.actor-tooltip{
    position: absolute;
    z-index: 99999;
    width: auto;
    max-width: calc(100vw - 16px);
    border-radius: var(--radius-md);
    border: 1px solid rgba(255,255,255,0.10);
    background: linear-gradient(165deg, #262626 0%, var(--bg-item) 100%); /* dolní konec tokenizován P8; #262626 unikát (tooltip highlight) */
    box-shadow: 0 8px 32px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,0.05);
    opacity: 0;
    transform: translateY(12px);
    transform-origin: 50% 100%;
    transition: opacity .1s ease, transform .1s ease;
    pointer-events: none;
    overflow: hidden;
}
.actor-tooltip.is-visible{
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    will-change: transform, opacity;
}
.actor-tooltip.actor-tooltip--below{
    transform-origin: 50% 0%;
}
.actor-tooltip__cards{
    display: flex;
    flex-direction: row;
    gap: 6px;
    padding: 8px;
}
.actor-tooltip__card{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    text-decoration: none;
    color: inherit;
    padding: 12px 8px 8px 8px;
    width: 205px;
    flex: 0 0 205px;
    border-radius: var(--radius-sm);
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    overflow: hidden;
    transition: background .1s ease, border-color .1s ease, box-shadow .1s ease;
}
@media (hover:hover) and (pointer:fine){
    .actor-tooltip__card:hover{
        background: rgba(255,255,255,0.08);
        border-color: rgba(255,255,255,0.18);
        box-shadow: 0 6px 20px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,0.06);
    }
}
.actor-tooltip__card:focus-visible{
    outline: none;
    box-shadow:
            0 0 0 2px color-mix(in srgb, var(--accent) 55%, rgba(255,255,255,.35)),
            0 14px 30px rgba(0,0,0,.35);
    border-color: color-mix(in srgb, var(--accent) 55%, rgba(255,255,255,.25));
}
.actor-tooltip__thumb{
    flex: 0 0 auto;
    width: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0 2px;
    position: relative;
}
/* Kruh-pseudo-elementy jen pro thumby BEZ rating ringu (--ring si kreslí SVG)
   — dřív řešeno přes display:none !important na --ring variantě */
.actor-tooltip__thumb:not(.actor-tooltip__thumb--ring)::before{
    content: '';
    position: absolute;
    width: 78px;
    height: 78px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,.2);
    background: none;
    transition: opacity .1s ease;
    opacity: 0;
}
.actor-tooltip.is-visible .actor-tooltip__thumb:not(.actor-tooltip__thumb--ring)::before{
    opacity: 1;
}
.actor-tooltip__thumb:not(.actor-tooltip__thumb--ring)::after{
    content: '';
    position: absolute;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: rgba(0,0,0,0.45);
}
.actor-tooltip__thumb-img{
    width: 72px;
    height: 72px;
    object-fit: cover;
    display: block;
    border-radius: 50%;
    position: relative;
    z-index: 1;
}
@media (hover:hover) and (pointer:fine){
    .actor-tooltip__card:hover .actor-tooltip__thumb:not(.actor-tooltip__thumb--ring)::before{
        border: 2px solid rgba(255,255,255,.35);
    }
}
.actor-tooltip__thumb--ring { position: relative; }
.actor-tooltip__ring-svg {
  position: absolute;
  width: 78px;
  height: 78px;
  z-index: 0;
  overflow: visible;
}
.actor-tooltip__ring-pct {
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-size: 11px;        /* dřív 10px (palec dominoval); 12 bylo moc → 11 */
  font-weight: 700;
  padding: 1px 6px;
  border-radius: var(--radius-sm); /* 5→6 (P9 2026-07-11): jednotný radius chipů na thumbnailu */
  background: var(--bg-surface, #121212); /* #101010 → warm */
  border: 1px solid var(--border-hairline);
  white-space: nowrap;
  z-index: 3;
  letter-spacing: 0.3px;
}
.actor-tooltip__ring-pct .kot-icon { width: 12px; height: 12px; }
.actor-tooltip__name-extra {
  color: rgba(255,255,255,0.42);
  font-weight: 400;
  font-size: 13px;
  white-space: nowrap;
}
.actor-tooltip__thumb-fallback{
    width: 72px;
    height: 72px;
    border-radius: 50%;
    position: relative;
    z-index: 1;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight: 700;
    font-size: 30px;
    line-height: 1;
    text-transform: uppercase;
    color: rgba(255,255,255,.85);
    background: linear-gradient(135deg, #2e2e2e, #1c1c1c); /* #2e2e2e/#1c1c1c → warm */
}
.actor-tooltip__meta{
    width: 100%;
    min-width: 0;
    padding: 12px 0 0;   /* větší odstup jména od avataru (rating badge visí pod kruhem) */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex: 1;
}
.actor-tooltip__name{
    color: rgba(255, 255, 255, .94);
    font-weight: 500;
    font-size: 14px;
    text-transform: capitalize;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    line-height: 1.3;
    max-width: 100%;
}
.actor-tooltip__name-text{
    overflow: hidden;
    text-overflow: ellipsis;
}
.actor-tooltip__age{
    opacity: .9;
    white-space: nowrap;
}
@media (max-width: 520px){
    .actor-tooltip{ max-width: calc(100vw - 12px); }
}
@media (prefers-reduced-motion: reduce){
    .actor-tooltip{ transition: none; transform: none; }
    .actor-tooltip__card{ transition: none; }
}
.actor-tooltip__cta{
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    width: 100%;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(255,255,255,0.15);
    background: linear-gradient(135deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 80%, #000) 100%);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    text-align: center;
    line-height: 11px;
    overflow: hidden;
}
@media (hover:hover) and (pointer:fine){
    .actor-tooltip__card:hover .actor-tooltip__cta{
        background: rgba(255,255,255,0.92);
        color: #111;
        border-color: rgba(255,255,255,0.6);
    }
}
.actor-tooltip__facts{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 4px 10px;
    margin-bottom: 8px;
}
.actor-tooltip__facts > span{
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: rgba(255,255,255,0.55);
    font-size: 12px;
    line-height: 1;   /* stejná výška boxu jako ikonka → přesné vertikální centrování */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* display:block — inline SVG jinak sedí na textové baseline (descender mezera) a je opticky níž než text */
.actor-tooltip__facts > span .kot-icon{
    display: block;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}
.actor-tooltip__facts > span i{
    font-size: 12px;
    opacity: .7;
}
.actor-tooltip__flag-inline{
    width: 16px;
    height: 16px;
    object-fit: cover;
    flex: 0 0 auto;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}