/* ============================================================
   Beey Live — ATEM chroma key — v6 OUTLINE (kontura)
   ============================================================
   FullHD 1920×1080 → HDMI → Blackmagic ATEM (chroma key).
   Roll-up titulky dole, bílé písmo s konturou, guard zóny,
   disclaimer a logo Beey AI volitelně (viz NASTAVENÍ).
   Ověřeno proti style-f8e722.css + bundle-50e7ee.js.
   Vyžaduje Chrome/Edge 123+ (paint-order na HTML textu).
   Produkční URL: beey.live/#nazev-udalosti (bez parametrů —
                  vzhled i chování řeší kompletně tento styl)
   ============================================================ */

/* ════════════════════════════════════════════════════════════
   ZÁKLADNÍ NASTAVENÍ — všechno ladění probíhá TADY
   ════════════════════════════════════════════════════════════ */
[class*="subtitlesPage__"] {

  --tpl-version: "v9";          /* zobrazuje se v testovací režii */

  /* — MĚŘÍTKO — jediný ovladač celkové velikosti titulků i boxu.
     Násobí písmo, řádkování, šířku sloupce, vnitřní okraje, rádius,
     disclaimer i logo. Odsazení od spodní hrany (--subs-bottom) se
     záměrně NEškáluje — je to bezpečná zóna obrazu.
     Doporučené hodnoty, při nichž vše vychází na celé px:
     0.75 · 1 · 1.25 · 1.5 · 1.75 · 2 */
  --subs-scale: 1;

  /* — Titulky (základ při měřítku 1) — */
  --subs-font-size: calc(60px * var(--subs-scale));   /* CEA ≈ 44, BBC ≈ 72 @1080p */
  --subs-line-height: calc(90px * var(--subs-scale)); /* ≥ 1,33×font + kontura + 4 px */
  --subs-lines: 2;              /* 2 nebo 3 (BBC: vyhýbat se 3+) */
  --subs-width: calc(1320px * var(--subs-scale));     /* řádek ≤ 68 % šířky obrazu */
  --subs-bottom: 54px;          /* odsazení od spodní hrany (5 % safe area) */
  --subs-text-color: #ffffff;
  --subs-font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --subs-font-weight: 600;

  /* — Kontura — */
  --subs-outline: calc(6px * var(--subs-scale));      /* viditelná = polovina, vně glyfu */
  --subs-outline-color: #000;

  /* — Klíčovací barva — */
  --subs-key: #00ff00;          /* chroma green; měň jen spolu s ATEM samplem */

  /* — Disclaimer (malý text u spodní hrany; klíčuje se PŘES video) — */
  --disclaimer: 1;              /* 1 = zobrazit, 0 = skrýt */
  --disclaimer-text: "Titulky jsou generovány automaticky pomocí Beey AI a mohou obsahovat chyby";
  --disclaimer-font-size: calc(22px * var(--subs-scale));
  --disclaimer-color: #ffffff;

  /* — Logo Beey AI (pravý dolní roh, zarovnané na sloupec titulků) — */
  --logo-display: block;        /* block = zobrazit, none = skrýt */
  --logo-url: url("https://www.beey.io/wp-content/uploads/2025/08/logo-beeyai-300x79.png");
  --logo-height: calc(36px * var(--subs-scale));  /* šířka dle poměru 300:79 */

  /* — Technické (běžně neměnit) — */
  --subs-guard: calc(16px * var(--subs-scale));   /* krycí zóny proti fragmentům */
  --subs-pad-h: calc(24px * var(--subs-scale));   /* vnitřní okraj (ochrana kontury) */
}

/* --- 0) RESET zásahů Beey, které ohrožují geometrii ---
   (<p> segmenty bez třídy → UA margin; transition gridu 1 s;
   „waiting" tečky v textContent; autoscroll tlačítko s wrapperem;
   inline styly z nastavení přebíjíme důsledným !important) */
[class*="subtitlesPage__"],
[class*="subtitlesPage__"] * {
  transition: none !important;
  animation: none !important;
}
[class*="textContent__"] p {
  margin: 0 !important;
  padding: 0 !important;
}
[class*="textContent__"] [class*="waiting__"] {
  display: none !important;
}
[class*="autoscrollButtonWrapper__"],
[class*="autoscrollButton__"] {
  display: none !important;
}

/* --- 1) Klíčovací pozadí + freeze layoutu --- */
[class*="subtitlesPage__"] {
  position: relative !important;
  background: var(--subs-key) !important;
  grid-template-rows: 0 100dvh 0 !important;
  cursor: none !important;
  /* Žádné reakce na myš/dotyk — pojistka na úrovni CSS; v adrese
     přesto doporučujeme i ?controls=off (jistí se navzájem) */
  pointer-events: none !important;
}
[class*="subtitlesPage__"][class*="showControls__"] {
  grid-template-rows: 0 100dvh 0 !important;
}

/* --- 2) Skrýt header a footer --- */
[class*="subtitlesPage__"] > [class*="header__"],
[class*="subtitlesPage__"] > [class*="subtitlesFooter__"],
[class*="subtitlesHeader__"] {
  display: none !important;
}

/* --- 3) Kontejner titulků — centrovaný, s guard zónami --- */
[class*="subtitlesPage__"] > [class*="subtitles__"]:not([class*="subtitlesPage"]):not([class*="subtitlesHeader"]):not([class*="subtitlesFooter"]) {
  position: absolute !important;

  font-size: var(--subs-font-size) !important;
  line-height: var(--subs-line-height) !important;

  left: 0 !important;
  right: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: var(--subs-width) !important;

  top: auto !important;
  bottom: var(--subs-bottom) !important;
  height: calc(var(--subs-lines) * var(--subs-line-height) + 2 * var(--subs-guard)) !important;

  padding: 0 !important;
  background: transparent !important;
  overflow: hidden !important;
}

/* Guard zóny v klíčovací barvě — ATEM je vyklíčuje */
[class*="subtitlesPage__"] > [class*="subtitles__"]:not([class*="subtitlesPage"]):not([class*="subtitlesHeader"]):not([class*="subtitlesFooter"])::before,
[class*="subtitlesPage__"] > [class*="subtitles__"]:not([class*="subtitlesPage"]):not([class*="subtitlesHeader"]):not([class*="subtitlesFooter"])::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  /* Překryv -8px (top/bottom níže): guard přesahuje hranici ořezu
     kontejneru a je jí oříznut — kryje šev sub-pixelové rasterizace
     při zlomkovém měřítku (DPI/zoom). */
  height: calc(var(--subs-guard) + 8px) !important;
  background: var(--subs-key) !important;
  z-index: 5 !important;
  pointer-events: none !important;
}
[class*="subtitlesPage__"] > [class*="subtitles__"]:not([class*="subtitlesPage"]):not([class*="subtitlesHeader"]):not([class*="subtitlesFooter"])::before {
  top: -8px !important;
}
[class*="subtitlesPage__"] > [class*="subtitles__"]:not([class*="subtitlesPage"]):not([class*="subtitlesHeader"]):not([class*="subtitlesFooter"])::after {
  bottom: -8px !important;
}

/* --- 4) Text — roll-up vlevo, vektorová kontura --- */
[class*="subtitlesPage__"] [class*="textContent__"] {
  box-sizing: border-box !important;
  height: 100% !important;
  padding: var(--subs-guard) var(--subs-pad-h) !important;
  margin: 0 !important;

  /* v6 — ZRUŠENÍ SCROLLU (definitivní řešení bílých fragmentů):
     Beey autoscrolluje JS animací (+12 px/25 ms). Během dojezdu
     je horní řádek říznutý MIMO hranici řádku a jeho fragment se
     objeví těsně pod guard zónou — žádná statická maska to nekryje.
     overflow: clip činí element nescrollovatelným (zápisy do
     scrollTop prohlížeč ignoruje → autoscroll Beey = neškodný
     no-op) a flex kotvení drží poslední řádky u dna BEZ scrollu.
     Horní řez tak padne VŽDY přesně na hranici řádku. Vizuálně:
     text při zalomení poskočí o řádek (žádné plynulé rolování). */
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  overflow: clip !important;
  /* v8 — DEFINITIVNÍ ořez inkoustu: clip-path řeže obsah přímo na
     hranici textového okna (uvnitř guard zón). Na rozdíl od dvojice
     „ořez kontejneru + krycí guard" jde o JEDINOU rasterizovanou
     hranu — při zlomkovém měřítku (DPI, zoom, náhled) se nemá s čím
     rozejít, takže skrytý řádek nemůže prosvítat ani 1 device-pixelem.
     (Empiricky ověřeno bisekcí v Chromiu při DPR 1.617.) */
  clip-path: inset(var(--subs-guard) 0 var(--subs-guard) 0) !important;

  font-size: var(--subs-font-size) !important;
  line-height: var(--subs-line-height) !important;

  text-align: left !important;
  color: var(--subs-text-color) !important;
  font-family: var(--subs-font-family) !important;
  font-weight: var(--subs-font-weight) !important;

  -webkit-text-stroke: var(--subs-outline) var(--subs-outline-color) !important;
  paint-order: stroke fill !important;
  text-shadow: none !important;
}

/* Odstavce se ve flex sloupci NESMÍ smršťovat (jinak by se
   řádky při přetečení stlačily přes sebe) */
[class*="subtitlesPage__"] [class*="textContent__"] > * {
  flex: 0 0 auto !important;
}

/* Pojistka proti vnitřním elementům Beey */
[class*="subtitlesPage__"] [class*="textContent__"] * {
  margin: 0 !important;
  padding: 0 !important;
  font-size: inherit !important;
  line-height: inherit !important;
}

/* --- 5) Alert panel: na výstupu čistý klíč --- */
[class*="alertPanel__"] { background: var(--subs-key) !important; }
[class*="alertPanel__"] [class*="alert__"] { opacity: 0 !important; }

/* --- 6) Skrýt scrollbar --- */
[class*="textContent__"]::-webkit-scrollbar { display: none !important; }

/* --- 7) Disclaimer — „nalepený" na spodní hraně obrazu ---
   Klíčuje se přes video → bílá s tenkou konturou (žádný blur). */
[class*="subtitlesPage__"]::after {
  content: var(--disclaimer-text) !important;
  display: block !important;
  opacity: var(--disclaimer) !important;   /* skrytí bez vlivu na layout */
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: calc(8px * var(--subs-scale)) !important;
  text-align: center !important;

  font-family: var(--subs-font-family) !important;
  font-size: var(--disclaimer-font-size) !important;
  line-height: 1.2 !important;
  font-weight: 600 !important;
  color: var(--disclaimer-color) !important;
  -webkit-text-stroke: calc(3px * var(--subs-scale)) var(--subs-outline-color) !important;
  paint-order: stroke fill !important;

  z-index: 10 !important;
  pointer-events: none !important;
}

/* --- 8) Logo Beey AI — vlevo NAD oblastí titulků ---
   Zarovnané na levou hranu sloupce. Pozor: poloprůhledné hrany
   PNG se nad zelenou klíčují s lehkým nádechem; zkontroluj na
   ATEM náhledu. */
[class*="subtitlesPage__"]::before {
  content: "" !important;
  display: var(--logo-display) !important;
  position: absolute !important;
  left: calc((100% - var(--subs-width)) / 2) !important;
  bottom: calc(var(--subs-bottom)
             + var(--subs-lines) * var(--subs-line-height)
             + 2 * var(--subs-guard)
             + 10px * var(--subs-scale)) !important;
  height: var(--logo-height) !important;
  width: calc(var(--logo-height) * 300 / 79) !important;
  background: var(--logo-url) no-repeat left center / contain !important;
  z-index: 10 !important;
  pointer-events: none !important;
}