/* ==========================================================================
   PŘEDSTAV SE — globální styly
   Sekční styly (loading, hero, menu, open-call, festival, footer) se
   doplňují postupně v dalších krocích. Tento soubor zatím obsahuje jen
   proměnné, @font-face, reset a základní layout primitivy.
   ========================================================================== */

/* --------------------------------------------------------------------------
   CSS PROMĚNNÉ
   Uprav hodnoty zde, změna se projeví globálně napříč celým webem.
   -------------------------------------------------------------------------- */
:root {
  /* --- Barvy -------------------------------------------------------------
     Doplní se přesné hex hodnoty podle Figma screenshotů v dalších krocích. */
  --color-bg: #ffffff;              /* výchozí (bílé) pozadí stránky / hero */
  --color-text: #111111;            /* výchozí barva textu */
  --color-accent: #111111;          /* akcentní barva (odkazy, tlačítka) */
  --color-footer-bg: #000000;       /* pozadí černého footeru */
  --color-footer-text: #ffffff;     /* text ve footeru */
  --color-border: #e0e0e0;          /* jemné dělicí linky, placeholder rámečky */

  /* --- Spacing -------------------------------------------------------------
     Škála mezer používaná pro padding/margin/gap napříč sekcemi. */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 8rem;

  /* --- Maximální šířka obsahu -----------------------------------------
     Šířka, na kterou se centruje obsah uvnitř sekcí (viz .container v JS/HTML). */
  --content-max-width: 1440px;

  /* --- Font sizes ----------------------------------------------------------
     Škála velikostí písma. --font-size-display slouží pro velké nadpisy
     (i když nadpisy sekcí Open Call / Festival se skládají z obrázků písmen,
     tato proměnná se hodí pro fallback text / alt layout). */
  --font-size-base: 1rem;
  --font-size-sm: 0.875rem;
  --font-size-md: 1.25rem;
  --font-size-lg: 1rem;
  --font-size-xl: clamp(1.5rem, 9vw, 4rem); /* ceny v ticket popupu ("?" / "−10 %") — nyní plynule škáluje, ať se nevejde přes okraj na malé obrazovce */
  --font-size-display: 8rem;

  /* --- Kerning nadpisů -------------------------------------------------
     Letter-spacing pro nadpisy a mezery mezi jednotlivými obrázky písmen
     v animovaných nadpisech (Open Call / Festival). Uprav zde, pokud
     výsledná kompozice nesedí s designem. */
  --heading-letter-spacing: -0.02em;
  --heading-letter-gap: 0.25rem;      /* mezera mezi jednotlivými písmeny-obrázky */

  /* --- Border radius --------------------------------------------------- */
  --radius-sm: 4px;
  --radius-md: 12px;
  --radius-lg: 24px;
  --radius-menu: 32px;               /* zaoblení rohů čtvercového menu overlaye */

  /* --- Délky animací ----------------------------------------------------
     Centrální místo pro ladění rychlosti/easingu GSAP animací. */
  --duration-fast: 0.3s;
  --duration-base: 0.6s;
  --duration-slow: 1.2s;
  --ease-base: power2.out;           /* referenční hodnota pro GSAP ease (používá se v JS) */
  --ease-in-out: power2.inOut;

  /* --- Loading / menu tlačítko -------------------------------------------
     Rozměry šipky/loga během loadingu a chování dokovaného tlačítka menu
     v pravém horním rohu po dokončení morph animace. */
  --loader-icon-size: clamp(190px, 36vw, 480px); /* velikost RE/šipky uprostřed obrazovky při loadingu */
  --menu-button-offset: var(--space-md);          /* odsazení dokovaného tlačítka od horního/pravého okraje */
  --loader-hold-duration: 0.8s;                   /* jak dlouho zůstane RE v klidu zobrazené, než se spustí morph */

  /* --- Hero ---------------------------------------------------------------
     Statické PNG (assets/napis.png) zarovnané do horního levého rohu, bez
     scroll animace. Rozměry zadané v "bodech" (pt, jako v grafickém
     návrhu) převedené na responzivní clamp() — 1 bod = 4/3 px. */
  --hero-offset: clamp(16px, 4vw, 40px);            /* 30bodů — odstup nápisu REGRAFIKA od horního/levého okraje */
  --hero-title-size-main: clamp(60px, 13vw, 200px); /* "hlavní nápisy" (REGRAFIKA) — 100 bodů */
  --hero-subnav-title-size: clamp(30px, 8vw, 80px); /* "menší nápisy" (Lístky/Festival/Opencall pod hero) — 48 bodů */
  --subnav-font-size: clamp(2.5rem, 7.5vw, 7rem); /* velikost nadpisů/CTA ve Festival sekci (.festival-content__heading) — nyní plynule škáluje s šířkou obrazovky */
  --subnav-gap: var(--space-lg) clamp(var(--space-lg), 8vw, 9rem); /* mezera mezi odkazy pod hero (řádky / sloupce) — do stran víc místa, ať se nepřekrývají piktogramy */
  --subnav-inset-left: clamp(32px, 10vw, 120px);    /* odsazení odkazů pod hero od levého okraje */

  /* --- Open Call sekce ------------------------------------------------
     Nadpis (wipe reveal), piktogram (shake) a text jsou psané jako
     znovupoužitelné třídy (.wipe-reveal, .opencall-*) — Festival sekce
     může nadpis-wipe i line-reveal text later znovu použít. */
}

/* --------------------------------------------------------------------------
   FONT — General Sans
   Soubory fontu doplní uživatel do /assets/fonts/. Názvy souborů níže jsou
   očekávaný standardní export z fontshare.com (woff2 + woff fallback).
   Uprav cesty/váhy zde, pokud budou dodané soubory pojmenované jinak.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "General Sans";
  src: url("../assets/fonts/GeneralSans-Regular.woff2") format("woff2"),
       url("../assets/fonts/GeneralSans-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "General Sans";
  src: url("../assets/fonts/GeneralSans-Medium.woff2") format("woff2"),
       url("../assets/fonts/GeneralSans-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "General Sans";
  src: url("../assets/fonts/GeneralSans-Semibold.woff2") format("woff2"),
       url("../assets/fonts/GeneralSans-Semibold.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "General Sans";
  src: url("../assets/fonts/GeneralSans-Bold.woff2") format("woff2"),
       url("../assets/fonts/GeneralSans-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   RESET / NORMALIZACE
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body,
h1, h2, h3, h4, h5, h6,
p,
figure {
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: hidden; /* pojistka navíc vedle body — mobilní prohlížeče počítají "ideální" šířku viewportu z <html>, ne z <body> */
  width: 100%;
  background-color: var(--color-footer-bg); /* při elastickém přetažení scrollu za konec stránky (mobil) prosvítá tohle pozadí, ne bílá */
}

body {
  font-family: "General Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: var(--font-size-base);
  color: var(--color-text);
  background-color: var(--color-bg);
  line-height: 1.4;
  min-height: 100vh;
  overflow-x: hidden; /* zamezí horizontálnímu overflow z hero scroll animace */
}

/* Boilerplate pro GSAP ScrollSmoother (initSmoothScroll v js/main.js).
   #smooth-wrapper/#smooth-content obalují <main>+<footer> (viz HTML) — header
   s loaderem/menu tlačítkem zůstává mimo, ať zůstane skutečně fixed.
   Pravidla níže platí, jen když initSmoothScroll() opravdu naběhne (přidá
   .is-smooth-active) — bez JS/při prefers-reduced-motion/chybějícím pluginu
   zůstávají oba divy obyčejné pass-through kontejnery a stránka scrolluje
   normálně (position:fixed by jinak scroll úplně rozbilo). */
#smooth-wrapper.is-smooth-active {
  overflow: hidden;
  position: fixed;
  inset: 0;
}

#smooth-wrapper.is-smooth-active #smooth-content {
  overflow: visible;
  width: 100%;
}

img,
picture,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

ul,
ol {
  list-style: none;
}

/* --------------------------------------------------------------------------
   ZÁKLADNÍ LAYOUT PRIMITIVA
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--content-max-width);
  margin-inline: auto;
  padding-inline: var(--space-md);
}

/* Vizuálně skryje prvek, ale ponechá jej pro čtečky obrazovky (a11y). */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   PREFERS-REDUCED-MOTION
   Konkrétní pravidla (vypnutí/zkrácení GSAP animací, okamžité zobrazení
   skrytých prvků apod.) se doplní společně s implementací jednotlivých
   animací v dalších krocích.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  /* Loading: initLoading() v js/main.js sama o sobě přeskočí animaci a
     rovnou zobrazí zadokované tlačítko, toto je jen CSS pojistka pro
     případ pomalého/chybějícího JS. */
  .logo-loader-backdrop {
    display: none;
  }

  .logo-loader-icon {
    opacity: 1;
  }

  /* <body> má "is-loading" (zamčený scroll) rovnou v HTML — pojistka pro
     případ, že by JS neproběhlo (viz komentář výše), ať scroll nezůstane
     zamčený navždy, když je obsah díky pravidlům výše i tak vidět. */
  body.is-loading {
    overflow: auto;
  }

  /* TODO: doplnit zkrácení/vypnutí dalších GSAP animací (hero scroll,
     animované nadpisy, menu) při implementaci jednotlivých sekcí. */
}

/* ==========================================================================
   LOADING / MENU TLAČÍTKO (šipka)
   Vizuální výchozí (= zadokovaný) stav prvku. Animační logika mezi vstupním
   stavem (RE uprostřed obrazovky) a tímto stavem je v js/main.js
   (initLoading) — GSAP na .logo-loader-icon tweenuje transform (x/y/scale),
   takže pozice/velikost níže platí jako "cíl", do kterého se animace vrací.
   ========================================================================== */
.logo-loader-backdrop {
  position: fixed;
  inset: 0;
  background-color: var(--color-bg);
  z-index: 999;
}

body.is-loading {
  overflow: hidden; /* zamezí scrollu pod celoobrazovkovým loadingem */
}

/* Zamyká scroll, dokud je otevřený libovolný popup (ticket modal, card
   lightbox, partner modal) — viz lockScroll()/unlockScroll() v js/main.js. */
body.is-modal-open {
  overflow: hidden;
}

.logo-loader-icon {
  position: fixed;
  top: var(--menu-button-offset);
  right: var(--menu-button-offset);
  width: var(--hero-title-size-main); /* zadokovaná velikost odpovídá výšce nápisu REGRAFIKA v hero */
  opacity: 0; /* initLoading() nastaví na 1 až po sestavení SVG, ať nebliká nemorphovaný stav */
  pointer-events: none;
  cursor: default;
  z-index: 1000;
  mix-blend-mode: difference; /* "negativní" efekt — invertuje se podle toho, co je zrovna pod ním */
}

.logo-loader-icon__svg {
  width: 100%;
  height: auto;
  display: block;
}

.logo-loader-icon__path {
  fill: #ffffff; /* bílá, ať mix-blend-mode: difference dává skutečný negativ (na černé vyjde bílá, na bílé černá) */
}

/* Přidá initLoading() poté, co doběhne dokovací animace — od tohoto
   okamžiku šipka funguje jako klikatelné tlačítko menu. */
.logo-loader-icon.is-interactive {
  pointer-events: auto;
  cursor: pointer;
}

/* ==========================================================================
   MENU
   Lístky / Festival / Tým / Kontakt — bílé nepravidelné obdélníky (stejný "potrhaný"
   clip-path jako CTA tlačítka) s názvem a piktogramem vedle, v oblouku
   jako paprsky z tlačítka šipky (#logo-loader-icon), podle GSAP dema radial-menu.
   Pozice i pružnou animaci z tlačítka a zpět řídí GSAP v initMenu()
   (js/main.js) — pravidla níže jen definují
   vzhled a klidový (zavřený) stav, aby menu nebliklo před načtením JS.
   ========================================================================== */
.site-menu {
  position: fixed;
  inset: 0;
  z-index: 1001; /* nad zadokovaným tlačítkem menu (1000) */
  visibility: hidden;
  pointer-events: none;
}

.site-menu.is-open {
  visibility: visible;
}

/* Rozmazané pozadí pod otevřeným menu (vkládá a animuje initMenu) — pod
   tlačítkem šipky (1000), ať zůstane ostré. Klik na něj menu zavře. */
.site-menu-backdrop {
  position: fixed;
  inset: 0;
  z-index: 999;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.site-menu-backdrop.is-open {
  pointer-events: auto;
}

.site-menu__list {
  position: absolute;
  inset: 0;
}

/* Každý obdélník startuje ve středu tlačítka (left/top + xPercent/yPercent
   nastaví JS), odtud ho GSAP posune (x/y) na místo v oblouku. */
.site-menu__list > li {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  visibility: hidden;
  transform: scale(0);
}

.site-menu.is-open .site-menu__list > li {
  pointer-events: auto;
}

.site-menu__link {
  display: flex;
  align-items: center;
  gap: 0.3em; /* malý, u všech položek stejný rozestup text–piktogram */
  justify-content: flex-start; /* zarovnáno vlevo: název a hned za ním piktogram */
  padding: var(--space-xs) var(--space-sm);
  background-color: var(--color-bg);
  color: var(--color-text);
  font-size: clamp(1.05rem, 3.6vw, 1.4rem);
  font-weight: 700;
  letter-spacing: var(--heading-letter-spacing);
  white-space: nowrap;
  transition: transform var(--duration-fast) ease-out;
}

.site-menu__list > li:nth-child(1) .site-menu__link {
  clip-path: polygon(
    0% 0%, 18% 7%, 38% 0%, 55% 5%, 72% 0%, 90% 6%, 100% 0%,
    99.35% 25%, 100% 50%, 99.5% 75%, 100% 100%,
    65% 94%, 32% 100%, 0% 93%,
    0.65% 65%, 0% 40%, 0.5% 15%
  );
}

.site-menu__list > li:nth-child(2) .site-menu__link {
  clip-path: polygon(
    0% 5%, 22% 0%, 45% 7%, 65% 0%, 85% 5%, 100% 0%,
    99.5% 28%, 100% 55%, 99.25% 82%, 100% 100%,
    55% 94%, 22% 100%, 0% 93%,
    0.6% 62%, 0% 35%, 0.7% 10%
  );
}

.site-menu__list > li:nth-child(3) .site-menu__link {
  clip-path: polygon(
    0% 0%, 12% 6%, 30% 0%, 50% 7%, 70% 0%, 88% 5%, 100% 1%,
    99.4% 20%, 100% 45%, 99.5% 68%, 100% 92%, 99.25% 100%,
    68% 94%, 40% 100%, 12% 93%, 0% 100%,
    0.5% 65%, 0% 38%, 0.65% 12%
  );
}

.site-menu__list > li:nth-child(4) .site-menu__link {
  clip-path: polygon(
    0% 4%, 16% 0%, 34% 6%, 52% 0%, 70% 5%, 86% 0%, 100% 6%,
    99.5% 30%, 100% 58%, 99.35% 84%, 100% 100%,
    78% 93%, 50% 100%, 20% 94%, 0% 100%,
    0.6% 70%, 0% 44%, 0.5% 18%
  );
}

.site-menu__link:hover,
.site-menu__link:focus-visible {
  transform: scale(1.05);
}

.site-menu__link[aria-current="page"] {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* Piktogram za názvem, blíž k logu (assets/menu/*.png — všechny ořezané na
   čtverec těsně kolem kresby, ať jsou opticky stejně velké). */
.site-menu__icon {
  flex: 0 0 auto;
  width: clamp(30px, 8vw, 42px);
  height: clamp(30px, 8vw, 42px);
  object-fit: contain;
}

/* Telefon: větší logo v rohu a štíhlejší obdélníky — paprsky pak můžou
   začínat blíž u loga (vnitřní poloměr počítá getRayPositions z výšky
   obdélníků, viz js/main.js). */
@media (max-width: 860px) {
  .logo-loader-icon {
    width: calc(var(--hero-title-size-main) * 1.35);
  }

  .site-menu__link {
    padding: 0.25rem var(--space-xs);
  }

  .site-menu__icon {
    width: 26px;
    height: 26px;
  }
}

/* ==========================================================================
   HERO
   Statický (bez animace) nápis přes celou šířku, pod ním šikmý podtitul
   (.hero__info / .hero__tagline) a navigace na sekce s krátkým popiskem u každé
   položky (.hero-subnav).
   ========================================================================== */
.hero {
  position: relative;
  width: 100%;
  background-color: var(--color-bg);
}

.hero__image-wrap {
  width: 100%;
  padding-top: var(--hero-offset);
  padding-left: var(--hero-offset); /* zarovnání nápisu do horního levého rohu s odstupem */
}

.hero__image {
  display: block;
  height: var(--hero-title-size-main); /* "hlavní nápis" — viz --hero-title-size-main */
  width: auto;
  max-width: 100%;
}

.hero__info {
  /* Posun doleva řešený jako nesouměrný padding (víc vpravo než vlevo),
     ne transform:translateX — ten by posunul celý (100% široký) box i s
     jeho levým okrajem mimo obrazovku. Levý padding je proto pevný a
     bezpečný, ať text nikdy nejde ven. */
  padding: var(--space-xs) clamp(var(--space-md), 40vw - 100px, 560px) var(--space-md) var(--space-sm); /* těsně pod nápisem REGRAFIKA, místo pod ním; na mobilu skoro bez posunu, ať se text nezalomí */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* "do festivalu:" + odpočet (initTicketsTimer) pod popiskem Festivalu v
   hero. Popisek nakloněný +4°, odpočet opačně na černém potrhaném štítku
   s texturou jako odpočet u Lístků. */
.hero__countdown {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-xs);
  margin-top: var(--space-xs);
}

.hero__countdown-label {
  font-size: var(--font-size-md);
  transform: rotate(4deg);
}

.hero__countdown-timer {
  padding: 0.35em 0.9em;
  background-color: var(--color-text);
  background-image: url("../assets/texture.png");
  background-size: cover;
  background-position: 30% 60%;
  color: var(--color-bg);
  font-size: clamp(1.4rem, 3.5vw, 2.6rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums; /* číslice stejně široké — neposkakuje */
  white-space: nowrap;
  transform: rotate(-3deg);
  clip-path: polygon(
    0% 7%, 8% 0%, 20% 5%, 35% 0%, 50% 6%, 65% 0%, 80% 5%, 92% 0%, 100% 7%,
    99.25% 18%, 100% 35%, 99.5% 52%, 100% 68%, 99.25% 85%, 100% 100%,
    88% 94%, 72% 100%, 55% 93%, 38% 100%, 22% 94%, 8% 100%, 0% 92%,
    0.75% 82%, 0% 65%, 0.5% 48%, 0% 32%, 0.75% 15%
  );
}

/* "Návrat k tradiční grafice" — 90 % velikosti tlačítek pod ním
   (.hero-subnav__link), nakloněné na šikmo. */
.hero__tagline {
  font-size: calc(var(--hero-subnav-title-size) * 0.9);
  font-weight: 500; /* medium řez */
  line-height: 1.1;
  transform: rotate(4deg);
}

.hero-subnav {
  width: 100%;
  padding: var(--space-sm) var(--space-lg) var(--space-lg) calc(var(--subnav-inset-left) + var(--space-sm));
}

.hero-subnav__list {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--subnav-gap);
}

.hero-subnav__item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  max-width: 22em;
}

.hero-subnav__item:first-child {
  margin-left: -0.15em; /* posune "Lístky" trochu víc doleva, ostatní položky zůstávají na místě */
}

/* Každá položka (tlačítko + popisek pod ním) jinak vysoko a jinak
   nakloněná, ať to nepůsobí jako jedna rovná řada. */
.hero-subnav__item:nth-child(1) {
  transform: translateY(-14px) rotate(-3deg);
}

.hero-subnav__item:nth-child(2) {
  transform: translateY(20px) rotate(-4deg); /* Opencall níž */
}

.hero-subnav__item:nth-child(3) {
  transform: translateY(-60px) rotate(2deg); /* Festival výš */
}

.hero-subnav__link {
  position: relative; /* kotva pro piktogram (.hero-subnav__icon) */
  display: inline-block; /* ať jde zmáčknout (scale) při "kliknutí myší" */
  font-size: var(--hero-subnav-title-size);
  font-weight: 700;
  color: var(--color-text);
}

/* Piktogram vlevo před názvem tlačítka (Lístky, Festival, Opencall),
   velký zhruba jako písmena — stejné ořezy jako v menu. Visí MIMO tok
   (absolute, vlevo od názvu), takže název zůstává zarovnaný vlevo
   s popiskem pod ním. */
.hero-subnav__icon {
  position: absolute;
  right: 100%;
  top: 50%;
  width: 0.9em;
  height: 0.9em;
  margin-right: 0.15em;
  transform: translateY(-50%);
  object-fit: contain;
}

.hero-subnav__link:hover,
.hero-subnav__link:focus-visible {
  text-decoration: underline;
}

/* Plovoucí "PŘEKVÁPKO!" vpravo dole, jen v sekci Lístky (třídu
   .is-visible přepíná initTicketsFloatButton). Stejný štítek jako
   .hero-subnav__sale, jen větší. Pod popupy (1002+). */
.sale-float {
  position: fixed;
  right: var(--space-md);
  bottom: var(--space-md);
  z-index: 1000;
  padding: 0.5em 0.9em;
  border: none;
  background-color: var(--color-text);
  background-image: url("../assets/texture.png");
  background-size: cover;
  background-position: 40% 70%;
  color: var(--color-bg);
  font: inherit;
  font-size: clamp(1.1rem, 2.4vw, 1.6rem);
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  clip-path: polygon(
    0% 4%, 16% 0%, 34% 6%, 52% 0%, 70% 5%, 86% 0%, 100% 6%,
    99% 30%, 100% 58%, 98.7% 84%, 100% 100%,
    78% 93%, 50% 100%, 20% 94%, 0% 100%,
    1.2% 70%, 0% 44%, 1% 18%
  );
  opacity: 0;
  visibility: hidden;
  transform: translateY(30px) rotate(-4deg);
  transition: opacity var(--duration-fast) ease-out, transform var(--duration-fast) ease-out,
    visibility var(--duration-fast);
}

.sale-float.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) rotate(-4deg);
}

.sale-float.is-visible:hover,
.sale-float.is-visible:focus-visible {
  transform: translateY(0) rotate(-4deg) scale(1.08);
}

/* "Klikající myš" (setupCursorClickHint v js/main.js) — kurzor a kroužek
   po kliknutí se pozicují absolutně v hostitelském kontejneru. */
.cursor-hint-host {
  position: relative;
}

.cursor-hint {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
  width: 42px;
  height: 42px;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform-origin: 7px 4px; /* špička šipky */
}

.cursor-hint svg {
  display: block;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.3));
}

.cursor-hint__ripple {
  position: absolute;
  z-index: 4;
  width: 48px;
  height: 48px;
  margin: -24px 0 0 -24px;
  border: 2px solid var(--color-text);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
}

/* Popisek + druhý sloupec "PŘEKVÁPKO!" vedle sebe (pod Lístky). */
.hero-subnav__row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

/* PŘEKVÁPKO! + Cena pod sebou */
.hero-subnav__buttons {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-xs);
}

/* "Cena" — úplně stejný štítek jako PŘEKVÁPKO!, jen je to odkaz (sjede
   na ceník #listky), takže bez podtržení. */
.hero-subnav__sale.hero-subnav__sale--price {
  text-decoration: none;
  transform: rotate(3deg); /* nakloněné na druhou stranu než PŘEKVÁPKO! */
}

.hero-subnav__sale.hero-subnav__sale--price:hover,
.hero-subnav__sale.hero-subnav__sale--price:focus-visible {
  transform: rotate(3deg) scale(1.08);
}

/* "PŘEKVÁPKO!" — malá verze štítku .shout (černý potrhaný s texturou),
   klik otevře popup se slevou. */
.hero-subnav__sale {
  flex: 0 0 auto;
  padding: 0.35em 0.6em;
  border: none;
  background-color: var(--color-text);
  background-image: url("../assets/texture.png");
  background-size: cover;
  background-position: 40% 70%;
  color: var(--color-bg);
  font: inherit;
  font-size: calc(var(--font-size-md) * 1.1);
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transform: rotate(-4deg);
  clip-path: polygon(
    0% 4%, 16% 0%, 34% 6%, 52% 0%, 70% 5%, 86% 0%, 100% 6%,
    99% 30%, 100% 58%, 98.7% 84%, 100% 100%,
    78% 93%, 50% 100%, 20% 94%, 0% 100%,
    1.2% 70%, 0% 44%, 1% 18%
  );
  transition: transform var(--duration-fast) ease-out;
}

.hero-subnav__sale:hover,
.hero-subnav__sale:focus-visible {
  transform: rotate(-4deg) scale(1.08);
}

.hero-subnav__desc {
  font-size: calc(var(--font-size-md) * 0.85); /* proporčně menší spolu s názvy */
  line-height: 1.4;
  color: var(--color-text);
}

/* Telefon: větší tlačítka (Lístky/Festival/Opencall) i popisky pod nimi.
   Podtitul "Návrat k tradiční grafice" je jinak odvozený z velikosti
   tlačítek — tady má vlastní velikost, ať se na úzkém displeji nezalomí. */
@media (max-width: 860px) {
  .hero-subnav {
    --hero-subnav-title-size: clamp(42px, 12vw, 64px);
    /* vlevo místo pro piktogramy, které visí před názvy */
    padding-left: calc(var(--hero-subnav-title-size) * 1.15 + var(--space-xs));
  }

  .hero-subnav__desc {
    font-size: var(--font-size-md);
  }

  /* Na telefonu jsou položky pod sebou — velké posuny z PC by je na sebe
     nalepily, tady jen mírné. */
  .hero-subnav__item:nth-child(2) {
    transform: translateY(10px) rotate(-4deg);
  }

  .hero-subnav__item:nth-child(3) {
    transform: translateY(-10px) rotate(2deg);
  }

  /* "PŘEKVÁPKO!" pod popiskem (na PC vedle něj) */
  .hero-subnav__row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-xs);
  }

  .hero__tagline {
    font-size: clamp(24px, 7.2vw, 44px);
  }
}

/* ==========================================================================
   WIPE REVEAL (znovupoužitelné pro nadpisy sekcí — Open Call, Festival…)
   .wipe-reveal__mask je plná barevná plocha přes obrázek; initWipeReveals()
   v js/main.js na ni při scrollu scrubuje clip-path zleva doprava, čímž se
   obrázek pod ní postupně "odemazává". Konkrétní rozměry/poměr stran dej na
   modifikátor (např. .wipe-reveal--opencall), tady jen sdílené základy.
   ========================================================================== */
.wipe-reveal {
  position: relative;
  width: 100%;
}

.wipe-reveal__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left center;
}

/* Pruh s texturou a řadou log pod válečkem (Open Call) — position: absolute
   + inset: 0 (stejně jako .wipe-reveal__mask), ať má naprosto stejnou
   šířku/výšku jako maska, se kterou se animuje váleček. */
.wipe-reveal__photostrip {
  position: absolute;
  inset: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: 0 var(--space-md); /* místo od okraje, ať se loga vejdou na šířku obrazovky */
  background-color: var(--color-text); /* černá, bez textury */
}

/* Malý bílý popisek "S kým jsme spolupracovali" v levém horním rohu
   černého pruhu — odkrývá se spolu s logy pod maskou. */
.wipe-reveal__caption {
  position: absolute;
  top: clamp(4px, 1.2vw, var(--space-sm)); /* na mobilu blíž k okraji, ať nepřekryje loga */
  left: var(--space-md);
  font-size: clamp(0.6rem, 1.8vw, var(--font-size-sm));
  color: var(--color-footer-text);
}

/* Statický pruh log, na místě vedle sebe (bez jízdy) — druhá (klon)
   skupina z dřívější nekonečné smyčky se teď skrývá, ať se loga zobrazí
   jen jednou, rovnoměrně rozprostřená přes celou šířku pruhu. */
.wipe-reveal__photostrip-track {
  display: flex;
  align-items: center;
  height: 100%; /* nutné, ať % výška na .wipe-reveal__photo má vůči čemu počítat */
  width: 100%;
}

.wipe-reveal__photostrip-group {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  width: 100%;
  flex: 0 0 100%;
  gap: var(--space-md);
}

/* Skutečná loga (assets/loga/*.png) — výška vázaná na % vlastní výšky
   pruhu (ne na vw), takže vždy odpovídá velikosti pruhu na jakékoliv
   šířce obrazovky; šířka je auto podle poměru stran konkrétního loga. */
.wipe-reveal__photo {
  height: 9%; /* o 40 % menší než předtím (15% * 0.6) */
  width: auto;
  max-width: 132px; /* 220px * 0.6 */
  object-fit: contain;
}

/* Logo Českého rozhlasu má širší poměr stran (1413×447) než ostatní
   loga — bez max-width se zobrazí v plné přirozené šířce odpovídající
   jeho poměru stran při stejné výšce jako ostatní loga. */
.wipe-reveal__photo--wide {
  max-width: min(28vw, 340px); /* bez stropu by na úzké obrazovce nemuselo se zbytkem log projít na šířku */
}

/* Open Call — loga sdílí rovnoměrně dostupnou šířku pruhu (flex:1 0),
   object-fit:contain je zvětší na maximum, co se ještě vejde vedle sebe
   v jedné řadě (žádné zalamování, viz .wipe-reveal__photostrip padding
   výše pro mezeru od okraje). */
/* Open Call — každé logo sedí ve vlastním čtvercovém "boxu" (vždy
   1:1, ať je logo jakéhokoliv poměru stran), boxy jsou vedle sebe a
   rovnoměrně sdílí celou šířku pruhu (flex:1 1 0), logo je uvnitř
   vycentrované a zmenšené, aby se do čtverce vešlo celé (contain). */
.wipe-reveal__photo-box {
  flex: 1 1 0;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

#open-call .wipe-reveal__photo {
  width: 100%;
  height: 100%;
  max-width: 100%;
}

#open-call .wipe-reveal__photo--wide {
  max-width: 100%;
}

/* PLACEHOLDER pro chybějící obrázek nápisu (např. assets/napis-festival.png).
   Až asset dorazí, nahraď <div class="wipe-reveal__image wipe-reveal__image--placeholder">
   za <img src="..." class="wipe-reveal__image">. */
.wipe-reveal__image--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border: 2px dashed var(--color-border);
  background-color: var(--color-bg);
  color: var(--color-text);
  font-size: clamp(1.5rem, 4vw, 3rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--heading-letter-spacing);
}

/* Klidová (výchozí) pozice = translateX(0), plně kryje obrázek. Samotný
   pohyb (translateX doprava, viz initWipeReveals) řídí čistě JS/GSAP. */
.wipe-reveal__mask {
  position: absolute;
  inset: 0;
  background-color: var(--color-bg);
}

/* initWipeReveals() animuje "left" v souběhu s clip-path maskou, takže
   váleček jede přesně na hraně odkrývání. Velikost válečku je zadaná jako
   % výšky VLASTNÍHO .wipe-reveal boxu (ne vw) — díky tomu vždy odpovídá
   velikosti pruhu, na kterém jede, na jakékoliv šířce obrazovky, a není
   potřeba samostatný přepis pro mobil. */
.wipe-reveal__roller {
  position: absolute;
  top: 50%;
  left: 0%;
  height: 150%;
  width: auto;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  z-index: 2;
  pointer-events: none;
}

/* PLACEHOLDER dokud nemáme assets/valecek.png — jakmile dorazí, nahraď
   <div class="wipe-reveal__roller wipe-reveal__roller--placeholder"> za
   <img src="assets/valecek.png" class="wipe-reveal__roller">. */
.wipe-reveal__roller--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-sm);
  background-color: var(--color-bg);
  font-size: 0.6rem;
  line-height: 1.2;
  text-align: center;
  color: var(--color-text);
  padding: var(--space-xs);
}

/* ==========================================================================
   SEKCE OPEN CALL
   ========================================================================== */
#open-call {
  padding: var(--space-xl) 0 var(--space-sm);
}

.wipe-reveal--opencall {
  width: 100%; /* na celou šířku obrazovky/webu, nikdy víc */
  aspect-ratio: 1224 / 299; /* poměr stran pruhu s fotkami (.wipe-reveal__photostrip) */
  cursor: pointer; /* proklik na sekci Partneři, viz data-scroll-target v HTML */
}

.opencall-content {
  display: flex;
  align-items: flex-start;
  gap: var(--space-xl);
  padding: var(--space-lg) var(--space-md) 0 var(--subnav-inset-left);
}

.opencall-content__visual {
  /* "telefon" (piktogram) — o polovinu menší než předtím (bylo
     clamp(500px, 90vw, 1400px)). flex-shrink zůstává povolený, ať se na
     středních šířkách nezalomí do overflow, než se přepne do sloupce
     (viz media query níže). */
  flex: 0 1 clamp(250px, 45vw, 700px);
  min-width: 0;
}

/* initPiktogramShake() na tenhle prvek tweenuje x/y/rotation — CSS jen
   udává rozměr, samotný pohyb je čistě v JS (transform). */
.opencall-piktogram {
  display: block;
  width: 100%;
  height: auto;
}

.opencall-content__text {
  flex: 1 1 480px;
  max-width: 640px;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  font-size: var(--font-size-md);
  line-height: 1.5;
}

/* Odstavce stejně velké jako text v černých rámečcích (.festival-callout__list) —
   na mobilu vráceno zpět v @media (max-width: 860px). */
.opencall-content__text > p,
.festival-content__text > p:not(.festival-content__heading) {
  font-size: calc(var(--font-size-md) * 2);
}

.opencall-content__list {
  padding-left: 1.25em;
  display: flex;
  flex-direction: column;
  gap: 0.25em;
}

/* Znovupoužitelné tlačítko "Více" — Open Call, Festival… */
.section-cta {
  display: inline-block;
  align-self: flex-start;
  margin-top: var(--space-sm);
  padding: 0.75em 1.75em;
  border: 1px solid var(--color-text);
  border-radius: var(--radius-md);
  font-weight: 600;
  transition: background-color var(--duration-fast) ease-out, color var(--duration-fast) ease-out;
}

.section-cta:hover,
.section-cta:focus-visible {
  background-color: var(--color-text);
  color: var(--color-bg);
}

@media (max-width: 860px) {
  .opencall-content {
    flex-direction: column;
  }

  .opencall-content__visual {
    flex-basis: auto;
    width: clamp(140px, 45vw, 240px);
  }

  /* Rezervuje místo pro zadokované tlačítko menu vpravo nahoře, ať ho
     nápis REGRAFIKA nepřekrývá. Tlačítko má šířku var(--hero-title-size-main)
     (viz .logo-loader-icon), stejnou proměnnou proto použije i rezerva. */
  .hero__image-wrap {
    padding-right: calc(var(--menu-button-offset) + var(--hero-title-size-main) * 1.35 + var(--space-sm)); /* logo je na mobilu 1.35× větší, viz .logo-loader-icon */
  }

  /* Na mobilu řídí velikost šířka (ne výška jako na desktopu) — height:auto
     zaručí čistě proporční zmenšení, ať se nikdy nezdeformuje (kombinace
     pevné výšky + width:auto + max-width by poměr stran nezachovala). */
  .hero__image {
    height: auto;
    width: 100%;
    max-width: 420px;
  }

  /* Odsazení textu od okraje černých rámečků — menší zvlášť zleva. */
  .festival-callout {
    padding: var(--space-sm) var(--space-sm) var(--space-sm) var(--space-xs);
  }

  /* 2x velikost odstavců platí jen na desktopu — na mobilu zpět na běžnou
     velikost. (.festival-callout__list má vlastní přepis níže u své
     základní definice, ať ho neaplikuje dřívější pravidlo v souboru.) */
  .opencall-content__text > p,
  .festival-content__text > p:not(.festival-content__heading) {
    font-size: var(--font-size-md);
  }

  /* Užší (tenčí) pruh log na mobilu — roller i loga jsou v % vlastní
     výšky/šířky, takže se poměrově přizpůsobí automaticky. */
  .wipe-reveal--opencall {
    aspect-ratio: 5 / 1; /* o kousek vyšší než dřív (6/1), ať se větší loga (viz níže) vejdou na výšku */
  }

  /* Menší mezery mezi logy a od okrajů na mobilu — boxy s logy
     (.wipe-reveal__photo-box, flex:1 1 0) si pak rozdělí víc šířky,
     takže jsou loga větší. */
  #open-call .wipe-reveal__photostrip {
    padding: 0 var(--space-xs);
  }

  #open-call .wipe-reveal__photostrip-group {
    gap: var(--space-xs);
  }

  /* Loga v logo liště trochu větší na mobilu. */
  .wipe-reveal__photo {
    height: 11%; /* o 40 % menší než předtím (19% * 0.6, zaokrouhleno) */
  }

  /* Větší nápis FESTIVAL na mobilu. */
  .wipe-reveal--festival-ribbon {
    width: 95%;
  }

  /* Fotka a text "Kampus Hybernská" se na mobilu zalomí pod sebe (flex-wrap) —
     .festival-details__intro gap platí i mezi nimi, tady se pro mobil zmenší
     ještě víc, ať je mezera pod fotkou opravdu malá. */
  .festival-details__intro {
    gap: 0;
  }

  /* Gap i padding už jsou na mobilu 0 — pro ještě menší odstup nápisu
     Kampus Hybernská od fotky nad ním ho posuneme mírně nahoru (překryv). */
  .festival-details__venue {
    margin-top: -0.8rem; /* ještě menší mezera mezi fotkou a textem O festivalu */
  }

  .festival-details__photo-wrap .festival-details__photo-credit { /* vyšší specificita — základní pravidlo je až níž v souboru */
    margin-top: 0.2rem;
  }

  /* Menší mezera nad nápisem FESTIVAL (mezi ním a logo lištou nad ním) —
     .festival-details top padding je jinak var(--space-xl). */
  .festival-details {
    padding-top: var(--space-sm);
  }
}

/* ==========================================================================
   SEKCE FESTIVAL — část 1: představení festivalu
   Nadpis (wipe reveal, stejný mechanismus jako Open Call, jen jede
   opačným směrem — viz data-wipe-reverse v initWipeReveals). Text je na
   celou šířku (na rozdíl od dvousloupcového Open Callu) a bodové seznamy
   jsou zvýrazněné ve vycentrovaných černých rámečcích s texturou
   (assets/texture.png). Sekce 2 (hosté) přijde v dalším kroku.
   ========================================================================== */
.wipe-reveal--festival {
  width: 100%;
  aspect-ratio: 1224 / 299; /* PLACEHOLDER poměr, uprav dle skutečných rozměrů assets/napis-festival.png */
}

.festival-intro {
  position: relative;
  overflow: hidden; /* cursor-trail (initCursorTrail) nesmí přesahovat mimo sekci */
  padding: var(--space-lg) var(--subnav-inset-left) var(--space-xl);
}

.festival-content__text {
  width: 100%;
  max-width: var(--content-max-width);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  font-size: var(--font-size-md);
  line-height: 1.5;
}

.festival-content__heading {
  margin-top: var(--space-sm);
  font-size: var(--subnav-font-size); /* stejně velké jako tlačítka pod hero (Open Call / Festival / Lístky) */
  font-weight: 600; /* semibold */
  text-align: center;
}

/* Tlačítko Lístky — na rozdíl od sdíleného .section-cta (Open Call, vlevo)
   je v téhle sekci vycentrované. */
.festival-content__cta {
  align-self: center;
  font-size: calc(var(--subnav-font-size) / 2); /* polovina nápisu nad ním (.festival-content__heading) */
  border-color: transparent;
  background-color: var(--color-text); /* podklad/fallback pod texturou */
  background-image: url("../assets/texture.png");
  background-size: cover;
  background-position: center;
  color: var(--color-bg);
}

/* Bodové seznamy "víc uprostřed" ve vlastním rámečku. */
.festival-callout {
  width: 100%;
  max-width: 900px; /* větší na desktopu (na mobilu ho tak jako tak omezí šířka obrazovky) */
  margin-inline: auto;
  padding: var(--space-md);
  border-radius: var(--radius-md);
  background-color: var(--color-text); /* podklad/fallback pod texturou (kdyby měla průhledná místa) */
  background-image: url("../assets/texture.png");
  background-size: cover;
  background-position: center;
  color: var(--color-bg); /* bílý text uvnitř černého rámečku */
}

.festival-callout__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding-left: 1.2em;
  font-size: calc(var(--font-size-md) * 2); /* 2x na desktopu — na mobilu vráceno zpět hned pod tím */
}

@media (max-width: 860px) {
  .festival-callout__list {
    font-size: var(--font-size-md); /* stejná velikost jako odstavce, viz @media výše */
  }
}

.festival-callout__list li {
  list-style: disc;
}

/* Cursor-trail (initCursorTrail) — stopa piktogramů z assets/abstakce/,
   sledující kurzor jen uvnitř .festival-intro (viz demo
   https://demos.gsap.com/demo/cursor-trail/). */
.cursor-trail__item {
  position: absolute;
  top: 0;
  left: 0;
  width: clamp(60px, 8vw, 140px);
  height: auto;
  pointer-events: none;
  transform: translate(-50%, -50%);
  z-index: 5;
}

/* ==========================================================================
   TICKET MODAL (Lístky)
   DOM sestavuje a otevírání/zavírání řídí initTicketModal() v js/main.js —
   otevře ho klik na libovolný [data-ticket-modal-trigger]. Nahoře cenový
   "wipe reveal": štítek "?" zakrývá slevu "−10 %",
   kterou je nutné odkrýt přetažením válečku (myš/dotyk/klávesnice).
   Po úspěšném odeslání MailerLite formuláře se .ticket-modal přepne na
   potvrzení "Děkujeme!" (.is-success) — bílý rámeček jako zbytek popupu.
   ========================================================================== */
.ticket-modal-backdrop {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1002; /* nad menu (1001) */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.ticket-modal-backdrop.is-open {
  pointer-events: auto;
}

.ticket-modal {
  position: relative;
  width: min(640px, 100%);
  max-height: min(720px, 90vh);
  overflow-y: auto;
  background-color: var(--color-bg);
  border-radius: var(--radius-lg);
  padding: var(--space-md) var(--space-sm) var(--space-lg); /* nahoře kousek místa nad nadpisem */
  text-align: center;
}

.ticket-modal.is-success .ticket-price-reveal,
.ticket-modal.is-success #ml-newsletter {
  display: none;
}

.ticket-modal__success {
  display: none;
  padding: var(--space-lg) var(--space-sm);
  font-size: var(--font-size-md);
}

.ticket-modal__success-note {
  margin-top: var(--space-sm);
  font-size: var(--font-size-sm);
  opacity: 0.7;
}

.ticket-modal__success-title {
  margin-bottom: var(--space-xs);
  font-size: clamp(2rem, 6vw, 3.5rem);
  font-weight: 700;
  line-height: 1.1;
}

.ticket-modal.is-success .ticket-modal__success {
  display: block;
}

/* Úplně nahoře v rámečku, ve stejné výšce jako křížek — po stranách
   místo, ať se s ním text nepřekrývá. */
.ticket-modal__title {
  padding: 0 2.5rem;
  min-height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--font-size-md) * 1.3);
  font-weight: 700;
}

.ticket-modal.is-success .ticket-modal__title {
  display: none;
}

.ticket-modal__close {
  position: absolute;
  top: var(--space-md); /* v jedné řadě s nadpisem */
  right: var(--space-sm);
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  line-height: 1;
  border-radius: 50%;
  transition: background-color var(--duration-fast) ease-out;
}

.ticket-modal__close:hover,
.ticket-modal__close:focus-visible {
  background-color: var(--color-border);
}

/* --- Cenový wipe reveal ------------------------------------------------ */
.ticket-price-reveal {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding-top: var(--space-md); /* místo pro .ticket-modal__close */
  margin-bottom: var(--space-lg);
}

/* Sleva "−10 %" leží "pod" štítkem .ticket-price-reveal__mask (viz níže) —
   obě zabírají stejné místo přes celou šířku, .wrap drží společnou
   výšku/ořez a čáru, po které jezdí váleček. */
.ticket-price-reveal__wrap {
  position: relative;
  height: clamp(70px, 14vw, 110px);
  overflow: hidden;
  /* Nepravidelný ("potrhaný") okraj — na .wrap (ne na .mask), protože
     initPriceDragReveal() přepisuje clip-path masky inline stylem při
     tažení válečku (přebilo by jakýkoliv statický tvar tam). */
  clip-path: polygon(
    0% 5%, 15% 0%, 35% 6%, 55% 0%, 75% 7%, 92% 0%, 100% 5%,
    99.3% 25%, 100% 50%, 99.5% 75%, 100% 100%,
    70% 95%, 40% 100%, 12% 94%, 0% 100%,
    0.6% 70%, 0% 45%, 0.7% 20%
  );
}

.ticket-price-reveal__discount {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--font-size-xl) * 1.3); /* +30 % */
  font-weight: 700;
}

/* Černý štítek s "?" (bílý text) — zůstává na místě (přes celou
   šířku), initPriceDragReveal() v js/main.js mu při tažení válečku mění
   clip-path (mazání zleva doprava), takže se "vygumuje" a odkryje
   .ticket-price-reveal__discount (−10 %) pod sebou. */
.ticket-price-reveal__mask {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-text);
  background-image: url("../assets/texture.png");
  background-size: cover;
  background-position: 30% 60%;
  color: var(--color-bg);
  font-size: calc(var(--font-size-xl) * 1.3); /* +30 % */
  font-weight: 700;
  clip-path: inset(0% 0% 0% 0%);
}

.ticket-price-reveal__roller {
  position: absolute;
  top: 50%;
  left: 0%;
  z-index: 2;
  width: clamp(50px, 12vw, 90px);
  height: clamp(50px, 12vw, 90px);
  transform: translate(-50%, -50%);
  cursor: grab;
  touch-action: none; /* ať přetažení na dotykových zařízeních nekoliduje se scrollem */
}

.ticket-price-reveal__roller:active {
  cursor: grabbing;
}

.ticket-price-reveal__roller img {
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Rozmazané pozadí pod KAŽDÝM popupem (ticket, karta, partner, chat a
   všechny popupy přes createSimpleModal, které sdílí .partner-modal-backdrop)
   i pod nápisy "POČKEJ!"/"PŘEKVÁPKO!". Bliká spolu s opacity backdropu. */
.ticket-modal-backdrop,
.card-lightbox-backdrop,
.partner-modal-backdrop,
.chat-modal-backdrop,
.shout-backdrop {
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* ==========================================================================
   PROGRAM CHAT (initProgramChat v js/main.js) — popup s konverzací:
   otázky vpravo v bílé bublině s černým okrajem, odpovědi vlevo v černé.
   ========================================================================== */
.chat-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1003;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--duration-fast) ease-out, visibility var(--duration-fast);
}

.chat-modal-backdrop.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.chat-modal {
  position: relative; /* kotva pro .chat-modal__close */
  width: min(560px, 100%);
  height: min(640px, 85vh);
  display: flex;
  flex-direction: column;
  background-color: var(--color-bg);
  border-radius: var(--radius-lg);
  overflow: hidden;
  outline: none;
}

/* Jen křížek vpravo nahoře (bez nadpisu a lišty), leží nad zprávami. */
.chat-modal__close {
  position: absolute;
  top: var(--space-xs);
  right: var(--space-xs);
  z-index: 1;
  width: 2.25rem;
  height: 2.25rem;
  border: none;
  border-radius: 50%;
  background-color: var(--color-bg);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}

.chat-modal__close:hover,
.chat-modal__close:focus-visible {
  background-color: var(--color-border);
}

.chat-modal__messages {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: calc(var(--space-md) + 1.5rem) var(--space-md) var(--space-md); /* nahoře místo pro křížek */
}

.chat-bubble {
  max-width: 80%;
  padding: 0.7em 1em;
  border-radius: 1.25em;
  font-size: var(--font-size-md);
  line-height: 1.4;
}

/* Otázka (návštěvník) — vpravo, bílá s černým okrajem */
.chat-bubble--question {
  align-self: flex-end;
  background-color: var(--color-bg);
  color: var(--color-text);
  border: 2px solid var(--color-text);
  border-bottom-right-radius: 0.3em;
}

/* Odpověď s hosty + tlačítko "HOSTÉ" vedle ní (addGuestsButton). */
.chat-row {
  align-self: flex-start;
  display: flex;
  align-items: flex-end;
  gap: var(--space-xs);
  max-width: 100%;
}

.chat-row .chat-bubble {
  max-width: 72%;
}

/* Stejný potrhaný černý štítek s texturou jako PŘEKVÁPKO!/CENA v hero. */
.chat-guests-button {
  flex: 0 0 auto;
  padding: 0.45em 0.75em;
  border: none;
  background-color: var(--color-text);
  background-image: url("../assets/texture.png");
  background-size: cover;
  background-position: 40% 70%;
  color: var(--color-bg);
  font: inherit;
  font-size: var(--font-size-md);
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transform: rotate(-4deg);
  clip-path: polygon(
    0% 4%, 16% 0%, 34% 6%, 52% 0%, 70% 5%, 86% 0%, 100% 6%,
    99% 30%, 100% 58%, 98.7% 84%, 100% 100%,
    78% 93%, 50% 100%, 20% 94%, 0% 100%,
    1.2% 70%, 0% 44%, 1% 18%
  );
}

.chat-guests-button:hover,
.chat-guests-button:focus-visible {
  transform: rotate(-4deg) scale(1.08);
}

/* "píše…" — tři poskakující tečky (před každou zprávou) */
.chat-bubble--typing {
  display: flex;
  gap: 0.3em;
  padding: 0.9em 1em;
}

.chat-bubble--typing span {
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background-color: currentColor;
  animation: chat-typing 1s infinite ease-in-out;
}

.chat-bubble--typing span:nth-child(2) {
  animation-delay: 0.15s;
}

.chat-bubble--typing span:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes chat-typing {
  0%, 60%, 100% {
    transform: translateY(0);
    opacity: 0.4;
  }
  30% {
    transform: translateY(-0.3em);
    opacity: 1;
  }
}

/* Odpověď (festival) — vlevo, černá */
.chat-bubble--answer {
  align-self: flex-start;
  background-color: var(--color-text);
  color: var(--color-bg);
  border: 2px solid var(--color-text);
  border-bottom-left-radius: 0.3em;
}

@media (max-width: 860px) {
  .chat-modal-backdrop {
    padding: var(--space-sm);
  }

  .chat-bubble {
    max-width: 88%;
  }
}

/* Zešedlé pozadí + zamčený scroll během nápisů (showShoutSequence). */
.shout-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1002; /* pod .shout (1003) */
  background-color: rgba(0, 0, 0, 0.5);
  visibility: hidden;
  opacity: 0;
}

/* "POČKEJ!" / "PŘEKVÁPKO!" před ticket popupem (showShoutSequence v
   js/main.js) — černý potrhaný štítek s texturou uprostřed obrazovky.
   Centrování přes inset+margin:auto (ne translate), ať GSAP může volně
   animovat x/rotation/scale. */
.shout {
  position: fixed;
  inset: 0;
  margin: auto;
  width: fit-content;
  height: fit-content;
  z-index: 1003; /* nad menu i ticket popupem */
  padding: clamp(var(--space-md), 5vw, var(--space-xl)) clamp(var(--space-md), 7vw, var(--space-xl)); /* hodně místa kolem textu */
  background-color: var(--color-text);
  background-image: url("../assets/texture.png");
  background-size: cover;
  background-position: 40% 70%;
  color: var(--color-bg);
  font-size: clamp(2rem, 11vw, 9rem); /* "PŘEKVÁPKO!" se musí vejít i na úzký telefon */
  font-weight: 700;
  line-height: 1;
  letter-spacing: var(--heading-letter-spacing);
  white-space: nowrap;
  pointer-events: none;
  visibility: hidden;
  clip-path: polygon(
    0% 4%, 16% 0%, 34% 6%, 52% 0%, 70% 5%, 86% 0%, 100% 6%,
    99.5% 30%, 100% 58%, 99.35% 84%, 100% 100%,
    78% 93%, 50% 100%, 20% 94%, 0% 100%,
    0.6% 70%, 0% 44%, 0.5% 18%
  );
}

/* Konfety po odkrytí slevy (launchConfetti v js/main.js) — černé útržky
   se stejnou texturou jako štítek "?". Pozici/pohyb řídí GSAP (x/y). */
.confetti {
  position: fixed;
  inset: 0;
  z-index: 1003; /* nad ticket popupem (1002) */
  pointer-events: none;
  overflow: hidden;
}

.confetti__piece {
  position: absolute;
  top: 0;
  left: 0;
  margin: -20px 0 0 -20px;
  background-color: var(--color-text);
  background-image: url("../assets/texture.png");
  background-size: 400px auto;
}

.ticket-price-reveal__hint {
  margin-top: var(--space-xs);
  font-size: var(--font-size-sm);
  color: var(--color-text);
}

/* --- MailerLite formulář (viz initTicketModal -> injectNewsletterForm) - */
#ml-newsletter h4 {
  font-size: calc(var(--font-size-md) * 1.3); /* +30 % */
  font-weight: 600;
  margin-bottom: var(--space-xs);
}

#ml-newsletter p {
  margin-bottom: var(--space-sm);
}

.ml-block-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
}

.ml-block-form input[type="email"] {
  padding: 0.75em 1em;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: var(--font-size-base);
  color: var(--color-text);
  background-color: var(--color-bg);
}

.ml-block-form button[type="submit"] {
  align-self: center;
}

/* ==========================================================================
   SEKCE FESTIVAL — část 2: Místo + Obsah
   Zatím jen HRUBÁ STRUKTURA (šedé/modré placeholdery podle wireframu) —
   nadpis/animace, skutečný text+foto a stylizace karet přijdou v dalších
   krocích, viz komentáře přímo u tříd níže.
   ========================================================================== */
.festival-details {
  padding: var(--space-sm) var(--subnav-inset-left) var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

/* Diagonální stuha s nápisem FESTIVAL — "okno" na celou šířku obrazovky
   (full-bleed), uvnitř leží natočený .wipe-reveal (stejné sdílené třídy
   a initWipeReveals() jako lišta s logy u Open Callu — žádná vlastní
   logika navíc). Aspect-ratio spočítaný tak, ať se natočená (-16°)
   stuha vejde celá, i s válečkem, bez ořezu. */
.festival-details__ribbon-wrap {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  aspect-ratio: 3.1 / 1; /* o něco těsnější než 2.5/1, ale pořád s rezervou nad matematickým minimem (~2.6/1) */
  overflow: visible; /* váleček smí přesahovat mimo okraje tohohle okna */
}

.wipe-reveal--festival-ribbon {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 82%;
  aspect-ratio: 1224 / 299; /* dle assets/napis-festival.png */
  transform: translate(-50%, -50%) rotate(-16deg);
}

/* Razítko vedle nápisu FESTIVAL — vpravo dole v .festival-details__ribbon-wrap
   (šikmá stuha jde zleva dole doprava nahoru, takže tenhle roh je volný).
   Nad válečkem/maskou stuhy. "Dopad" razítka animuje initStampDrop. */
.festival-details__stamp {
  position: absolute;
  right: 1%;
  bottom: -40%;
  z-index: 3;
  width: clamp(182px, 31vw, 473px);
  height: auto;
  transform: rotate(15deg);
  pointer-events: none;
}

@media (max-width: 860px) {
  .festival-details__stamp {
    width: clamp(182px, 48vw, 260px);
  }
}

/* O 30 % menší váleček než výchozí (přebíjí jen % výšky vlastního
   .wipe-reveal boxu, proto to neovlivní lištu s logy u Open Callu). */
.wipe-reveal--festival-ribbon .wipe-reveal__roller {
  height: 105%;
}

/* Full-bleed (přes celou šířku obrazovky, ignoruje padding rodiče
   .festival-details) — vlastní menší padding uvnitř drží text čitelně
   od okraje. */
.festival-details__intro {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 0 var(--space-lg);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-xl);
}

/* <figure> nahradilo samotný <img> jako flex položku (viz .festival-details__intro)
   — foto si drží svou velikost, obal navíc nese malý popisek pod fotkou. */
.festival-details__photo-wrap {
  width: min(560px, 100%);
  margin: 0;
}

.festival-details__photo {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

.festival-details__photo-credit {
  margin-top: var(--space-xs);
  font-size: var(--font-size-sm);
  color: var(--color-text);
  opacity: 0.5;
}

/* Menší mezery nad/pod fotkou Kampusu — rodičovský .festival-details má
   gap: var(--space-xl) mezi všemi sekcemi, tady se jen pro tenhle blok
   o kus zmenší (bez dopadu na ostatní mezery, např. u karet). */
.festival-details__intro {
  margin-top: calc(var(--space-md) - var(--space-xl));
  margin-bottom: calc(var(--space-sm) - var(--space-xl)); /* pod fotkou jen malá mezera */
}

.festival-details__venue {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  min-width: 260px;
  max-width: 40ch;
  padding-top: 0;
  font-size: var(--font-size-md); /* stejná velikost jako popisky pod tlačítky v hero (.hero-subnav__desc) */
  line-height: 1.4;
}

.festival-details__label {
  font-size: clamp(2rem, 4.5vw, 3.85rem); /* vlastní clamp (ne přímo z --subnav-font-size), ať se na mobilu nezmenší moc */
  font-weight: 700;
}

/* Přehled programu — nadpis "Program" + řádek položek (obrázek/název/čas).
   Čistě statický přehled, bez JS/animace. */
.festival-program-overview {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
  text-align: center;
}

.festival-program-overview__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-md);
  list-style: none;
  margin: 0;
  padding: 0; /* reset výchozího odsazení <ul>, jinak to vizuálně netáhne na střed */
}

.festival-program-overview__item {
  width: clamp(150px, 21vw, 280px); /* 4 položky vedle sebe */
}

/* Celá položka (Program i Benefity) je tlačítko — otevře chat popup
   (initProgramChat). */
.festival-program-overview__button,
.festival-benefits__button {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  padding: 0;
  border: none;
  background: none;
  color: inherit;
  font: inherit;
  text-align: center;
  cursor: pointer;
  transition: transform var(--duration-fast) ease-out;
}

.festival-program-overview__button:hover,
.festival-program-overview__button:focus-visible,
.festival-benefits__button:hover,
.festival-benefits__button:focus-visible {
  transform: scale(1.05) rotate(-1.5deg);
}

.festival-program-overview__title,
.festival-program-overview__time,
.festival-benefits__title,
.festival-benefits__text {
  display: block;
}

.festival-program-overview__image {
  width: clamp(120px, 13.5vw, 165px);
  aspect-ratio: 1 / 1;
  object-fit: contain;
}

/* Partneři — stejný vzor jako přehled Programu výše (čtvercové boxy vedle
   sebe, flex-wrap), jen s logem místo ikony+textu. Každý box je černý
   čtverec, logo uvnitř vycentrované a zmenšené, aby se celé vešlo. */
/* Celá sekce má černé pozadí (full-bleed, stejný trik jako u ostatních
   full-width bloků v .festival-details) — text/tlačítko proto potřebují
   vlastní (světlý) přepis, viz níže. */
.festival-partners {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-bottom: calc(-1 * var(--space-xl) - 1px); /* zruší spodní padding rodičovského .festival-details (o 1px víc, ať tam nezůstane tenká bílá linka z subpixelového zaokrouhlení) */
  background-color: var(--color-footer-bg);
  color: var(--color-footer-text);
  padding: var(--space-xl) var(--space-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
}

/* Tlačítko uvnitř černé sekce — bílé s černým textem, ať je na černém
   pozadí vidět (jinak by splynulo se svým vlastním černým texturovaným
   stylem). */
.festival-partners .festival-tickets__cta {
  background-color: var(--color-bg);
  background-image: none;
  color: var(--color-text);
  clip-path: none; /* normální (ne zubatý) okraj */
  border-radius: 0; /* ostré rohy */
}

.festival-partners .festival-details__label {
  color: var(--color-footer-text);
}

/* "S kým jsme spolupracovali" — malý bílý text místo velkého nadpisu */
.festival-partners .festival-partners__label {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 500;
}

.festival-partners__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-md);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Bílé, ať jsou na černém pozadí sekce vidět jako samostatné karty. */
.festival-partners__item {
  width: clamp(280px, 32vw, 440px);
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
  background-color: var(--color-footer-bg); /* stejná černá jako pozadí sekce (.festival-partners), ne var(--color-text) */
  border-radius: var(--radius-sm);
}

.festival-partners__logo {
  max-width: 82%;
  max-height: 82%;
  object-fit: contain;
}

/* AŽ ZA základním pravidlem výše (ne v dřívějším @media bloku), ať to
   nepřebije pozdější nepodmíněné pravidlo se stejnou specificitou. */
@media (max-width: 860px) {
  .festival-partners__logo {
    max-width: 90%;
    max-height: 90%;
  }
}


.festival-program-overview__image--placeholder {
  display: block;
  background-color: var(--color-border);
  border-radius: var(--radius-sm);
}

.festival-program-overview__title {
  font-weight: 700;
  font-size: clamp(1.1rem, 2vw, 1.6rem);
}

.festival-program-overview__time {
  font-size: clamp(1.1rem, 2vw, 1.6rem);
  color: var(--color-text);
}

/* Benefity — stejný vizuální vzor jako přehled Programu výše (nadpis +
   řádek položek s ikonou), jen s popisným textem místo času. */
.festival-benefits {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
  text-align: center;
}

.festival-benefits__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-md);
  list-style: none;
  margin: 0;
  padding: 0;
}

.festival-benefits__item {
  width: clamp(210px, 27vw, 330px);
}

.festival-benefits__image {
  width: clamp(120px, 13.5vw, 165px);
  aspect-ratio: 1 / 1;
  object-fit: contain;
}

.festival-benefits__title {
  font-weight: 700;
  font-size: clamp(1.1rem, 2vw, 1.6rem);
}

.festival-benefits__text {
  font-size: var(--font-size-md);
  color: var(--color-text);
}

.festival-details__content {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 0 var(--space-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
  margin-bottom: calc(var(--space-sm) - var(--space-xl)); /* zmenší mezeru pod nadpisem Program (rodičovský .festival-details gap je --space-xl) */
}

/* Mezera NAD nadpisem (mezi ním a sekcí před ním) — rodičovský
   .festival-details gap je jinak var(--space-xl). Použito u Partnerů. */
.festival-details__content--tight-top {
  margin-top: var(--space-md); /* stejně velké jako mezera pod Minulými akcemi (--tight-bottom) */
}

/* Větší mezera POD nadpisem, než dává základní pravidlo výše. Použito u
   Partnerů (spolu s --tight-top pro menší mezeru nad nadpisem). */
.festival-details__content--loose-bottom {
  margin-bottom: calc(var(--space-lg) - var(--space-xl));
}

/* Ještě menší mezera POD nadpisem (mezi ním a obsahem hned pod ním), než
   dává základní pravidlo výše. Použito u Minulých akcí. */
.festival-details__content--tight-bottom {
  margin-bottom: calc(var(--space-md) - var(--space-xl)); /* výsledná mezera k černé sekci / footeru jen --space-md */
}

/* Na mobilu jsou --tight-top/--tight-bottom navíc k rodičovskému gapu moc
   velké — tady (AŽ ZA základními pravidly výše, ať to nepřebijí) se pro
   mobil zmenší zpátky. */
@media (max-width: 860px) {
  .festival-details__content--tight-top {
    margin-top: calc(var(--space-xs) - var(--space-xl));
  }

  .festival-details__content--tight-bottom {
    margin-bottom: calc(var(--space-xs) - var(--space-xl));
  }
}

/* Dva karuselové sloupce (Přednášky/Workshopy) vedle sebe na PC, pod sebou
   na mobilu — full-bleed obal (uteče paddingu .festival-details), uvnitř
   .festival-details__content/__cards-wrap ztrácí svůj vlastní full-bleed
   trik (jsou teď v úzčím sloupci, ne přes celou obrazovku). */
.festival-details__carousels {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  display: flex;
  align-items: flex-start;
  gap: var(--space-lg);
}

.festival-details__carousel {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.festival-details__carousels .festival-details__content,
.festival-details__carousels .festival-details__cards-wrap {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 0;
}

/* Menší karty než v samostatném (celoširokém) karuselu — v = poloviční
   sloupec, vw jednotky z .festival-details__card/__cards proto zmenšené
   zhruba na polovinu, ať se karty vejdou do sloupce a nepřetékají. */
.festival-details__carousels .festival-details__card {
  width: clamp(208px, 26vw, 390px); /* o 30 % větší než předtím */
}

.festival-details__carousels .festival-details__cards {
  height: clamp(286px, 35vw, 520px); /* o 30 % větší než předtím */
}

/* Na mobilu se karuselové sloupce zalomí pod sebe (viz @media 860px u
   .festival-details__carousels) — každý pak zabírá celou šířku řádku, ne
   půlku jako na desktopu, takže 26vw je zbytečně málo (karty zůstávaly
   nalepené na spodní hranici 208px). AŽ ZA pravidly výše, ať vyhraje. */
@media (max-width: 860px) {
  .festival-details__carousels .festival-details__card {
    width: min(82vw, 390px);
  }

  .festival-details__carousels .festival-details__cards {
    height: min(110vw, 520px);
  }
}

@media (max-width: 860px) {
  .festival-details__carousels {
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
  }

  .festival-details__carousel {
    width: 100%;
    align-items: center;
  }
}

/* Nekonečný carousel (initFestivalCardSlider v js/main.js) — edge-to-edge
   (žádný padding), ať karty plynule vjíždí/vyjíždí za oba okraje
   obrazovky, podle https://demos.gsap.com/demo/infinite-card-slider/.
   JS sadu karet zdvojí pro bezešvou smyčku. */
/* "Coverflow" carousel — šipky vlevo/vpravo, uprostřed jeviště s kartami
   naskládanými přes sebe (initFestivalCardSlider v js/main.js počítá
   pozici/velikost/průhlednost každé karty podle vzdálenosti od aktivní). */
.festival-details__cards-wrap {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  padding: var(--space-xs) var(--space-md);
}

.festival-details__cards {
  position: relative;
  flex: 1 1 auto;
  height: clamp(360px, 54vw, 680px);
}

/* PLACEHOLDER — nahradit skutečnými kartami programu/obsahu, poměr
   stran 3∶4. JS nastavuje x/scale/opacity/z-index podle vzdálenosti od
   aktivní karty — výchozí pozice (než JS proběhne) je uprostřed jeviště. */
.festival-details__card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(300px, 48vw, 680px);
  aspect-ratio: 3 / 4;
  background-color: var(--color-border);
  border-radius: var(--radius-sm);
  object-fit: cover; /* pro <img> karty (Minulé akce) — placeholdery (div) tuhle vlastnost ignorují */
  display: block;
}

/* Karty Přednášky/Workshopy — jen samotné PNG (průhledné pozadí), bez
   barevného rámečku pod ním a bez oříznutí (contain, ne cover). */
.festival-details__card--transparent {
  background-color: transparent;
  border-radius: 0;
  object-fit: contain;
}

/* Karty hostů jdou rozkliknout (viz initCardLightbox v js/main.js) —
   jasně to naznačit kurzorem a jemným zvětšením na hover/focus. */
.festival-details__card--clickable {
  cursor: pointer;
  transition: filter var(--duration-fast) ease-out;
}

.festival-details__card--clickable:hover,
.festival-details__card--clickable:focus-visible {
  filter: brightness(0.92);
}

/* ==========================================================================
   LIGHTBOX PRO KARTY HOSTŮ (Přednášky/Workshopy)
   Jedna sdílená instance vložená do <body> přes initCardLightbox(),
   naplní se obrázkem podle rozkliknuté karty. Stejný vizuální jazyk jako
   ostatní popupy (tmavý backdrop, jednoduché zavírací tlačítko).
   ========================================================================== */
.card-lightbox-backdrop {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg);
  background-color: rgba(0, 0, 0, 0.75);
  z-index: 1003; /* nad ticket modalem (1002) */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--duration-fast) ease-out;
}

.card-lightbox-backdrop.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.card-lightbox {
  position: relative;
  max-width: min(560px, 100%);
  max-height: 90vh;
}

.card-lightbox__image {
  display: block;
  max-width: 100%;
  max-height: 90vh;
  width: auto;
  height: auto;
  margin: 0 auto;
  border-radius: var(--radius-sm);
}

/* Křížek vlevo nahoře na obrazovce (fixed — .card-lightbox má na mobilu
   overflow:hidden a karta přes celou šířku). Zavírá stejně jako klik
   kamkoli do backdropu (initCardLightbox). */
.card-lightbox__close {
  position: fixed;
  top: var(--space-sm);
  left: var(--space-sm);
  z-index: 1;
  width: 2.75rem;
  height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background-color: var(--color-bg);
  color: var(--color-text);
  font-size: 1.9rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.card-lightbox__close:hover,
.card-lightbox__close:focus-visible {
  background-color: var(--color-border);
}

/* Na mobilu se karta otevře přes celou šířku telefonu (bez odstupu od
   okraje) — obrázek se roztáhne na 100 % šířky, výška podle poměru stran
   (u velmi vysoké karty ji ještě hlídá max-height). */
@media (max-width: 860px) {
  .card-lightbox-backdrop {
    padding: 0;
  }

  .card-lightbox {
    width: 100%;
    max-width: 100%;
    max-height: 100vh;
    overflow: hidden; /* ořízne průhledné okraje PNG, viz níže */
  }

  /* PNG karet mají kolem karty průhledný okraj — karta sahá zhruba od
     15,5 % do 82,5 % šířky obrázku (změřeno na všech kartách), tj. jen
     ~67 % šířky. Obrázek je proto ~1,5× širší než displej a posunutý
     doleva, ať samotná karta sahá přesně od kraje ke kraji (pár procent
     potrhaného okraje se může oříznout). */
  .card-lightbox__image {
    width: 152%;
    max-width: none;
    max-height: none;
    margin-left: -24%;
    border-radius: 0;
  }
}

/* ==========================================================================
   POPUP "STÁT SE PARTNEREM" (.data-partner-modal-trigger, initPartnerModal
   v js/main.js) — stejný vzor jako card lightbox (bez zavíracího křížku).
   ========================================================================== */
.partner-modal-backdrop {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg);
  background-color: rgba(0, 0, 0, 0.75);
  z-index: 1003;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--duration-fast) ease-out;
}

.partner-modal-backdrop.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.partner-modal {
  max-width: min(420px, 100%);
  padding: var(--space-lg);
  background-color: var(--color-bg);
  border-radius: var(--radius-lg);
  text-align: center;
}

.partner-modal__title {
  font-size: clamp(1.5rem, 4vw, 2.25rem);
  font-weight: 700;
  margin-bottom: var(--space-sm);
}

.partner-modal__text {
  font-size: var(--font-size-md);
  line-height: 1.5;
}

.partner-modal__email {
  font-weight: 700;
  text-decoration: underline;
}

/* Tlačítko uvnitř popupu (např. "Partneři" v popupu Podpořit na Týmu). */
.partner-modal__actions {
  margin-top: var(--space-md);
}

/* POPUP "HARMONOGRAM" (initScheduleModal v js/main.js) — sdílí
   .partner-modal*, jen širší, zarovnaný doleva a s vlastním scrollem,
   ať se dlouhý seznam vejde i na mobil. */
.partner-modal--schedule {
  position: relative;
  max-width: min(640px, 100%);
  max-height: calc(100vh - 2 * var(--space-lg));
  max-height: calc(100dvh - 2 * var(--space-lg));
  overflow-y: auto;
  overscroll-behavior: contain;
  text-align: left;
}

.partner-modal--schedule .partner-modal__title {
  padding-right: var(--space-lg); /* místo pro křížek */
}

.partner-modal__close {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font: inherit;
  font-size: 2rem;
  line-height: 1;
  color: var(--color-text);
  background: none;
  border: none;
  cursor: pointer;
}

.schedule-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.schedule-list__item {
  display: grid;
  grid-template-columns: 7.5em 1fr;
  gap: var(--space-md);
  padding: var(--space-sm) 0;
  border-top: 1px solid currentColor;
  font-size: var(--font-size-md);
  line-height: 1.4;
}

.schedule-list__item:last-child {
  border-bottom: 1px solid currentColor;
}

.schedule-list__time {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.schedule-list__note {
  display: block;
  margin-top: 0.25em;
  font-size: var(--font-size-sm);
  font-style: italic;
}

/* Na mobilu menší odstup rámečku od okraje obrazovky (AŽ ZA základním
   pravidlem výše, ať to nepřebije). */
@media (max-width: 860px) {
  .partner-modal-backdrop {
    padding: var(--space-sm);
  }

  .partner-modal {
    padding: var(--space-lg) var(--space-md);
  }

  .partner-modal--schedule {
    max-height: calc(100vh - 2 * var(--space-sm));
    max-height: calc(100dvh - 2 * var(--space-sm));
  }

  .schedule-list__item {
    grid-template-columns: 1fr;
    gap: 0.1em;
  }
}

/* Na mobilu musí být AŽ ZA základním pravidlem výše (ne v dřívějším
   @media bloku o pár set řádků dřív) — při stejné specificitě vyhrává
   ten, co je v souboru později, jinak by tuhle mobilní hodnotu potichu
   přebilo základní pravidlo nad tímhle komentářem. */
@media (max-width: 860px) {
  .festival-details__card {
    width: min(98vw, 680px);
  }

  .festival-details__cards {
    height: min(130vw, 680px);
  }

  /* Míň postranního odsazení, ať skoro celoširoká karta nemá kam narazit
     do šipek — sousední karty klidně jedou mimo obrazovku (viz JS
     CARD_STEP, počítaný ze skutečné šířky karty). */
  .festival-details__cards-wrap {
    padding-left: var(--space-xs);
    padding-right: var(--space-xs);
    gap: var(--space-xs);
  }
}

/* Minulé akce — stejný karuselový komponent, ale rámeček má stejný
   poměr stran jako reálná fotka (ne vynucený čtverec/oříznutí) —
   aspect-ratio: auto necháváme na vlastnostech <img>. */
.festival-details__card--square {
  aspect-ratio: 1 / 1;
  height: auto;
  object-fit: cover;
  border-radius: 0; /* clip-path níže ho stejně vizuálně nahradí */
}

/* Nepravidelný ("potrhaný") okraj fotek Minulé akce — stejný princip jako
   u CTA tlačítek (.festival-tickets__cta--1…4). Fotka je čtverec, takže
   jemná výchylka na všech čtyřech stranách (0–2.5 %). Čtyři tvary se
   střídají, ať sousední fotky nemají stejný okraj. */
.festival-details__card--square:nth-child(4n + 1) {
  clip-path: polygon(
    0% 2%, 14% 0%, 30% 1.8%, 48% 0%, 66% 2.2%, 84% 0%, 100% 1.5%,
    98.2% 16%, 100% 34%, 98.5% 52%, 100% 70%, 98% 86%, 100% 100%,
    84% 98%, 66% 100%, 48% 97.8%, 30% 100%, 14% 98.2%, 0% 100%,
    1.8% 84%, 0% 66%, 2% 48%, 0% 30%, 1.5% 14%
  );
}

.festival-details__card--square:nth-child(4n + 2) {
  clip-path: polygon(
    0% 0%, 18% 2.2%, 36% 0%, 54% 1.6%, 72% 0%, 88% 2.4%, 100% 0.5%,
    98.5% 20%, 100% 38%, 97.8% 58%, 100% 76%, 98.6% 92%, 99.5% 100%,
    80% 97.6%, 62% 100%, 44% 98.2%, 24% 100%, 8% 97.8%, 0% 99%,
    2.2% 80%, 0% 60%, 1.6% 42%, 0% 22%, 2% 8%
  );
}

.festival-details__card--square:nth-child(4n + 3) {
  clip-path: polygon(
    0.5% 1.5%, 20% 0%, 40% 2.4%, 58% 0%, 76% 1.8%, 92% 0%, 100% 2%,
    98.4% 18%, 100% 40%, 98.2% 60%, 100% 80%, 98.8% 100%,
    76% 98%, 56% 100%, 36% 97.6%, 18% 100%, 0% 98.4%,
    1.6% 78%, 0% 58%, 2.2% 38%, 0% 18%
  );
}

.festival-details__card--square:nth-child(4n + 4) {
  clip-path: polygon(
    0% 0.5%, 12% 2%, 28% 0%, 46% 2.2%, 64% 0%, 82% 1.6%, 100% 0%,
    97.8% 14%, 100% 32%, 98.4% 50%, 100% 68%, 98% 88%, 100% 99%,
    86% 100%, 68% 97.8%, 50% 100%, 32% 98.4%, 16% 100%, 0% 97.6%,
    2% 86%, 0% 70%, 1.8% 50%, 0% 32%, 2.4% 16%
  );
}

.festival-cards__arrow {
  position: relative;
  z-index: 200; /* nad kartami (JS jim nastavuje z-index až do 100), ať jde na šipky vždy kliknout */
  flex: 0 0 auto;
  width: clamp(40px, 5vw, 56px);
  height: clamp(40px, 5vw, 56px);
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background-color: var(--color-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  line-height: 1;
  transition: background-color var(--duration-fast) ease-out, color var(--duration-fast) ease-out;
}

.festival-cards__arrow:hover,
.festival-cards__arrow:focus-visible {
  background-color: var(--color-text);
  color: var(--color-bg);
}

/* ==========================================================================
   SEKCE LÍSTKY (ceník) — hrubá struktura podle wireframu.
   .festival-tickets__table je CSS grid: 5 sloupců (štítky | cena 1 | dělicí
   čára | cena 2 | poznámky), 4 řádky (hlavička s daty + 3 řádky cen).
   Štítky (Student/Dospělý/Patron) a dělicí čára se natáhnou přes všechny 3
   cenové řádky (grid-row: 2 / span 3), poznámky sedí jen u 1. a 3. řádku.
   ========================================================================== */
.festival-tickets {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

/* Menší mezera NAD celou sekcí Lístky (rodičovský .festival-details gap
   je jinak var(--space-xl)). */
.festival-tickets--tight-top {
  margin-top: calc(var(--space-lg) - var(--space-xl));
}

.festival-tickets__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  text-align: center;
  margin-bottom: calc(var(--space-lg) - var(--space-xl)); /* mezera pod headerem (timer + earlybird text), než dává rodičovský .festival-tickets gap */
}

/* Text "do konce prodeje Earlybird" — menší mezera nad ním (blíž k
   timeru), než dává sdílený .festival-tickets__header gap. */
.festival-tickets__earlybird-note {
  margin-top: calc(var(--space-xs) - var(--space-md));
  font-size: var(--font-size-sm);
  color: var(--color-text);
}

/* PLACEHOLDER — odpočet do konce zvýhodněné ceny (21.10.), zatím jen
   textový štítek "timer" místo skutečného countdownu. */
/* Nepravidelný ("potrhaný") okraj místo rovného obdélníku na texturovaných
   boxech (kromě lišt s logy — .wipe-reveal__photostrip zůstává rovné).
   Nahoře/dole výraznější výchylka (0–3 %), boky jen velmi jemně (0–0.75 %).
   Každý box má vlastní tvar. border-radius se přebíjí (clip-path ho
   stejně vizuálně nahradí). */
.festival-tickets__timer,
.festival-tickets__tier-label,
.festival-tickets__cta {
  border-radius: 0;
}

.festival-tickets__timer {
  clip-path: polygon(
    0% 7%, 8% 0%, 20% 5%, 35% 0%, 50% 6%, 65% 0%, 80% 5%, 92% 0%, 100% 7%,
    99.25% 18%, 100% 35%, 99.5% 52%, 100% 68%, 99.25% 85%, 100% 100%,
    88% 94%, 72% 100%, 55% 93%, 38% 100%, 22% 94%, 8% 100%, 0% 92%,
    0.75% 82%, 0% 65%, 0.5% 48%, 0% 32%, 0.75% 15%
  );
}

/* Tři různé tvary pro tři tarify (Student/Dospělý/Patron), ať nejsou
   naprosto identické (background-position se navíc taky liší). */
.festival-tickets__tier:nth-child(1) .festival-tickets__tier-label {
  clip-path: polygon(
    0% 5%, 10% 0%, 25% 7%, 42% 0%, 58% 5%, 75% 0%, 90% 6%, 100% 0%,
    99.4% 20%, 100% 40%, 99.5% 60%, 100% 80%, 99.4% 100%,
    75% 95%, 50% 100%, 25% 93%, 5% 100%, 0% 95%,
    0.6% 75%, 0% 50%, 0.5% 25%
  );
}

.festival-tickets__tier:nth-child(2) .festival-tickets__tier-label {
  clip-path: polygon(
    0% 0%, 15% 6%, 32% 0%, 50% 7%, 68% 0%, 85% 5%, 100% 1%,
    99.5% 22%, 100% 45%, 99.35% 68%, 100% 90%, 99.5% 100%,
    70% 94%, 42% 100%, 15% 93%, 0% 100%,
    0.65% 78%, 0% 55%, 0.5% 30%
  );
}

.festival-tickets__tier:nth-child(3) .festival-tickets__tier-label {
  clip-path: polygon(
    0% 6%, 20% 0%, 40% 5%, 58% 0%, 78% 7%, 95% 0%, 100% 5%,
    99.25% 28%, 100% 52%, 99.5% 72%, 100% 92%, 99.4% 100%,
    65% 94%, 35% 100%, 8% 93%, 0% 100%,
    0.6% 74%, 0% 48%, 0.75% 22%
  );
}

/* Tři různé tvary pro tři CTA tlačítka (2x Koupit lístek + Stát se
   partnerem), ať nejsou naprosto identická. */
.festival-tickets__cta--1 {
  clip-path: polygon(
    0% 0%, 18% 7%, 38% 0%, 55% 5%, 72% 0%, 90% 6%, 100% 0%,
    99.35% 25%, 100% 50%, 99.5% 75%, 100% 100%,
    65% 94%, 32% 100%, 0% 93%,
    0.65% 65%, 0% 40%, 0.5% 15%
  );
}

.festival-tickets__cta--2 {
  clip-path: polygon(
    0% 5%, 22% 0%, 45% 7%, 65% 0%, 85% 5%, 100% 0%,
    99.5% 28%, 100% 55%, 99.25% 82%, 100% 100%,
    55% 94%, 22% 100%, 0% 93%,
    0.6% 62%, 0% 35%, 0.7% 10%
  );
}

.festival-tickets__cta--3 {
  clip-path: polygon(
    0% 0%, 12% 6%, 30% 0%, 50% 7%, 70% 0%, 88% 5%, 100% 1%,
    99.4% 20%, 100% 45%, 99.5% 68%, 100% 92%, 99.25% 100%,
    68% 94%, 40% 100%, 12% 93%, 0% 100%,
    0.5% 65%, 0% 38%, 0.65% 12%
  );
}

/* Harmonogram (vedle "Koupit lístek" v přehledu Programu). */
.festival-tickets__cta--4 {
  clip-path: polygon(
    0% 4%, 16% 0%, 34% 6%, 52% 0%, 70% 5%, 86% 0%, 100% 6%,
    99.5% 30%, 100% 58%, 99.35% 84%, 100% 100%,
    78% 93%, 50% 100%, 20% 94%, 0% 100%,
    0.6% 70%, 0% 44%, 0.5% 18%
  );
  background-position: 70% 30%;
}

.festival-tickets__timer {
  flex: none;
  width: 100%;
  max-width: 420px;
  aspect-ratio: 4.5 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-text);
  background-image: url("../assets/texture.png");
  background-size: cover;
  background-position: 80% 20%;
  color: var(--color-bg);
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums; /* číslice stejně široké — odpočet neposkakuje */
  white-space: nowrap;
}

/* 3 sloupce podle tarifu (Student/Dospělý/Patron), ne podle data — v
   každém sloupci štítek + obě ceny pod sebou (každá s vlastním malým
   datem) + volitelná poznámka navíc dole. */
.festival-tickets__table {
  display: flex;
  align-items: flex-start;
  gap: var(--space-lg);
}

.festival-tickets__tier {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  text-align: center;
}

.festival-tickets__tier-label {
  width: 100%;
  padding: var(--space-sm);
  background-color: var(--color-text);
  background-image: url("../assets/texture.png");
  background-size: cover;
  background-position: center;
  color: var(--color-bg);
  font-weight: 700;
  font-size: var(--font-size-md);
}

/* Každý tarif má texturu posunutou jinam, ať tři boxy vedle sebe
   nevypadají jako jedna opakovaná dlaždice. */
.festival-tickets__tier:nth-child(1) .festival-tickets__tier-label {
  background-position: 10% 60%;
}

.festival-tickets__tier:nth-child(2) .festival-tickets__tier-label {
  background-position: 60% 10%;
}

.festival-tickets__tier:nth-child(3) .festival-tickets__tier-label {
  background-position: 90% 90%;
}

.festival-tickets__tier-price-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15em;
  padding-bottom: var(--space-xs);
  border-bottom: 2px solid var(--color-text);
}

.festival-tickets__tier-price-group:last-of-type {
  border-bottom: none; /* poslední cena bez spodní linky */
}

/* Každá cena je odkaz na GoOut. */
a.festival-tickets__tier-price-group {
  color: inherit;
  text-decoration: none;
  transition: transform var(--duration-fast) ease-out;
}

a.festival-tickets__tier-price-group:hover,
a.festival-tickets__tier-price-group:focus-visible {
  transform: scale(1.08);
}

a.festival-tickets__tier-price-group:hover .festival-tickets__price,
a.festival-tickets__tier-price-group:focus-visible .festival-tickets__price {
  text-decoration: underline;
  text-underline-offset: 0.12em;
}

.festival-tickets__price,
.festival-tickets__col-heading {
  display: block;
}

.festival-tickets__col-heading {
  font-size: var(--font-size-sm);
  color: var(--color-text);
}

.festival-tickets__price {
  font-size: clamp(1.5rem, 3.5vw, 2.5rem);
  font-weight: 700;
}

.festival-tickets__note {
  font-size: var(--font-size-sm);
  line-height: 1.4;
  color: var(--color-text);
}

.festival-tickets__cta-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  text-align: center;
}

/* Víc tlačítek vedle sebe (Koupit lístek + Harmonogram), na úzkém
   displeji se zalomí pod sebe. */
.festival-tickets__cta-wrap--row {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-md);
}

.festival-tickets__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md) clamp(var(--space-lg), 6vw, var(--space-xl));
  background-color: var(--color-text);
  background-image: url("../assets/texture.png");
  background-size: cover;
  background-position: 40% 70%;
  color: var(--color-bg);
  font: inherit; /* reset pro <button> (viz "Stát se partnerem") */
  font-size: clamp(1.1rem, 2vw, 1.6rem);
  font-weight: 700;
  border: none;
  cursor: pointer;
  transition: opacity var(--duration-fast) ease-out;
}

.festival-tickets__cta:hover,
.festival-tickets__cta:focus-visible {
  opacity: 0.8;
}

.festival-tickets__cta-note {
  font-size: var(--font-size-sm);
  color: var(--color-text);
}

@media (max-width: 860px) {
  .festival-tickets__table {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-lg);
  }
}

/* ==========================================================================
   FOOTER (černý)
   Tři bloky vedle sebe: značka (vlevo), kontakt (uprostřed), credit
   (vpravo) — na mobilu se zalomí pod sebe (flex-wrap).
   ========================================================================== */
.site-footer {
  background-color: var(--color-footer-bg);
  color: var(--color-footer-text);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-lg);
  min-height: clamp(220px, 26vw, 340px);
  padding: var(--space-xl) var(--subnav-inset-left);
}

@media (max-width: 860px) {
  .site-footer {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Vlevo: název spolku + IČO pod sebou (stejné řádkování jako kontakt). */
.site-footer__brand {
  display: flex;
  flex-direction: column;
  gap: 0.2em;
  font-size: var(--font-size-md);
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
}

.site-footer__contact {
  display: flex;
  flex-direction: column;
  gap: 0.2em;
  font-size: var(--font-size-md);
  line-height: 1.5;
}

.site-footer__contact-label {
  font-weight: 400;
}

.site-footer__credit {
  font-size: var(--font-size-md);
}

/* ==========================================================================
   STRÁNKA TÝM (Team.html) — nadpis + 6 kulatých fotek. Na PC 3 v řádku
   (2 řádky), na mobilu všechny pod sebou.
   ========================================================================== */
.team {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
  min-height: 100vh; /* ať footer nevyskočí doprostřed obrazovky, dokud je obsahu málo */
  padding: var(--space-xl) var(--space-md);
  text-align: center;
}

.team__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg) var(--space-md);
  width: 100%;
  max-width: 1100px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.team__member {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
}

.team__photo {
  width: clamp(180px, 22vw, 280px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  object-fit: cover;
  background-color: var(--color-border); /* placeholder, než dorazí fotky */
  margin-bottom: var(--space-xs);
}

.team__name {
  font-weight: 700;
  font-size: clamp(1.1rem, 2vw, 1.6rem);
}

.team__role {
  font-size: var(--font-size-md);
}

@media (max-width: 860px) {
  .team {
    padding: var(--space-lg) var(--space-sm);
  }

  .team__list {
    grid-template-columns: 1fr;
  }

  .team__photo {
    width: min(260px, 70vw);
  }
}