/* TJ Nivnice, hlavní stylopis
   Generováno z design systemu v1.0. Tokeny se needitují tady, ale v design systemu.
*/

@font-face{font-family:'Clash Display';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/ClashDisplay-500.woff2') format('woff2')}
@font-face{font-family:'Clash Display';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/ClashDisplay-600.woff2') format('woff2')}
@font-face{font-family:'Clash Display';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/ClashDisplay-700.woff2') format('woff2')}
@font-face{font-family:'General Sans';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/GeneralSans-400.woff2') format('woff2')}
@font-face{font-family:'General Sans';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/GeneralSans-500.woff2') format('woff2')}
@font-face{font-family:'General Sans';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/GeneralSans-600.woff2') format('woff2')}

/* Clash Display 500/600/700 + General Sans 400/500/600, vložené přímo v souboru,
   aby dokument fungoval i bez internetu. Do produkce je self-hostuj jako .woff2 soubory. */

/* =====================================================================
   TJ NIVNICE, DESIGN SYSTEM v1.0
   Připravila agentura VYKYMEDIA. Interní podklad pro realizátora.
   Tokeny se neupravují ad hoc v komponentách. Vše jede odsud.
   ===================================================================== */

*{box-sizing:border-box}

:root{
  /* ---------- NEUTRÁLY: teplé, ne studená šedá ---------- */
  --sand-50:#FCFAF7;  --sand-100:#F6F1E9;  --sand-200:#EDE5D8;  --sand-300:#DFD4C2;

  /* ---------- INK: noční modř s teplým nádechem, nikdy čistá čerň ---------- */
  --ink-950:#100E1C;  --ink-900:#191627;  --ink-800:#252038;
  --ink-700:#3B3453;  --ink-600:#544C6E;  --ink-500:#776E92;
  --ink-400:#9C93B3;  --ink-300:#C2BBD1;  --ink-200:#E0DBE9;

  /* ---------- FLAME: primární akcent, energie ---------- */
  --flame-50:#FFF2ED;  --flame-100:#FFE0D3;  --flame-200:#FFBFA4;
  --flame-300:#FF9970;  --flame-400:#FF7345;  --flame-500:#F4501C;
  --flame-600:#DA390B;  --flame-700:#AA2A06;

  /* ---------- HONEY: sekundární, hravost a zvýraznění ---------- */
  --honey-100:#FFF3D6;  --honey-300:#FFD97A;  --honey-400:#FFC53D;  --honey-500:#F0A50C;

  /* ---------- TURF: sport, stavy „hraje se / volno" ---------- */
  --turf-100:#DCF7E8;  --turf-400:#3ED27F;  --turf-500:#12A75B;  --turf-600:#0C7C42;

  /* ---------- VIOLET: hloubka v gradientech, nikdy sama o sobě ---------- */
  --violet-400:#9B6BFF;  --violet-500:#7B3FE4;  --violet-600:#5E27BC;

  /* ---------- SÉMANTICKÉ ---------- */
  --bg:var(--sand-50);
  --surface:#FFFFFF;
  --text:var(--ink-900);
  --muted:var(--ink-500);
  --line:rgba(25,22,39,.10);
  --line-strong:rgba(25,22,39,.16);
  --accent:var(--flame-500);
  --success:var(--turf-500);
  --danger:#C8321F;
  --focus:var(--violet-500);

  /* ---------- GRADIENTY ---------- */
  --grad-flame:linear-gradient(135deg,#FF9A3D 0%,#F4501C 54%,#D9330B 100%);
  --grad-flame-hover:linear-gradient(135deg,#FFAE55 0%,#FF6127 54%,#E93E10 100%);
  --grad-sunset:linear-gradient(135deg,#FFC53D 0%,#F4501C 48%,#7B3FE4 100%);
  --grad-honey:linear-gradient(135deg,#FFE7A8 0%,#FFC53D 100%);
  --grad-turf:linear-gradient(135deg,#4FE293 0%,#12A75B 100%);
  --grad-night:linear-gradient(155deg,#252038 0%,#100E1C 100%);
  --grad-sand:linear-gradient(180deg,#FCFAF7 0%,#F3ECE1 100%);
  --grad-hero:linear-gradient(to top,rgba(16,14,28,.95) 2%,rgba(16,14,28,.58) 40%,rgba(16,14,28,.10) 82%);
  --grad-mesh:
    radial-gradient(58% 52% at 82% 12%,rgba(244,80,28,.30),transparent 62%),
    radial-gradient(46% 46% at 8% 84%,rgba(123,63,228,.26),transparent 62%),
    radial-gradient(40% 40% at 46% 106%,rgba(255,197,61,.20),transparent 60%);

  /* ---------- RADIUS ---------- */
  --r-xs:10px; --r-sm:14px; --r-md:20px; --r-lg:26px; --r-xl:34px; --r-2xl:44px; --r-pill:999px;

  /* ---------- STÍNY: barevné, nikdy černé ---------- */
  --sh-xs:0 1px 2px rgba(38,32,56,.06);
  --sh-sm:0 4px 16px -6px rgba(38,32,56,.12);
  --sh-md:0 20px 48px -18px rgba(38,32,56,.22);
  --sh-lg:0 48px 96px -34px rgba(16,14,28,.36);
  --glow-flame:0 0 0 1px rgba(255,115,69,.38),0 14px 40px -14px rgba(244,80,28,.55);
  --glow-honey:0 0 0 4px rgba(255,197,61,.22);
  --hl:inset 0 1px 1px rgba(255,255,255,.72);
  --hl-dark:inset 0 1px 1px rgba(255,255,255,.10);

  /* ---------- MOTION ---------- */
  --ease-expo:cubic-bezier(.16,1,.3,1);
  --ease-spring:cubic-bezier(.32,.72,0,1);
  --ease-pop:cubic-bezier(.34,1.56,.64,1);
  --hover-dur:.4s;
  --hover-ease:cubic-bezier(.33,0,.2,1);
  /* Rozlévání barvy v dlaždicích. Schválně ne --ease-expo: ta má 80 %
     dráhy hotových v první čtvrtině času, což vypadá jako lupnutí.
     Tahle křivka se rozjíždí klidně a plynule dojíždí, takže se barva
     opravdu rozlévá. */
  --ease-vylitek:cubic-bezier(.38,.15,.28,1);
  --dur-vylitek:1.25s;

  /* ---------- PÍSMO ---------- */
  --font-display:"Clash Display","Degular Display",-apple-system,BlinkMacSystemFont,sans-serif;
  --font-text:"General Sans","Degular Text",-apple-system,BlinkMacSystemFont,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,monospace;

  /* ---------- RYTMUS ---------- */
  --wrap:1200px;
  --wrap-pad:clamp(20px,4vw,32px);
  --sp-section:clamp(56px,6vw,88px);
  --sp-section-sm:clamp(40px,4.4vw,60px);
  --sp-head:clamp(28px,3.4vw,44px);
}

html{-webkit-text-size-adjust:100%}
/* Plynulé dojetí po kliknutí na kotvu. Kdo má v systému vypnuté animace,
   skočí rovnou, jinak by čekal na posun, který si nepřál. */
@media (prefers-reduced-motion: no-preference){
  html{scroll-behavior:smooth}
}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--font-text);font-size:16px;line-height:1.62;
  font-weight:400;-webkit-font-smoothing:antialiased;word-spacing:.045em;
  overflow-x:hidden;
}

/* Zrno přes celou plochu, dodává papírovou fyzičnost, nikdy na scrollovacím
   kontejneru. Vlastní vrstva (translateZ) je tu schválně: pevně usazený prvek
   přes celou obrazovku by se jinak při každém posunu překresloval spolu se
   stránkou. Takhle ho grafická karta jen podrží a scrollování ho nezajímá. */
body::after{
  content:"";position:fixed;inset:0;z-index:80;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  transform:translateZ(0);
}

h1,h2,h3,h4,h5{font-family:var(--font-display);font-weight:600;line-height:1.04;letter-spacing:-.025em;word-spacing:.09em;margin:0;
  text-wrap:balance}   /* balance = řádky nadpisu mají srovnatelnou délku, nikdy osamělé slovo na konci */
p{margin:0 0 16px;max-width:76ch;text-wrap:pretty}
a{color:inherit}

.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--wrap-pad)}
.wrap-narrow{max-width:900px;margin:0 auto;padding-inline:var(--wrap-pad)}

/* ============ TYPOGRAFICKÁ ŠKÁLA ============ */
.d1{text-wrap:balance;font-family:var(--font-display);font-size:clamp(3rem,7vw,6rem);font-weight:600;line-height:.98;letter-spacing:-.035em;word-spacing:.1em}
.d2{text-wrap:balance;font-family:var(--font-display);font-size:clamp(2.4rem,5vw,4rem);font-weight:600;line-height:1.02;letter-spacing:-.03em;word-spacing:.1em}
.d3{text-wrap:balance;font-family:var(--font-display);font-size:clamp(1.8rem,3.4vw,2.7rem);font-weight:600;line-height:1.08;letter-spacing:-.025em;word-spacing:.09em}
.d4{text-wrap:balance;font-family:var(--font-display);font-size:clamp(1.35rem,2.2vw,1.75rem);font-weight:600;line-height:1.16;letter-spacing:-.02em;word-spacing:.08em}
.t-lead{font-size:clamp(1.05rem,1.6vw,1.25rem);line-height:1.55;color:var(--ink-600);font-weight:400;
  max-width:none;text-wrap:pretty}   /* perex jede na plnou šířku sekce, při velikosti 1.25rem to vychází na ~65 znaků */
.t-body{font-size:1rem;line-height:1.62}
.t-sm{font-size:.9rem;line-height:1.55;max-width:92ch}   /* menší písmo snese víc znaků na řádek, jinak vzniká úzký sloupec */
.t-xs{font-size:.8rem;line-height:1.5;max-width:100ch}
.muted{color:var(--muted)}
.on-dark{color:var(--sand-50)}
.on-dark .muted,.muted.on-dark{color:var(--ink-300)}

/* akcentované slovo v nadpisu */
.accent-grad{background:var(--grad-flame);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.accent-sunset{background:var(--grad-sunset);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* ruční zvýraznění fixou, hravost bez infantilnosti */
.marker{position:relative;display:inline-block;white-space:nowrap}
.marker::before{
  content:"";position:absolute;left:-.12em;right:-.12em;bottom:.02em;height:.42em;z-index:-1;
  background:var(--honey-300);border-radius:.28em .5em .34em .46em;transform:rotate(-.6deg);
}

/* eyebrow / kicker, čistá typografie, žádný rámeček */
.eyebrow{
  display:block;font-family:var(--font-text);font-size:12px;font-weight:600;
  text-transform:uppercase;letter-spacing:.2em;color:var(--flame-600);margin:0 0 10px;
}
.eyebrow.on-dark{color:var(--flame-300)}

/* ============ STICKER BADGE ============ */
.sticker{
  display:inline-flex;align-items:center;gap:7px;font-family:var(--font-display);
  font-size:.78rem;font-weight:600;letter-spacing:.01em;
  padding:7px 14px;border-radius:var(--r-pill);
  background:var(--grad-honey);color:var(--ink-900);
  box-shadow:var(--sh-sm),var(--hl);transform:rotate(-2.5deg);
  transition:transform var(--hover-dur) var(--ease-pop);
}
.sticker:hover{transform:rotate(1.5deg) scale(1.04)}
.sticker.flame{background:var(--grad-flame);color:#fff}
.sticker.turf{background:var(--grad-turf);color:#fff}
.sticker.ghost{background:rgba(255,255,255,.10);color:var(--sand-50);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.sticker .dot{width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.85}
.sticker.live .dot{background:#fff;animation:pulse 1.8s var(--ease-expo) infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.72)}}

/* ============ TLAČÍTKA ============ */
.btn{
  display:inline-flex;align-items:center;gap:12px;cursor:pointer;border:0;
  font-family:var(--font-text);font-size:.98rem;font-weight:600;letter-spacing:.005em;
  padding:15px 16px 15px 26px;border-radius:var(--r-pill);text-decoration:none;
  transition:background var(--hover-dur) var(--hover-ease),box-shadow var(--hover-dur) var(--hover-ease),
             color var(--hover-dur) var(--hover-ease),transform .18s var(--ease-spring);
}
.btn:active{transform:scale(.975)}
.btn .ic{
  width:32px;height:32px;border-radius:50%;display:grid;place-items:center;flex:none;
  transition:background var(--hover-dur) var(--hover-ease),box-shadow var(--hover-dur) var(--hover-ease),
             transform var(--hover-dur) var(--ease-spring);
}
.btn .ic svg{width:16px;height:16px;opacity:.86;transition:transform var(--hover-dur) var(--ease-spring),opacity var(--hover-dur) var(--hover-ease)}
.btn:hover .ic svg{opacity:1}
/* směrová šipka se natočí do diagonály. Nesměrové ikony (play, plus, hodiny) se NIKDY netočí. */
.btn:hover .ic.rot svg{transform:rotate(-45deg)}

.btn-primary{background:var(--grad-flame);color:#fff;box-shadow:0 10px 26px -12px rgba(244,80,28,.62),var(--hl)}
.btn-primary .ic{background:rgba(255,255,255,.17)}
.btn-primary:hover{background:var(--grad-flame-hover);box-shadow:var(--glow-flame),var(--hl)}
.btn-primary:hover .ic{background:rgba(255,255,255,.30);box-shadow:0 0 0 4px rgba(255,255,255,.15)}

.btn-dark{background:var(--ink-900);color:var(--sand-50);padding:15px 26px}
.btn-dark:hover{background:var(--grad-flame);color:#fff;box-shadow:var(--glow-flame)}

.btn-ghost{background:transparent;color:var(--ink-800);box-shadow:inset 0 0 0 1px var(--line-strong);padding:14px 24px}
.btn-ghost:hover{background:var(--flame-50);box-shadow:inset 0 0 0 1px var(--flame-300);color:var(--flame-700)}

.btn-light{background:var(--surface);color:var(--ink-900);box-shadow:var(--sh-sm),var(--hl)}
.btn-light .ic{background:rgba(25,22,39,.07)}
.btn-light:hover{box-shadow:var(--sh-md),var(--hl)}
.btn-light:hover .ic{background:var(--grad-flame);color:#fff;box-shadow:var(--glow-honey)}

.btn-outline{background:transparent;color:var(--sand-50);box-shadow:inset 0 0 0 1px rgba(255,255,255,.24);padding:14px 24px}
.btn-outline:hover{background:rgba(244,80,28,.20);box-shadow:inset 0 0 0 1px var(--flame-400);color:#fff}

.btn-sm{font-size:.86rem;padding:11px 12px 11px 19px}
.btn-sm .ic{width:26px;height:26px}
.btn-sm .ic svg{width:13px;height:13px}
.btn-lg{font-size:1.06rem;padding:18px 19px 18px 32px}
.btn-lg .ic{width:38px;height:38px}
.btn-lg .ic svg{width:18px;height:18px}

/* ============ DOUBLE-BEZEL KARTA ============ */
.shell{
  background:rgba(25,22,39,.045);border-radius:var(--r-xl);padding:7px;
  box-shadow:inset 0 0 0 1px rgba(25,22,39,.055);
  transition:transform .55s var(--ease-spring),box-shadow .55s var(--ease-expo),background .55s var(--ease-expo);
}
.shell.on-night{background:rgba(255,255,255,.055);box-shadow:inset 0 0 0 1px rgba(255,255,255,.09)}
.core{
  background:var(--surface);border-radius:calc(var(--r-xl) - 7px);padding:26px 28px;
  box-shadow:var(--sh-xs),var(--hl);
}
/* Na plnou výšku se karta natahuje jen tam, kde stojí v mřížce vedle ostatních.
   Kdyby to platilo pro každou kartu, dvě karty pod sebou v jednom sloupci by
   se každá natáhla na výšku celého sloupce a spodní by přetekla přes patičku. */
.grid>.core,.shell>.core,.split>.core{height:100%}
.core.night{background:var(--grad-night);color:var(--sand-50);box-shadow:var(--sh-xs),var(--hl-dark)}
a.shell{display:block;text-decoration:none;color:inherit}
a.shell:hover{transform:translateY(-6px);box-shadow:var(--sh-md);background:rgba(244,80,28,.09)}

/* ============ SEKČNÍ POZADÍ ============ */
.sec{padding-block:var(--sp-section)}
.sec-sm{padding-block:var(--sp-section-sm)}
/* Odkaz na kotvu nesmí nadpis schovat pod plovoucí lištu. Prohlížeč zastaví
   scrollování o tenhle kus výš, takže nadpis sekce zůstane vidět. */
section[id],main[id],[id].sec,h2[id],h3[id]{scroll-margin-top:clamp(96px,11vh,124px)}
.bg-night{background:var(--ink-950);color:var(--sand-50);position:relative;overflow:hidden}
.bg-night::before{content:"";position:absolute;inset:0;background:var(--grad-mesh);pointer-events:none}
.bg-night>*{position:relative;z-index:1}
.bg-sand{background:var(--grad-sand)}
.bg-flame{background:var(--grad-flame);color:#fff}

/* zvlněný předěl mezi sekcemi, hravost místo rovné hrany */
.wave{display:block;width:100%;height:clamp(40px,5vw,72px);margin-bottom:-1px}

/* ============ MŘÍŽKA ============ */
.grid{display:grid;gap:clamp(16px,2vw,24px)}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.bento{grid-template-columns:repeat(6,1fr);grid-auto-rows:minmax(140px,auto)}
.sp3{grid-column:span 3} .sp2{grid-column:span 2} .sp4{grid-column:span 4} .sp6{grid-column:span 6}
.row2{grid-row:span 2}

/* ============ MOTION: vstup do viewportu ============ */
[data-reveal]{opacity:0;transform:translateY(26px);filter:blur(7px);
  transition:opacity .9s var(--ease-expo),transform .9s var(--ease-expo),filter .9s var(--ease-expo)}
[data-reveal].in{opacity:1;transform:none;filter:none}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
  [data-reveal]{opacity:1;transform:none;filter:none}
}

/* ============ NAVIGACE: plovoucí pilulka ============ */
.nav{position:sticky;top:0;z-index:60;padding-top:20px;padding-inline:var(--wrap-pad);pointer-events:none}
/* Hlavička drží stejnou šířku jako obsah stránky, aby logo a tlačítko seděla
   nad okraji sekcí pod nimi. Uvnitř se odkazy rozprostřou do stran. */
.nav-inner{
  pointer-events:auto;margin:0 auto;width:100%;max-width:calc(var(--wrap) + 48px);
  display:flex;align-items:center;gap:6px;padding:9px 9px 9px 26px;
  border-radius:var(--r-pill);background:rgba(252,250,247,.78);
  backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);
  box-shadow:var(--sh-md),inset 0 0 0 1px rgba(255,255,255,.6);
}
/* Odkazy uprostřed, logo vlevo, tlačítko vpravo. */
.nav-inner .nav-links{margin-inline:auto}
.nav-inner>.btn{margin-left:0}
/* Navigace leží přímo na fotce, ne nad ní. Proto na sebe nebere žádnou výšku
   v toku stránky a hlavička sekce začíná hned pod horní hranou okna.
   Lepivost tím netrpí, prvek zůstává sticky. */
/* Navigace leží přímo na tom, co je pod ní, a nebere si žádnou výšku v toku
   stránky. Kdyby si ji brala, zůstal by nad hero sekcí pruh v barvě pozadí
   stránky, tedy světlejší než hero, a vypadal by jako bílá lišta navíc. */
.je-uvod .nav,
.ma-banner .nav{height:0;padding-top:0}
/* Odsazení dělá posun, ne margin. Skrz nulovou výšku rodiče by se margin
   propadl ven a odtlačil celou hero sekci o dvacet pixelů dolů. */
.je-uvod .nav-inner,
.ma-banner .nav-inner{position:relative;top:20px;margin-top:0}

/* Obrysové tlačítko je ve výchozím stavu psané pro tmavé pozadí, protože tak
   se používá v bannerech podstránek. V liště je pozadí světlá pilulka, takže
   se tady barvy obracejí. */
.nav-inner .btn-outline{
  color:var(--ink-800);box-shadow:inset 0 0 0 1px var(--line-strong);
}
.nav-inner .btn-outline:hover{
  background:rgba(244,80,28,.10);color:var(--flame-700);
  box-shadow:inset 0 0 0 1px var(--flame-200);
}


/* Logo je jednobarevné a psané verzálkami. Dvojbarevná verze se na tmavé
   fotce i na světlé liště chovala pokaždé jinak a působila jako dvě slova
   od dvou různých značek. */
.nav-logo{
  font-family:var(--font-display);font-weight:600;
  font-size:1.32rem;text-transform:uppercase;
  letter-spacing:.01em;word-spacing:.12em;
  margin-right:18px;white-space:nowrap;
}
.nav-link{
  padding:9px 15px;border-radius:var(--r-pill);text-decoration:none;font-size:.92rem;font-weight:500;
  color:var(--ink-700);transition:background var(--hover-dur) var(--hover-ease),color var(--hover-dur) var(--hover-ease);
  white-space:nowrap;
}
.nav-link:hover{background:rgba(244,80,28,.10);color:var(--flame-700)}
.nav-links{display:flex;gap:2px}
.nav-link.aktivni{background:rgba(244,80,28,.12);color:var(--flame-700)}

/* Rozbalovací nabídka oddílů v horní liště.
   Otevírá se čistě v CSS, najetím myší i tabulátorem (:focus-within), takže
   nepotřebuje skript a funguje i tehdy, když se JavaScript nenačte. Odkaz
   „Oddíly“ zůstává normální odkaz na přehled, na dotykovém zařízení tedy
   klepnutí vede na výpis oddílů a nic se neztratí. */
.nav-rozbal{position:relative;display:inline-flex}
.nav-rozbal > .nav-link{display:inline-flex;align-items:center;gap:5px}
.nav-rozbal-sipka{display:inline-flex;width:14px;height:14px;
  transition:transform var(--hover-dur) var(--hover-ease)}
.nav-rozbal-sipka svg{width:100%;height:100%}
.nav-rozbal:hover .nav-rozbal-sipka,
.nav-rozbal:focus-within .nav-rozbal-sipka{transform:rotate(180deg)}

.nav-podmenu{
  position:absolute;top:100%;left:50%;transform:translate(-50%,6px);
  display:flex;flex-direction:column;gap:2px;min-width:212px;
  margin-top:8px;padding:8px;border-radius:var(--r-lg);
  background:rgba(252,250,247,.97);backdrop-filter:blur(14px);
  box-shadow:var(--sh-lg),inset 0 0 0 1px var(--line);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity var(--hover-dur) var(--hover-ease),
             transform var(--hover-dur) var(--ease-spring),
             visibility 0s linear var(--hover-dur);
  z-index:60;
}
/* Neviditelný můstek přes mezeru mezi odkazem a panelem, aby nabídka
   nezmizela ve chvíli, kdy myš přejíždí z jednoho na druhý. */
.nav-podmenu::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
.nav-rozbal:hover .nav-podmenu,
.nav-rozbal:focus-within .nav-podmenu{
  opacity:1;visibility:visible;pointer-events:auto;
  transform:translate(-50%,0);transition-delay:0s;
}
.nav-podmenu-polozka{
  display:flex;align-items:center;gap:10px;
  padding:9px 12px;border-radius:var(--r-md);
  text-decoration:none;font-size:.9rem;font-weight:500;
  color:var(--ink-700);white-space:nowrap;
  transition:background var(--hover-dur) var(--hover-ease),color var(--hover-dur) var(--hover-ease);
}
.nav-podmenu-polozka:hover{background:rgba(244,80,28,.10);color:var(--flame-700)}
.nav-podmenu-ikona{display:inline-flex;width:17px;height:17px;flex:none;color:var(--flame-600)}
.nav-podmenu-ikona svg{width:100%;height:100%}

/* Oddíly v mobilní nabídce. Odsazené a menším písmem, ať je vidět,
   že patří pod „Oddíly“ nad nimi, a nesplynou s hlavními položkami. */
.sheet-podmenu{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;
  margin:6px auto 14px;max-width:320px}
.sheet nav .sheet-podmenu a{
  font-family:var(--font-body);font-size:.9rem;font-weight:500;letter-spacing:0;
  padding:7px 14px;border-radius:var(--r-pill);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);
  color:rgba(252,250,247,.86);word-spacing:normal;
  transition:background var(--hover-dur) var(--hover-ease),color var(--hover-dur) var(--hover-ease),
             box-shadow var(--hover-dur) var(--hover-ease)}
.sheet nav .sheet-podmenu a:hover{background:rgba(255,255,255,.14);color:var(--sand-50);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.5)}

/* Dvě tlačítka v liště. Vedle sebe jsou jen tam, kde je na ně místo,
   jinak by menu vytlačily. Pod 1120 px zůstává jen to hlavní, rezervace
   se dají najít v mobilním menu i na stránce haly. */
.nav-cta + .nav-cta{margin-left:8px}
.nav-inner>.nav-cta:first-of-type{margin-left:8px}
@media(max-width:1120px){.nav-inner .nav-cta:not(:last-of-type){display:none}}

/* Tlačítka na konci vysunovacího menu na mobilu. */
.sheet-cta{display:flex;flex-direction:column;gap:12px;align-items:center;margin-top:34px}
/* Tlačítka v mobilním menu si nesmí vzít obří typografii odkazů kolem sebe.
   Přebijeme jen to, co jim vadí, zbytek vzhledu si nesou samy. */
.sheet-cta .btn{
  display:inline-flex;min-width:230px;justify-content:center;
  font-family:var(--font-text);font-size:.98rem;font-weight:600;
  letter-spacing:0;padding:14px 26px;
}
.sheet-cta .btn-outline{color:var(--sand-50);box-shadow:inset 0 0 0 1px rgba(255,255,255,.45)}
.sheet-cta .btn-outline:hover{background:rgba(255,255,255,.14);color:var(--sand-50)}

/* hamburger, morfuje do X, ne že by zmizel */
.burger{display:none;width:42px;height:42px;border:0;border-radius:50%;background:rgba(25,22,39,.06);
  cursor:pointer;position:relative;flex:none;transition:background var(--hover-dur) var(--hover-ease)}
.burger:hover{background:rgba(244,80,28,.14)}
/* Čárky se umisťují od středu kolečka, ne pevnými hodnotami odshora.
   S pevnými hodnotami sedí jen na jednu velikost tlačítka a na menším
   kolečku na mobilu byly o kus níž, než měly být. */
.burger span{position:absolute;left:50%;top:50%;width:18px;height:2px;margin:-1px 0 0 -9px;
  border-radius:2px;background:var(--ink-900);
  transition:transform .5s var(--ease-spring),opacity .3s var(--ease-expo)}
.burger span:nth-child(1){transform:translateY(-6px)}
.burger span:nth-child(2){transform:translateY(0)}
.burger span:nth-child(3){transform:translateY(6px)}
.burger.open span:nth-child(1){transform:translateY(0) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0;transform:scaleX(.3)}
.burger.open span:nth-child(3){transform:translateY(0) rotate(-45deg)}

/* celoplošné menu */
/* Zavřené menu musí být neviditelné i pro tabulátor a pro čtečku obrazovky.
   Samotné opacity:0 ho jen skryje očím, fokus by do něj dál padal a člověk
   procházející web klávesnicí by se proklikal sedmi neviditelnými odkazy. */
/* Nabídka se musí dát odscrollovat: s podmenu oddílů a na nízkém displeji
   se obsah do okna nevejde a tlačítka dole by jinak nešlo dosáhnout.
   „safe center" drží obsah na středu, dokud se vejde, a jakmile přeteče,
   přepne se na začátek — při obyčejném center se odřízne horní část a ta
   se pak nedá odscrollovat. */
.sheet{position:fixed;inset:0;z-index:59;display:grid;justify-items:center;
  align-content:center;align-content:safe center;
  overflow-y:auto;overscroll-behavior:contain;padding:86px 20px 40px;
  background:rgba(16,14,28,.9);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .5s var(--ease-expo),visibility 0s linear .5s}
.sheet.open{opacity:1;visibility:visible;pointer-events:auto;transition-delay:0s}
.sheet a{display:block;font-family:var(--font-display);font-size:clamp(2rem,9vw,3rem);font-weight:600;
  letter-spacing:-.03em;color:var(--sand-50);text-decoration:none;padding:10px 0;
  opacity:0;transform:translateY(38px);
  transition:opacity .7s var(--ease-expo),transform .7s var(--ease-expo),color var(--hover-dur) var(--hover-ease)}
.sheet a:hover{color:var(--flame-400)}
.sheet.open a{opacity:1;transform:none}
.sheet.open a:nth-child(1){transition-delay:.08s}
.sheet.open a:nth-child(2){transition-delay:.14s}
.sheet.open a:nth-child(3){transition-delay:.2s}
.sheet.open a:nth-child(4){transition-delay:.26s}
.sheet nav a{word-spacing:.1em}
/* Nabídka přes celé okno se používá jen do šířky 960 px, tedy na telefonu
   a tabletu. Tam se položky stáhnou, ať jsou tlačítka dole vidět bez
   scrollování. Na opravdu nízkém displeji se scrollovat dá.
   tlačítka dole vidět bez scrollování. Odscrollovat jde pořád. */
@media(max-height:1060px){
  .sheet{padding-top:74px}
  .sheet a{font-size:clamp(1.55rem,6.5vw,2.1rem);padding:6px 0}
  .sheet nav .sheet-podmenu a{font-size:.86rem;padding:6px 12px}
  .sheet-podmenu{gap:6px;margin:4px auto 10px}
  .sheet-cta{margin-top:22px;gap:10px}
}
@media(max-height:700px){
  .sheet{padding-top:62px;padding-bottom:28px}
  .sheet a{font-size:1.3rem;padding:3px 0}
  .sheet-podmenu{margin:2px auto 7px;gap:5px}
  .sheet nav .sheet-podmenu a{font-size:.82rem;padding:5px 11px}
  .sheet-cta{margin-top:14px;gap:8px}
}

.sheet-close{position:absolute;top:26px;right:26px;width:46px;height:46px;border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.10);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);
  transition:background var(--hover-dur) var(--hover-ease),transform var(--hover-dur) var(--ease-spring)}
.sheet-close:hover{background:var(--grad-flame);transform:rotate(90deg)}
.sheet-close::before,.sheet-close::after{content:"";position:absolute;left:14px;top:22px;width:18px;height:2px;
  border-radius:2px;background:var(--sand-50)}
.sheet-close::before{transform:rotate(45deg)} .sheet-close::after{transform:rotate(-45deg)}
.nav-inner.hidden{opacity:0;pointer-events:none;transform:translateY(-10px)}
.nav-inner{transition:opacity .35s var(--ease-expo),transform .35s var(--ease-expo)}

/* Menu se schová do hamburgeru dřív než dřív (860 px). Přibyla položka
   Rozvrh haly, takže se sedm odkazů a tlačítko do užšího okna nevejde
   a lišta přetékala ven z obrazovky. Změřeno: poslední šířka, kde se to
   ještě vejde, je 960 px. */
/* Na mobilu je v liště jen název vlevo a hamburger vpravo. Tlačítka Rozvrh
   a Rezervovat se na malé šířce tísnila vedle sebe a přetlačovala název;
   obě jsou hned v rozbalené nabídce, takže se nikam neztratila. */
@media(max-width:960px){
  .nav-links{display:none}
  .burger{display:block}
  .nav-inner .nav-cta{display:none}
  .nav-inner .nav-logo{margin-right:auto}
  /* Vlevo text, vpravo kolečko. Odsazení 26/9 px je nastavené pro tlačítka
     na desktopu; s jediným kolečkem vypadala lišta vychýlená doleva. */
  .nav-inner{padding:9px 20px}
}

/* ============ HERO ============ */
/* Hero zabírá celé okno. Používá se dvh, aby na mobilu nepřekážel adresní
   řádek prohlížeče, který se při rolování schovává. Když je nahoře pruh
   s upozorněním, jeho výška se odečte, jinak by hero přetekl pod okraj.
   Výšku pruhu měří main.js a zapisuje ji do proměnné. */
/* Úvodní obrazovka: text vlevo, fotka v zaobleném rámu vpravo.
   Dřív to byla fotka přes celé okno s tmavým přechodem a bílým textem přes ni.
   Vypadalo to efektně, ale celý vstup na web byl tmavý a nadpis se musel prát
   o čitelnost s tím, co zrovna bylo na fotce. Takhle má text vlastní klidné
   pozadí a fotka vlastní plochu, kde se nic nepřebarvuje. */
.hero{position:relative;background:var(--sand-100);overflow:hidden;
  /* Nahoře leží navigace, která nemá vlastní výšku. Tohle je místo pro ni. */
  padding-top:clamp(84px,6.4vw,104px)}

/* Vzor v pozadí: soustředné oblouky vycházející zpoza nadpisu. Kreslí je
   opakovaný kruhový přechod, takže to není obrázek ke stažení a v každé
   velikosti okna zůstane ostrý. Maska ho nechá zesvětlat a před fotkou úplně
   zmizet, aby se do ní nezakusoval. */
.hero::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:repeating-radial-gradient(circle at -8% 50%,
    rgba(244,80,28,.13) 0 1.5px, transparent 1.5px 128px);
  -webkit-mask-image:linear-gradient(100deg,#000 0%,rgba(0,0,0,.5) 34%,transparent 62%);
          mask-image:linear-gradient(100deg,#000 0%,rgba(0,0,0,.5) 34%,transparent 62%);
}
.hero-mriz{position:relative;z-index:1}
.hero-mriz{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);
  grid-template-areas:"text foto" "lista lista";
  column-gap:clamp(28px,3.6vw,56px);align-items:stretch;
  /* Levý okraj sedí na mřížce obsahu, pravý žádný není. Fotka tak vybíhá až
     k okraji okna a hero nepůsobí jako další vycentrovaná krabice v řadě. */
  padding-left:calc(max(0px,(100% - var(--wrap)) / 2) + var(--wrap-pad));
  padding-block:clamp(18px,2.6vw,40px) clamp(30px,3.6vw,58px);
}
.hero-mriz>*{min-width:0}
/* Text se ve svém sloupci vystředí na výšku proti fotce vedle. */
.hero-text{grid-area:text;display:flex;flex-direction:column;justify-content:center;
  padding-block:clamp(6px,1.4vw,22px)}
.hero-ram{grid-area:foto}
.hero-lista{grid-area:lista}
.hero h1{color:var(--ink-900);font-size:clamp(3rem,6.5vw,6rem);max-width:12ch;
  letter-spacing:-.04em;line-height:.98;margin:0}
/* Tenčí řádek nad názvem jednoty. Je schválně v textovém písmu a v nejlehčím
   řezu: displejové písmo má nejtenčí řez pětistovkový a vedle velkého nadpisu
   by pořád působilo jako druhý nadpis, ne jako upřesnění. */
.hero-nadradek{
  margin:0 0 clamp(6px,.8vw,12px);
  font-family:var(--font-text);font-weight:400;
  font-size:clamp(1.02rem,1.35vw,1.32rem);line-height:1.25;
  letter-spacing:0;color:var(--ink-600);
}
.hero-perex{color:var(--ink-600);max-width:46ch;margin-top:16px}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(26px,3vw,38px)}
/* Obrysové tlačítko je ve výchozím stavu bílé, protože se používá na tmavých
   bannerech podstránek. V úvodní obrazovce je pozadí světlé, takže by bylo
   bílé na bílém a druhé tlačítko by prostě zmizelo. */
.hero-cta .btn-outline{color:var(--ink-800);box-shadow:inset 0 0 0 1px var(--line-strong)}
.hero-cta .btn-outline:hover{background:rgba(244,80,28,.10);color:var(--flame-700);
  box-shadow:inset 0 0 0 1px var(--flame-200)}

/* Rám s fotkou. Poměr stran je pevný, aby se stránka při načítání nehýbala,
   a odpovídá poměru fotek z fotoaparátu, takže se z nich skoro nic neořízne. */
.hero-ram{
  position:relative;overflow:hidden;
  min-height:clamp(320px,39vw,520px);
  border-radius:var(--r-xl) 0 0 var(--r-xl);
  background:var(--ink-900);box-shadow:var(--sh-lg);
}

/* Spodní lišta úvodní obrazovky: ikona a název oddílu, nic víc. Linka nahoře
   jde až k okraji okna stejně jako fotka nad ní, takže lišta opravdu působí
   jako pruh pod hero sekcí, ne jako další vycentrovaná krabice. */
/* Lišta pod úvodní obrazovkou: malé dlaždice přes celou šířku sekce.
   Původně to byly obyčejné chipy s obrysem, jenže takhle vypadá půlka webů
   a s vlastním designem stránky to nemělo nic společného. Tyhle dlaždice
   používají stejný jazyk jako velké dlaždice níž: ikona v zaobleném čtverci
   a barva, která se při najetí rozlije z prostředka do rohů. */
.hero-lista{
  margin-top:clamp(20px,2.4vw,34px);
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
  gap:clamp(7px,.7vw,11px);
}
/* Lišta začíná na levé hraně mřížky obsahu, protože ji tam posadilo odsazení
   celého hero. Vpravo se ale musí zastavit taky na hraně obsahu, jinak jí
   poslední dlaždice uteče za okraj okna. Nad šířkou mřížky stačí strop,
   pod ní odsazení: procenta by se tu počítala z šířky lišty, ne okna,
   takže jedním pravidlem to nejde. */
@media (min-width:1201px){
  .hero-lista{max-width:calc(var(--wrap) - 2 * var(--wrap-pad))}
}
@media (max-width:1200px){
  .hero-lista{padding-right:var(--wrap-pad)}
}
.hero-odkaz{
  position:relative;isolation:isolate;overflow:hidden;
  display:flex;align-items:center;gap:10px;
  padding:11px 12px;border-radius:var(--r-md);
  background:var(--sand-50);color:var(--ink-900);text-decoration:none;
  box-shadow:inset 0 0 0 1px var(--line),0 1px 2px rgba(38,32,56,.04);
  transition:box-shadow var(--dur-vylitek) var(--ease-vylitek),color .8s var(--ease-vylitek);
}
.hero-odkaz:hover,.hero-odkaz:focus-visible{
  color:#fff;outline:none;
  box-shadow:inset 0 0 0 1px transparent,0 14px 30px -16px rgba(244,80,28,.55);
}
/* Kruh musí pokrýt i rohy dlaždice, a ta je na šířku, takže stačí míň
   než u čtvercových dlaždic níž. */
.hero-odkaz .dlazdice-vylitek{width:135%}
.hero-odkaz:hover .dlazdice-vylitek,
.hero-odkaz:focus-visible .dlazdice-vylitek{transform:translate(-50%,-50%) scale(1)}

.hero-odkaz-ikona{
  flex:0 0 auto;display:grid;place-items:center;width:34px;height:34px;border-radius:11px;
  background:var(--flame-50);color:var(--flame-600,#E1400F);
  transition:background .8s var(--ease-vylitek),color .8s var(--ease-vylitek),transform .9s var(--ease-spring);
}
.hero-odkaz-ikona .lucide{width:18px;height:18px;stroke-width:1.8}
.hero-odkaz:hover .hero-odkaz-ikona,
.hero-odkaz:focus-visible .hero-odkaz-ikona{
  background:rgba(255,255,255,.18);color:#fff;transform:scale(1.06) rotate(-4deg);
}

.hero-odkaz-nazev{
  font-family:var(--font-display);font-weight:600;letter-spacing:-.015em;
  font-size:clamp(.84rem,.92vw,.96rem);line-height:1.15;min-width:0;
}
.hero-odkaz-sipka{
  margin-left:auto;flex:0 0 auto;display:grid;place-items:center;width:15px;height:15px;
  color:var(--ink-300);
  transition:transform var(--hover-dur) var(--ease-spring),color .8s var(--ease-vylitek);
}
.hero-odkaz-sipka .lucide{width:15px;height:15px}
.hero-odkaz:hover .hero-odkaz-sipka,
.hero-odkaz:focus-visible .hero-odkaz-sipka{transform:translateX(3px);color:#fff}

/* Na užších oknech jde hero pod sebe. Text drží okraje obsahu, fotka jede
   od kraje ke kraji: v úzkém sloupci by zaoblený rám s odsazením zbyl jako
   proužek, ze kterého se nedá nic přečíst. */
@media (max-width:900px){
  .hero-mriz{
    grid-template-columns:1fr;
    /* Lišta jde nad fotku. Pod fotkou by na mobilu skončila přes osm set
       pixelů od začátku stránky, tedy přesně tam, kam nikdo nedoroluje,
       a celá změna by neměla smysl. */
    grid-template-areas:"text" "lista" "foto";
    column-gap:0;row-gap:clamp(18px,4vw,28px);
    padding-left:0;padding-block:clamp(10px,2.6vw,22px) clamp(30px,5.6vw,52px);
  }
  .hero-text{padding-inline:var(--wrap-pad);padding-block:0}
  .hero h1{max-width:none}
  .hero-perex{max-width:none}
  /* Pevný počet sloupců, ne auto-fit: ten při šesti dlaždicích nechával
     v posledním řádku jednu samotnou. Tři a tři, nebo dvě a dvě a dvě. */
  .hero-lista{margin-top:0;margin-inline:var(--wrap-pad);padding-right:0;
    grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .hero-ram{min-height:0;aspect-ratio:16/9;border-radius:0}
}
@media (max-width:560px){
  .hero-lista{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero-odkaz{padding:10px;gap:8px}
  .hero-odkaz-ikona{width:31px;height:31px;border-radius:10px}
}
@media (max-width:520px){
  .hero-ram{aspect-ratio:3/2}
  .hero-cta{gap:10px}
  .hero-cta .btn{flex:1 1 auto;justify-content:center}
}

/* Fotky pod textem článku. Tři ve řádku, na užším okně dvě a na mobilu jedna.
   Poměr stran je pevný, aby mřížka držela řádky i při různě vysokých fotkách. */
.clanek-galerie{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(8px,1vw,14px);margin-top:34px;
}
.clanek-foto{
  position:relative;display:block;padding:0;border:0;cursor:zoom-in;
  aspect-ratio:4/3;overflow:hidden;border-radius:var(--r-md);
  background:var(--ink-900);box-shadow:var(--sh-xs);
  transition:box-shadow var(--hover-dur) var(--hover-ease),transform var(--hover-dur) var(--ease-spring);
}
.clanek-foto img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .9s var(--ease-expo)}
.clanek-foto:hover{box-shadow:var(--sh-md);transform:translateY(-2px)}
/* Jediná fotka v galerii se nemačká do třetiny řádku a neořezává se na 4:3.
   Bývá to plakát nebo diplom, tedy obrázek s textem, kterému ořez ubere
   půlku sdělení. Roztáhne se přes celou šířku a nechá si svůj poměr stran. */
.clanek-galerie:has(.clanek-foto:only-child){grid-template-columns:1fr}
.clanek-foto:only-child{aspect-ratio:auto;background:transparent}
.clanek-foto:only-child img{height:auto;object-fit:contain}
.clanek-foto:hover img{transform:scale(1.05)}
.clanek-foto:focus-visible{outline:2px solid var(--flame-500);outline-offset:3px}
@media (max-width:860px){.clanek-galerie{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.clanek-galerie{grid-template-columns:1fr}}

/* placeholder místo reálné fotky */
.ph{position:relative;overflow:hidden;background:var(--grad-night);display:grid;place-items:center;text-align:center}
.ph::before{content:"";position:absolute;inset:0;background:var(--grad-mesh);opacity:.9}
.ph-label{position:relative;z-index:1;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.06em;
  color:rgba(255,255,255,.62);text-transform:uppercase;padding:10px 16px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);border-radius:var(--r-pill);backdrop-filter:blur(6px)}

/* ============ KARTA ODDÍLU ============ */
.club{position:relative;overflow:hidden;border-radius:var(--r-lg);min-height:230px;display:flex;flex-direction:column;justify-content:flex-end;
  padding:24px;text-decoration:none;color:var(--sand-50);isolation:isolate}
.club-bg{position:absolute;inset:0;z-index:-2;transition:transform .8s var(--ease-expo)}
.club::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(16,14,28,.92) 6%,rgba(16,14,28,.38) 54%,rgba(16,14,28,.06) 100%)}
.club:hover .club-bg{transform:scale(1.07)}
.club h4{font-size:1.4rem;margin-bottom:4px;word-spacing:.08em}
.club .club-meta{font-size:.86rem;color:rgba(255,255,255,.72);display:flex;align-items:center;gap:8px}
.club-go{position:absolute;top:20px;right:20px;width:40px;height:40px;border-radius:50%;
  background:rgba(255,255,255,.14);backdrop-filter:blur(8px);display:grid;place-items:center;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);
  transition:background var(--hover-dur) var(--hover-ease),transform var(--hover-dur) var(--ease-spring)}
.club-go svg{width:17px;height:17px;transition:transform var(--hover-dur) var(--ease-spring)}
.club:hover .club-go{background:var(--grad-flame);box-shadow:var(--glow-flame)}
.club:hover .club-go svg{transform:rotate(-45deg)}

/* ============ STAT ============ */
.stat{text-align:left}
.stat .num,.stat .lab{display:block}
.stat .num{font-family:var(--font-display);font-size:clamp(2.4rem,4.4vw,3.6rem);font-weight:600;line-height:1;letter-spacing:-.04em;
  background:var(--grad-sunset);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.stat .lab{font-size:.86rem;color:var(--ink-500);margin-top:8px;font-weight:500}
.bg-night .stat .lab{color:var(--ink-300)}

/* ============ ROZVRH ============ */
.sched{width:100%;border-collapse:separate;border-spacing:0;font-size:.94rem;table-layout:fixed;min-width:560px}
.sched th:nth-child(1),.sched td:nth-child(1){width:26%}
.sched th:nth-child(3),.sched td:nth-child(3){width:20%}
.sched th:nth-child(4),.sched td:nth-child(4){width:20%}
.sched th{
  font-family:var(--font-text);font-size:.72rem;text-transform:uppercase;letter-spacing:.14em;
  color:var(--ink-600);font-weight:600;text-align:left;padding:0 16px 12px;
}
.sched td{padding:15px 16px;background:var(--surface);border-top:1px solid var(--line)}
.sched tr td:first-child{border-left:1px solid var(--line);border-radius:var(--r-sm) 0 0 var(--r-sm)}
.sched tr td:last-child{border-right:1px solid var(--line);border-radius:0 var(--r-sm) var(--r-sm) 0}
.sched tbody tr{transition:transform .4s var(--ease-spring)}
.sched tbody tr:hover td{background:var(--flame-50);border-color:var(--flame-200)}
.sched .time{font-family:var(--font-display);font-weight:600;font-size:1rem;white-space:nowrap;word-spacing:.06em}
.sched .free td{background:var(--turf-100);border-color:rgba(18,167,91,.22)}

/* Na mobilu se tabulka rozpadne na kartu za každý trénink. Vodorovné
   posouvání je u tréninkových časů to poslední, co chceme, tohle je nejčtenější
   část stránky oddílu a člověk ji obvykle otevírá v telefonu. */
@media (max-width:620px){
  .sched{min-width:0;table-layout:auto;display:block}
  .sched thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .sched tbody,.sched tr{display:block}
  .sched tr{
    background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
    padding:6px 4px;margin-bottom:12px;
  }
  .sched tr:last-child{margin-bottom:0}
  /* Mřížka, ne flex. I prostý text se tak stane vlastní buňkou a dá se
     spolehlivě zarovnat doprava. U flexu se bezejmenné textové uzly chovají
     v každém prohlížeči trochu jinak. */
  /* Procentní šířky sloupců platí jen pro tabulkové rozvržení. Jakmile se
     řádky rozpadnou pod sebe, dělaly by z buněk úzké pruhy. */
  .sched th,.sched td{width:auto!important}
  .sched td{
    display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:baseline;
    background:none;border:0;border-radius:0;padding:9px 14px;text-align:right;
  }
  .sched td + td{border-top:1px solid var(--line)}
  .sched td::before{
    content:attr(data-popis);font-size:.78rem;font-weight:600;text-align:left;
    text-transform:uppercase;letter-spacing:.08em;color:var(--muted);white-space:nowrap;
  }
  .sched td:empty{display:none}
  .sched tbody tr:hover td{background:none}
}
.tag{display:inline-flex;align-items:center;gap:6px;font-size:.76rem;font-weight:600;padding:4px 11px;border-radius:var(--r-pill);
  background:var(--sand-100);color:var(--ink-600);box-shadow:inset 0 0 0 1px var(--line)}
.tag.free{background:var(--turf-100);color:var(--turf-600);box-shadow:inset 0 0 0 1px rgba(18,167,91,.26)}
.tag.full{background:var(--flame-50);color:var(--flame-700);box-shadow:inset 0 0 0 1px var(--flame-200)}

/* ============ VÝSLEDEK ZÁPASU ============ */
.match{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:18px;padding:20px 24px;
  background:var(--surface);border-radius:var(--r-md);box-shadow:var(--sh-xs),var(--hl);
  transition:box-shadow var(--hover-dur) var(--ease-expo),transform var(--hover-dur) var(--ease-spring)}
.match:hover{box-shadow:var(--sh-md);transform:translateY(-3px)}
.match .team{font-family:var(--font-display);font-weight:600;font-size:1.02rem;word-spacing:.08em}
.match .team.away{text-align:right}
.match .score{font-family:var(--font-display);font-weight:600;font-size:1.5rem;letter-spacing:-.03em;
  padding:8px 18px;border-radius:var(--r-sm);background:var(--ink-950);color:var(--sand-50);white-space:nowrap}
.match .score.win{background:var(--grad-turf)}
.match .score.loss{background:var(--ink-700)}

/* ============ MOST NA EXTERNÍ WEB ============ */
/* Používá se všude, kde obsah nežije na webu TJ: klubový web kopané,
   výsledkový systém svazu, rezervační systém haly. */
.bridge{position:relative;overflow:hidden;border-radius:var(--r-xl);padding:clamp(28px,4vw,44px);
  background:var(--ink-950);color:var(--sand-50)}
.bridge::before{content:"";position:absolute;inset:0;background:var(--grad-mesh);opacity:.85}
.bridge>*{position:relative;z-index:1}
.bridge-host{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-mono);font-size:.76rem;
  letter-spacing:.04em;color:var(--flame-300);background:rgba(244,80,28,.14);padding:7px 14px;
  border-radius:var(--r-pill);box-shadow:inset 0 0 0 1px rgba(255,115,69,.3);margin-bottom:18px}
.bridge h3{font-size:clamp(1.5rem,2.6vw,2rem);margin-bottom:12px;max-width:30ch}
.bridge p{color:var(--ink-300);max-width:72ch;margin-bottom:26px}
.bridge-note{display:block;margin-top:16px;font-size:.8rem;color:var(--ink-300);opacity:.85}

/* ikona odchozího odkazu: šipka ven z rámečku. NIKDY se netočí, na rozdíl od směrové šipky */
.btn .ic.ext svg{width:15px;height:15px}
.btn:hover .ic.ext svg{transform:translate(2px,-2px)}

/* inline odkaz mimo web */
.exlink{display:inline-flex;align-items:center;gap:6px;color:var(--flame-600);font-weight:600;
  text-decoration:none;box-shadow:inset 0 -1px 0 rgba(244,80,28,.35);
  transition:box-shadow var(--hover-dur) var(--hover-ease),color var(--hover-dur) var(--hover-ease)}
.exlink:hover{box-shadow:inset 0 -2px 0 var(--flame-500)}
.exlink svg{width:13px;height:13px;opacity:.75}
.on-dark .exlink,.bridge .exlink{color:var(--flame-300)}

/* ============ FORMULÁŘ ============ */
.field{display:block;margin-bottom:18px}
.field label{display:block;font-size:.82rem;font-weight:600;letter-spacing:.02em;color:var(--ink-600);margin-bottom:8px}
.input,.select,.textarea,
.rez-pole > input,.rez-pole > select,.rez-pole > textarea{
  width:100%;font-family:var(--font-text);font-size:.98rem;color:var(--ink-900);
  padding:15px 18px;border:0;border-radius:var(--r-sm);background:var(--surface);
  box-shadow:inset 0 0 0 1px var(--line),var(--sh-xs);
  transition:box-shadow var(--hover-dur) var(--ease-expo);
}
.input::placeholder,.textarea::placeholder,.rez-pole > input::placeholder,.rez-pole > textarea::placeholder{color:var(--ink-400)}
.input:hover,.select:hover,.textarea:hover,
.rez-pole > input:hover,.rez-pole > select:hover,.rez-pole > textarea:hover{box-shadow:inset 0 0 0 1px var(--line-strong),var(--sh-xs)}
.input:focus,.select:focus,.textarea:focus,
.rez-pole > input:focus,.rez-pole > select:focus,.rez-pole > textarea:focus{outline:0;box-shadow:inset 0 0 0 2px var(--flame-400),0 0 0 4px rgba(244,80,28,.14)}
.textarea{min-height:130px;resize:vertical}
.select{appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%23776E92' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 5l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 18px center}

/* ============ AKORDEON ============ */
.acc{border-bottom:1px solid var(--line)}
.acc-h{width:100%;background:0;border:0;cursor:pointer;text-align:left;font-family:var(--font-display);
  font-size:1.08rem;font-weight:600;color:var(--ink-900);padding:22px 48px 22px 0;position:relative;
  transition:color var(--hover-dur) var(--hover-ease)}
.acc-h:hover{color:var(--flame-600)}
.acc-h::after{content:"";position:absolute;right:6px;top:50%;width:30px;height:30px;margin-top:-15px;border-radius:50%;
  background:var(--sand-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' fill='none' stroke='%23252038' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6.5 2v9M2 6.5h9'/%3E%3C/svg%3E") center no-repeat;
  transition:transform .45s var(--ease-spring),background-color var(--hover-dur) var(--ease-expo)}
.acc.open .acc-h::after{transform:rotate(135deg);background-color:var(--flame-100)}
.acc-b{max-height:0;overflow:hidden;transition:max-height .55s var(--ease-expo)}
.acc-b p{padding-bottom:22px;color:var(--ink-600)}

/* ============ PATIČKA ============ */
.foot{background:var(--ink-950);color:var(--ink-300);padding-block:clamp(56px,7vw,88px) 34px;position:relative;overflow:hidden}
.foot::before{content:"";position:absolute;inset:0;background:var(--grad-mesh);opacity:.6}
.foot>*{position:relative;z-index:1}
.foot h5{font-family:var(--font-text);font-size:.74rem;text-transform:uppercase;letter-spacing:.18em;color:var(--ink-300);margin:0 0 16px;font-weight:600}
.foot a{display:block;color:var(--ink-200);text-decoration:none;padding:5px 0;font-size:.94rem;
  transition:color var(--hover-dur) var(--hover-ease),transform var(--hover-dur) var(--ease-spring)}
.foot a:hover{color:var(--flame-300);transform:translateX(4px)}

/* ============ RESPONZIVITA MŘÍŽKY ============ */
/* Součást produkčního CSS. Bez těchhle pravidel se bento na mobilu nesbalí. */
@media(max-width:900px){
  .g3,.g4{grid-template-columns:repeat(2,1fr)}
  .bento{grid-template-columns:repeat(2,1fr)}
  .sp3,.sp2,.sp4,.sp6{grid-column:span 1}
  .row2{grid-row:span 1}
}
@media(max-width:640px){
  .g2,.g3,.g4,.bento{grid-template-columns:1fr}
  .match{grid-template-columns:1fr;text-align:center;gap:10px}
  .match .team.away{text-align:center}
}


/* ===================== HOMEPAGE, doplňkové styly ===================== */

/* ---------- Hlavní obrazovka a fotky na jejím pozadí ----------
   Fotek může být víc a pak se střídají dokola. Řeší to čistě CSS: vrstvy
   leží přes sebe a každá má stejnou animaci průhlednosti, jen posunutou
   v čase o svůj díl cyklu (záporné animation-delay). Žádný časovač
   v JavaScriptu, o překreslování se stará grafická karta.

   Procenta v klíčových snímcích závisí na počtu fotek, proto je pro každý
   počet vlastní sada. Víc než šest fotek PHP nepustí. */
.hero-fotky{position:absolute;inset:0}
.hero-ram .hero-fotka{background-position:center}
.hero-fotka{
  position:absolute;inset:0;background-size:cover;background-position:center 42%;
  will-change:opacity,transform;
}
/* Jediná fotka se nestřídá, jen leží. */
.hero-fotky[data-pocet="1"] .hero-fotka{opacity:1}
/* Při víc fotkách je vidět ta, na kterou zrovna vyšla řada. Každá vrstva
   má stejnou animaci, jen posunutou o svůj díl cyklu: první hned, druhá
   o sedm vteřin později a tak dál. Odečtená délka prolnutí zajistí, že
   fotka začne najíždět dřív, než ta předchozí dozmizí, takže se překrývají
   a obrazovka nikdy neproblikne. */
.hero-fotky:not([data-pocet="1"]) .hero-fotka{
  opacity:0;animation-timing-function:linear;animation-iteration-count:infinite;
  animation-delay:calc(var(--i,0) * var(--hero-krok,7s) - var(--hero-prolnuti,1.6s));
}
/* Než se stihne rozběhnout animace (a když nejede vůbec), drží první fotka,
   aby obrazovka nikdy neproblikla načerno. */
.hero-fotky:not([data-pocet="1"]) .hero-fotka:first-child{opacity:1}

.hero-fotky[data-pocet="2"] .hero-fotka{animation-name:hero-2,hero-kb-2;animation-duration:14s;--hero-krok:7s;--hero-prolnuti:1.6s}
.hero-fotky[data-pocet="3"] .hero-fotka{animation-name:hero-3,hero-kb-3;animation-duration:21s;--hero-krok:7s;--hero-prolnuti:1.6s}
.hero-fotky[data-pocet="4"] .hero-fotka{animation-name:hero-4,hero-kb-4;animation-duration:28s;--hero-krok:7s;--hero-prolnuti:1.6s}
.hero-fotky[data-pocet="5"] .hero-fotka{animation-name:hero-5,hero-kb-5;animation-duration:35s;--hero-krok:7s;--hero-prolnuti:1.6s}
.hero-fotky[data-pocet="6"] .hero-fotka{animation-name:hero-6,hero-kb-6;animation-duration:42s;--hero-krok:7s;--hero-prolnuti:1.6s}

/* Ken Burns: fotka se během svého prolnutí pomalu přibližuje.

   Dřív tu byl jeden zoom natažený přes celý cyklus. Jenže cyklus je při
   čtyřech fotkách 28 vteřin a jedna fotka je z toho vidět jen 8,6 vteřiny,
   takže se za tu dobu zvětšila o dvě procenta a nikdo si toho nevšiml.
   Pohyb se proto vejde přesně do doby, kdy je fotka vidět — koncové
   procento je stejné jako to, ve kterém jí v prolnutí dohasíná průhlednost.
   Zbytek cyklu se nepozorovaně vrací zpátky, to je fotka neviditelná.

   Během prolnutí se tím pádem odcházející fotka dojíždí a nastupující
   začíná, což je přesně ten efekt, o který jde. */
@keyframes hero-kb-2{
  0%{transform:scale(1.03)}
  61.429%{transform:scale(1.14)}
  100%{transform:scale(1.03)}
}
@keyframes hero-kb-3{
  0%{transform:scale(1.03)}
  40.952%{transform:scale(1.14)}
  100%{transform:scale(1.03)}
}
@keyframes hero-kb-4{
  0%{transform:scale(1.03)}
  30.714%{transform:scale(1.14)}
  100%{transform:scale(1.03)}
}
@keyframes hero-kb-5{
  0%{transform:scale(1.03)}
  24.571%{transform:scale(1.14)}
  100%{transform:scale(1.03)}
}
@keyframes hero-kb-6{
  0%{transform:scale(1.03)}
  20.476%{transform:scale(1.14)}
  100%{transform:scale(1.03)}
}

/* Odkud se přibližuje. Zvětšení od jiného bodu než od středu vypadá jako
   posun do strany, takže každá fotka jede jinam a slider se neomrzí.
   Nepotřebuje k tomu vlastní sadu snímků — transform-origin se neanimuje,
   jen určuje, kolem čeho se zvětšuje.

   Při zvětšení nad 1 pokryje fotka svůj rámeček z každého bodu uvnitř,
   takže se u kraje nikdy neodkryje prázdno. */
.hero-fotka:nth-child(1){transform-origin:50% 38%}
.hero-fotka:nth-child(2){transform-origin:28% 55%}
.hero-fotka:nth-child(3){transform-origin:72% 42%}
.hero-fotka:nth-child(4){transform-origin:40% 68%}
.hero-fotka:nth-child(5){transform-origin:66% 32%}
.hero-fotka:nth-child(6){transform-origin:34% 48%}
@keyframes hero-2{
  0%{opacity:0}
  11.429%{opacity:1}
  50%{opacity:1}
  61.429%{opacity:0}
  100%{opacity:0}
}
@keyframes hero-3{
  0%{opacity:0}
  7.619%{opacity:1}
  33.333%{opacity:1}
  40.952%{opacity:0}
  100%{opacity:0}
}
@keyframes hero-4{
  0%{opacity:0}
  5.714%{opacity:1}
  25%{opacity:1}
  30.714%{opacity:0}
  100%{opacity:0}
}
@keyframes hero-5{
  0%{opacity:0}
  4.571%{opacity:1}
  20%{opacity:1}
  24.571%{opacity:0}
  100%{opacity:0}
}
@keyframes hero-6{
  0%{opacity:0}
  3.81%{opacity:1}
  16.667%{opacity:1}
  20.476%{opacity:0}
  100%{opacity:0}
}

/* Přes fotku už nejde žádný text, takže se neztmavuje. Zůstává jen náznak
   stínu u spodní hrany, aby světlá fotka nesplynula s bílým rámem. */
.hero-fotky::after{content:"";position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(to top,rgba(16,14,28,.16) 0%,rgba(16,14,28,0) 34%)}

/* Kdo má vypnuté animace, uvidí jen první fotku a nic se nestřídá. */
@media (prefers-reduced-motion: reduce){
  .hero-fotka{animation:none!important;opacity:0!important;transform:none!important}
  .hero-fotky .hero-fotka:first-child{opacity:1!important}
}
.hero-meta{display:flex;flex-wrap:wrap;gap:16px 40px;margin-top:44px;padding-top:26px;
  border-top:1px solid rgba(255,255,255,.14)}
.hero-meta-item{display:flex;flex-direction:column;gap:2px}
.hero-meta-item strong{font-family:var(--font-display);font-size:1.4rem;font-weight:600;color:var(--sand-50);letter-spacing:-.02em}
.hero-meta-item span{font-size:.78rem;color:var(--ink-300);letter-spacing:.04em}
.scroll-hint{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:8px;color:rgba(255,255,255,.5);
  font-size:.7rem;letter-spacing:.18em;text-transform:uppercase}
.scroll-hint i{display:block;width:1px;height:34px;background:linear-gradient(to bottom,rgba(255,255,255,.5),transparent);
  animation:drop 2.4s var(--ease-expo) infinite}
@keyframes drop{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}
  55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* rychlé akce */
.qa{display:flex;align-items:center;gap:18px}
.qa-ic{width:54px;height:54px;flex:none;border-radius:var(--r-sm);display:grid;place-items:center;box-shadow:var(--hl)}
.qa strong{font-family:var(--font-display);font-size:1.12rem;display:block;word-spacing:.08em}

/* sekce s fotkou vedle textu
   align-items:stretch = obě strany mají stejnou výšku, fotka dorovná text.
   Nikdy nenechávej fotku v poměru stran vedle delšího textu, vznikne díra. */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,56px);align-items:stretch}
.split.rev{grid-template-columns:.95fr 1.05fr}
.split>*{min-width:0}
.split-txt{display:flex;flex-direction:column;justify-content:center}

/* Lepivý levý sloupec (kontaktní formulář). Grid prvek se ve výchozím stavu
   roztáhne na celou výšku řádku a lepení pak nemá kam, proto align-self:start.
   Odsazení shora musí uhnout plovoucí liště s menu. Když je nahoře pruh
   s upozorněním, připočte se i jeho výška, tu měří main.js. */
@media (min-width:901px){
  .split-lepivy>:first-child{
    position:sticky;top:calc(104px + var(--vyska-upozorneni,0px));
    align-self:start;justify-content:flex-start;
  }
}
.photo{border-radius:var(--r-xl);overflow:hidden;position:relative;box-shadow:var(--sh-md);
  min-height:100%;background:var(--ink-900)}
.photo img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.1s var(--ease-expo)}
.photo:hover img{transform:scale(1.04)}
.photo.tall{aspect-ratio:4/5}
.photo.wide{aspect-ratio:16/10}

/* Vložená mapa. Vlastní třída, ne .photo, protože rám v .photo dědí efekt
   přiblížení při najetí a v mapě, kterou jde posouvat, to působí rozbitě.
   Výška je pevná, ne poměr stran: v úzkém sloupci by z poměru vyšel proužek,
   ve kterém se z mapy nedá nic vyčíst. */
.mapa-karta{margin-top:18px}
.mapa{
  border-radius:var(--r-md);overflow:hidden;background:var(--sand-100);
  box-shadow:inset 0 0 0 1px var(--line);height:320px;
}
.mapa iframe{width:100%;height:100%;border:0;display:block}
@media (max-width:900px){.mapa{height:360px}}


/* Rezervační systém vložený do stránky. Vysoký rám, aby se do něj vešel
   kalendář i formulář a nemusel se rolovat sám v sobě. */
.rezervace-ram{
  border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-md);
  background:var(--surface);height:820px;
}
.rezervace-ram iframe{width:100%;height:100%;border:0;display:block}
@media (max-width:700px){.rezervace-ram{height:640px;border-radius:var(--r-md)}}
.split .photo{aspect-ratio:auto;min-height:clamp(300px,32vw,440px)}
/* nadpis v půlce šířky nesnese stejnou velikost jako přes celou sekci */
.split .d2{font-size:clamp(1.9rem,3.2vw,2.9rem)}

/* Dnešní otevírací doba v horním pruhu stránky haly. Barva nese informaci: zelená znamená
   otevřeno, šedá zavřeno. Zeleně napsané „zavřeno" by mátlo. */
.hall-dnes{
  display:inline-flex;align-items:center;gap:8px;margin:0 0 16px;
  font-size:.84rem;font-weight:600;color:#8FE0B6;
  background:rgba(18,167,91,.18);padding:7px 15px;border-radius:var(--r-pill);
  box-shadow:inset 0 0 0 1px rgba(18,167,91,.35);
}
.hall-dnes.zavreno{
  color:var(--ink-200);background:rgba(255,255,255,.10);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.20);
}
.hall-dnes .lucide{font-size:15px}

.hall-params{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 28px}
.hall-param{display:inline-flex;align-items:center;gap:8px;font-size:.84rem;font-weight:500;
  color:var(--sand-50);background:rgba(255,255,255,.10);padding:9px 16px;border-radius:var(--r-pill);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);backdrop-filter:blur(8px)}

/* aktuality */
.news{display:block;text-decoration:none;color:inherit}
.news-img{aspect-ratio:16/10;border-radius:var(--r-md);overflow:hidden;margin-bottom:16px;position:relative}
.news-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .9s var(--ease-expo)}
.news:hover .news-img img{transform:scale(1.05)}
.news-date{font-size:.76rem;color:var(--ink-600);letter-spacing:.04em;font-weight:500}
.news h4{font-size:1.15rem;margin:8px 0 8px;transition:color var(--hover-dur) var(--hover-ease);word-spacing:.08em}
.news:hover h4{color:var(--flame-600)}

/* partneři, flex, aby se neúplná poslední řada zarovnala na střed */
.partners{display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
.partner{flex:0 1 250px;display:grid;place-items:center;height:110px;border-radius:var(--r-md);
  background:var(--surface);box-shadow:var(--sh-xs),inset 0 0 0 1px var(--line);padding:16px 20px;
  transition:box-shadow var(--hover-dur) var(--ease-expo),transform var(--hover-dur) var(--ease-spring)}
.partner:hover{box-shadow:var(--sh-sm),inset 0 0 0 1px var(--line-strong);transform:translateY(-3px)}
/* Loga se tlumí jen mírně. Při silném ztlumení vypadaly bílé rámečky prázdné
   a pruh partnerů působil jako nedodělaný kus webu. */
.partner img{max-width:100%;max-height:68px;width:auto;height:auto;object-fit:contain;display:block;
  filter:grayscale(.7) contrast(1.06);opacity:.9;
  transition:filter var(--hover-dur) var(--ease-expo),opacity var(--hover-dur) var(--ease-expo)}
.partner:hover img{filter:none;opacity:1}
@media(max-width:520px){.partner{flex:0 1 100%}}

/* pás s náborem */
.joinband{display:grid;grid-template-columns:1fr 1fr;gap:0;border-radius:var(--r-2xl);overflow:hidden;
  background:var(--ink-950);position:relative}
.joinband-photo{min-height:340px;background-size:cover;background-position:center}
.joinband-txt{padding:clamp(28px,4vw,56px);display:flex;flex-direction:column;justify-content:center;position:relative}
.joinband-txt::before{content:"";position:absolute;inset:0;background:var(--grad-mesh);opacity:.9}
.joinband-txt>*{position:relative;z-index:1}

/* sekční hlavička */
.sechead{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:var(--sp-head)}
.sechead>div{flex:1}

/* Nadpis s ikonou místo nadtitulku. Nadtitulek dává smysl jen tehdy, když
   řekne něco navíc. Když by jen jinými slovy opakoval nadpis pod sebou,
   je lepší ho vypustit a nechat u nadpisu jen ikonu. */
/* Tlačítko pod textem stránky haly, případně s poznámkou vedle. */
.hala-cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:var(--sp-head)}

.nadpis-s-ikonou{display:flex;align-items:center;gap:.5em}
.nadpis-s-ikonou>.lucide{
  font-size:.72em;color:var(--flame-500);flex:none;
  opacity:.95;transform:translateY(.02em);
}

@media(max-width:900px){
  .split,.split.rev{grid-template-columns:1fr}
  .joinband{grid-template-columns:1fr}
  .joinband-photo{min-height:240px}
  .sechead{flex-direction:column;align-items:flex-start;gap:16px}
}
@media(max-width:640px){
  .hero-meta{gap:14px 26px}
  .nav-cta-long{display:none}
  .hero .eyebrow{font-size:11px;letter-spacing:.14em}
  .hero-meta-item strong{font-size:1.15rem}
  .qa-ic{width:46px;height:46px}
}

/* ===================== DOPLŇKY ŠABLONY WORDPRESSU ===================== */

.skip{position:absolute;left:-9999px;top:0;z-index:100;padding:12px 20px;background:var(--ink-950);color:#fff;
  border-radius:0 0 var(--r-sm) 0;font-size:.9rem}
.skip:focus{left:0}

/* navigace po odscrollování hero */
.nav.nav-solid .nav-inner{background:rgba(252,250,247,.92);box-shadow:var(--sh-md),inset 0 0 0 1px rgba(255,255,255,.7)}
.nav-links a{padding:9px 15px;border-radius:var(--r-pill);text-decoration:none;font-size:.92rem;font-weight:500;
  color:var(--ink-700);white-space:nowrap;transition:background var(--hover-dur) var(--hover-ease),color var(--hover-dur) var(--hover-ease)}
.nav-links a:hover{background:rgba(244,80,28,.10);color:var(--flame-700)}
.nav-links ul{display:flex;gap:2px;list-style:none;margin:0;padding:0}
.sheet nav ul{list-style:none;margin:0;padding:0}
.nav-logo img{max-height:38px;width:auto}

/* hlavička podstránky */
.pagebanner{position:relative;overflow:hidden;background:var(--ink-950);color:var(--sand-50);
  padding-block:clamp(120px,14vw,190px) clamp(48px,6vw,76px)}
.pagebanner::before{content:"";position:absolute;inset:0;background:var(--grad-mesh)}
/* Ořez se drží mírně nad středem. Do pruhu banneru se vejde asi polovina
   výšky snímku a obličeje bývají v horní části: přesně na střed by je pás
   uřízl. Stejnou logikou je posazená i fotka v úvodní obrazovce. */
.pagebanner-bg{position:absolute;inset:0;background-size:cover;background-position:center 38%}
.pagebanner-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(16,14,28,.94) 6%,rgba(16,14,28,.62) 50%,rgba(16,14,28,.30) 100%)}
.pagebanner-in{position:relative;z-index:1}
.pagebanner h1{color:var(--sand-50)}

/* obsah z editoru */
.prose{font-size:1.02rem;line-height:1.7}
.prose h2{font-size:clamp(1.5rem,2.4vw,2rem);margin:38px 0 14px}
.prose h3{font-size:clamp(1.2rem,1.8vw,1.5rem);margin:30px 0 12px}
.prose p{margin-bottom:18px}
.prose ul,.prose ol{margin:0 0 18px;padding-left:22px}
.prose li{margin:7px 0;max-width:74ch}
/* Odstavce mají globálně strop na šířku řádku, aby se dlouhý text dobře četl.
   U krátkého úvodu nad rezervačním formulářem to ale vypadalo, jako by text
   končil v půlce stránky. Tahle třída strop zruší a odstavce využijí celou
   šířku sekce. Na dlouhé texty ji nedávejte, tam ten strop dává smysl. */
.prose-siroky p{max-width:none}
.prose img{max-width:100%;height:auto;border-radius:var(--r-md)}
.prose blockquote{margin:26px 0;padding:18px 24px;border-left:4px solid var(--flame-400);
  background:var(--sand-100);border-radius:0 var(--r-md) var(--r-md) 0}
.prose blockquote p:last-child{margin-bottom:0}
.prose table{width:100%;border-collapse:collapse;margin:20px 0;font-size:.94rem}
.prose th,.prose td{padding:12px;border-bottom:1px solid var(--line);text-align:left}

/* stránkování */
.navigation.pagination{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}
.page-numbers{display:grid;place-items:center;min-width:44px;height:44px;padding:0 14px;border-radius:var(--r-pill);
  text-decoration:none;font-weight:600;font-size:.92rem;color:var(--ink-700);background:var(--surface);
  box-shadow:var(--sh-xs),inset 0 0 0 1px var(--line);transition:box-shadow var(--hover-dur) var(--ease-expo)}
.page-numbers:hover{box-shadow:var(--sh-sm),inset 0 0 0 1px var(--flame-300)}
.page-numbers.current{background:var(--grad-flame);color:#fff;box-shadow:var(--glow-flame)}

/* menu z WordPressu, odstranění výchozích odrážek a podtržení */
.nav-links ul,.nav-links li,.sheet nav ul,.sheet nav li,.foot ul,.foot li{list-style:none;margin:0;padding:0}
.nav-links li{display:inline-flex}
.nav-logo,.nav-logo:hover{text-decoration:none}
.sheet nav li{display:block}
.sheet nav a{padding:10px 0}
.foot ul{display:block}

/* Navigace na mobilu: pilulka drží šířku obrazovky a obsah se do ní vejde.
   Odsazení je po obou stranách stejné, protože vlevo je jen název a vpravo
   jen kolečko hamburgeru. */
@media(max-width:640px){
  .nav{padding-inline:12px}
  .nav-inner{width:100%;max-width:100%;justify-content:space-between;padding:7px 14px;gap:4px;overflow:hidden}
  .nav-inner .btn-sm{padding:9px 9px 9px 14px;font-size:.8rem;flex:none}
  .nav-inner .btn-sm .ic{width:24px;height:24px}
  .nav-logo{margin-right:0;font-size:1.12rem}
  .burger{width:38px;height:38px}
}

/* ===================== COOKIE LIŠTA ===================== */
.cookiebar{position:fixed;left:0;right:0;bottom:0;z-index:75;padding:0 clamp(12px,3vw,24px) clamp(12px,3vw,24px);
  opacity:0;transform:translateY(20px);transition:opacity .5s var(--ease-expo),transform .5s var(--ease-expo)}
.cookiebar.in{opacity:1;transform:none}
.cookiebar-in{max-width:var(--wrap);margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:clamp(14px,2vw,32px);
  justify-content:space-between;background:var(--ink-950);color:var(--sand-50);
  border-radius:var(--r-lg);padding:clamp(18px,2.4vw,26px) clamp(20px,2.6vw,30px);
  box-shadow:var(--sh-lg);position:relative;overflow:hidden}
.cookiebar-in::before{content:"";position:absolute;inset:0;background:var(--grad-mesh);opacity:.7}
.cookiebar-in>*{position:relative;z-index:1}
.cookiebar strong{font-family:var(--font-display);font-size:1.02rem;display:block;margin-bottom:4px}
.cookiebar p{font-size:.88rem;color:var(--ink-300);margin:0;max-width:72ch;line-height:1.55}
.cookiebar p a{color:var(--flame-300);text-decoration:underline;text-underline-offset:2px}
.cookiebar-btns{display:flex;flex-wrap:wrap;gap:10px;flex:none}
.cookiebar .btn-ghost{color:var(--sand-50);box-shadow:inset 0 0 0 1px rgba(255,255,255,.24)}
.cookiebar .btn-ghost:hover{background:rgba(255,255,255,.10);box-shadow:inset 0 0 0 1px rgba(255,255,255,.4);color:#fff}
.cookie-znovu{background:0;border:0;padding:0;margin-left:14px;color:var(--ink-500);cursor:pointer;
  font:inherit;font-size:inherit;text-decoration:underline;text-underline-offset:2px}
.cookie-znovu:hover{color:var(--flame-300)}

/* Spodní řádek patičky: copyright, podpis autora, právní odkazy.
   Odkazy ve sloupcích patičky jsou blokové a světlejší, tady musí být tiché,
   proto se to celé přebíjí. Velikost i barva sedí s tlačítkem cookies vedle. */
.foot-mini{
  border-top:1px solid rgba(255,255,255,.10);padding-top:26px;
  display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:space-between;align-items:baseline;
  font-size:.8rem;line-height:1.5;color:var(--ink-500);
}
.foot .foot-mini a{
  display:inline;padding:0;font-size:inherit;color:var(--ink-500);
  text-decoration:underline;text-underline-offset:2px;
}
.foot .foot-mini a:hover{color:var(--flame-300);transform:none}
.foot-del{margin-inline:6px;color:rgba(255,255,255,.28)}
/* Oddělovač a podpis se nikdy nerozdělí na dva řádky. */
.foot-podpis{white-space:nowrap}
/* Na mobilu je podpis na vlastním řádku, tam už oddělovač nic neodděluje
   a na začátku řádku by vypadal jako odrážka. */
@media(max-width:560px){
  .foot-del{display:none}
}

/* Značka autora v patičce. Logo je tmavé na průhledném pozadí, tady leží na
   téměř černé, takže se filtrem obrátí na bílé a ztlumí průhledností. Tichost
   dělá průhlednost, ne šedá barva: na jakémkoliv odstínu patičky to sedne. */
/* Selektor je schválně takhle konkrétní: obecné pravidlo pro odkazy dole
   (.foot .foot-mini a) má stejnou váhu a přebilo by to, takže by text zůstal
   podtržený a logo by spadlo na druhý řádek. */
.foot .foot-mini a.foot-autor{
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
  /* Podtržení jako u ostatních odkazů dole by vedlo i pod logem a vypadalo
     by jako přeškrtnutí. Odlišení tady dělá jasnější barva při najetí. */
  text-decoration:none;color:var(--ink-500);
  transition:color .3s var(--ease-expo);
}
.foot .foot-mini a.foot-autor img{
  display:block;height:13px;width:auto;
  filter:brightness(0) invert(1);opacity:.42;
  transition:opacity .3s var(--ease-expo);
}
.foot .foot-mini a.foot-autor:hover{color:var(--ink-200)}
.foot .foot-mini a.foot-autor:hover img{opacity:.9}
@media(max-width:720px){
  .cookiebar-in{flex-direction:column;align-items:flex-start}
  .cookiebar-btns{width:100%}
  .cookiebar-btns .btn{flex:1;justify-content:center}
}

/* Skryto pro oči, ale čtečky obrazovky obsah pořád přečtou. */
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* =====================================================================
   Upozornění, pruh nahoře a vyskakovací okno
   ===================================================================== */

.upozorneni{position:relative;z-index:65;color:#fff;background:linear-gradient(135deg,#FF9A3D,#F4501C 60%)}
.upozorneni.vystraha{background:linear-gradient(135deg,#FFD666,#F59E0B 60%);color:#3A2A00}
.upozorneni.zrus{background:linear-gradient(135deg,#F87171,#DC2626 60%)}
.upozorneni.odejit{display:none}

.upozorneni-in{
  max-width:var(--wrap,1240px);margin:0 auto;display:flex;align-items:center;gap:14px;
  padding:12px clamp(16px,3vw,32px);flex-wrap:wrap
}
.upozorneni-ikona{flex:none;opacity:.9;font-size:21px;display:grid;place-items:center}
.upozorneni-text{flex:1;min-width:200px;font-size:.94rem;line-height:1.45}
.upozorneni-text strong{font-family:var(--font-display);font-weight:600;margin-right:8px}
.upozorneni-text span,.upozorneni-text p{display:inline;margin:0;opacity:.95}
.upozorneni-odkaz{
  color:inherit;font-weight:600;text-decoration:none;padding:7px 16px;border-radius:999px;
  background:rgba(255,255,255,.22);white-space:nowrap;transition:background .25s var(--ease-expo)
}
.upozorneni-odkaz:hover{background:rgba(255,255,255,.35)}
.upozorneni-zavrit{
  width:32px;height:32px;flex:none;border:0;border-radius:50%;cursor:pointer;background:rgba(255,255,255,.16);
  color:inherit;font-size:16px;line-height:1;display:grid;place-items:center;
  transition:background .25s var(--ease-expo)
}
.upozorneni-zavrit:hover{background:rgba(255,255,255,.32)}

.upozorneni-okno{
  position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:24px;
  background:rgba(16,14,28,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  animation:upoz-vstup .35s var(--ease-expo)
}
.upozorneni-okno[hidden]{display:none}
@keyframes upoz-vstup{from{opacity:0}to{opacity:1}}

.upozorneni-okno-panel{
  position:relative;width:min(520px,100%);padding:clamp(28px,5vw,42px);border-radius:var(--r-2xl);
  background:var(--surface);box-shadow:0 40px 90px rgba(0,0,0,.4);text-align:center;
  animation:upoz-panel .45s var(--ease-spring)
}
@keyframes upoz-panel{from{opacity:0;transform:translateY(24px) scale(.96)}to{opacity:1;transform:none}}
.upozorneni-okno-panel h2{font-size:clamp(1.4rem,3vw,1.9rem);margin:14px 0 10px;text-wrap:balance}
.upozorneni-okno-text{color:var(--ink-600);line-height:1.65;text-wrap:pretty}
.upozorneni-okno-text p{margin:0 0 .7em}
.upozorneni-okno-text p:last-child{margin-bottom:0}
.upozorneni-okno-tlacitka{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:24px}
.upozorneni-okno-panel .upozorneni-zavrit.velke{
  position:absolute;top:14px;right:14px;background:var(--sand-100);color:var(--ink-700);width:36px;height:36px
}
.upozorneni-ikona.velka{
  width:56px;height:56px;display:inline-grid;place-items:center;border-radius:50%;
  background:var(--grad-flame);color:#fff;opacity:1;font-size:26px
}
.upozorneni-okno-panel.vystraha .upozorneni-ikona.velka{background:linear-gradient(135deg,#FFD666,#F59E0B);color:#3A2A00}
.upozorneni-okno-panel.zrus .upozorneni-ikona.velka{background:linear-gradient(135deg,#F87171,#DC2626)}

/* =====================================================================
   Drobečková navigace
   ===================================================================== */

.drobecky{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:20px;
  font-size:.82rem;color:var(--ink-400)
}
.drobecky a{color:var(--ink-300);text-decoration:none;transition:color var(--hover-dur) var(--ease-expo)}
.drobecky a:hover{color:var(--flame-300)}
.drobecky span[aria-current]{color:var(--sand-50);font-weight:500}
.drobecky-sip{display:inline-flex;opacity:.5;font-size:14px}

/* =====================================================================
   Otevírací doba
   ===================================================================== */

/* Oddělené okraje, ne collapse. Jen tak jde dnešnímu řádku zaoblit podbarvení,
   u collapse se rohy slepí a podbarvení vypadá jako useknutý pruh. */
.doba{width:100%;border-collapse:separate;border-spacing:0;font-size:.96rem;max-width:520px}
.doba td{padding:12px 14px;border-bottom:1px solid var(--line)}
.doba tr:last-child td{border-bottom:0}
/* Text lícuje s okolím, podbarvení dnešního řádku smí přetéct do stran. */
.doba td:first-child{padding-left:0}
.doba td:last-child{padding-right:0}
.doba .den{font-weight:600;font-family:var(--font-display)}
.doba .cas{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.doba .zavreno{color:var(--ink-400)}

.doba tr.dnes td{background:var(--flame-50);border-bottom-color:transparent}
.doba tr.dnes td:first-child{
  padding-left:14px;margin-left:-14px;
  border-radius:var(--r-sm) 0 0 var(--r-sm);
  box-shadow:-14px 0 0 var(--flame-50);
}
.doba tr.dnes td:last-child{
  padding-right:14px;
  border-radius:0 var(--r-sm) var(--r-sm) 0;
  box-shadow:14px 0 0 var(--flame-50);
}
.doba tr.dnes .den::after{content:" · dnes";font-family:var(--font-text);font-size:.74rem;
  font-weight:600;color:var(--flame-600);letter-spacing:.04em}
.doba .pozn{display:block;font-size:.8rem;color:var(--ink-600);font-weight:400}

@media (prefers-reduced-motion: reduce){
  .upozorneni-okno,.upozorneni-okno-panel{animation:none}
}

/* ============ IKONY ============
   Sada vychází z Lucide. Kreslí se přímo do stránky, barví se přes
   currentColor a velikost se řídí tady, ne v každé šabloně zvlášť. */
.lucide{width:1em;height:1em;display:block;flex:none;stroke-width:1.8;vector-effect:non-scaling-stroke}

/* Ikona v kolečku. Používá se u kontaktů, parametrů haly a informačních karet. */
.ikonka{
  width:42px;height:42px;border-radius:13px;display:grid;place-items:center;flex:none;
  background:var(--flame-50);color:var(--flame-600);font-size:20px;
  box-shadow:inset 0 0 0 1px rgba(244,80,28,.14);
  transition:background var(--hover-dur) var(--ease-expo),color var(--hover-dur) var(--ease-expo),
             transform var(--hover-dur) var(--ease-spring);
}
.ikonka.na-tmave{background:rgba(255,255,255,.08);color:var(--flame-300);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.ikonka.mala{width:32px;height:32px;border-radius:10px;font-size:16px}
.core:hover .ikonka,.shell:hover .ikonka{background:var(--grad-flame);color:#fff;box-shadow:var(--glow-honey)}

/* Ikona jako drobný doplněk textu, třeba u telefonu nebo adresy. */
.s-ikonou{display:flex;align-items:flex-start;gap:11px}
.s-ikonou>.lucide{font-size:17px;margin-top:2px;color:var(--flame-500);opacity:.9}
.on-dark .s-ikonou>.lucide,.core.night .s-ikonou>.lucide{color:var(--flame-300)}

/* Odrážkový seznam s ikonami místo teček. */
.vypis{list-style:none;padding:0;margin:0;display:grid;gap:13px}
.vypis li{display:flex;align-items:flex-start;gap:11px;line-height:1.55}
.vypis li>.lucide{font-size:18px;margin-top:2px;color:var(--flame-500);flex:none}

/* Ikona v hlavičce sekce, vlevo od nadtitulku. */
.eyebrow .lucide{font-size:15px;display:inline-block;vertical-align:-2px;margin-right:6px}

/* Štítky se stavem v rozvrhu dostanou ikonu. */
.stav-ikona{display:inline-flex;align-items:center;gap:6px}
.stav-ikona .lucide{font-size:14px}
.hall-param .lucide{font-size:15px;opacity:.85}
.exlink .lucide{font-size:15px}

/* Prázdný stav: když v sekci zatím nic není. Místo holé věty karta s ikonou,
   ať to nevypadá, že se web rozbil. */
.prazdno-stav{
  display:flex;align-items:center;gap:18px;padding:28px 30px;
  background:var(--surface);border-radius:var(--r-lg);
  box-shadow:var(--sh-xs),inset 0 0 0 1px var(--line);
}
.prazdno-stav p{max-width:56ch}
@media(max-width:560px){.prazdno-stav{flex-direction:column;align-items:flex-start;gap:14px}}

/* V patičce mají odkazy display:block, takže by se ikona a text postavily
   pod sebe. Tady je vracíme vedle sebe. */
.foot a.s-ikonou{display:flex;align-items:center;gap:9px}
.foot a.s-ikonou>.lucide{font-size:16px;margin-top:0;color:var(--flame-400)}
.foot a.s-ikonou:hover>.lucide{color:var(--flame-300)}

/* Řádek štítků na dlaždici. Oddíl může mít zároveň štítek soutěže i informaci
   o otevřeném náboru, takže se musí vejít vedle sebe. */
.stitky-radek{display:flex;flex-wrap:wrap;gap:7px;align-self:flex-start;margin-bottom:12px}
.sticker.stav-ikona .lucide{font-size:13px}

/* V navigaci se tlačítko nesmí zalomit na dva řádky. Mezi 861 a 1080 px je
   v liště málo místa, tak se u něj zkrátí popisek stejně jako na mobilu. */
.nav-inner .btn{white-space:nowrap}
@media(max-width:1080px){
  .nav-cta-long{display:none}
  .nav-links a{padding:9px 11px;font-size:.88rem}
}

/* ============ PÁS FOTEK NA TITULCE ============
   Fotky jedou v jednom řádku od kraje ke kraji. Posun dělá transform, takže
   ho počítá grafická karta a scrollování stránky se o něj neopírá.
   Fotky jsou v HTML dvakrát a posun končí přesně na polovině šířky stopy,
   takže se pás napojí sám na sebe a švy nejsou vidět. */
.galerie-sek{overflow:hidden}

/* --- pás fotek v bloku stránky ---
   Jeden řádek, ne mřížka: třináct fotek pod sebou dělalo ze stránky historie
   fotoalbum a text pod nimi nikdo nenašel. Kolik se jich vejde, říká
   --na-radek; šipky posunou o celou obrazovku fotek.

   Bez JavaScriptu zůstane pás posuvný prstem i kolečkem, jen bez šipek. */
.fotopas{position:relative;margin-top:26px;--na-radek:5;--mezera:14px}
.fotopas-drahy{
  display:flex;gap:var(--mezera);
  overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  /* Místo na stín a na zvednutí dlaždice při najetí. */
  padding:4px 4px 10px;margin:-4px -4px -10px;
  /* Posuvník pod pásem je lišta navíc přes celou šířku sekce a vypadá jako
     omylem. Že se dá pás posunout, říkají šipky a na mobilu vykouknutá
     další fotka. */
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.fotopas-drahy::-webkit-scrollbar{display:none}
@media (prefers-reduced-motion:reduce){ .fotopas-drahy{scroll-behavior:auto} }
.fotopas-kus{
  flex:0 0 calc((100% - (var(--na-radek) - 1) * var(--mezera)) / var(--na-radek));
  scroll-snap-align:start;
  display:block;padding:0;border:0;background:none;cursor:zoom-in;
  border-radius:var(--r-md);overflow:hidden;
  box-shadow:var(--sh-xs);
  transition:box-shadow .3s var(--hover-ease),transform .3s var(--ease-spring);
}
.fotopas-kus img{
  display:block;width:100%;aspect-ratio:4/3;object-fit:cover;
  transition:transform .5s var(--hover-ease);
}
.fotopas-kus:hover{box-shadow:var(--sh-md);transform:translateY(-3px)}
.fotopas-kus:hover img{transform:scale(1.04)}
.fotopas-kus:focus-visible{outline:2px solid var(--flame-500);outline-offset:3px}

/* Šipky sedí na kraji pásu, ne pod ním: pod pásem by je člověk hledal
   a na širokém monitoru by byly daleko od fotek. */
.fotopas-sipka{
  position:absolute;top:calc(50% - 5px);transform:translateY(-50%);
  z-index:2;display:grid;place-items:center;
  width:44px;height:44px;border:0;border-radius:50%;cursor:pointer;
  background:var(--surface,#fff);color:var(--ink-800);
  box-shadow:0 8px 22px -8px rgba(38,32,56,.35),inset 0 0 0 1px var(--line);
  transition:background .25s var(--hover-ease),color .25s var(--hover-ease),
             transform .25s var(--ease-spring),opacity .25s ease;
}
.fotopas-sipka:hover{background:var(--flame-500);color:#fff;transform:translateY(-50%) scale(1.06)}
.fotopas-sipka:focus-visible{outline:2px solid var(--flame-500);outline-offset:3px}
.fotopas-sipka .lucide{width:20px;height:20px}
.fotopas-zpet{left:-14px}
.fotopas-dal{right:-14px}
/* Na konci pásu šipka nezmizí, jen zšedne — mizející tlačítko pod kurzorem
   je nepříjemné překvapení. */
.fotopas-sipka[disabled]{opacity:.5;color:var(--ink-400);cursor:default;pointer-events:none}

@media(max-width:1200px){ .fotopas{--na-radek:4} }
@media(max-width:900px){ .fotopas{--na-radek:3} }
@media(max-width:640px){
  /* Dvě a kousek: bez posuvníku a bez šipek je vykouknutá třetí fotka jediné,
     co na mobilu prozradí, že pás pokračuje dál. */
  .fotopas{--na-radek:2.25;--mezera:10px}
  /* Šipky by na mobilu zakrývaly fotky a prst je stejně rychlejší. */
  .fotopas-sipka{display:none}
}

/* --- zvětšená fotka ---
   Stavební fotky se prohlížejí kvůli detailu, na dlaždici 240 px není vidět,
   co se na stavbě zrovna dělo. */
.zvetsenina{
  position:fixed;inset:0;z-index:200;display:none;
  align-items:center;justify-content:center;
  padding:clamp(12px,3vw,40px);
  background:rgba(12,10,20,.94);
  opacity:0;transition:opacity .22s ease;
}
.zvetsenina.je-otevrena{display:flex}
.zvetsenina.je-videt{opacity:1}
.zvetsenina-obsah{
  display:flex;flex-direction:column;align-items:center;gap:14px;
  max-width:min(1200px,100%);max-height:100%;
}
.zvetsenina img{
  display:block;max-width:100%;max-height:calc(100vh - 150px);
  object-fit:contain;border-radius:var(--r-md);background:rgba(255,255,255,.04);
}
.zvetsenina-pocet{
  font-family:var(--font-text);font-size:.78rem;font-weight:600;letter-spacing:.06em;
  color:rgba(252,250,247,.55);font-variant-numeric:tabular-nums;
}
.zvetsenina-ovladani{display:flex;align-items:center;gap:16px}
.zvetsenina-tl{
  display:grid;place-items:center;width:46px;height:46px;flex:0 0 auto;
  border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.12);color:#fff;
  transition:background .22s var(--hover-ease),transform .22s var(--ease-spring);
}
.zvetsenina-tl:hover{background:var(--flame-500);transform:scale(1.06)}
.zvetsenina-tl:focus-visible{outline:2px solid #fff;outline-offset:3px}
.zvetsenina-tl .lucide{width:20px;height:20px}
.zvetsenina-zavrit{position:absolute;top:clamp(10px,2vw,22px);right:clamp(10px,2vw,22px)}
@media(max-width:640px){
  .fotogalerie{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
  .zvetsenina img{max-height:calc(100vh - 170px)}
}
@media (prefers-reduced-motion:reduce){
  .zvetsenina,.fotogalerie-btn,.fotogalerie-btn img,.zvetsenina-tl{transition:none}
}
.pas{
  margin-top:var(--sp-head);
  /* Okraje se rozplynou do pozadí, ať pás nekončí useknutou fotkou. */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.pas-stopa{
  display:flex;width:max-content;gap:18px;
  animation:tj-pas var(--pas-doba,40s) linear infinite;
  will-change:transform;
}
@keyframes tj-pas{
  from{transform:translate3d(0,0,0)}
  /* Polovina stopy je přesně jedna sada fotek. Mezera za poslední fotkou
     se musí odečíst, jinak by pás po každé otáčce poskočil o 18 px. */
  to{transform:translate3d(calc(-50% - 9px),0,0)}
}
.pas-kus{
  margin:0;flex:0 0 auto;
  width:clamp(220px,24vw,340px);aspect-ratio:4/3;
  border-radius:var(--r-lg,20px);overflow:hidden;background:var(--sand-100);
  box-shadow:var(--sh-sm);
}
.pas-kus img{width:100%;height:100%;object-fit:cover;display:block}


@media(max-width:720px){
  .pas-stopa{gap:12px}
  @keyframes tj-pas{
    from{transform:translate3d(0,0,0)}
    to{transform:translate3d(calc(-50% - 6px),0,0)}
  }
}

/* Kdo má v systému vypnuté animace, dostane místo pásu obyčejnou řádku,
   kterou si posune sám. */
@media (prefers-reduced-motion: reduce){
  .pas{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
  .pas-stopa{animation:none}
}

/* ============ FILTR PODLE ODDÍLU (aktuality) ============ */
.filtr{
  display:flex;flex-wrap:wrap;gap:8px;
  margin-bottom:var(--sp-head);
}
.filtr-chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 16px;border-radius:var(--r-pill);
  font-size:.9rem;font-weight:500;text-decoration:none;color:var(--ink-700);
  background:var(--sand-100);box-shadow:inset 0 0 0 1px var(--line);
  transition:background .25s var(--ease-expo),color .25s var(--ease-expo),box-shadow .25s var(--ease-expo);
}
.filtr-chip:hover{background:#fff;color:var(--flame-700);box-shadow:inset 0 0 0 1px var(--flame-200)}
.filtr-chip.aktivni{
  background:var(--ink-950);color:var(--sand-50);box-shadow:none;
}
.filtr-chip.aktivni:hover{background:var(--ink-900);color:#fff}
/* Počet aktualit v oddílu. Tichý, ať nekonkuruje názvu. */
.filtr-pocet{
  font-family:var(--font-mono,monospace);font-size:.74rem;font-weight:600;
  padding:2px 7px;border-radius:var(--r-pill);
  background:rgba(25,22,39,.08);color:var(--ink-600);
}
.filtr-chip.aktivni .filtr-pocet{background:rgba(255,255,255,.16);color:var(--sand-100)}

/* ============ ROZCESTNÍK NA ÚVODNÍ STRANĚ ============
   Všechny dlaždice jsou stejně velké a mají stejnou barvu. Rozlišuje je
   jen ikona a text, takže rozcestník působí jako jeden celek, ne jako
   nasbírané fotky. Fotky tu schválně nejsou. */
.rozcestnik{grid-template-columns:repeat(3,1fr)}

.dlazdice{
  position:relative;isolation:isolate;overflow:hidden;
  display:flex;flex-direction:column;gap:14px;
  min-height:0;padding:24px;
  border-radius:var(--r-lg);text-decoration:none;
  background:var(--sand-50);
  color:var(--ink-900);
  box-shadow:inset 0 0 0 1px var(--line),0 1px 2px rgba(38,32,56,.04);
  transition:box-shadow var(--dur-vylitek) var(--ease-vylitek),color .8s var(--ease-vylitek);
}
.dlazdice:hover,.dlazdice:focus-visible{
  color:#fff;
  box-shadow:inset 0 0 0 1px transparent,0 18px 40px -18px rgba(244,80,28,.55);
}

/* Barva se při najetí rozlije z prostředka dlaždice do rohů.
   Je to kruh, který se zvětšuje transformem, takže to počítá grafická
   karta a nic se nepřekresluje. */
.dlazdice-vylitek{
  position:absolute;z-index:-1;top:50%;left:50%;
  /* 120 % šířky stačí, aby kruh v plné velikosti pokryl i rohy dlaždice.
     Dřív tu bylo 170 %: dlaždice byla plná už při 65 % dráhy a zbytek
     animace se odehrál mimo obraz, takže se to jevilo jako lupnutí,
     ať bylo trvání jakékoliv. */
  width:118%;aspect-ratio:1/1;border-radius:50%;
  background:var(--grad-flame);
  transform:translate(-50%,-50%) scale(0);
  transition:transform var(--dur-vylitek) var(--ease-vylitek);
  will-change:transform;
}
.dlazdice:hover .dlazdice-vylitek,
.dlazdice:focus-visible .dlazdice-vylitek{transform:translate(-50%,-50%) scale(1)}

/* Ikona sportu v zaobleném čtverci. */
.dlazdice-ikona{
  flex:0 0 auto;display:grid;place-items:center;
  width:54px;height:54px;border-radius:16px;
  background:var(--flame-50);color:var(--flame-600,#E1400F);
  transition:background .8s var(--ease-vylitek),color .8s var(--ease-vylitek),transform .9s var(--ease-spring);
}
.dlazdice-ikona .lucide{width:26px;height:26px;stroke-width:1.7}
.dlazdice:hover .dlazdice-ikona{
  background:rgba(255,255,255,.18);color:#fff;transform:scale(1.06) rotate(-4deg);
}

/* Text jde hned pod ikonu. Dřív ho margin-top:auto tlačil ke spodní hraně,
   takže mezi ikonou a nadpisem zůstala prázdná plocha přes půl dlaždice. */
.dlazdice-text{display:flex;flex-direction:column;gap:6px}
.dlazdice-nadpis{
  font-family:var(--font-display);font-weight:600;font-size:1.32rem;
  line-height:1.12;letter-spacing:-.02em;word-spacing:.16em;text-wrap:balance;
}
.dlazdice-sipka{
  flex:0 0 auto;display:grid;place-items:center;
  width:38px;height:38px;border-radius:50%;
  background:rgba(25,22,39,.05);
  transition:background .85s var(--ease-vylitek),transform .9s var(--ease-spring);
}
.dlazdice-sipka .lucide{width:17px;height:17px}
.dlazdice:hover .dlazdice-sipka{background:rgba(255,255,255,.2);transform:translateX(4px)}

/* Strohá dlaždice na titulce: ikona, název, šipka. Všechno v jednom řádku.

   Původně stála na výšku, ikona nahoře a název dole. To dávalo smysl, dokud
   pod názvem býval popis. Bez něj zůstaly dva drobné prvky v protilehlých
   rozích prázdné plochy 363 × 186 px a dlaždice působily nedodělaně.
   Naležato je stejný obsah v třetinové výšce a bez děr. */
.dlazdice-strohy{
  min-height:0;flex-direction:row;align-items:center;gap:20px;
  padding:22px 24px;
}
.dlazdice-strohy .dlazdice-ikona{width:56px;height:56px;border-radius:17px}
.dlazdice-strohy .dlazdice-ikona .lucide{width:27px;height:27px}
.dlazdice-strohy .dlazdice-text{margin-top:0;flex:1 1 auto;gap:0}
.dlazdice-strohy .dlazdice-nadpis{font-size:1.24rem}
/* Šipka drží vpravo, ale zůstává v řádku, ne v rohu. */
.dlazdice-sipka.rohova{
  position:static;flex:0 0 auto;
  background:transparent;box-shadow:inset 0 0 0 1px var(--line);
}
.dlazdice:hover .dlazdice-sipka.rohova{
  background:rgba(255,255,255,.2);box-shadow:inset 0 0 0 1px transparent;
}
@media(max-width:560px){
  .dlazdice-strohy{padding:18px 20px;gap:16px}
  .dlazdice-strohy .dlazdice-ikona{width:48px;height:48px;border-radius:15px}
  .dlazdice-strohy .dlazdice-nadpis{font-size:1.1rem}
}

@media(max-width:900px){ .rozcestnik{grid-template-columns:repeat(2,1fr)} }
@media(max-width:560px){
  .rozcestnik{grid-template-columns:1fr}
  .dlazdice{min-height:0;padding:22px}
}

/* Kdo má vypnuté animace, dostane rovnou plnou barvu, žádné rozlévání. */
@media (prefers-reduced-motion: reduce){
  .dlazdice-vylitek{transition:none}
  .dlazdice:hover .dlazdice-vylitek{transform:translate(-50%,-50%) scale(1)}
  .dlazdice-ikona,.dlazdice-sipka{transition:background .01s,color .01s}
}

/* Věta o souhlasu pod odesláním formuláře. Bez omezení šířky, ať se
   nezalamuje v půlce formuláře a nedělá zbytečně tři řádky. */
.souhlas{margin:14px 0 0;max-width:none}

/* ============ BLOK SE DVĚMA FOTKAMI ============
   Porovnání „dřív a dnes“. Obě fotky mají stejný poměr stran, aby se daly
   poctivě srovnat i když má každá jiné rozlišení. Na mobilu jdou pod sebe. */
.dvojfoto{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(18px,2.4vw,32px);margin-top:clamp(22px,3vw,36px);
}
.dvojfoto.sama{grid-template-columns:1fr;max-width:760px;margin-left:auto;margin-right:auto}
.dvojfoto-kus{margin:0;min-width:0}
.dvojfoto-kus .photo{aspect-ratio:4/3;min-height:0}
.dvojfoto-kus figcaption{
  margin-top:12px;font-size:.88rem;line-height:1.5;color:var(--ink-600);
  font-family:var(--font-mono);letter-spacing:.01em;
}
@media(max-width:700px){ .dvojfoto{grid-template-columns:1fr} }

/* ============ MALÝ ROZCESTNÍK NA PODSTRÁNKÁCH ============
   Stejný nápad jako rozcestník na úvodní straně, ale v jednom řádku a
   bez popisů. Slouží k tomu, aby člověk na konci podstránky věděl,
   kam dál. Dlaždice sdílí vzhled i rozlévání barvy s velkými. */
.rozcestnik-maly{grid-template-columns:repeat(4,1fr);gap:14px}
.rozcestnik-maly .dlazdice{
  min-height:0;padding:18px 18px 16px;gap:12px;
  flex-direction:row;align-items:center;
}
.rozcestnik-maly .dlazdice-ikona{width:42px;height:42px;border-radius:13px}
.rozcestnik-maly .dlazdice-ikona .lucide{width:20px;height:20px}
.rozcestnik-maly .dlazdice-text{margin-top:0;flex:1 1 auto;gap:2px}
.rozcestnik-maly .dlazdice-nadpis{font-size:1.02rem;letter-spacing:-.01em;word-spacing:.14em}
.rozcestnik-maly .dlazdice-sipka{width:30px;height:30px}
.rozcestnik-maly .dlazdice-sipka .lucide{width:15px;height:15px}
@media(max-width:900px){ .rozcestnik-maly{grid-template-columns:repeat(2,1fr)} }
@media(max-width:520px){ .rozcestnik-maly{grid-template-columns:1fr} }

/* Druhá mříž rozcestníku: zbytek webu pod oddíly. Odsazená o kousek víc,
   ať je poznat, že jde o jinou skupinu, ale ne tolik, aby se rozpadla
   na samostatnou sekci. */
.rozcestnik-dalsi{margin-top:clamp(16px,2vw,24px)}

/* ============ ROZVRH HALY ============
   Rozvrh je kalendář: vodorovně čas, svisle kurty. Blok leží tam, kde
   opravdu je, a je tak dlouhý, jak dlouho trvá. Z toho jde na první pohled
   poznat, kdy je hala volná — a to je otázka, kvůli které sem lidé chodí.

   Barva je jedna, oranžová z palety webu. Sporty se poznají ikonou.
   Devět barev vedle sebe dělalo z rozvrhu pastelkovník a oko v odstínech
   hledalo význam, který nenesly. */
.rozvrh{margin-top:var(--sp-head)}
.rozvrh.bez-uvodu{margin-top:0}
.rozvrh-uvod{max-width:none;margin-bottom:var(--sp-head)}
.rozvrh-uvod p{max-width:none}

/* --- ovládání --- */
.rozvrh-ovladani{
  display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;
  margin-bottom:22px;padding-bottom:18px;border-bottom:1px solid var(--line);
}
.rozvrh-saly{display:inline-flex;flex-wrap:wrap;gap:8px}
.rozvrh-sal{padding:11px 22px}
.rozvrh-filtry{display:flex;flex-wrap:wrap;gap:8px}
.rozvrh-filtry .filtr-chip{display:inline-flex;align-items:center;gap:7px;cursor:pointer;border:0}
.filtr-ikona{display:grid;place-items:center;width:16px;height:16px;flex:0 0 auto;opacity:.75}
.filtr-ikona .lucide{width:15px;height:15px}
.filtr-chip.aktivni .filtr-ikona{opacity:1}
.rozvrh-nic{margin:0 0 20px;color:var(--ink-600);font-size:.95rem}

/* --- kalendář --- */
.rozvrh-sal-obsah.je-schovany{display:none}
.rozvrh-sal-nadpis{font-family:var(--font-display);font-size:1.5rem;font-weight:600;margin:0 0 18px;letter-spacing:-.02em}
.js .rozvrh-sal-nadpis{display:none}

/* Bez rámečku a bez zaoblení: rozvrh je tabulka dat, ne karta. Rám kolem
   něj dělal z mřížky další box na stránce plné boxů a zbytečně ji zužoval. */
.kal-posuv{
  overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
  background:transparent;
}
/* Mřížka nikdy neklesne pod 720 px, jinak by se hodiny slily do sebe
   a bloky by byly užší než jejich ikona. Radši se posouvá do strany. */
.kal{min-width:760px;padding:0 0 6px}

.kal-osa,.kal-draha{display:grid;grid-template-columns:104px 1fr;align-items:stretch}
/* Popisek drahy zůstane přilepený vlevo i po odscrollování, jinak by člověk
   po posunu nevěděl, na který kurt se dívá. */
.kal-popisek{
  position:sticky;left:0;z-index:2;
  display:flex;align-items:center;padding:0 14px;
  background:var(--sand-50);border-right:1px solid var(--line);
  font-family:var(--font-text);font-size:.8rem;font-weight:600;color:var(--ink-600);
  white-space:nowrap;
}
.kal-pas{position:relative;min-height:54px;padding:6px 0}

/* Svislé linky po hodinách. Jsou v pozadí pásu, ne samostatné prvky:
   jeden gradient místo patnácti divů na každý řádek. */
.kal-pas{
  background-image:linear-gradient(to right,var(--line) 1px,transparent 1px);
  background-size:calc(100% / var(--hodin,14)) 100%;
  background-position:0 0;
}

/* Osa s hodinami. Čísla sedí na svislých linkách. */
.kal-osa{position:sticky;top:0;z-index:3;background:var(--bg);border-bottom:1px solid var(--line)}
.kal-popisek-osa{background:var(--bg);border-right-color:transparent}
.kal-pas-osa{min-height:32px;padding:0;background-color:transparent}
.kal-hodina{
  position:absolute;top:50%;transform:translate(-50%,-50%);
  font-family:var(--font-text);font-size:.72rem;font-weight:600;
  color:var(--ink-500);letter-spacing:.01em;font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.kal-hodina:first-child{transform:translate(0,-50%)}
.kal-hodina:last-child{transform:translate(-100%,-50%)}

.kal-den{border-top:1px solid var(--line)}
.kal-den.je-schovany{display:none}
.kal-den-nadpis{
  position:sticky;left:0;
  display:flex;align-items:center;gap:9px;margin:0;padding:12px 14px 8px;
  font-family:var(--font-display);font-size:1rem;font-weight:600;letter-spacing:-.01em;
  width:max-content;
}
.kal-den-zkratka{
  display:grid;place-items:center;width:26px;height:26px;border-radius:8px;
  background:var(--sand-200);color:var(--ink-600);
  font-family:var(--font-text);font-size:.7rem;font-weight:600;
}
.kal-den.je-dnes .kal-den-zkratka{background:var(--flame-100);color:var(--flame-700)}
.kal-dnes{
  padding:2px 9px;border-radius:var(--r-pill);background:var(--flame-500);color:#fff;
  font-family:var(--font-text);font-size:.64rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
}
.kal-draha + .kal-draha .kal-pas,
.kal-draha + .kal-draha .kal-popisek{border-top:1px solid rgba(25,22,39,.05)}
.kal-den{padding-bottom:8px}

/* --- blok --- */
.kal-blok{
  position:absolute;top:6px;bottom:6px;
  /* Blok se ptá na svou vlastní šířku, viz @container níž. Krátký trénink
     je v mřížce úzký proužek a „Minivol…" v něm neřekne nic; radši ukáže
     jen ikonu a zbytek nechá na tooltipu. */
  container-type:inline-size;
  display:flex;align-items:center;gap:8px;
  padding:0 10px;border-radius:12px;overflow:hidden;text-decoration:none;
  background:#fff;color:var(--ink-900);
  box-shadow:inset 0 0 0 1px var(--line),0 1px 2px rgba(38,32,56,.05);
  /* Oranžová hrana vlevo je jediné barevné místo v celé mřížce. Drží
     pohromadě to, co patří TJ, aniž by se rozvrh rozsvítil jako semafor. */
  border-left:3px solid var(--flame-500);
  transition:box-shadow .28s var(--hover-ease),transform .28s var(--ease-spring),
             background .28s var(--hover-ease),border-color .28s var(--hover-ease);
}
.kal-blok.je-schovany{display:none}
/* Škola a obsazený střed haly nejsou naše tréninky, tak ustoupí do pozadí. */
.kal-blok.je-tichy{
  background:var(--sand-100);border-left-color:var(--ink-300);color:var(--ink-600);
}
.kal-blok:hover,.kal-blok:focus-visible{
  z-index:4;transform:translateY(-2px);
  background:#fff;border-left-color:var(--flame-500);
  box-shadow:inset 0 0 0 1px var(--flame-200),0 10px 24px -12px rgba(244,80,28,.45);
}
a.kal-blok:hover .kal-blok-nazev{color:var(--flame-700)}

.kal-blok-ikona{
  flex:0 0 auto;display:grid;place-items:center;width:22px;height:22px;border-radius:7px;
  background:var(--flame-50);color:var(--flame-600);
  transition:background .28s var(--hover-ease),color .28s var(--hover-ease);
}
.kal-blok.je-tichy .kal-blok-ikona{background:rgba(25,22,39,.06);color:var(--ink-500)}
.kal-blok-ikona .lucide{width:13px;height:13px}
.kal-blok:hover .kal-blok-ikona{background:var(--flame-500);color:#fff}

/* Text má těsné řádkování schválně: blok je vysoký 46 px a dva řádky se do
   něj musí vejít, aniž by se dotýkaly hran. */
.kal-blok-text{display:flex;flex-direction:column;gap:0;min-width:0;line-height:1.25}
.kal-blok-nazev{
  font-family:var(--font-text);font-size:.82rem;font-weight:600;color:inherit;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:color .28s var(--hover-ease);
}
.kal-blok-cas{
  font-family:var(--font-text);font-size:.7rem;font-weight:500;color:var(--ink-500);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.kal-blok.je-tichy .kal-blok-cas{color:var(--ink-400)}

/* Úzký blok postupně odkládá, co se do něj nevejde: nejdřív čas, pak název.
   Ikona zůstane vždycky, ta se vejde i do čtyřicetiminutovky. Celý popis
   je v atributu title, takže se po najetí ukáže. */
@container (max-width: 118px){
  .kal-blok-cas{display:none}
  .kal-blok-text{line-height:1.2}
}
@container (max-width: 68px){
  .kal-blok{justify-content:center;padding:0 4px}
  .kal-blok-text{display:none}
}

/* --- výzva pod rozvrhem ---
   Po přečtení rozvrhu má člověk udělat jedinou věc: napsat si o volný termín.
   Poznámky pod mřížkou o tuhle pozornost dřív soupeřily a přehlušily ji. */
.rozvrh-cta{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:18px 28px;margin-top:36px;padding:26px 30px;
  border-radius:var(--r-lg);background:var(--grad-flame);color:#fff;
  box-shadow:0 18px 40px -22px rgba(244,80,28,.7);
}
.rozvrh-cta-text{min-width:0}
.rozvrh-cta h2{
  font-family:var(--font-display);font-size:1.32rem;font-weight:600;
  letter-spacing:-.02em;margin:0;color:#fff;
}
.rozvrh-cta p{margin:6px 0 0;max-width:56ch;font-size:.94rem;line-height:1.5;color:rgba(255,255,255,.88)}
.rozvrh-cta .btn{flex:0 0 auto}

@media(max-width:640px){
  .rozvrh-cta{padding:22px;gap:16px}
  .rozvrh-cta h2{font-size:1.16rem}
  .rozvrh-cta .btn{width:100%;justify-content:center}
}

/* --- bublina s detailem bloku ---
   Krátký blok v mřížce unese ikonu a nic víc; „Minivole…“ v pětačtyřiceti
   pixelech neřekne, co se v hale děje. Nativní title se ukáže až po vteřině,
   nedá se stylovat a na dotyku se neukáže vůbec. Bublina proto visí na body
   (mřížka má overflow, uvnitř by se ořízla) a ukazuje se hned — na počítači
   po najetí, na dotyku po ťuknutí. */
.kal-tip{
  position:fixed;z-index:120;max-width:min(280px,calc(100vw - 24px));
  padding:11px 13px;border-radius:12px;
  background:var(--ink-900);color:var(--sand-50);
  box-shadow:0 18px 40px -18px rgba(20,16,32,.6),0 2px 8px rgba(20,16,32,.18);
  pointer-events:none;opacity:0;transform:translateY(4px);
  transition:opacity .16s ease,transform .16s ease;
}
.kal-tip.je-videt{opacity:1;transform:translateY(0)}
.kal-tip-nazev{
  display:block;font-family:var(--font-text);font-size:.88rem;font-weight:600;
  line-height:1.3;letter-spacing:-.01em;
}
.kal-tip-cas{
  display:block;margin-top:3px;font-family:var(--font-text);font-size:.8rem;font-weight:600;
  color:var(--flame-300);font-variant-numeric:tabular-nums;
}
.kal-tip-meta,.kal-tip-pozn{
  display:block;margin-top:4px;font-family:var(--font-text);font-size:.75rem;
  line-height:1.4;color:rgba(252,250,247,.7);
}
.kal-tip-pozn{color:rgba(252,250,247,.86)}
.kal-tip-odkaz{
  display:flex;align-items:center;gap:5px;margin-top:7px;font-family:var(--font-text);font-size:.7rem;font-weight:600;
  letter-spacing:.05em;text-transform:uppercase;color:var(--flame-300);
}
/* Špička míří na blok, ať je jasné, ke kterému políčku bublina patří. */
.kal-tip::after{
  content:"";position:absolute;left:var(--sipka,24px);width:10px;height:10px;
  background:var(--ink-900);transform:rotate(45deg);
}
.kal-tip.je-nad::after{bottom:-4px}
.kal-tip.je-pod::after{top:-4px}
@media (prefers-reduced-motion:reduce){
  .kal-tip{transition:none}
}

@media(max-width:640px){
  .rozvrh-ovladani{gap:12px}
  .rozvrh-saly{width:100%}
  .rozvrh-sal{flex:1 1 0;justify-content:center;padding:11px 12px}
  .kal-osa,.kal-draha{grid-template-columns:74px 1fr}
  .kal-popisek{padding:0 10px;font-size:.74rem}
}

/* Věta pod logy partnerů. Loga sama o sobě nikoho neosloví, tohle je
   nejlevnější místo na webu, kde se dá požádat o dalšího partnera. */
.partneri-vyzva{
  margin:22px auto 0;text-align:center;max-width:60ch;
}
.partneri-vyzva a{color:var(--flame-600);text-decoration:underline;text-underline-offset:2px}
.partneri-vyzva a:hover{color:var(--flame-700)}

/* --- tréninky po dnech ---
   Tabulka se čtyřmi sloupci opakovala den a místo u každého řádku a to
   jediné, co se měnilo — čas a kategorie — se v tom ztratilo. Den je teď
   nadpis, místo se píše jednou a pod sebou zůstanou jen časy. */
.treninky{display:grid;gap:14px;margin-top:var(--sp-head)}
.trenink-den{
  padding:20px 22px;border-radius:var(--r-lg);
  background:var(--surface);box-shadow:var(--sh-xs),inset 0 0 0 1px var(--line);
}
.trenink-den-hlava{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;
  padding-bottom:12px;margin-bottom:4px;border-bottom:1px solid var(--line);
}
.trenink-den-hlava h3{
  margin:0;font-family:var(--font-display);font-size:1.06rem;font-weight:600;
  letter-spacing:-.01em;
}
.trenink-misto{font-family:var(--font-text);font-size:.84rem;color:var(--ink-500)}

/* Čas vlevo, kategorie vpravo pod sebou. Tři minivolejbaly ve stejnou hodinu
   tak drží u sebe a čas se u nich neopakuje třikrát. */
.trenink-radek{
  display:grid;grid-template-columns:132px 1fr;gap:4px 18px;
  padding:11px 0;border-bottom:1px solid rgba(25,22,39,.06);
}
.trenink-den .trenink-radek:last-child{border-bottom:0;padding-bottom:0}
.trenink-cas{
  font-family:var(--font-text);font-size:.92rem;font-weight:600;
  font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--ink-900);
  padding-top:1px;
}
.trenink-kdo{display:flex;flex-direction:column;gap:2px;min-width:0}
.trenink-kategorie{font-family:var(--font-text);font-size:.94rem;color:var(--ink-800)}
.trenink-detail{
  font-family:var(--font-text);font-size:.82rem;line-height:1.45;color:var(--ink-500);
  margin-top:2px;
}

@media(max-width:560px){
  .trenink-den{padding:16px 17px}
  .trenink-radek{grid-template-columns:1fr;gap:2px;padding:12px 0}
  .trenink-cas{font-size:.86rem;color:var(--flame-700)}
}

/* Plakát oddílu ve sloupci vedle textu. Na rozdíl od fotky se nesmí
   oříznout ani natáhnout na výšku sloupce: nese vlastní text, takže ořez
   by ukrojil právě to, co se na něm má číst. Proto žádný pevný poměr stran,
   světlé pozadí místo tmavého rámu a žádné přiblížení při najetí. */
.photo.je-plakat{
  display:block;background:var(--sand-50);
  border-radius:var(--r-lg);box-shadow:var(--sh-xs);
  min-height:0;align-self:start;
  transition:box-shadow .3s var(--hover-ease),transform .3s var(--ease-spring);
}
.split .photo.je-plakat{min-height:0}
.photo.je-plakat img{width:100%;height:auto;object-fit:contain;transform:none;transition:none}
.photo.je-plakat:hover{box-shadow:var(--sh-md);transform:translateY(-2px)}
.photo.je-plakat:hover img{transform:none}
.photo.je-plakat:focus-visible{outline:2px solid var(--flame-500);outline-offset:3px}

/* ===================== FORMULÁŘ REZERVACE =====================
   Pole samotná sdílí vzhled s ostatními formuláři na webu, viz
   .input,.select,.textarea výš. Tady je jen rozvržení, bloky
   a výpis obsazenosti.

   Rozvržení je jednosloupcové a teprve od 640 px se řádky dělí na
   dva sloupce. Na telefonu je formulář dlouhý, ale nic se nemačká
   a klávesnice nepřekryje půlku pole. */
.rez-formular{max-width:760px}
.past{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.rez-blok{
  border:0;margin:0 0 clamp(20px,3vw,30px);padding:clamp(18px,2.6vw,26px);
  border-radius:var(--r-lg);background:var(--sand-50);
  box-shadow:inset 0 0 0 1px var(--line);
}
.rez-legenda{
  font-family:var(--font-display);font-weight:600;font-size:1.05rem;
  letter-spacing:-.02em;color:var(--ink-900);padding:0;margin-bottom:16px;
}
.rez-radek{display:grid;grid-template-columns:1fr;gap:14px;margin-bottom:14px}
/* Atribut hidden by sám o sobě prohrál s display:grid výš, proto výslovně.
   Týká se řádku s výběrem času, který skript schová a nahradí pásem. */
.rez-radek[hidden]{display:none}
.rez-radek:last-child{margin-bottom:0}
.rez-pole{display:block;margin-bottom:14px}
.rez-pole:last-child{margin-bottom:0}
.rez-radek .rez-pole{margin-bottom:0}
.rez-popisek{
  display:block;font-size:.82rem;font-weight:600;letter-spacing:.02em;
  color:var(--ink-600);margin-bottom:8px;
}
.rez-popisek b{color:var(--flame-600);font-weight:600}
.rez-volitelne{font-weight:400;color:var(--ink-400);letter-spacing:0}
.rez-delka{
  align-self:end;margin:0 0 15px;font-size:.84rem;font-weight:500;
  color:var(--ink-600);white-space:nowrap;
}
.rez-delka:empty{display:none}

/* Datum a čas si v prohlížeči nesou vlastní ovládání. Aby byla pole
   stejně vysoká jako ostatní, musí se srovnat výška vnitřního textu. */
.rez-pole > input[type="date"],
.rez-pole > input[type="time"]{min-height:53px}

/* ---- Výpis obsazenosti ---- */
.rez-obsazenost{margin-top:4px}
.rez-obsazenost:empty{display:none}
.rez-nacitam{margin:0;font-size:.88rem;color:var(--ink-500)}
.rez-volno{
  display:flex;align-items:center;gap:9px;margin:0;
  font-size:.9rem;font-weight:500;color:var(--ink-700);
}
.rez-volno-tecka{
  width:9px;height:9px;border-radius:50%;flex:none;background:#1F9D55;
  box-shadow:0 0 0 4px rgba(31,157,85,.16);
}
.rez-obsazeno-nadpis{
  margin:0 0 10px;font-size:.82rem;font-weight:600;letter-spacing:.02em;
  color:var(--ink-600);
}
.rez-seznam{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.rez-seznam-radek{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;
  padding:9px 14px;border-radius:var(--r-sm);
  background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);
  font-size:.88rem;color:var(--ink-700);
}
/* Rezervace se od pravidelného tréninku odliší proužkem, ať je vidět,
   co je stálý rozvrh a co něčí jednorázová akce. */
.rez-seznam-radek.je-rezervace{box-shadow:inset 0 0 0 1px var(--line),inset 3px 0 0 var(--flame-400)}
.rez-seznam-cas{font-variant-numeric:tabular-nums;font-weight:600;color:var(--ink-900);flex:none}
.rez-seznam-popis{color:var(--ink-600);min-width:0;overflow-wrap:anywhere}
.rez-kolize-zprava{
  margin:12px 0 0;padding:11px 14px;border-radius:var(--r-sm);
  background:rgba(218,57,11,.08);box-shadow:inset 0 0 0 1px rgba(218,57,11,.22);
  font-size:.88rem;color:var(--flame-700);
}

/* ---- Odeslání ---- */
.rez-odeslat{display:flex;flex-direction:column;align-items:flex-start;gap:12px}

/* ---- Hlášky nad formulářem ---- */
.rez-hotovo,.rez-chyba{
  display:flex;gap:16px;align-items:flex-start;max-width:760px;
  padding:clamp(18px,2.6vw,24px);border-radius:var(--r-lg);margin-bottom:26px;
}
.rez-hotovo{background:rgba(31,157,85,.08);box-shadow:inset 0 0 0 1px rgba(31,157,85,.24)}
.rez-chyba{background:rgba(218,57,11,.07);box-shadow:inset 0 0 0 1px rgba(218,57,11,.22)}
.rez-hotovo-ikona,.rez-chyba-ikona{
  display:grid;place-items:center;width:38px;height:38px;flex:none;
  border-radius:50%;color:#fff;
}
.rez-hotovo-ikona{background:#1F9D55}
.rez-chyba-ikona{background:var(--flame-600)}
.rez-hotovo-ikona svg,.rez-chyba-ikona svg{width:19px;height:19px}
.rez-kolize{margin:10px 0 0;padding-left:18px;font-size:.9rem;color:var(--ink-700)}
.rez-kolize li{margin-bottom:4px}
.rez-kolize strong{font-variant-numeric:tabular-nums;margin-right:6px}

@media(min-width:640px){
  .rez-radek{grid-template-columns:1fr 1fr;gap:18px}
  /* Řádek s časy má navíc délku rezervace, tedy tři sloupce. */
  .rez-radek:has(> .rez-delka){grid-template-columns:1fr 1fr auto}
}
@media(max-width:480px){
  .rez-hotovo,.rez-chyba{gap:12px;flex-direction:column}
}

/* Jednorázové rezervace pod týdenním rozvrhem. */
.rozvrh-akce{
  margin:clamp(28px,4vw,42px) 0 0;padding:clamp(20px,2.8vw,28px);
  border-radius:var(--r-lg);background:var(--sand-50);
  box-shadow:inset 0 0 0 1px var(--line);
}
.rozvrh-akce-nadpis{
  display:flex;align-items:center;gap:10px;margin:0 0 6px;
  font-family:var(--font-display);font-size:1.12rem;font-weight:600;letter-spacing:-.02em;
}
.rozvrh-akce-nadpis svg{width:19px;height:19px;color:var(--flame-600);flex:none}
.rozvrh-akce-perex{margin:0 0 16px;font-size:.9rem;color:var(--ink-600)}
.rozvrh-akce-seznam{list-style:none;margin:0;padding:0;display:grid;gap:8px;
  grid-template-columns:repeat(auto-fill,minmax(258px,1fr))}
.rozvrh-akce-seznam li{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:3px 12px;
  padding:11px 15px;border-radius:var(--r-sm);background:var(--surface);
  box-shadow:inset 0 0 0 1px var(--line);font-size:.89rem;
}
.rozvrh-akce-datum{font-weight:600;color:var(--ink-900)}
.rozvrh-akce-cas{font-variant-numeric:tabular-nums;color:var(--ink-700)}
.rozvrh-akce-sal{font-size:.78rem;color:var(--ink-500);letter-spacing:.02em}

/* Dráha u bloku obsazenosti a ztlumení toho, co vybranému místu nevadí. */
.rez-seznam-draha{
  font-size:.76rem;color:var(--ink-500);letter-spacing:.03em;flex:none;margin-left:auto;
}
.rez-seznam-radek.je-jinde{opacity:.5}
.rez-seznam-radek.je-jinde .rez-seznam-cas{font-weight:500}

/* ---- Pás půlhodin místo číselníku času ----
   Nativní input[type=time] nutí rolovat zvlášť hodiny a zvlášť minuty.
   Tohle je jedno klepnutí na začátek a jedno na konec, a rovnou je
   vidět, co je zabrané. Bez skriptu zůstanou místo pásu dva výběry. */
.rez-pas{margin-top:4px}
.rez-pas-mrizka{
  display:grid;gap:6px;
  grid-template-columns:repeat(auto-fill,minmax(62px,1fr));
}
.rez-slot{
  appearance:none;border:0;cursor:pointer;
  padding:12px 4px;min-height:44px;border-radius:var(--r-sm);
  font-family:var(--font-text);font-size:.86rem;font-weight:500;
  font-variant-numeric:tabular-nums;
  color:var(--ink-700);background:var(--surface);
  box-shadow:inset 0 0 0 1px var(--line);
  transition:background var(--hover-dur) var(--hover-ease),
             color var(--hover-dur) var(--hover-ease),
             box-shadow var(--hover-dur) var(--hover-ease);
}
.rez-slot:hover:not(:disabled){
  background:rgba(244,80,28,.10);color:var(--flame-700);
  box-shadow:inset 0 0 0 1px rgba(244,80,28,.3);
}
.rez-slot:focus-visible{outline:0;box-shadow:inset 0 0 0 2px var(--flame-400),0 0 0 4px rgba(244,80,28,.16)}
.rez-slot.je-obsazeny{
  cursor:not-allowed;color:var(--ink-400);
  background:repeating-linear-gradient(135deg,
    rgba(25,22,39,.045) 0 6px,rgba(25,22,39,.02) 6px 12px);
  box-shadow:inset 0 0 0 1px rgba(25,22,39,.07);
}
.rez-slot.je-vybrany{
  background:var(--flame-600);color:#fff;
  box-shadow:inset 0 0 0 1px var(--flame-600);
}
.rez-slot.je-vybrany:hover{background:var(--flame-700);color:#fff}
/* Začátek a konec rozsahu se zaoblí víc, ať je vidět, kde pás začíná. */
.rez-slot.je-zacatek{box-shadow:inset 0 0 0 2px var(--flame-700)}
.rez-slot.je-konec{box-shadow:inset 0 0 0 2px var(--flame-700)}

.rez-vybrano{
  margin:12px 0 0;font-size:.88rem;color:var(--ink-600);min-height:1.2em;
}
.rez-vybrano.je-plny{font-weight:600;color:var(--ink-900)}

@media(max-width:420px){
  .rez-pas-mrizka{grid-template-columns:repeat(auto-fill,minmax(56px,1fr));gap:5px}
  /* Prst potřebuje aspoň 44 px na výšku, jinak se do slotu špatně trefuje. */
  .rez-slot{padding:13px 2px;font-size:.8rem;min-height:44px}
}