@font-face {
  font-family: 'Söhne';
  src: url('/assets/fonts/sohne-kraftig.otf') format('opentype');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* Metric-matched fallback — vykresluje text se stejnými proporcemi jako Söhne,
   takže při swapu na Söhne nedojde k layout shiftu (žádné poskočení velkých nadpisů). */
@font-face {
  font-family: 'Söhne fallback';
  src: local('Arial Bold'), local('Arial');
  font-weight: 400 700;
  size-adjust: 103%;
  ascent-override: 93%;
  descent-override: 22%;
  line-gap-override: 0%;
}

:root {
  --accent: #767676;
  --text-color: #fff;
  --divider-color: rgba(255, 255, 255, 0.2);
}

html { font-size: calc(100vw / 1920 * 16); }

html, body {
  /* Hardcap přes 100% šířky + overflow clip/hidden — chrání proti horizontálnímu scrollu
     z transformovaných/absolutně pozicovaných elementů (program tiltovaných obrázků, canvas atd.).
     Aplikováno na obojí, jelikož se overflow body ne vždy propaguje na viewport. */
  max-width: 100%;
  overflow-x: hidden;
  overflow-x: clip;
}

body {
  margin: 0;
  font-family: 'Söhne', 'Söhne fallback', system-ui, -apple-system, sans-serif;
  font-size: max(13px, 1rem);
  line-height: 1.5;
  color: var(--text-color);
  background: #000;
  -webkit-font-smoothing: antialiased;
  /* Sticky footer — main roste, footer drží na spodku viewportu */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Hlavní layout containery dostanou taky overflow-x: clip jako další pojistka */
body > main,
body > .site-footer {
  overflow-x: clip;
}

body > main {
  flex: 1 0 auto;
}

body > .site-footer {
  flex-shrink: 0;
}

*, *::before, *::after { box-sizing: border-box; }
img, video, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: color 0.2s ease; }

@media (hover: hover) {
  a:hover { color: var(--accent); }
}
ul { list-style: none; padding: 0; margin: 0; }

/* Italic se nepoužívá — místo toho text v opacity 0.3 (grey-ish) */
em, i { font-style: normal; color: rgba(255, 255, 255, 0.3); }

/* Text selection — slabý accent tint, text bílý (default) */
::selection { background: color-mix(in srgb, var(--accent) 35%, transparent); }
::-moz-selection { background: color-mix(in srgb, var(--accent) 35%, transparent); }

/* ============================================================
   12-column grid (used by sections, hero rows, footer)
   - 65px sides, 10px gaps, 12 fluid columns
   ============================================================ */

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 0.625rem;        /* 10px */
  padding: 0 4.0625rem; /* 65px sides */
}

/* ============================================================
   Nav (logo + burger)
   ============================================================ */

.site-logo {
  position: absolute;
  top: 2.3125rem;
  left: 2.5rem;
  z-index: 10;
  width: 7.5rem;
}

.site-logo img { width: 100%; height: auto; }

.site-burger {
  position: fixed;
  top: 0;
  right: 0;
  width: 4.375rem;
  height: 4.375rem;
  background: var(--accent);
  border: 0;
  cursor: pointer;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 0;
}

.site-burger__icon {
  width: 2.1rem;       /* 33.6px dle figmy */
  height: 2.1rem;
  display: block;
}

/* Burger/Close ikonka — přepnutí podle aria-expanded */
.site-burger[aria-expanded="false"] .site-burger__icon--close,
.site-burger[aria-expanded="true"] .site-burger__icon--open { display: none; }

/* ============================================================
   Error 404 — fullscreen Unicorn Studio scéna + CTA na homepage.
   Footer se na 404 nezobrazuje (viz templates/error.php).
   Mobile: scéna skrytá, místo ní fallback obrázek na pozadí.
   ============================================================ */

.error {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.error__scene {
  position: absolute;
  inset: 0;
  pointer-events: auto;
}

.error__cta {
  position: relative;
  z-index: 1;
}

@media (max-width: 640px) {
  .error__scene { display: none; }
  .error {
    background-image: url('/assets/images/error-mobile-bg.png');
    background-size: cover;
    background-position: center;
  }
  .error__cta {
    width: 100%;
    padding: 0 16px;
    transform: translateY(18dvh);   /* posun pod střed, ať netrefí 404 v bg obrázku */
  }
}

/* ============================================================
   Hlavní menu — fullscreen overlay s 4 dlaždicemi
   ============================================================ */

.menu {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  overflow-y: auto;
  pointer-events: auto;
  /* Tile padding/typography scale down on short viewports (< 1080px tall) via
     min(rem, vh) na jednotlivých vlastnostech níže.
     POZOR: dřív přes --menu-scale = min(1, 100vh / 67.5rem), ale dělení délky
     délkou Firefox neumí → menu se v něm celé rozpadlo. min(rem, vh) je ekvivalent
     (rem se vykrátí: Xrem * 100vh/67.5rem = (X/67.5*100)vh) a funguje všude. */
}

/* Zavřený stav — menu zůstává v DOM, dlaždice clip-pathnuté pryč. Nezachytává kliky. */
.menu[aria-hidden="true"] { pointer-events: none; }

.is-menu-open { overflow: hidden; }

.menu__col {
  position: relative;
  width: 50%;
  height: 100vh;
}

/* Dlaždice rozložené přes z-index — HP a AK (větší) překrývají FV a PR (50vh).
   Top dlaždice začínají u horní hrany, bottom u dolní. Viz figma proto 181:2041.
   Detail: HP/AK rostou až za půlku viewportu = přejedou opačnou dlaždici. */
.menu__col--left .menu__tile--program {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 72vh;
  z-index: 2;
}

.menu__col--left .menu__tile--gallery {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50vh;
  z-index: 1;
}

.menu__col--right .menu__tile--prakticke {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50vh;
  z-index: 1;
}

.menu__col--right .menu__tile--aktuality {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 63vh;
  z-index: 2;
}

.menu__tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: min(5rem, 7.4074vh);  /* 80px, scales down on short viewports */
  text-decoration: none;
  overflow: hidden;
  /* Animované rozbalení — top dlaždice rostou z horní hrany, bottom z dolní (viz figma proto 181:2041) */
  clip-path: inset(0);
  transition: clip-path 0.6s cubic-bezier(0.75, 0, 0.3, 0), background-color 0.25s ease;
}

/* Zavřený stav — top dlaždice (Hlavní program, Praktické) jsou skryté nahoře.
   Bottom dlaždice (Foto/Video, Aktuality) jsou skryté dole. */
.menu[aria-hidden="true"] .menu__tile--program,
.menu[aria-hidden="true"] .menu__tile--prakticke {
  clip-path: inset(0 0 100% 0);
}

.menu[aria-hidden="true"] .menu__tile--gallery,
.menu[aria-hidden="true"] .menu__tile--aktuality {
  clip-path: inset(100% 0 0 0);
}

.menu__tile--program {
  background: var(--accent);
  color: #000;
}

@media (hover: hover) {
  /* Hover: bg zůstává lime, text drží černou (override globálního a:hover accent) — vizuální feedback nese link-sweep efekt */
  .menu__tile--program:hover { color: #000; }
}

.menu__tile--gallery {
  background-color: #000;
  background-image: linear-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3));
  color: #fff;
  justify-content: flex-end;   /* text na spodku viditelného boxu (horních 22vh kryje HP) */
}

.menu__tile--prakticke {
  background: #000;
  color: #fff;
}

.menu__tile--aktuality {
  background-color: #000;
  background-image: linear-gradient(rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.15));
  color: #fff;
  gap: min(1.25rem, 1.8519vh);    /* 20px mezi titulky */
  justify-content: flex-start;
}

.menu__title,
.menu__link {
  display: block;
  width: 100%;
  margin: 0;
  font-size: max(24px, min(5.625rem, 8.3333vh));  /* 90px */
  line-height: min(5.625rem, 8.3333vh);
  letter-spacing: -0.1125rem;        /* -1.8px */
  font-weight: bold;
  text-decoration: none;
  color: inherit;
}

/* V "aktuality" dlaždici social na spodku */
.menu__social {
  margin-top: auto;
  padding: 0;
  list-style: none;
  display: flex;
  gap: min(3.75rem, 5.5556vh);    /* 60px */
  font-size: max(16px, min(4rem, 5.9259vh));  /* 64px */
  line-height: 1;
  font-weight: bold;
}

.menu__social a {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* Mobilní variant socialu — defaultně skrytá, zobrazí se v media query */
.menu__social--mobile { display: none; }

/* ============================================================
   Hero (video + scrollable content over it)
   ============================================================ */

.hero {
  position: relative;
  height: 200vh;
  background: #000;
}

.hero__media {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  overflow: hidden;
}

.hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.6;
}

.hero__video--mobile { display: none; }

@media (max-width: 640px) {
  .hero__video--desktop { display: none; }
  .hero__video--mobile  { display: block; }
}

.hero__content {
  position: absolute;
  inset: 0;
  height: 200vh;
  z-index: 1;
}

/* ============================================================
   CTA Button (component) — reused in hero, footer, etc.
   ============================================================ */

.cta-button {
  position: relative;
  height: 4.375rem;       /* 70px */
  min-width: 36.875rem;   /* 590px default; roste pokud text větší */
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(25px);
  font-size: 4rem;        /* 64px */
  font-weight: bold;
  line-height: 1;
  overflow: hidden;
  clip-path: inset(0);
  isolation: isolate;
}

/* Layered labels:
   - default (bílý) z-index 0 — pod limem, takže ho lime překryje
   - lime overlay   z-index 1 — slideuje zleva
   - alt (černý)    z-index 2 — nad limem, vyjede zespoda */
.cta-button__label {
  position: absolute;
  top: 0;
  left: 0;
  right: 4.375rem;             /* vynechává arrow square (70px) */
  bottom: 0;
  display: flex;
  align-items: center;
  padding: 0 0.625rem 0.375rem;
  white-space: nowrap;
  pointer-events: none;
  transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.cta-button__label--default {
  color: var(--text-color);
  z-index: 0;
}

.cta-button__label--alt {
  color: #000;
  z-index: 2;
  transform: translateY(100%);
  /* Clip-path synchronizovaný s lime sweepem — alt text se ukáže jen tam, kde už je lime overlay */
  clip-path: inset(0 100% 0 0);
  transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1), clip-path 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.cta-button__hover {
  position: absolute;
  top: 0;
  left: 0;
  right: 4.375rem;
  bottom: 0;
  background: var(--accent);
  transform: translateX(calc(-100% - 2px));
  transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  z-index: 1;
}

@media (hover: hover) {
  .cta-button:hover .cta-button__label--default { transform: translateY(-100%); }
  .cta-button:hover .cta-button__hover         { transform: translateX(0); }
  .cta-button:hover .cta-button__label--alt {
    transform: translateY(0);
    clip-path: inset(0);
  }
}

.cta-button__arrow {
  width: 4.375rem;
  background: var(--accent);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
}

/* Okno 33.6×33.6 ve středu boxu — clip-area pro šipky, mimo něj se nezobrazí */
.cta-button__arrow-window {
  position: relative;
  width: 2.1rem;
  height: 2.1rem;
  overflow: hidden;
}

.cta-button__arrow-icon {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  transition: transform 0.7s cubic-bezier(0.83, 0, 0.17, 1);
}

/* Alt šipka startuje vlevo dole, mimo okno — viditelná až přijede dovnitř */
.cta-button__arrow-icon--alt {
  transform: translate(-100%, 100%);
}

@media (hover: hover) {
  /* Default šipka odjede vpravo nahoru (ve směru šipky), mizí na hraně okna */
  .cta-button:hover .cta-button__arrow-icon:not(.cta-button__arrow-icon--alt) {
    transform: translate(100%, -100%);
  }
  .cta-button:hover .cta-button__arrow-icon--alt {
    transform: translate(0, 0);
  }
}

/* Hero rows: position absolute (vertical) + 12-col grid (horizontal) */
.hero__row {
  position: absolute;
  left: 0;
  right: 0;
}

.hero__row--cta       { top: 31.5625rem; }   /* 505px */
.hero__row--datetitle { bottom: 100vh; }      /* on first-viewport bottom edge */
.hero__row--subtitle  { top: 150vh; transform: translateY(-50%); } /* center at 3/4 of 200vh hero */
.hero__row--text      { bottom: 0; }          /* at hero bottom */

/* CTA centered (4 cols, cols 5-8 = middle 4 of 12) */
.hero__row--cta .cta-button {
  grid-column: 5 / span 4;
  min-width: 0;            /* let grid cell decide */
}

/* DATE band — left half (6 cols), lime, bg extends to viewport edge */
.hero__row--datetitle .hero__date {
  grid-column: 1 / span 6;
  margin-left: -4.0625rem;       /* bg goes past grid padding to viewport edge */
  padding-left: 4.0625rem;       /* but text starts at col 1 */
  height: 20rem;                 /* 320px */
  background: var(--accent);
  color: #000;
  font-size: 8.75rem;            /* 140px */
  font-weight: bold;
  text-transform: uppercase;
  text-align: left;
  line-height: 9.375rem;
  display: flex;
  align-items: center;
}

/* H1 TŘEBOŇ — right half (6 cols), text right-aligned to col 12 edge */
.hero__row--datetitle .hero__title {
  grid-column: 7 / span 6;
  font-size: 8.75rem;
  font-weight: bold;
  text-transform: uppercase;
  text-align: right;
  line-height: 9.375rem;
  margin: 0;
  align-self: end;
}

/* H2 subtitle — left 6 cols */
.hero__row--subtitle .hero__subtitle {
  grid-column: 1 / span 6;
  font-size: 5.625rem;    /* 90px */
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: -0.1125rem;
  line-height: 5.625rem;
  margin: 0;
}

/* Right-side text panel — right 6 cols, glass blur, bg extends to viewport edge */
.hero__row--text .hero__text {
  grid-column: 7 / span 6;
  margin-right: -4.0625rem;       /* bg goes past grid to viewport right edge */
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(25px);
  padding: 5rem;
  padding-right: 9.0625rem;       /* compensate for margin so text stays at col 12 edge */
  font-size: max(15px, 2.25rem);
  line-height: 2.625rem;
  display: flex;
  flex-direction: column;
  gap: 3.9375rem;
}

.hero__row--text .hero__text p { margin: 0; }

/* ============================================================
   Sections (program, news, practical) — use 12-col grid
   ============================================================ */

.section {
  padding-top: 8rem;
  padding-bottom: 8rem;  /* sides handled by .grid */
  position: relative;
  background: #000;
}

.section--program {
  padding-top: 2.1875rem; /* 35px — words right under hero */
}

.section--practical {
  padding-bottom: 0;       /* flush against footer */
}

.section--news .section__heading {
  text-align: left;
  margin-bottom: 1.875rem;   /* 30px below heading */
}

.section--news .news-grid {
  margin-top: 6.25rem;       /* 100px above cards */
}


.section__heading {
  grid-column: 1 / -1;
  font-size: max(30px, 8.75rem); /* 140px */
  text-transform: uppercase;
  text-align: center;
  line-height: 1;                /* matches Figma 140/140 */
  margin: 6.25rem 0 0;           /* 100px above heading */
  font-weight: bold;
}

/* ============================================================
   Link Button (component) — text + bottom border + corner ticks.
   ============================================================ */

.button {
  position: relative;
  display: flex;
  align-items: stretch;
  justify-content: center;
  height: 4.375rem;            /* 70px */
  padding: 0;
  font-size: max(15px, 1.5rem); /* 24px */
  font-weight: bold;
  border-bottom: 1px solid var(--text-color);
  overflow: hidden;
  isolation: isolate;
  /* Default → hover: 0.15s ease, no delay (linka zmizí hned)
     Hover → default: 0.15s ease s 0.55s delay (linka se objeví až lime úplně zmizí) */
  transition: border-color 0.15s ease 0.55s;
}

/* Bottom corner ticks (default outline state) — viz figma */
.button > .button__tick--left,
.button > .button__tick--right { display: none; }

.button::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 1px;
  height: 2.146875rem;          /* 34.35px tick */
  background: var(--text-color);
  z-index: 2;
  pointer-events: none;
  transition: height 0.7s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.25s ease 0.2s;
}

.button::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  width: 1px;
  height: 2.146875rem;
  background: var(--text-color);
  z-index: 2;
  pointer-events: none;
  transition: height 0.7s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.25s ease 0.2s;
}

/* Lime fill — vyjede zespodu při hoveru, full width */
.button__text {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  align-items: stretch;
  flex: 1 1 auto;
  overflow: hidden;
  padding: 0 0.625rem;
}

.button__text-stack {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.button__text-line {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 4.375rem;
  flex-shrink: 0;
  white-space: nowrap;
  transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.6s ease;
}

.button__text-line:nth-child(1) {
  color: var(--text-color);
  transform-origin: center top;
}
.button__text-line:nth-child(2) { color: #000; }

/* Lime full bg — sedí pod textem (z-index: 0), translates from below to fill on hover */
.button > .button__fill,
.button-fill { display: none; }

.button {
  background-color: transparent;
}

@media (hover: hover) {
  .button {
    background-image: linear-gradient(var(--accent), var(--accent));
    background-position: 0 100%;
    background-size: 100% 0;
    background-repeat: no-repeat;
    transition: background-size 0.7s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.15s ease 0.55s;
  }
  .button:hover {
    background-size: 100% 100%;
    border-color: transparent;
    transition: background-size 0.7s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.15s ease 0s;
  }
  .button:hover::before,
  .button:hover::after {
    height: 0;
    opacity: 0;
    transition: height 0.7s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.25s ease 0.25s;
  }
  .button:hover .button__text-line:nth-child(1) {
    transform: scale(0.4);
    opacity: 0;
  }
  .button:hover .button__text-line:nth-child(2) {
    transform: translateY(-4.375rem);
  }
}

/* Placement inside section grid */
.section .button {
  grid-column: 5 / span 4;     /* centered 4 cols */
  margin: 6rem 0 0;
}

/* Program */

.program__words {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  font-size: max(15px, 2.25rem);
  margin: 0 0 1.875rem;          /* 30px below words */
}

.program__images {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 0.625rem;
  position: relative;
}

/* CTA wrap — pevně na vertikálním středu sekce, vždy viditelný (desktop i mobil) */
.program__cta-wrap {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  grid-column: 1 / -1;
}

.program__cta-wrap .cta-button {
  width: 100%;
  min-width: 0;
  text-transform: uppercase;
}

/* Grid-item sizing — applies k <picture> i samostatnému <img>, podle toho, co snippet vyrenderoval. */
.program__images > picture,
.program__images > img {
  display: block;
  max-width: 35rem;       /* 560px */
  width: 100%;
}

.program__images img {
  width: 100%;
  height: auto;
  aspect-ratio: 7 / 9;    /* 560 × 720 (Figma poster ratio) */
  object-fit: cover;
  display: block;
}

/* Left image — default state: stacked toward center, no tilt.
   Po vstupu do viewportu (.is-revealed) odjede mírně doleva a tiltne -10°. */
.program__images > picture:first-of-type,
.program__images > img:first-of-type {
  grid-column: 1 / span 6;
  justify-self: end;
  transform: translateX(14%) rotate(0deg);
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.program__images.is-revealed > picture:first-of-type,
.program__images.is-revealed > img:first-of-type {
  transform: translateX(6%) rotate(-10deg);
}

/* Right image — default state: stacked toward center, no tilt.
   Po vstupu do viewportu odjede mírně doprava a tiltne +10°. */
.program__images > picture:nth-of-type(2),
.program__images > img:nth-of-type(2),
.program__images > picture:last-of-type,
.program__images > img:last-of-type {
  grid-column: 7 / span 6;
  justify-self: start;
  margin-top: 5.625rem;   /* 90px — left image sits higher per Figma */
  transform: translateX(-14%) rotate(0deg);
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.program__images.is-revealed > picture:nth-of-type(2),
.program__images.is-revealed > img:nth-of-type(2),
.program__images.is-revealed > picture:last-of-type,
.program__images.is-revealed > img:last-of-type {
  transform: translateX(-6%) rotate(10deg);
}

/* News */

.news-grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 0.625rem;
  align-items: start;
}

.news-grid > li:nth-child(1) { grid-column: 1 / span 3; }
.news-grid > li:nth-child(2) { grid-column: 5 / span 4; }
.news-grid > li:nth-child(3) { grid-column: 10 / span 3; }

.news-card picture {
  display: block;
  overflow: hidden;
  margin-bottom: 1rem;
}

.news-card img {
  aspect-ratio: 11/12;
  object-fit: cover;
  width: 100%;
  background: #444;
  transition: transform 0.5s ease;
}

@media (hover: hover) {
  .news-card a:hover img { transform: scale(1.02); }
}

.news-card time {
  font-size: max(13px, 1rem);
  display: block;
  margin-bottom: 1rem;
}

.news-card h3 {
  font-size: max(15px, 2.25rem);
  line-height: 1.2;
  margin: 0;
  font-weight: bold;
}

/* Practical — N stacked rows oddělené linkami. Pozice se cyklí po 3 (4. = jako 1., 5. = jako 2., atd.) */

.prakticke-items {
  grid-column: 1 / -1;
  border-top: 1.3px solid var(--divider-color);
}

.prakticke-item {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 0.625rem;
  align-items: center;
  padding: 1.625rem 0;
  border-bottom: 1.3px solid var(--divider-color);
}

/* Inner wrapper holds image + text close together (10px gap) */
.prakticke-item__inner {
  display: inline-flex;
  align-items: baseline;          /* image bottom aligns with text baseline */
  gap: 0.625rem;                  /* 10px between img and text */
}

/* Picture wrapper clipne scaled img při hover zoomu (jen pokud je inner anchor) */
.prakticke-item__inner picture {
  display: block;
  overflow: hidden;
  flex-shrink: 0;
}

.prakticke-item__img {
  width: 6.25rem;                 /* 100px — match text cap-height (Söhne bold) */
  height: 6.25rem;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: #454545;
  flex-shrink: 0;
  transition: transform 0.5s ease;
}

@media (hover: hover) {
  a.prakticke-item__inner:hover .prakticke-item__img { transform: scale(1.02); }
}

.prakticke-item__text {
  font-size: 8.75rem;             /* 140px */
  text-transform: uppercase;
  font-weight: bold;
  line-height: 1;
  white-space: nowrap;
}

/* Pozice 1, 4, 7, … — starts at col 5 */
.prakticke-item:nth-child(3n+1) .prakticke-item__inner {
  grid-column: 5 / -1;
  justify-self: start;
}

/* Pozice 2, 5, 8, … — starts at col 2 */
.prakticke-item:nth-child(3n+2) .prakticke-item__inner {
  grid-column: 2 / -1;
  justify-self: start;
}

/* Pozice 3, 6, 9, … — text + image right-aligned, image ends at col 11 right edge */
.prakticke-item:nth-child(3n) .prakticke-item__inner {
  grid-column: 1 / 12;
  justify-self: end;
  flex-direction: row-reverse;    /* image after text in DOM but visually right */
}

/* ============================================================
   Page heading (large H1, top of inner pages)
   ============================================================ */

.page-heading {
  font-size: 8.75rem;          /* 140px */
  text-transform: uppercase;
  text-align: center;
  font-weight: bold;
  line-height: 9.375rem;       /* 150px */
  margin: 0;
  padding: 13.125rem 4.0625rem 5rem; /* top 210px, bottom 80px, sides 65px */
}

/* ============================================================
   Aktuality — listing page
   ============================================================ */

.aktuality-list {
  padding: 0 4.0625rem;        /* 65px sides */
  margin: 0;
}

.aktuality-item {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 0.625rem;
  align-items: start;
  padding: 2.5rem 0;            /* 40px top/bottom */
  border-top: 1.3px solid var(--divider-color);
}

.aktuality-item:last-child {
  border-bottom: 1.3px solid var(--divider-color);
}

.aktuality-item__date {
  grid-column: 1 / span 2;
  font-size: max(15px, 2.25rem); /* 36px floor 15 */
  line-height: 1.167;            /* 42/36 */
  font-weight: bold;
}

.aktuality-item__title {
  grid-column: 3 / span 6;       /* ~half width — wraps longer titles */
  font-size: max(15px, 2.25rem);
  line-height: 1.167;
  font-weight: bold;
  margin: 0;
}

.aktuality-item__title a {
  color: inherit;
  text-decoration: none;
}

.aktuality-item__thumb {
  grid-column: 12;
  position: relative;
  width: 8.75rem;                /* 140px */
  height: 9.5rem;                /* ~152px */
  overflow: hidden;
  background: #bebebe;
}

.aktuality-item__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

@media (hover: hover) {
  .aktuality-item:hover .aktuality-item__thumb img { transform: scale(1.02); }
}

/* Eye overlay (hover) */
.aktuality-item__thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('/assets/images/eye.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 5.25rem auto; /* ~84px wide eye icon */
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

/* Hover state — lime accent on text + dim image + show eye */
.aktuality-item:hover .aktuality-item__date,
.aktuality-item:hover .aktuality-item__title {
  color: var(--accent);
}

.aktuality-item:hover .aktuality-item__thumb::after {
  opacity: 1;
}

/* ============================================================
   Footer
   ============================================================ */

.site-footer {
  position: relative;
  margin-top: 0.625rem;       /* 10px — aby patička nezakrývala spodek tlačítka nad ní */
  grid-template-rows: auto auto 1fr auto auto;
  row-gap: 0;                 /* no default row gap; specific spacing via margins */
  padding-top: 27.5rem;       /* 440px — content starts under image area */
  padding-bottom: 3.875rem;   /* 62px */
  min-height: 62.4375rem;     /* 999px — matches Figma footer height */
  background-color: #000;
  background-image: url('/assets/images/footer-unicorn.png');
  background-size: 100% auto;      /* fill width, height proporčně dle aspect — sedí v top portion patičky */
  background-position: top center;
  background-repeat: no-repeat;
}

/* Top gradient overlay (black → transparent), 197px tall */
.site-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 12.3125rem;
  background: linear-gradient(to bottom, #000, transparent);
  pointer-events: none;
  z-index: 2;
}

/* Unicorn Studio interactive scene — vykresluje se v top portion patičky se zachovaným aspectem (1920×1080).
   Patička sama drží svojí výšku podle obsahu/min-height, scéna se nepokouší zaplnit celou patičku. */
.site-footer .footer-scene {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  aspect-ratio: 1920 / 1080;
  max-height: 100%;                /* nikdy nepřesáhnout výšku patičky */
  pointer-events: auto;
  overflow: hidden;
}

.site-footer .footer-scene > *,
.site-footer .footer-scene canvas {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}

/* Když se scéna inicializuje, schovat fallback bg image (na desktopu) */
.has-footer-scene .site-footer { background-image: none; }

/* Mobile: scéna se může načíst (conditional v JS) — pokud se nenačte, zůstává fallback bg image */

.site-footer > * {
  position: relative; /* stack above background pseudo */
}

/* Row 1: "Kontakt" label (glass like phone, faded text only), shrink-wrapped */
.site-footer__kontakt-label {
  grid-column: 1 / span 4;
  grid-row: 1;
  justify-self: start;        /* shrink-wrap to text width */
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(25px);
  padding: 0 0.625rem 0.375rem;
  font-size: 4rem;
  font-weight: bold;
  color: rgba(255, 255, 255, 0.3);
  height: 4.375rem;
  display: flex;
  align-items: center;
  line-height: 1;
}

/* Row 2: Phone + Email CTA */
.footer-phone {
  grid-column: 1 / span 4;
  grid-row: 2;
  height: 4.375rem;
  padding: 0 0.625rem 0.375rem;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(25px);
  font-size: 4rem;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: space-between;
  line-height: 1;
}

.footer-phone--placeholder { background: transparent; }

.site-footer .cta-button {
  grid-column: 5 / -1;
  grid-row: 2;
  min-width: 0;
}

/* Row 3 (1fr) — empty spacer where unicorn image is most visible */

/* Row 4: Social (left, 3 sub-cols) + © (right, col 11) */
.site-footer__social {
  grid-column: 1 / span 3;
  grid-row: 4;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.625rem;
  font-size: 4rem;
  font-weight: bold;
}

.site-footer__social a { text-decoration: underline; text-underline-offset: 0.15em; }

.site-footer__copy {
  grid-column: 11 / -1;
  grid-row: 4;
  font-size: 4rem;
  font-weight: bold;
  margin: 0;
  text-align: right;
}

/* Stopětka — same row as legal links, right side */
.site-footer__stopetka {
  grid-column: 11 / -1;
  grid-row: 5;
  font-size: 4rem;
  font-weight: bold;
  text-align: right;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* Row 5: Legal links — sub-grid placed at specific cols */
.site-footer__legal {
  grid-column: 1 / -1;
  grid-row: 5;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 0.625rem;
  font-size: max(13px, 1.25rem);
  font-weight: bold;
  margin-top: 4rem;
}

.site-footer__legal li,
.site-footer__social li {
  white-space: nowrap;       /* allow content overflow past col, no wrapping */
  min-width: 0;              /* prevent content from expanding the col */
}

.site-footer__legal li:nth-child(1) { grid-column: 1; }   /* Návštěvnický řád */
.site-footer__legal li:nth-child(2) { grid-column: 3; }   /* Obchodní podmínky */
.site-footer__legal li:nth-child(3) { grid-column: 5; }   /* GDPR */
.site-footer__legal li:nth-child(4) { grid-column: 6; }   /* Cookies */
.site-footer__legal li:nth-child(5) { grid-column: 8; }   /* Credits */

/* ============================================================
   Artlist — listing s filtrem ročníků a hover overlayi
   ============================================================ */

.tabs,
.artlist-filter {
  display: flex;
  justify-content: center;
  gap: 0.3125rem;             /* 5px */
  margin: 0.625rem 0 1.875rem; /* 10px nad / 30px pod */
}

.tabs__tab,
.artlist-filter__tab {
  display: inline-flex;
  align-items: center;
  height: 1.875rem;            /* 30px */
  padding: 0 0.3125rem 0.1875rem;
  background: var(--divider-color);
  color: var(--text-color);
  font: inherit;
  font-size: max(13px, 1.25rem);
  font-weight: bold;
  line-height: 1;
  border: 0;
  cursor: pointer;
  text-decoration: none;
}

.tabs__tab.is-active,
.artlist-filter__tab.is-active {
  background: var(--accent);
  color: #000;
}

.artlist-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  padding: 0 4.0625rem 8rem;   /* 65px po stranách, 128 dole */
  margin: 0;
  align-items: flex-start;
}

.artlist-card {
  width: 27.5rem;              /* 440px */
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.artlist-card[hidden] { display: none !important; }

.artlist-card__media {
  position: relative;
  width: 100%;
  aspect-ratio: 440 / 550;
  background: #000;
  overflow: hidden;
}

.artlist-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.2s ease;
}

.artlist-card--has-events:hover .artlist-card__media img,
.artlist-card--has-bio:hover .artlist-card__media img {
  opacity: 0.5;
}

/* Hover s navázanými akcemi — proklikávací list odkazů */
.artlist-card__events {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - 1.25rem);
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  margin: 0;
  padding: 0;
  list-style: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.artlist-card--has-events:hover .artlist-card__events {
  opacity: 1;
  pointer-events: auto;
}

.artlist-card__events a {
  display: flex;
  height: 2.5rem;              /* 40px */
  align-items: center;
  justify-content: center;
  padding: 0 0.625rem 0.125rem;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(25px);
  font-size: max(15px, 1.5rem);
  font-weight: bold;
  line-height: 1;
}

.artlist-card__events a:hover {
  background: var(--accent);
  color: #000;
}

/* Hover bez akcí, ale s bio textem */
.artlist-card__bio {
  position: absolute;
  inset: 0.625rem;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(25px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.artlist-card--has-bio:hover .artlist-card__bio {
  opacity: 1;
  pointer-events: auto;
}

.artlist-card__bio p {
  margin: 0;
  font-size: max(15px, 1.5rem);
  line-height: 1.42;
  text-align: center;
}

.artlist-card__name {
  font-size: max(15px, 1.5rem);
  line-height: 1;
  font-weight: bold;
  margin: 0;
}

/* Poslední karta v gridu jako CTA odkaz */
.artlist-card__cta-link {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 34.375rem;           /* 550px — stejně jako fotka umělce */
  padding: 0.9375rem 1.25rem 1.25rem;
  background-color: #000;
  background-image: linear-gradient(rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.15));
  font-size: max(15px, 1.5rem);
  line-height: 1.42;
  font-weight: bold;
  gap: 0.625rem;
}

.artlist-card__cta-text { flex: 1 1 auto; }
.artlist-card__cta-text p:first-child { margin-top: 0; }
.artlist-card__cta-text p:last-child  { margin-bottom: 0; }

.artlist-card__cta-arrow {
  width: 4.375rem;
  height: 4.375rem;
  background: var(--accent);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.artlist-card__cta-arrow img {
  width: 2.1rem;
  height: 2.1rem;
  display: block;
}

/* ============================================================
   Reusable text row — malý nadpis vlevo, paragraphs vpravo,
   horizontální linky nahoře/dole. Použito v Kontaktu, použije se
   i v detailu akce a článku.
   ============================================================ */

.text-rows {
  grid-column: 1 / -1;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Uzavírací linka pod poslední text-row na kontaktu (stejná jako border-top řádků) */
.kontakt-section .text-rows {
  border-bottom: 1px solid var(--divider-color);
}

.text-row {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 0.625rem;
  padding: 3.75rem 0;            /* 60px nahoře/dole */
  border-top: 1px solid var(--divider-color);
  scroll-margin-top: 2.5rem;     /* offset pro skok přes #anchor, aby section nelepila k hornímu okraji */
}

.text-row__title {
  grid-column: 1 / span 6;
  font-size: max(15px, 2.25rem);     /* 36px */
  line-height: 2.625rem;             /* 42px */
  font-weight: bold;
}

/* Sdílená typografie body bloků (text-row, clanek) */
.text-row__body,
.detail__content {
  font-size: max(15px, 1.5rem);      /* 24px */
  line-height: 2.5rem;               /* 40px */
  display: flex;
  flex-direction: column;
}

.text-row__body { grid-column: 7 / span 6; gap: 1.25rem; }   /* 20px */

.text-row__body p, .text-row__body ul, .text-row__body ol,
.detail__content p, .detail__content ul, .detail__content ol {
  margin: 0;
}

.text-row__body ul, .text-row__body ol,
.detail__content ul, .detail__content ol {
  list-style: revert;
  padding-left: 2.25rem;             /* 36px */
}

/* Cenik je sice <ul>, ale nepoužívá bullety ani odsazení */
.text-row__body ul.cenik,
.detail__content ul.cenik {
  list-style: none;
  padding-left: 0;
}

.text-row__body li,
.detail__content li {
  line-height: 2.5rem;
}

.text-row__body a,
.detail__content a {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* --full mód: title v levém půlsloupci, body přes celou šířku pod ním */
.text-row--full {
  row-gap: 0.625rem;                 /* 10px — title těsně nad obrázkem */
}

.text-row--full .text-row__title {
  grid-column: 1 / span 6;
  grid-row: 1;
}

.text-row--full .text-row__body {
  grid-column: 1 / -1;
  grid-row: 2;
}

/* ============================================================
   Block-image (obrazek block uvnitř text-row body)
   ============================================================ */

.block-image {
  margin: 0;
}

/* Blok "tlačítko" — velký CTA button na plnou šířku textového bloku */
.block-button {
  width: 100%;
  padding: 1.875rem 0;   /* 30px nad/pod */
}
.block-button .cta-button {
  width: 100%;
  min-width: 0;
}

.block-image img {
  width: 100%;
  height: auto;
  display: block;
}

.block-image--full {
  position: relative;
  width: 100%;
  aspect-ratio: 1790 / 600;
  overflow: hidden;
  background: #000;
}

.block-image--full img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Mobile-specific full-width image — skrytá na desktopu, na mobilu se přepíná v media query */
.block-image--mobile { display: none; }

/* ============================================================
   Cenik (cenik block uvnitř text-row body)
   ============================================================ */

.cenik {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;                     /* 10px mezi řádky */
  margin: 0;
  padding: 0;
  list-style: none;
}

.cenik__row {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem;                 /* 10px */
  background: rgba(255, 255, 255, 0.1);
}

.cenik__label {
  flex: 1 1 0;
  min-width: 0;
  font-size: max(15px, 1.25rem);     /* 20px */
  line-height: 1.25;
}

.cenik__price {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 8.75rem;                    /* 140px */
  height: 1.875rem;                  /* 30px */
  padding: 0 0.3125rem 0.1875rem;
  background: #fff;
  color: #000;
  font-size: max(13px, 1.25rem);
  line-height: 1;
  flex-shrink: 0;
}

/* ============================================================
   Praktické — wrapper sekce s text-rows
   ============================================================ */

.prakticke-content {
  padding-top: 3.75rem;              /* 60px gap od page-heading k první lince */
  padding-bottom: 8.125rem;          /* 130px před footer */
}

/* ============================================================
   Detail článku (clanek)
   - Levý sloupec: hlavní obrázek (sticky)
   - Pravý sloupec: back-link nahoře, headline (datum + h1), body
   - Galerie pod tím přes celou šířku
   ============================================================ */

.detail__top {
  display: grid;
  grid-template-columns: 740fr 160fr 890fr;
  padding: 14rem 4.0625rem 8rem;     /* 224 top, 65 sides, 128 bottom */
  row-gap: 5rem;                     /* 80px mezi head a body řádkem */
}

.detail__back {
  grid-column: 1;
  grid-row: 1;
  display: inline-flex;
  align-items: center;
  gap: 1.125rem;                     /* 18px */
  align-self: start;
  text-decoration: none;
}

.detail__back-arrow {
  width: 3.125rem;                   /* 50px */
  height: 3.125rem;
  background: var(--accent);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.detail__back-arrow img {
  width: 1.5rem;                     /* 24px */
  height: 1.5rem;
  display: block;
  transform: scaleX(-1);             /* zrcadlové překlopení (původní ↗ → ↖) */
}

.detail__back-text {
  font-size: max(18px, 4rem);        /* 64px */
  line-height: 1;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: -0.08rem;          /* -1.28px */
  padding-bottom: 0.25rem;
}

.detail__headline {
  grid-column: 3;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;                       /* 40px */
  align-self: start;
}

.detail__date {
  font-size: max(15px, 2.25rem);     /* 36px */
  line-height: 2.625rem;             /* 42px */
  font-weight: bold;
}

.detail__title {
  font-size: max(20px, 5.625rem);    /* 90px */
  line-height: 5.625rem;
  letter-spacing: -0.1125rem;
  font-weight: bold;
  margin: 0;
}

.detail__main-image {
  grid-column: 1;
  grid-row: 2;
  position: sticky;
  top: 4.0625rem;                    /* 65px — stejná mezera jako od levého okraje */
  width: 100%;
  aspect-ratio: 740 / 924;
  overflow: hidden;
  background: #bebebe;
  margin: 0;
  align-self: start;
}

.detail__main-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.detail__content {
  grid-column: 3;
  grid-row: 2;
  gap: 3.75rem;                      /* 60px mezi bloky */
}

/* obrazek-clanek block uvnitř clanek body — 890×600 ořezané */
.detail__content .block-image--article {
  aspect-ratio: 890 / 600;
  background: #bebebe;
  overflow: hidden;
}

.detail__content .block-image--article img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Galerie sekce na konci článku */
.detail__gallery {
  display: grid;
  grid-template-columns: 740fr 160fr 890fr;
  padding: 0 4.0625rem 8rem;
  row-gap: 5rem;                     /* 80px mezi nadpisem a galerií */
}

.detail__gallery-heading {
  grid-column: 3;
  grid-row: 1;
  font-size: max(20px, 4rem);        /* 64px */
  line-height: 1;
  font-weight: bold;
  margin: 0;
}

.detail__gallery .gallery {
  grid-column: 1 / -1;
  grid-row: 2;
}

/* ============================================================
   Program — listing ročníku (denní mřížka + výstavy)
   ============================================================ */

/* Toolbar = legenda míst (vlevo) + Archiv (vpravo) na stejném řádku */
.program-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 0 4.0625rem;
  margin: 0.625rem 0 3.75rem;
}

.program-venues {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3125rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Desktop: button skrytý, venues vždy viditelné */
.program-legend .program-legend__btn { display: none; }

/* Každá venue má vlastní background (jen tam, kde je text + ikona) */
.program-venues__item {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  height: 1.875rem;
  padding: 0 0.625rem;
  background: rgba(255, 255, 255, 0.1);
  font-size: max(13px, 1.25rem);
  line-height: normal;               /* dle figmy (leading-normal) */
  font-weight: bold;
}

/* Ikona — celá výška chipu (30px), padding má SVG vnitřně */
.program-venues__icon {
  width: 1.875rem;
  height: 1.875rem;
  display: block;
  flex-shrink: 0;
}

.program-venues__name {
  padding-bottom: 0.1875rem;
}

/* Archiv dropdown */
.program-archive {
  position: relative;
  flex-shrink: 0;
}

.program-archive__btn {
  display: inline-flex;
  align-items: center;
  height: 1.875rem;
  padding: 0 0.625rem 0.1875rem;
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-color);
  font: inherit;
  font-size: max(13px, 1.25rem);
  line-height: 1;
  font-weight: bold;
  border: 0;
  cursor: pointer;
}

.program-archive__list {
  position: absolute;
  top: calc(100% + 0.3125rem);
  right: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.3125rem;
  z-index: 5;
  min-width: 100%;
}

.program-archive__list[hidden] { display: none; }

.program-archive__list a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 1.875rem;
  padding: 0 0.625rem 0.1875rem;
  background: rgba(255, 255, 255, 0.1);
  font-size: max(13px, 1.25rem);
  line-height: 1;
  font-weight: bold;
  text-decoration: none;
  white-space: nowrap;
}

.program-archive__list a.is-active {
  background: var(--accent);
  color: #000;
}

.program-archive__list a:hover {
  background: var(--accent);
  color: #000;
}

/* Denní mřížka — 5 sloupců po dnech */
.program-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.625rem;
  padding: 0 4.0625rem;
  align-items: start;
}

.program-day {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  min-width: 0;
}

.program-day__head {
  height: 7.5rem;                    /* 120px */
  background: rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: max(20px, 5.625rem);    /* 90px */
  letter-spacing: -0.1125rem;
  font-weight: bold;
  line-height: 1;
  padding-bottom: 0.625rem;
}

.program-day__events {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.program-event {
  position: relative;
  background: rgba(var(--genre-rgb, 133, 133, 133), 0.2);
}

.program-event__link {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  padding: 0.625rem;
  text-decoration: none;
}

.program-event__time {
  background: #fff;
  color: #000;
  height: 1.875rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.3125rem 0.1875rem;
  font-size: max(13px, 1.25rem);
  line-height: 1;
  align-self: flex-start;
}

.program-event__title {
  font-size: max(13px, 1.25rem);
  line-height: 1.25;
  font-weight: bold;
  margin: 0;
}

.program-event__venue {
  position: absolute;
  top: 0.625rem;
  right: 0.625rem;
  width: 2rem;                       /* 32px */
  height: 2rem;
  padding: 0;
  display: block;
  box-sizing: border-box;
}

.program-event__venue img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Výstavy — heading + list přes celou šířku */
.program-exhibitions__heading {
  margin: 5rem 4.0625rem 1.875rem;   /* 80px nad, 30px pod nadpis */
  padding: 0;
  font-size: max(20px, 4rem);        /* 64px */
  line-height: 1;
  font-weight: bold;
  text-align: center;
}

.program-exhibitions {
  list-style: none;
  margin: 0 4.0625rem 8rem;          /* 128 dole */
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.program-exhibition {
  background: rgba(255, 255, 255, 0.1);
}

.program-exhibition__link {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem;
  text-decoration: none;
}

.program-exhibition__time {
  width: 8.75rem;                    /* 140px */
  height: 1.875rem;                  /* 30px */
  background: #fff;
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.3125rem 0.1875rem;
  font-size: max(13px, 1.25rem);
  line-height: 1;
  flex-shrink: 0;
  white-space: nowrap;
}

/* Info varianta — glass background místo bílého chipu, bez ikony */
.program-exhibition__time--info {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}

.program-exhibition__title {
  flex: 1 1 auto;
  margin: 0;
  font-size: max(13px, 1.25rem);
  line-height: 1;
  font-weight: bold;
}

.program-exhibition__venue {
  font-size: max(13px, 1.25rem);
  line-height: 1;
  font-weight: bold;
  white-space: nowrap;
}

.program-exhibition__icon {
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
  display: block;
  position: relative;
  top: -0.0625rem;                   /* -1px → spodek ikony = baseline písmen */
}

.program-exhibition__icon img {
  width: 100%;
  height: 100%;
  display: block;
}

/* ============================================================
   Detail akce/výstavy — sekce v pravém sloupci (.detail__content)
   ============================================================ */

/* Tabulka schedule + info — jeden sloupec vlevo (290), zbytek vpravo */
/* (vyšší specificita kvůli .detail__content ul rule, který přidává padding-left) */
.detail__content .event-table,
.detail__content .event-list {
  list-style: none;
  padding-left: 0;
}

.event-table {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.event-table__row {
  display: flex;
  gap: 0.625rem;
  padding: 0.625rem 0;
  border-top: 1px solid var(--divider-color);
  align-items: flex-start;
}

.event-table__row:last-child {
  border-bottom: 1px solid var(--divider-color);
}

.event-table__col {
  display: flex;
  flex-direction: column;
}

.event-table__col span,
.event-table__col p {
  font-size: max(15px, 1.5rem);    /* 24px */
  line-height: 2.5rem;             /* 40px */
  font-weight: bold;
  margin: 0;
}

.event-table__col p { line-height: 2.5rem; }
.event-table__col p + p { margin-top: 0; }

.event-table__col--left {
  width: 18.125rem;                /* 290px */
  flex-shrink: 0;
}

.event-table__col--middle {
  width: 27.5rem;                  /* 440px */
  flex-shrink: 0;
}

.event-table__col--full {
  flex: 1 1 0;
  min-width: 0;
}

.event-table__col--right {
  width: 8.75rem;                  /* 140px */
  flex-shrink: 0;
  text-align: right;
  margin-left: auto;
}

.event-table__col--full a {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* Featured (perex/excerpt) — jeden řádek s linkami */
.event-featured {
  margin: 0;
  padding: 0.625rem 0;
  border-top: 1px solid var(--divider-color);
  border-bottom: 1px solid var(--divider-color);
  font-size: max(15px, 1.5rem);
  line-height: 2.5rem;
  font-weight: bold;
}

.event-featured p { margin: 0; }

/* Sekce v pravém sloupci (Anotace, O autorovi, Informace, Doprovodný program…) */
.event-section {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;                    /* 20px mezi heading a body */
  width: 100%;
}

.event-section__heading {
  font-size: max(15px, 2.25rem);   /* 36px */
  line-height: 2.625rem;           /* 42px */
  font-weight: bold;
  margin: 0;
}

.event-section__body {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;                     /* 40px mezi odstavci */
}

.event-section__body p {
  margin: 0;
}

/* Doprovodný program / opening hours — list odkazů s linkami */
.event-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.event-list__item {
  padding: 0.625rem 0;
  border-top: 1px solid var(--divider-color);
  font-size: max(15px, 1.5rem);
  line-height: 2.5rem;
  font-weight: bold;
}

.event-list__item:last-child {
  border-bottom: 1px solid var(--divider-color);
}

.event-list__item a {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* Videa — thumbnail karty (reuse .video-card pattern z /galerie) */
.event-videos,
.event-videos li {
  list-style: none;
}

.event-videos {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.25rem;
}

.event-videos__item {
  margin: 0;
  padding: 0;
}

/* ============================================================
   Gallery — wrap-grid 440px sloupců, top-aligned
   ============================================================ */

.gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 7.5rem 0.625rem;              /* 120px row, 10px col */
  margin: 0;
  padding: 0;
  list-style: none;
  align-items: flex-start;
  align-content: flex-start;
}

.gallery__item {
  width: calc((100% - 3 * 0.625rem) / 4);  /* 4 sloupce / řádek, 3× col-gap 10px — deterministicky, ne pevných 440px */
  flex-shrink: 0;
  margin: 0;
}

.gallery__item img {
  width: 100%;
  height: auto;
  display: block;
}

/* Text-card uvnitř galerie (citace + jméno, top-aligned, výška dle textu) */
.gallery__card {
  display: flex;
  flex-direction: column;
  padding: 0.9375rem 1.25rem;        /* 15 / 20 */
  font-size: max(15px, 1.5rem);      /* 24px */
  line-height: 1.42;
  font-weight: bold;
  gap: 10rem;                        /* ~4 řádky volného prostoru mezi citací a jménem */
}

.gallery__card-citace,
.gallery__card-jmeno {
  margin: 0;
}

.gallery__card-citace > :first-child { margin-top: 0; }
.gallery__card-citace > :last-child  { margin-bottom: 0; }
.gallery__card-citace p { margin: 0; }

.gallery__card--barva-1 {
  background: var(--accent);
  color: #000;
}

.gallery__card--barva-2 {
  background-color: #000;
  background-image: linear-gradient(rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.15));
  color: #fff;
}

/* ============================================================
   Galerie — page (Foto / Video)
   ============================================================ */

.galerie .tabs {
  margin: 0.625rem 0 1.875rem;       /* 10px nad / 30px pod */
}

/* Slider videí — manuální horizontální scroll s nekonečnou smyčkou (JS klonuje položky) */
.video-slider-wrap {
  width: 100%;
  margin: 0;
  padding: 0;
}

.video-slider {
  display: flex;
  gap: 0.625rem;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
}

.video-slider::-webkit-scrollbar { display: none; }

.video-slider:not([data-loop="true"]) {
  justify-content: center;
}

.video-slider__item {
  flex-shrink: 0;
  width: 55.625rem;                  /* 890px */
  display: flex;
  flex-direction: column;
  gap: 0.625rem;                     /* 10px mezi videem, popiskem a linkou */
}

.video-card {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 890 / 501;
  background: #000;
  overflow: hidden;
}

.video-card__thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.video-card__play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 4.375rem;
  height: 4.375rem;
  background: var(--accent);
  display: grid;
  place-items: center;
}

.video-card__play img {
  width: 2.1rem;
  height: 2.1rem;
  display: block;
}

.video-card__caption {
  font-size: max(15px, 1.5rem);      /* 24px */
  line-height: 1;
  font-weight: bold;
  margin: 0;
}

.video-card__line {
  display: block;
  height: 1px;
  width: 100%;
  background: var(--divider-color);
}

/* Galerie sekce (heading + wrap-grid s kartičkami) */
.galerie-grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5rem;                         /* 80px mezi heading a grid */
  padding: 9.125rem 4.0625rem 8rem;  /* 146px nad, 65 sides, 128 dole */
  margin: 0;
}

.galerie-grid__heading {
  font-size: max(20px, 4rem);        /* 64px */
  font-weight: bold;
  line-height: 1;
  text-align: center;
  margin: 0;
  width: 100%;
}

.galerie-grid > .gallery {
  width: 100%;
}

/* ============================================================
   Kontakt — page-specific
   ============================================================ */

/* Sdílený phone block (footer + kontakt header) */
.phone-block {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 4.375rem;
  padding: 0 0.625rem 0.375rem;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(25px);
  font-size: 4rem;
  font-weight: bold;
  line-height: 1;
}

.phone-block span:first-child {
  margin-right: 1.875rem;
}

/* Header — 3 řádky, eye absolutně vlevo, aux odkazy přilepené napravo */
/* 12-sloupcový grid lícující s hlavním .grid — pravé sloupce (8/11) tak
   sedí přesně nad sebou (adresy nahoře, loga/stopětka pod nimi). */
.kontakt-header {
  position: relative;
  margin-top: 3.125rem;              /* 50px nad header */
  padding: 1.875rem 4.0625rem;       /* 30px nahoře/dole, 65px po stranách jako .grid */
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 2.5rem 0.625rem;              /* 40px mezi adresami a logy, 10px sloupce */
  align-items: start;
}

/* Levý blok — telefon / e-mail / Fb-Insta pod sebou */
.kontakt-header__main {
  grid-column: 1 / 8;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  gap: 0.3125rem;                    /* 5px mezi řádky */
}

.kontakt-header__row {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  height: 4.375rem;                  /* 70px row */
}

.kontakt-header .phone-block {
  min-width: 36.875rem;              /* 590px */
}

.kontakt-header .cta-button {
  min-width: 46.25rem;               /* 740px */
}

.kontakt-header__social {
  display: flex;
  gap: 0.3125rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.kontakt-header__social li {
  display: flex;
  align-items: center;
  height: 4.375rem;
  padding: 0 0.625rem 0.375rem;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(25px);
  font-size: 4rem;
  font-weight: bold;
  line-height: 1;
}

.kontakt-header__social a {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* Pravý sloupec — adresy (Spolek Vidiny / Třeboň 105) na sloupcích 8 a 11 */
.kontakt-header__addr { grid-row: 1; }
.kontakt-header__addr--1 { grid-column: 7 / span 3; }
.kontakt-header__addr--2 { grid-column: 11 / -1; }

/* Pod adresami — Loga ke stažení / Stopětka, stejné sloupce 8 a 11 */
.kontakt-header__dl {
  grid-row: 2;
  align-self: start;
  font-size: 3.6rem;
  font-weight: bold;
  line-height: 1;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.kontakt-header__dl--1 { grid-column: 7 / span 3; }
.kontakt-header__dl--2 { grid-column: 11 / -1; }

/* Společné: kontakt sekce + střední (64px) heading */
.kontakt-section {
  padding-top: 8rem;
}

.kontakt-section__heading {
  grid-column: 1 / -1;
  font-size: max(20px, 4rem);
  text-align: center;
  margin: 0 0 5rem;
  line-height: 1;
  font-weight: bold;
}

/* Foto pod O nás */
.kontakt-foto {
  grid-column: 1 / -1;
  position: relative;
  margin: 3.75rem 0 0;
  height: 50rem;
  overflow: hidden;
}

.kontakt-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Marquee pás přes vršek fotky (figma 114:1591 "Stripe") — lime/accent pozadí,
   černý text + černé čtverečky 5×5px jako separátory. 2 kopie tracku → seamless. */
.kontakt-foto__marquee {
  position: absolute;
  top: 0.625rem;               /* 10px od horního okraje fotky */
  left: 0.625rem;
  right: 0.625rem;
  height: 1.875rem;            /* 30px */
  z-index: 2;
  overflow: hidden;
  background: var(--accent);
}

.kontakt-foto__marquee-track {
  display: flex;
  width: max-content;
  height: 100%;
  animation: marquee-scroll 60s linear infinite;
}

.kontakt-foto__marquee-group {
  display: flex;
  align-items: center;
  gap: 0.625rem;               /* 10px mezera mezi elementy */
  flex-shrink: 0;
  padding: 0 0.3125rem 0.1875rem;  /* 5px L/R, 3px bottom — vizuální centrování textu */
}

.marquee__a,
.marquee__b {
  color: #000;
  font-size: max(14px, 1.25rem); /* 20px */
  font-weight: bold;
  line-height: 1;
  white-space: nowrap;
}

.marquee__sep {
  display: inline-block;
  width: 0.3125rem;            /* 5px */
  height: 0.3125rem;
  background: #000;
  flex-shrink: 0;
}

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .kontakt-foto__marquee-track { animation: none; }
}

/* Mobilní varianta — skrytá na desktopu, na mobilu se zobrazí v media query */
.kontakt-foto--mobile { display: none; }

/* Kontakt — adresní sloupce (Spolek Vidiny / Třeboň 105) v headeru */
.kontakt-col__title {
  font-size: max(15px, 2.25rem);     /* 36px */
  line-height: 2.625rem;             /* 42px */
  font-weight: bold;
  margin: 0 0 1.25rem;               /* 20px gap pod nadpis */
}

.kontakt-col__body {
  font-size: max(15px, 1.5rem);      /* 24px */
  line-height: 2.5rem;               /* 40px */
}

.kontakt-col__body p {
  margin: 0;
}

/* Náš tým — table-style rows */
.kontakt-tym {
  grid-column: 1 / -1;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--divider-color);
}

.kontakt-tym__row {
  display: grid;
  grid-template-columns: 589fr 440fr 365fr 365fr;
  gap: 0.625rem;
  padding: 0.625rem 0;               /* 10px nahoře + dole = 60px row + 1px linka */
  border-bottom: 1px solid var(--divider-color);
  font-size: max(15px, 1.5rem);      /* 24px */
  line-height: 2.5rem;               /* 40px */
}

.kontakt-tym__email {
  text-align: right;
}

.kontakt-tym__email a:hover,
.kontakt-tym__tel a:hover {
  color: var(--accent);
}

/* Partneři — 6×3 grid lóg, každá v 290×200 buňce */
.kontakt-partneri {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.625rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.kontakt-partneri__cell {
  position: relative;
  aspect-ratio: 29 / 20;
  display: grid;
  place-items: center;
}

.kontakt-partneri__cell img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ============================================================
   Mobile breakpoint (<= 640px) — single-column restructure.
   Above 640 the proportional rem scaling from html { font-size: calc(...) }
   handles things; below 640 we override absolute widths and stack
   multi-col grids that don't make sense on a phone.
   ============================================================ */

@media (max-width: 640px) {
  /* Tighter side padding: 65px → 16px */
  .grid,
  .aktuality-list,
  .artlist-grid,
  .program-toolbar,
  .program-grid,
  .galerie-grid,
  .kontakt-header,
  .detail__top,
  .detail__gallery {
    padding-left: 16px;
    padding-right: 16px;
  }
  .program-exhibitions,
  .program-exhibitions__heading {
    margin-left: 16px;
    margin-right: 16px;
  }

  /* Logo + burger */
  .site-logo { top: 16px; left: 16px; width: 60px; }
  .site-burger { width: 44px; height: 44px; }
  .site-burger__icon { width: 22px; height: 22px; }

  /* Hero — keep 200vh sticky structure, only fix row layouts/fonts */
  .hero__row,
  .hero__row--cta,
  .hero__row--datetitle,
  .hero__row--subtitle,
  .hero__row--text { padding: 0 16px; }

  .hero__row--cta { top: 50vh; transform: translateY(-50%); }
  .hero__row--cta .cta-button {
    grid-column: 1 / -1;
    min-width: 0;
    width: 100%;
  }

  .hero__row--datetitle {
    display: flex;
    flex-direction: column-reverse;
    gap: 16px;
    /* Pozicovat od horního okraje pomocí svh, aby se zelený box vešel pod lištu prohlížeče.
       100svh = visible viewport height s lištou (stabilní, na rozdíl od dvh). */
    bottom: auto;
    top: 100svh;
    transform: translateY(-100%);
  }
  .hero__row--datetitle .hero__date,
  .hero__row--datetitle .hero__title {
    grid-column: auto;
    height: auto;
    font-size: 36px;
    line-height: 1.05;
    text-align: left;
  }
  .hero__row--datetitle .hero__title {
    margin: 0;
    padding: 0;
    align-self: stretch;
  }
  .hero__row--datetitle .hero__date {
    background: var(--accent);
    color: #000;
    margin: 0 80px 0 -16px;
    padding: 12px 16px;
  }

  .hero__row--subtitle .hero__subtitle {
    grid-column: 1 / -1;
    font-size: 28px;
    line-height: 1.05;
    letter-spacing: 0;
  }

  .hero__row--text .hero__text {
    grid-column: 1 / -1;
    margin: 0 -16px 0 0;
    padding: 16px;
    font-size: 14px;
    line-height: 1.5;
    gap: 12px;
  }

  /* CTA button generic */
  .cta-button {
    min-width: 0;
    width: 100%;
    font-size: 24px;
    height: 56px;
  }
  .cta-button__label { padding: 0 6px; }
  .cta-button__arrow { width: 56px; }
  .cta-button__arrow-window { width: 24px; height: 24px; }
  .cta-button__arrow img { width: 24px; height: 24px; }

  /* Phone block — symetrický padding 6px L/R */
  .phone-block { padding: 0 6px; }

  /* Menu — 4 plné řádky pod sebou (per figma 181:2498).
     Reference: 393×852, ratios 312/120/90/330 — držíme flex proporce. */
  .menu {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
    background: #000;
    /* Mobile animace — jednoduché slide odshora místo desktopového clip-path */
    transform: translateY(-100%);
    transition: transform 0.4s ease-out;
  }
  .menu[aria-hidden="false"] {
    transform: translateY(0);
  }
  .menu__col { display: contents; }

  /* Reset desktopového absolute positioning + clip-path animace.
     Selectory musí mít stejnou specificitu jako desktop (.menu__col--X .menu__tile--Y),
     jinak desktopové position:absolute přebije a tiles vypadnou z flex flow. */
  .menu__tile {
    clip-path: none;
    transition: background-color 0.25s ease;
  }
  .menu[aria-hidden="true"] .menu__tile--program,
  .menu[aria-hidden="true"] .menu__tile--prakticke,
  .menu[aria-hidden="true"] .menu__tile--gallery,
  .menu[aria-hidden="true"] .menu__tile--aktuality {
    clip-path: none;
  }

  .menu__col--left .menu__tile--program {
    position: static;
    width: auto;
    height: auto;
    z-index: auto;
    flex: 312 1 0;
    padding: 32px;
    justify-content: flex-start;
  }
  .menu__col--right .menu__tile--prakticke {
    position: static;
    width: auto;
    height: auto;
    z-index: auto;
    flex: 120 1 0;
    padding: 24px;
  }
  .menu__tile--prakticke br { display: none; }
  .menu__col--left .menu__tile--gallery {
    position: static;
    width: auto;
    height: auto;
    z-index: auto;
    flex: 90 1 0;
    padding: 24px;
    justify-content: flex-start;
  }
  .menu__col--right .menu__tile--aktuality {
    position: static;
    width: auto;
    height: auto;
    z-index: auto;
    flex: 330 1 0;
    padding: 24px;
    display: grid;
    grid-template-columns: 1fr auto;
    align-content: start;
    column-gap: 16px;
    gap: 10px;
  }
  .menu__tile--aktuality .menu__link { grid-column: 1; }

  .menu__title, .menu__link {
    font-size: 32px;
    line-height: 1.1;
    letter-spacing: 0;
  }

  /* Aktuality tile: socials vpravo jako sloupec */
  .menu__social--desktop {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    grid-column: 2;
    grid-row: 1 / span 4;
    margin: 0;
    padding: 0;
    list-style: none;
    gap: 10px;
    font-size: 24px;
    font-weight: bold;
    line-height: 1.4;
    text-align: right;
  }
  .menu__social--desktop a { text-decoration: underline; text-underline-offset: 0.15em; }

  /* Standalone .menu__social--mobile už nepoužíváme (socials jsou uvnitř aktuality tile) */
  .menu__social--mobile { display: none; }

  /* Burger v expanded stavu — invertované barvy dle figma 181:2498 (black bg + white X) */
  .site-burger[aria-expanded="true"] { background: #000; }
  .site-burger[aria-expanded="true"] .site-burger__icon--close {
    filter: invert(1);
  }

  /* Sections */
  .section { padding-top: 30px; padding-bottom: 30px; }
  .section--news .news-grid { margin-top: 24px; }
  .section__heading {
    font-size: 40px;
    line-height: 1;
    margin-top: 24px;
    letter-spacing: 0;
  }
  .section .button {
    grid-column: 1 / -1;
    margin: 32px 0 0;
    height: 48px;
    font-size: 16px;
  }

  /* Program (homepage) — words 4-up, images keep desktop tilt+overlap */
  .program__words {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    justify-content: stretch;
    gap: 8px;
    font-size: 13px;
    text-align: center;
  }
  .program__images { margin-top: 40px; }
  .program__images > picture:first-of-type,
  .program__images > img:first-of-type {
    transform: translateX(14%) rotate(0deg) scale(1.25);
  }
  .program__images.is-revealed > picture:first-of-type,
  .program__images.is-revealed > img:first-of-type {
    transform: translateX(6%) rotate(-10deg) scale(1.25);
  }
  .program__images > picture:nth-of-type(2),
  .program__images > img:nth-of-type(2),
  .program__images > picture:last-of-type,
  .program__images > img:last-of-type {
    transform: translateX(-14%) rotate(0deg) scale(1.25);
  }
  .program__images.is-revealed > picture:nth-of-type(2),
  .program__images.is-revealed > img:nth-of-type(2),
  .program__images.is-revealed > picture:last-of-type,
  .program__images.is-revealed > img:last-of-type {
    transform: translateX(-6%) rotate(10deg) scale(1.25);
  }

  /* News grid — 2 cols on mobile (3rd card flows to row 2) */
  .news-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px 12px;
    align-items: start;
  }
  .news-grid > li:nth-child(1),
  .news-grid > li:nth-child(2),
  .news-grid > li:nth-child(3) { grid-column: auto; }

  /* Practical (homepage) — cyklus po 3: 1/4/7 left, 2/5/8 right, 3/6/9 center.
     Selectory musí mít specificitu 0,3,0 stejně jako desktop, jinak desktopové
     flex-direction: row-reverse na :nth-child(3n) propadá do mobilu. */
  .prakticke-item { padding: 16px 0; grid-template-columns: 1fr; }
  .prakticke-item:nth-child(3n+1) .prakticke-item__inner,
  .prakticke-item:nth-child(3n+2) .prakticke-item__inner,
  .prakticke-item:nth-child(3n)   .prakticke-item__inner {
    grid-column: 1;
    flex-direction: row;
  }
  .prakticke-item:nth-child(3n+1) .prakticke-item__inner { justify-self: start; margin-left: 20px; }
  .prakticke-item:nth-child(3n+2) .prakticke-item__inner { justify-self: end; margin-right: 20px; }
  .prakticke-item:nth-child(3n)   .prakticke-item__inner { justify-self: center; }
  .prakticke-item__img { width: 28px; height: 28px; }
  .prakticke-item__text { font-size: 28px; line-height: 1; white-space: normal; }

  /* Page heading */
  .page-heading {
    font-size: 40px;
    line-height: 1.1;
    padding: 96px 16px 32px;
    letter-spacing: 0;
  }

  /* Aktuality — 2-col card grid (same look as home news cards) */
  .aktuality-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px 12px;
  }
  .aktuality-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0;
    border: none;
  }
  .aktuality-item:last-child { border: none; }
  .aktuality-item__thumb {
    order: -1;
    width: 100%;
    height: auto;
    aspect-ratio: 11 / 12;
    grid-column: auto;
  }
  .aktuality-item__date {
    grid-column: auto;
    font-size: 13px;
    font-weight: normal;
    line-height: 1;
  }
  .aktuality-item__title {
    grid-column: auto;
    font-size: 16px;
    line-height: 1.2;
  }

  /* Footer — grid-template-areas: social + stopetka on same row, legal at bottom */
  .site-footer {
    padding-top: 180px;
    padding-bottom: 24px;
    min-height: 60vh;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto auto auto 1fr auto;
    grid-template-areas:
      "kontakt kontakt"
      "phone   phone"
      "cta     cta"
      "social  stopetka"
      "copy    copy"
      ".       ."
      "legal   legal";
    gap: 8px;
  }

  .site-footer__kontakt-label {
    grid-area: kontakt;
    justify-self: start;
    width: fit-content;
    min-width: 0;
    margin-bottom: -12px;
    font-size: 18px;
    height: 32px;
    white-space: nowrap;
  }
  .footer-phone {
    grid-area: phone;
    justify-self: start;
    width: fit-content;
    min-width: 0;
    padding: 0 6px;
    font-size: 18px;
    height: 48px;
    justify-content: flex-start;
    gap: 8px;
    white-space: nowrap;
  }
  .site-footer .cta-button { grid-area: cta; }

  .site-footer__social {
    grid-area: social;
    align-self: end;
    grid-template-columns: repeat(3, auto);
    justify-content: flex-start;
    gap: 16px;
    font-size: 18px;
    margin-top: 16px;
  }
  .site-footer__stopetka {
    grid-area: stopetka;
    align-self: end;
    justify-self: end;
    text-align: right;
    font-size: 14px;
    margin-top: 16px;
  }

  .site-footer__copy {
    grid-area: copy;
    text-align: left;
    font-size: 14px;
    margin-top: 16px;
  }

  .site-footer__legal {
    grid-area: legal;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 24px;
  }
  .site-footer__legal li {
    grid-column: auto !important;
    white-space: normal;
  }

  /* Artlist */
  .artlist-grid { gap: 12px; padding-bottom: 60px; align-items: flex-start; }
  .artlist-card { width: calc(50% - 6px); }
  .artlist-card__name { font-size: 15px; line-height: 1.35; }

  /* Mobil — eventy umělce vidět rovnou pod fotkou (na desktopu jsou jen na hover) */
  .artlist-card__media {
    aspect-ratio: auto;
    height: auto;
    overflow: visible;
    background: transparent;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .artlist-card__media img {
    width: 100%;
    height: auto;
    aspect-ratio: 440 / 550;
    object-fit: cover;
    background: #000;
  }
  .artlist-card__events {
    position: static;
    transform: none;
    width: 100%;
    opacity: 1;
    pointer-events: auto;
    gap: 6px;
  }
  .artlist-card__events a {
    height: auto;
    padding: 8px 10px;
    font-size: 13px;
    line-height: 1.3;
    justify-content: flex-start;
    text-align: left;
  }
  .artlist-card__cta-link {
    height: auto;
    min-height: 240px;
    padding: 12px 14px;
    font-size: 13px;
    line-height: 1.35;
  }
  .artlist-card__cta-arrow { width: 40px; height: 40px; }
  .artlist-card__cta-arrow img { width: 18px; height: 18px; }

  /* Text-row */
  .text-row {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 32px 0;
  }
  .text-row__title,
  .text-row__body,
  .text-row--full .text-row__title,
  .text-row--full .text-row__body { grid-column: 1; }
  .text-row__title { font-size: 20px; line-height: 1.25; }
  .text-row__body { font-size: 16px; line-height: 1.5; }
  .text-row__body li { line-height: 1.5; }

  /* Cenik */
  .cenik { gap: 8px; padding: 16px 0; }

  /* Block-image --full: show mobile-specific upload, hide desktop */
  .block-image--desktop { display: none; }
  .block-image--mobile { display: block; aspect-ratio: auto; }
  .block-image--mobile img { height: auto; object-fit: initial; }
  .cenik__row { gap: 10px; padding: 10px 12px; }
  .cenik__label { font-size: 15px; line-height: 1.35; }
  .cenik__price {
    width: auto;
    min-width: 90px;
    height: auto;
    padding: 4px 10px 5px;
    font-size: 13px;
    line-height: 1.2;
  }

  /* Detail (clanek) */
  .detail__top {
    grid-template-columns: 1fr;
    padding: 96px 16px 48px;
    row-gap: 24px;
  }
  .detail__back,
  .detail__headline,
  .detail__main-image,
  .detail__content {
    grid-column: 1;
    grid-row: auto;
  }
  .detail__main-image {
    position: static;
    aspect-ratio: 4 / 5;
  }
  .detail__back-text { font-size: 20px; letter-spacing: 0; }
  .detail__back-arrow { width: 48px; height: 48px; }
  .detail__back-arrow img { width: 22px; height: 22px; }
  .detail__title { font-size: 32px; line-height: 1.1; letter-spacing: 0; }
  .detail__date { font-size: 16px; line-height: 1.4; }
  .detail__content { gap: 32px; font-size: 16px; line-height: 1.5; }
  .detail__content li { line-height: 1.5; }

  /* Detail akce/výstavy — typografie + stack tabulkových sloupců */
  .event-table__row {
    flex-direction: column;
    gap: 4px;
    padding: 12px 0;
    align-items: flex-start;
  }
  .event-table__col { width: auto !important; flex-shrink: 1; margin-left: 0 !important; text-align: left !important; }
  .event-table__col span,
  .event-table__col p {
    font-size: 16px;
    line-height: 1.5;
  }
  .event-table__col p { line-height: 1.5; }

  .event-featured {
    padding: 12px 0;
    font-size: 16px;
    line-height: 1.5;
  }

  .event-section { gap: 12px; }
  .event-section__heading { font-size: 20px; line-height: 1.25; }
  .event-section__body { gap: 16px; }

  .event-list__item {
    padding: 12px 0;
    font-size: 16px;
    line-height: 1.5;
  }
  .detail__gallery {
    grid-template-columns: 1fr;
    padding: 0 16px 48px;
    row-gap: 24px;
  }
  .detail__gallery-heading {
    grid-column: 1;
    font-size: 28px;
  }
  .detail__gallery .gallery { grid-column: 1; }

  /* Program (listing) */
  .program-grid { grid-template-columns: 1fr; gap: 24px; }
  .program-day { gap: 10px; }
  .program-day__head {
    height: 110px;
    font-size: 64px;
    letter-spacing: -1px;
    padding-bottom: 8px;
  }
  .program-day__events { gap: 10px; }

  .program-toolbar {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
  }
  .program-legend { position: relative; }
  .program-legend .program-legend__btn { display: inline-flex; }
  .program-legend .program-venues {
    display: none;
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0;
    z-index: 5;
    min-width: max-content;
    background: #1a1a1a;
    padding: 6px 0;
  }
  .program-legend.is-open .program-venues { display: flex; }
  .program-archive__list {
    gap: 0;
    background: #1a1a1a;
    padding: 6px 0;
  }
  .program-legend .program-venues__item,
  .program-archive__list a {
    background: transparent;
    backdrop-filter: none;
  }
  .program-venues__item {
    height: auto;
    padding: 4px 10px;
    gap: 6px;
    font-size: 13px;
    line-height: 1.2;
  }
  .program-venues__icon { width: 18px; height: 18px; }
  .program-venues__name { padding-bottom: 2px; }

  .program-archive__btn {
    height: auto;
    padding: 6px 10px;
    font-size: 13px;
    line-height: 1.2;
  }
  .program-archive__list a {
    height: auto;
    padding: 6px 10px;
    font-size: 13px;
    line-height: 1.2;
  }

  /* Karta akce v denní mřížce */
  .program-event__link { gap: 8px; padding: 12px; }
  .program-event__time {
    height: auto;
    padding: 4px 8px 5px;
    font-size: 13px;
    line-height: 1.2;
  }
  .program-event__title {
    font-size: 16px;
    line-height: 1.35;
  }
  .program-event__venue {
    top: 12px;
    right: 12px;
    width: 26px;
    height: 26px;
    padding: 0;
  }

  /* Výstavy */
  .program-exhibitions__heading {
    font-size: 24px;
    margin-top: 48px;
    margin-bottom: 16px;
  }
  .program-exhibitions { margin-bottom: 60px; gap: 8px; }
  .program-exhibition__link {
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px;
  }
  .program-exhibition__time {
    width: auto;
    min-width: 110px;
    height: auto;
    padding: 4px 10px 5px;
    font-size: 13px;
    line-height: 1.2;
  }
  .program-exhibition__title {
    font-size: 16px;
    line-height: 1.35;
  }
  .program-exhibition--info .program-exhibition__title { font-size: 14px; }
  .program-exhibition__venue {
    font-size: 14px;
    line-height: 1.35;
  }
  .program-exhibition__icon { width: 14px; height: 14px; top: 0; }

  /* Gallery */
  .gallery {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 32px 12px;
  }
  .gallery__item { width: calc(50% - 6px); }
  .gallery__card { gap: 32px; padding: 12px 14px; font-size: 13px; line-height: 1.35; }

  /* Video slider */
  .video-slider { gap: 16px; }
  .video-slider__item { width: 88vw; }
  .video-card__play { width: 48px; height: 48px; }
  .video-card__play img { width: 22px; height: 22px; }
  .video-card__caption { font-size: 16px; line-height: 1.4; }

  /* Tabs (galerie ročníky, artlist filter) */
  .tabs__tab,
  .artlist-filter__tab {
    height: auto;
    padding: 6px 10px;
    font-size: 14px;
    line-height: 1.2;
  }

  /* Galerie page */
  .galerie-grid {
    padding: 60px 16px 48px;
    gap: 32px;
  }
  .galerie-grid__heading { font-size: 24px; }

  /* Kontakt — na mobilu vše pod sebou (grid se ruší) */
  .kontakt-header {
    display: block;
    padding: 0 16px;
    margin-top: 24px;
  }
  .kontakt-header__eye { display: none; }
  .kontakt-header__main {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-left: 0;
  }
  .kontakt-header__row {
    flex-direction: column;
    align-items: flex-start;
    height: auto;
    gap: 8px;
  }
  .kontakt-header .phone-block {
    width: fit-content;
    min-width: 0;
    height: 48px;
    font-size: 18px;
    gap: 8px;
    white-space: nowrap;
    justify-content: flex-start;
  }
  .kontakt-header .cta-button {
    min-width: 0;
    width: 100%;
    font-size: 18px;
    height: 48px;
  }
  .kontakt-header__social {
    width: auto;
    justify-content: flex-start;
    gap: 16px;
    font-size: 18px;
  }
  .kontakt-header__social li {
    flex: 0 0 auto;
    justify-content: center;
    height: auto;
    padding: 0;
    font-size: 18px;
  }
  .kontakt-header__addr,
  .kontakt-header__dl {
    grid-column: auto;
    margin-top: 32px;
  }
  .kontakt-header__dl {
    display: block;
    font-size: 16px;
  }
  .kontakt-section { padding-top: 60px; }
  .kontakt-section__heading {
    font-size: 28px;
    margin-bottom: 32px;
  }
  .kontakt-foto { height: 240px; margin-top: 24px; }
  .kontakt-foto--desktop { display: none; }
  .kontakt-foto--mobile {
    display: block;
    height: auto;
    overflow: visible;
  }
  .kontakt-foto--mobile img { height: auto; object-fit: initial; }
  .kontakt-col__title { font-size: 20px; line-height: 1.3; }
  .kontakt-col__body { font-size: 16px; line-height: 1.6; }
  .kontakt-tym__row {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 12px 0;
    font-size: 16px;
    line-height: 1.5;
  }
  .kontakt-tym__email { text-align: left; }
  .kontakt-partneri { grid-template-columns: repeat(2, 1fr); }
}