/* =====================================================================
   Story-telling stránky (nová verze) – horizontální scroll: slide–video–slide–video–slide.
   Slidy: čistá fotka + bílá plocha s křivou hranou + modrá stuha + HTML text obtékající křivku.
   Sdíleno pro všechny sekce i jazyky; texty přicházejí z lang/<jazyk>/.../_texts.php.
   ===================================================================== */
:root{ --brand:#087ac4; --text:#333; }
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{ font-family:'Open Sans',Arial,Helvetica,sans-serif; overflow:hidden; }

#container{
  width:100vw; height:100vh;
  overflow-x:auto; overflow-y:hidden;
  white-space:nowrap;
  scrollbar-width:thin; scrollbar-color:#333 #fff;
}
#container::-webkit-scrollbar{ height:10px; }
#container::-webkit-scrollbar-thumb{ background-color:#333; }
#container::-webkit-scrollbar-track{ background-color:#fff; }

/* scroll buňka = celé okno; kolem 16:9 plátna jsou neutrální pruhy (bg) */
.st-cell{ display:inline-block; width:100%; height:100%; position:relative; vertical-align:top; margin-right:-5px; background:#0e1116; }
/* PLÁTNO – vyplní celý viewport bez šedých pruhů (cover chování) */
.st-canvas{
  position:absolute; inset:0;
  overflow:hidden; background:#fff;
  container-type:inline-size;        /* cqw → nadpis fixní vůči plátnu */
}
.my-video{ width:100% !important; height:100% !important; object-fit:cover !important; }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ===== SLIDE: vrstvy uvnitř 16:9 plátna (.st-canvas) ===== */
/* spodní vrstva = čistá fotka; cover = vyplní plochu bez deformace (může ořezat krajní pixely). */
.st-photo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

/* bílá plocha s křivou pravou hranou = JEDEN zdroj křivky (clip odvozen z pravé hrany stuhy) */
.st-white{
  position:absolute; inset:0; background:#fff; z-index:1;
  clip-path:polygon(
    0 0,
    70.39% 0%, 70.78% 1.25%, 71.15% 2.5%, 71.46% 3.75%, 71.76% 5%, 72.03% 6.25%,
    72.24% 7.5%, 72.45% 8.75%, 72.60% 10%, 72.73% 11.25%, 72.81% 12.5%, 72.81% 13.75%,
    72.73% 15%, 72.55% 16.25%, 72.28% 17.5%, 71.90% 18.75%, 71.46% 20%, 70.98% 21.25%,
    70.48% 22.5%, 69.92% 23.75%, 69.36% 25%, 68.76% 26.25%, 68.13% 27.5%, 67.28% 28.75%,
    66.37% 30%, 65.47% 31.25%, 64.56% 32.5%, 63.66% 33.75%, 62.75% 35%, 61.85% 36.25%,
    60.94% 37.5%, 60.04% 38.75%, 59.13% 40%, 58.23% 41.25%, 57.32% 42.5%, 56.42% 43.75%,
    55.51% 45%, 54.61% 46.25%, 53.70% 47.5%, 52.80% 48.75%, 51.89% 50%, 50.99% 51.25%,
    50.08% 52.5%, 49.18% 53.75%, 48.27% 55%, 47.37% 56.25%, 46.46% 57.5%, 45.56% 58.75%,
    44.65% 60%, 43.75% 61.25%, 42.84% 62.5%, 41.94% 63.75%, 41.03% 65%, 40.13% 66.25%,
    39.22% 67.5%, 38.32% 68.75%, 37.41% 70%, 36.51% 71.25%, 35.60% 72.5%, 34.70% 73.75%,
    33.79% 75%, 32.89% 76.25%, 31.98% 77.5%, 31.08% 78.75%, 30.17% 80%, 29.27% 81.25%,
    28.36% 82.5%, 34.62% 83.75%, 33.71% 85%, 32.83% 86.25%, 31.91% 87.5%, 31.03% 88.75%,
    30.12% 90%, 29.23% 91.25%, 28.32% 92.5%, 27.43% 93.75%, 26.52% 95%, 25.64% 96.25%,
    24.73% 97.5%, 23.84% 98.75%, 22.96% 100%,
    0 100%
  );
}

/* brandový swoosh – přesná rekonstrukce pozice na plátně (stretch na celý slide) */
.st-curve{
  position:absolute; left:0; top:0;
  width:76.4406%;      /* 2935.32 / 3840 */
  height:100.5%;       /* lehce přetéct dolů, ať stuha jistě překryje dno */
  object-fit:fill;
  z-index:2; pointer-events:none;
}

/* textová vrstva – spodní rezerva 6 % dává fitAll() buffer, aby text nepřetekl za canvas */
.st-content{ position:absolute; inset:0 0 6% 0; z-index:3; }

/* plovoucí tvar = pravá oblast; levá kontura = LEVÝ okraj stuhy → text se o ni láme */
.st-shape{
  float:right; width:100%; height:100vh; shape-margin:1.6%;  /* 100vh = skutečná výška viewportu = výška plátna */
  shape-outside:polygon(
    70.39% 0%,
    70.89% 2.5%, 71.17% 5%, 71.17% 7.5%, 70.91% 10%, 70.36% 12.5%, 69.48% 15%,
    68.18% 17.5%, 66.41% 20%, 64.56% 22.5%, 62.73% 25%, 60.89% 27.5%, 59.06% 30%,
    57.24% 32.5%, 55.39% 35%, 53.57% 37.5%, 51.74% 40%, 49.90% 42.5%, 48.07% 45%,
    46.22% 47.5%, 44.40% 50%, 42.58% 52.5%, 40.73% 55%, 38.91% 57.5%, 37.06% 60%,
    35.23% 62.5%, 33.41% 65%, 31.56% 67.5%, 29.74% 70%, 27.89% 72.5%, 26.07% 75%,
    /* dolní část: hladká monotónní křivka na úrovni stuhy (cíp se vyboulí doprava) */
    31.98% 77.5%, 30.98% 80%, 29.98% 82.5%, 28.98% 85%, 27.98% 87.5%,
    26.98% 90%, 25.98% 92.5%, 24.98% 95%, 23.98% 97.5%, 22.96% 100%,
    100% 100%, 100% 0%
  );
}
.st-text{
  line-height:1.45; padding:3.5% 0 3.5% 6%; box-sizing:border-box;
  white-space:normal;          /* reset nowrap z #container, ať se text láme */
}
/* Nadpis: FIXNÍ velikost (cqw = % šířky slidu) → stejný ve všech jazycích i slidech. Auto-fit se ho netýká.
   h1 = nadpis 1. slidu (hlavní nadpis stránky), h2 = ostatní slidy; vizuálně stejné. */
.st-text h1, .st-text h2{ margin:0 0 3.5%; color:var(--brand); font-weight:600; line-height:1.15; font-size:2.3cqw; transform:translateY(0.4cqw); }
/* Odstavec: velikost nastavuje auto-fit (JS) dle zbývajícího místa */
.st-text p{ margin:0; color:var(--text); font-size:1em; }

/* =====================================================================
   JAZYKOVÉ MUTACE — sólo vlastnosti pro jednotlivé jazyky (klíč přes <html lang>).
   Sem jen to, co se MUSÍ lišit per jazyk.
   ŠABLONA (zakomentováno):
   ===================================================================== */
/* html[lang="de"] .st-text h2{ color:#d00000; } */
/* html[lang="sk"] .st-text h2{ ... } */