/* ============================================================
   FLORBAL KUŘIM — web spolku
   Vizuál vychází z dresů: bílý venkovní dres jako základ webu,
   domácí modro-černý jako tmavé bloky. Diagonální šrafy, rastr
   teček a přechod do černi dole jsou převzaté z potisku.
   ============================================================ */

:root{
  --nebeska:#7CB6E0;
  --nebeska-sv:#D9EAF7;
  --nebeska-tm:#4E92C4;
  --namorni:#16375C;
  --namorni-tm:#0D2340;
  --cerna:#0B1524;        /* není úplná čerň, je to nejtmavší modrá z dresu */

  --podklad:#FFFFFF;
  --podklad-2:#F1F6FB;
  --text:#16375C;
  --text-60:rgba(22,55,92,.68);
  --text-38:rgba(22,55,92,.46);
  --linka:rgba(22,55,92,.14);

  --hlavicka-h:68px;
  --sirka:1180px;

  --pismo:'Geist',system-ui,-apple-system,sans-serif;
  --nadpisy:'Chakra Petch','Geist',system-ui,sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.001ms !important;transition-duration:.001ms !important}
}
html,body{margin:0;padding:0}
/* Safari obarvuje stavovou lištu i prostor za koncem stránky podle podkladu
   u příslušného okraje. Proto je podklad přechodem: nahoře světlý jako
   hlavička, dole tmavý jako patička. Vidět je jen na těch krajích, obsah
   má vlastní pozadí. */
html{
  background:linear-gradient(to bottom,
    var(--podklad) 0%, var(--podklad) 50%,
    var(--namorni-tm) 50%, var(--namorni-tm) 100%) no-repeat;
  background-size:100% 100%;
  overscroll-behavior-y:none;
}
body{
  background:transparent;
  overscroll-behavior-y:none;color:var(--text);
  font-family:var(--pismo);font-size:16px;line-height:1.55;
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--nebeska-tm);outline-offset:3px}

.obal{max-width:var(--sirka);margin:0 auto;padding:0 22px;width:100%}

/* ---------- typografie ---------- */
h1,h2,h3{font-family:var(--nadpisy);font-weight:700;color:var(--cerna);margin:0;
         letter-spacing:-.015em;line-height:1.09;text-transform:uppercase}
h1{font-size:clamp(42px,8.2vw,92px)}
h2{font-size:clamp(30px,4.6vw,54px)}
h3{font-weight:600;font-size:21px;letter-spacing:-.005em;line-height:1.2;text-transform:none}
p{margin:0 0 16px;max-width:64ch}
p:last-child{margin-bottom:0}
.vede{font-size:18px;color:var(--text-60);max-width:52ch;line-height:1.6;margin-top:22px}

/* dopočítané hodnoty (ročníky, sezóna) */
.rocniky-auto,.sezona-auto,.rok-auto{font-variant-numeric:tabular-nums}
.doplnit{background:none;border-bottom:1px dashed rgba(78,146,196,.7);padding:0}

/* ---------- šrafy a rastr z dresu ---------- */
.srafy{
  position:absolute;inset:0;pointer-events:none;overflow:hidden;
  background-image:repeating-linear-gradient(114deg,
    transparent 0 18px,
    rgba(22,55,92,.07) 18px 20px,
    transparent 20px 34px,
    rgba(124,182,224,.26) 34px 41px,
    transparent 41px 62px,
    rgba(11,21,36,.07) 62px 64px,
    transparent 64px 96px,
    rgba(124,182,224,.14) 96px 108px,
    transparent 108px 150px);
  -webkit-mask-image:linear-gradient(150deg,transparent 18%,rgba(0,0,0,.75) 68%,transparent 100%);
  mask-image:linear-gradient(150deg,transparent 18%,rgba(0,0,0,.75) 68%,transparent 100%);
}
/* Na úzkém displeji je blok vysoký a úzký, takže šikmý přechod by nechal
   pruhy jen v rohu. Tady je vede přes celou plochu. */
@media(max-width:900px){
  .srafy{
    -webkit-mask-image:linear-gradient(172deg,transparent 4%,rgba(0,0,0,.8) 46%,transparent 100%);
    mask-image:linear-gradient(172deg,transparent 4%,rgba(0,0,0,.8) 46%,transparent 100%);
  }
}
.srafy.tmave{
  background-image:repeating-linear-gradient(114deg,
    transparent 0 16px,
    rgba(255,255,255,.10) 16px 19px,
    transparent 19px 33px,
    rgba(124,182,224,.34) 33px 40px,
    transparent 40px 58px,
    rgba(255,255,255,.18) 58px 61px,
    transparent 61px 92px,
    rgba(124,182,224,.15) 92px 104px,
    transparent 104px 146px);
}
.rastr{
  position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(circle,rgba(22,55,92,.20) 1.1px,transparent 1.2px);
  background-size:9px 9px;
  -webkit-mask-image:linear-gradient(200deg,#000 0,transparent 46%);
  mask-image:linear-gradient(200deg,#000 0,transparent 46%);
}
.rastr.svetly{background-image:radial-gradient(circle,rgba(124,182,224,.30) 1.1px,transparent 1.2px)}

/* ---------- hlavička ---------- */
.hlavicka{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.97);
          backdrop-filter:saturate(150%) blur(8px);border-bottom:1px solid var(--linka)}
.hlavicka .obal{display:flex;align-items:center;gap:16px;height:var(--hlavicka-h)}
.znacka{display:flex;align-items:center;gap:11px;text-decoration:none;flex:none}
.znacka img{width:40px;height:40px;object-fit:contain}
.znacka span{font-family:var(--nadpisy);font-weight:700;font-size:18px;color:var(--cerna);
             text-transform:uppercase;letter-spacing:.005em;white-space:nowrap}

.menu{margin-left:auto;display:flex;align-items:center;gap:2px}
.menu a{
  text-decoration:none;font-family:var(--nadpisy);font-weight:600;font-size:14px;
  text-transform:uppercase;letter-spacing:.02em;color:var(--text-60);
  padding:10px 13px;transition:color .15s,box-shadow .15s;
}
.menu a:hover{color:var(--cerna);box-shadow:inset 0 -3px 0 var(--nebeska)}
.menu a[aria-current="page"]{color:var(--cerna);box-shadow:inset 0 -3px 0 var(--namorni)}
.menu .ven::after{content:'↗';font-size:11px;margin-left:5px;opacity:.55;vertical-align:2px}

.prepinac{display:none;margin-left:auto;width:44px;height:44px;border:2px solid var(--namorni);
          background:#fff;cursor:pointer;padding:0;align-items:center;justify-content:center}
.prepinac span{display:block;width:18px;height:2px;background:var(--namorni);position:relative}
.prepinac span::before,.prepinac span::after{content:'';position:absolute;left:0;width:18px;height:2px;
          background:var(--namorni)}
.prepinac span::before{top:-6px}
.prepinac span::after{top:6px}

/* osm položek se vedle loga vejde až od ~1100 px, pod tím hamburger */
@media(max-width:1100px){
  .prepinac{display:flex}
  .menu{position:absolute;top:var(--hlavicka-h);left:0;right:0;flex-direction:column;
        align-items:stretch;gap:0;background:#fff;border-bottom:3px solid var(--namorni);
        padding:6px 12px 12px;display:none;box-shadow:0 20px 30px -22px rgba(11,21,36,.45)}
  .menu.otevreno{display:flex}
  .menu a{padding:14px 10px;font-size:16px}
}

/* lem jako spodek dresu */
.lem{height:7px;background:linear-gradient(90deg,var(--namorni) 0,var(--nebeska) 42%,var(--cerna) 100%)}

/* ---------- tlačítka ---------- */
.tlacitko{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--nadpisy);font-weight:700;font-size:15px;
  text-transform:uppercase;letter-spacing:.04em;
  padding:16px 30px;text-decoration:none;border:2px solid var(--cerna);
  background:var(--cerna);color:#fff;transition:background .15s,color .15s,border-color .15s;
}
.tlacitko:hover{background:var(--namorni);border-color:var(--namorni)}
.tlacitko.svetle{background:transparent;color:var(--cerna)}
.tlacitko.svetle:hover{background:var(--namorni);border-color:var(--namorni);color:#fff}
.tlacitko.prazdne{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
.tlacitko.prazdne:hover{background:#fff;color:var(--cerna);border-color:#fff}

/* ---------- hero ----------
   Fotka nese celou obrazovku, text leží na tmavém překryvu.
   Fotka proto potřebuje volnější levou půlku. */
.hero{position:relative;background:var(--namorni-tm);overflow:hidden;isolation:isolate;
      min-height:clamp(460px,68vh,680px);display:flex;align-items:center}
.hero .fotka{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
             object-position:70% 40%;z-index:0}
.hero .stin{position:absolute;inset:0;z-index:1;background:
  linear-gradient(96deg,rgba(11,21,36,.95) 0%,rgba(11,21,36,.86) 34%,
                        rgba(11,21,36,.42) 68%,rgba(11,21,36,.28) 100%),
  linear-gradient(0deg,rgba(11,21,36,.75) 0%,transparent 42%)}
.hero .srafy{z-index:2;opacity:.75}
.hero .rastr{z-index:2;opacity:.4}
.hero .obal{position:relative;z-index:3;padding:clamp(56px,8vw,104px) 22px}
.hero .hero-text{max-width:680px}
.hero h1{color:#fff;max-width:11ch}
.hero h1 em{font-style:normal;display:block;color:var(--nebeska)}
/* slogan psaným písmem, vektor z klubových podkladů */
.hero h1.slogan{max-width:none;margin:0 0 4px -4px;line-height:0}
.hero h1.slogan img{width:clamp(280px,46vw,560px);height:auto;display:block;
  filter:drop-shadow(0 2px 14px rgba(11,21,36,.45))}
@media(max-width:600px){.hero h1.slogan img{width:86vw}}
.hero .podnadpis{font-family:var(--nadpisy);font-weight:600;
  font-size:clamp(17px,2vw,22px);color:#fff;text-transform:uppercase;
  letter-spacing:.01em;margin:26px 0 0;max-width:40ch}
.hero p{color:rgba(255,255,255,.84);font-size:17.5px;line-height:1.6;
        margin:16px 0 32px;max-width:44ch}
.hero .tlacitka{display:flex;gap:12px;flex-wrap:wrap}
.hero .tlacitko{background:#fff;color:var(--cerna);border-color:#fff}
.hero .tlacitko:hover{background:var(--nebeska);border-color:var(--nebeska);color:var(--cerna)}
.hero .tlacitko.prazdne{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
.hero .tlacitko.prazdne:hover{background:#fff;color:var(--cerna);border-color:#fff}
.hero .mistofoto{position:absolute;inset:0;z-index:0;aspect-ratio:auto;height:100%}

@media(max-width:900px){
  .hero{min-height:clamp(420px,72vh,560px)}
  .hero .fotka{object-position:62% 38%}
  .hero .stin{background:
    linear-gradient(96deg,rgba(11,21,36,.93) 0%,rgba(11,21,36,.86) 55%,rgba(11,21,36,.7) 100%),
    linear-gradient(0deg,rgba(11,21,36,.8) 0%,transparent 46%)}
}

/* proužek s fakty */
.fakta{background:var(--cerna);color:#fff;position:relative;overflow:hidden}
.fakta .obal{position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.fakta .obal > div{padding:26px 30px 26px 0}
.fakta .obal > div + div{padding-left:30px;border-left:1px solid rgba(255,255,255,.18)}
.fakta b{display:block;margin-bottom:6px;font-family:var(--nadpisy);font-weight:700;font-size:21px;
         color:#fff;text-transform:uppercase;letter-spacing:-.01em;line-height:1.15}
.fakta small{font-size:13.5px;line-height:1.5;color:rgba(255,255,255,.66);display:block}
@media(max-width:700px){
  .fakta .obal{grid-template-columns:1fr}
  .fakta .obal > div{padding:20px 0}
  .fakta .obal > div:first-child{padding-top:26px}
  .fakta .obal > div:last-child{padding-bottom:28px}
  .fakta .obal > div + div{padding-left:0;border-left:none;
    border-top:1px solid rgba(255,255,255,.18)}
}

/* ---------- sekce ---------- */
.sekce{padding:clamp(54px,7vw,94px) 0;position:relative;background:var(--podklad)}
.sekce.tesna{padding:clamp(38px,5vw,60px) 0}
.sekce.svetla{background:var(--podklad-2)}
.sekce.tmava{background:linear-gradient(168deg,var(--nebeska-tm) -6%,var(--namorni) 40%,var(--cerna) 100%);
             color:rgba(255,255,255,.84);overflow:hidden;isolation:isolate}
.sekce.tmava > .obal{position:relative;z-index:2}
.sekce.tmava h2,.sekce.tmava h3{color:#fff}
.sekce.tmava .vede{color:rgba(255,255,255,.76)}

.hlava-sekce{margin-bottom:40px;max-width:58ch}
.hlava-sekce h2{margin-bottom:0}
.hlava-sekce p{margin:24px 0 0;color:var(--text-60);font-size:17px;line-height:1.6}
.sekce.tmava .hlava-sekce p{color:rgba(255,255,255,.74)}
.hlava-sekce h2::after{content:'';display:block;width:76px;height:6px;margin-top:20px;
  background:linear-gradient(114deg,var(--nebeska) 0,var(--namorni) 100%)}
.sekce.tmava .hlava-sekce h2::after{background:linear-gradient(114deg,#fff 0,var(--nebeska) 100%)}

/* ---------- kategorie ---------- */
.kategorie{display:flex;flex-direction:column;gap:0;border-top:2px solid var(--cerna)}
.kat{
  position:relative;display:grid;grid-template-columns:236px 1fr auto;align-items:center;
  gap:30px;padding:26px 24px 26px 0;border-bottom:1px solid var(--linka);
  background:#fff;transition:background .18s;overflow:hidden;
}
.kat:hover{background:var(--podklad-2)}
.kat > *:not(.srafy){position:relative;z-index:2}
.kat .srafy{z-index:1;opacity:0;transition:opacity .18s;
  -webkit-mask-image:linear-gradient(100deg,transparent 55%,#000 100%);
  mask-image:linear-gradient(100deg,transparent 55%,#000 100%)}
.kat:hover .srafy{opacity:1}

.kat .vek{font-family:var(--nadpisy);font-weight:700;color:var(--cerna);
  font-size:clamp(42px,5.2vw,64px);line-height:.9;letter-spacing:-.035em;white-space:nowrap;
  padding-left:22px;border-left:8px solid var(--nebeska)}
.kat .vek small{display:block;font-family:var(--pismo);font-weight:500;font-size:12.5px;
  color:var(--text-38);letter-spacing:0;margin-top:9px;text-transform:none}
.kat h3{margin-bottom:6px}
.kat .rocniky{font-size:14.5px;color:var(--text-38);margin:0 0 10px}
.kat .rozvrh{margin:0;font-size:16px;color:var(--namorni);font-weight:500;
  display:grid;grid-template-columns:auto 1fr;gap:2px 12px;align-items:baseline}
.kat .rozvrh em{font-style:normal;font-size:14px;color:var(--text-38)}
.kat .trener{margin:7px 0 0;font-size:15px;color:var(--text-60)}
.kat .trener a{font-weight:600;color:var(--cerna);text-decoration:none;
               box-shadow:inset 0 -3px 0 var(--nebeska)}
.kat .odkaz{font-family:var(--nadpisy);font-weight:700;font-size:13.5px;text-transform:uppercase;
  letter-spacing:.04em;text-decoration:none;padding:13px 22px;border:2px solid var(--cerna);
  white-space:nowrap;transition:background .15s,color .15s}
.kat .odkaz:hover{background:var(--namorni);border-color:var(--namorni);color:#fff}
@media(max-width:860px){
  .kat{grid-template-columns:1fr;gap:16px;padding:22px 0}
  .kat .vek{font-size:46px;display:flex;align-items:baseline;gap:14px;padding-left:16px;border-left-width:7px}
  .kat .vek small{margin:0}
  .kat .odkaz{justify-self:start}
}

/* ---------- dvojice ---------- */
.dvojice h2{margin-bottom:0}
.dvojice h2 + p{margin-top:22px}
.dvojice p{line-height:1.6}
.dvojice{display:grid;grid-template-columns:1.02fr .98fr;gap:48px;align-items:center}
@media(max-width:900px){.dvojice{grid-template-columns:1fr;gap:30px}}

.seznam{list-style:none;padding:0;margin:26px 0 0}
.seznam li{position:relative;padding-left:28px;margin-bottom:15px;font-size:16.5px;line-height:1.55}
.seznam li:last-child{margin-bottom:0}

/* kemp: podnadpis nad seznamem a zvýrazněná cena */
.podnadpis-kemp{margin:34px 0 0;font-family:var(--nadpisy);font-weight:700;font-size:14px;
  text-transform:uppercase;letter-spacing:.06em;color:var(--text-60)}
.podnadpis-kemp + .seznam{margin-top:16px}
.cena{margin:30px 0 0;padding:18px 0 0;border-top:2px solid var(--cerna);
  display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px;max-width:none}
.cena b{font-family:var(--nadpisy);font-weight:700;font-size:clamp(30px,3.6vw,40px);
  color:var(--cerna);letter-spacing:-.01em;line-height:1}
.cena span{font-size:15.5px;color:var(--text-60)}
.seznam li::before{content:'';position:absolute;left:0;top:10px;width:14px;height:10px;
  background:var(--nebeska);transform:skewX(-24deg)}
.sekce.tmava .seznam li{color:rgba(255,255,255,.86)}

.ram{position:relative;overflow:hidden;background:var(--nebeska-sv);
     clip-path:polygon(0 0,100% 0,100% 88%,92% 100%,0 100%)}
.ram img{width:100%;aspect-ratio:4/3;object-fit:cover}

.mistofoto{
  aspect-ratio:4/3;display:grid;place-items:center;text-align:center;padding:24px;
  background:
    repeating-linear-gradient(114deg,transparent 0 22px,rgba(124,182,224,.5) 22px 26px,
      transparent 26px 44px,rgba(22,55,92,.16) 44px 46px,transparent 46px 78px),
    var(--nebeska-sv);
  color:var(--namorni);font-family:var(--nadpisy);font-weight:600;font-size:15px;
}

/* ---------- pás fotek ---------- */
.pas{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:760px){.pas{grid-template-columns:1fr 1fr;gap:10px}}
.pas .ram img,.pas .mistofoto{aspect-ratio:1/1}

/* ---------- tabulky ---------- */
.tabulka-obal{overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:2px solid var(--cerna);background:#fff}
table{width:100%;border-collapse:collapse;font-size:15px}
th,td{padding:13px 14px;text-align:left;border-bottom:1px solid var(--linka)}
th{font-family:var(--nadpisy);font-weight:700;font-size:12.5px;text-transform:uppercase;
   letter-spacing:.04em;color:#fff;background:var(--cerna);white-space:nowrap}
tbody tr:last-child td{border-bottom:none}
td.cislo,th.cislo{text-align:right}
tr.my{background:rgba(124,182,224,.26)}
tr.my td{font-weight:600;color:var(--cerna)}

/* Na úzkém displeji nemá smysl posouvat tabulku do strany — vedlejší
   sloupce se schovají a zůstane to podstatné. */
@media(max-width:680px){
  table{font-size:14px}
  th,td{padding:11px 9px}
  .skryt-mobil{display:none}
}

.sekce.tmava .tabulka-obal{background:rgba(11,21,36,.42);border-color:rgba(255,255,255,.28)}
.sekce.tmava th{background:rgba(255,255,255,.12);color:#fff}
.sekce.tmava td{border-color:rgba(255,255,255,.13);color:rgba(255,255,255,.9)}
.sekce.tmava tr.my{background:rgba(124,182,224,.26)}
.sekce.tmava tr.my td{color:#fff}

.poznamka-dat{font-size:13.5px;color:var(--text-38);margin:12px 2px 0}
.sekce.tmava .poznamka-dat{color:rgba(255,255,255,.58)}

/* ---------- karty kontaktů ---------- */
.mrizka{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2px;
        background:var(--cerna);border:2px solid var(--cerna)}
.karta{position:relative;background:#fff;padding:28px 26px;overflow:hidden}
.karta > *:not(.srafy){position:relative;z-index:2}
.karta .srafy{z-index:1;opacity:.5}
.karta .portret{margin:-28px -26px 20px;position:relative;overflow:hidden;background:var(--nebeska-sv)}
.karta .portret img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:center 22%}
.karta .portret .mistofoto{aspect-ratio:4/3;font-size:13.5px}
.karta h3{margin-bottom:4px}
.karta .role{font-size:13.5px;color:var(--text-38);margin:0 0 16px}
.karta a{display:block;text-decoration:none;font-size:16px;margin-bottom:6px;font-weight:500}
.karta a:hover{text-decoration:underline}
.karta .tel{font-family:var(--nadpisy);font-weight:700;font-size:22px;color:var(--cerna);
            letter-spacing:-.01em}

/* Loga mají hodně různé poměry stran, tak je nesrovnávám na stejnou výšku,
   ale na podobnou optickou váhu. Proto má každé svoji. */
.podpora{margin-top:46px;padding-top:26px;border-top:2px solid var(--cerna)}
.podpora-nadpis{font-family:var(--nadpisy);font-weight:700;font-size:12.5px;
  text-transform:uppercase;letter-spacing:.07em;color:var(--text-38);margin:0 0 24px}
.loga{display:flex;flex-wrap:wrap;align-items:center;gap:22px 38px}
.loga img{display:block;width:auto;object-fit:contain;
  filter:grayscale(1);opacity:.55;transition:opacity .15s,filter .15s}
.loga img:hover{filter:grayscale(0);opacity:1}
.loga .l-dolp{height:40px}
.loga .l-kurim{height:46px}
.loga .l-jmk{height:19px}
.loga .mistofoto{aspect-ratio:auto;width:132px;height:42px;font-size:11.5px;padding:5px}

.udaje{font-size:15.5px;line-height:1.9;color:var(--text-60)}
.udaje b{color:var(--cerna);font-weight:600}

/* ---------- závěr stránky ----------
   Výzva a patička jsou v jednom obalu s jedinou vrstvou šraf, aby pruhy
   plynule přešly přes hranici obou bloků a nelámaly se. */
/* Podklad drží obal, oba bloky jsou průhledné — jinak by svým pozadím
   šrafy přikryly a pruhy by se na hranici zase ztratily. */
.zaver{position:relative;overflow:hidden;isolation:isolate;background:var(--cerna)}
.zaver > .srafy{z-index:1}
.zaver > *:not(.srafy){position:relative;z-index:2}
.zaver > .vyzva{background:transparent}

.vyzva{background:var(--cerna);color:#fff}
.vyzva .obal{padding:clamp(54px,6.5vw,86px) 22px;text-align:center}
.vyzva h2{color:#fff;margin-bottom:0}
.vyzva p{margin:22px auto 32px;color:rgba(255,255,255,.72);font-size:17.5px;line-height:1.6}
.vyzva .tlacitka{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.vyzva .tlacitko{background:#fff;color:var(--cerna);border-color:#fff}
.vyzva .tlacitko:hover{background:var(--nebeska);border-color:var(--nebeska);color:var(--cerna)}
.vyzva .tlacitko.prazdne{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
.vyzva .tlacitko.prazdne:hover{background:#fff;color:var(--cerna)}

/* ---------- patička ---------- */
.paticka{background:var(--namorni-tm);color:rgba(255,255,255,.74);font-size:15px}
.zaver > .paticka{background:rgba(22,55,92,.55)}
.paticka .obal{padding:48px 22px 36px;
  display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:34px}
@media(max-width:760px){.paticka .obal{grid-template-columns:1fr;gap:28px}}
.paticka h3{color:#fff;font-family:var(--nadpisy);font-weight:700;font-size:14px;
            text-transform:uppercase;letter-spacing:.05em;margin-bottom:14px}
.paticka a{color:rgba(255,255,255,.82);text-decoration:none;display:block;margin-bottom:8px}
.paticka a:hover{color:#fff;box-shadow:inset 0 -2px 0 var(--nebeska)}
.paticka .znacka-p{display:flex;align-items:center;gap:11px;margin-bottom:16px}
.paticka .znacka-p img{width:38px;height:38px}
.paticka .znacka-p span{font-family:var(--nadpisy);font-weight:700;font-size:18px;color:#fff;
                        text-transform:uppercase}
.paticka .dole{border-top:1px solid rgba(255,255,255,.15)}
.paticka .dole .obal{padding:16px 22px;display:block;font-size:13.5px;color:rgba(255,255,255,.5)}

/* ---------- drobnosti ---------- */
.stitek{display:inline-block;background:var(--namorni);color:#fff;margin-bottom:22px;
  font-family:var(--nadpisy);font-weight:700;font-size:12.5px;text-transform:uppercase;
  letter-spacing:.06em;padding:7px 13px;transform:skewX(-10deg)}
.stitek > span{display:inline-block;transform:skewX(10deg)}
.sekce.tmava .stitek{background:var(--nebeska);color:var(--cerna)}



.zpet{display:table;margin-bottom:18px;font-size:15px;color:var(--text-60);text-decoration:none}
.zpet:hover{color:var(--namorni);text-decoration:underline}

.kemp-akce{margin:24px 0 0}

/* ---------- mládež ---------- */
.mezititulek{margin:0 0 16px;font-family:var(--nadpisy);font-weight:700;font-size:14px;
  text-transform:uppercase;letter-spacing:.06em;color:var(--text-60)}
.tabulka-obal + .mezititulek,.tabulka-obal + .poznamka-dat + .mezititulek{margin-top:42px}
.sekce.tmava .mezititulek{color:rgba(255,255,255,.7)}
.tabulka-obal td a{color:inherit;font-weight:600;text-decoration:none;
  box-shadow:inset 0 -2px 0 var(--nebeska)}
.sekce.tmava .tabulka-obal td a{box-shadow:inset 0 -2px 0 rgba(124,182,224,.7)}

/* ---------- právní texty ---------- */
.pravni > *{max-width:760px}
.pravni h2{font-size:clamp(20px,2.4vw,24px);line-height:1.2;margin:44px 0 0}
.pravni h2:first-child{margin-top:0}
.pravni h2 + p,.pravni h2 + ul{margin-top:16px}
.pravni p{line-height:1.65}
.pravni .seznam{margin:14px 0 16px}
.pravni .seznam li{font-size:16px}
.pravni a{color:var(--namorni);font-weight:500}
.pravni .platnost{margin-top:44px;padding-top:18px;border-top:2px solid var(--cerna);
  font-size:14.5px;color:var(--text-60)}
.paticka .dole a{display:inline;color:rgba(255,255,255,.7);margin:0}
.paticka .dole a:hover{color:#fff}


/* ---------- karusel fotek ----------
   Obyčejné posouvání do strany s přichytáváním, na mobilu prstem,
   na počítači šipkami. Snímky mají stejně useknutý roh jako ostatní fotky. */
.hlava-karusel{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.hlava-karusel .hlava-sekce{margin-bottom:34px}
.karusel-sipky{display:flex;gap:8px;margin-bottom:38px;flex:none}
.karusel-sipka{width:52px;height:52px;border:2px solid var(--cerna);background:transparent;
  color:var(--cerna);font-size:22px;line-height:1;cursor:pointer;
  transition:background .15s,color .15s,border-color .15s}
.karusel-sipka:hover{background:var(--namorni);border-color:var(--namorni);color:#fff}
.karusel-sipka:disabled{opacity:.3;cursor:default;background:transparent;color:var(--cerna);
  border-color:var(--cerna)}
.karusel{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none;
  margin:0 -22px;padding:0 22px;scroll-padding:0 22px}
.karusel::-webkit-scrollbar{display:none}
.karusel:focus-visible{outline:3px solid var(--nebeska-tm);outline-offset:4px}
.karusel-snimek{flex:0 0 calc((100% - 28px) / 3);scroll-snap-align:start;display:block}
.karusel-snimek img{aspect-ratio:4/3;transition:transform .4s}
.karusel-snimek:hover img{transform:scale(1.03)}
.karusel-snimek .mistofoto{aspect-ratio:4/3}
@media(max-width:900px){.karusel-snimek{flex-basis:calc((100% - 14px) / 1.6)}}
@media(max-width:600px){
  .karusel-snimek{flex-basis:84%}
  .karusel-sipky{display:none}
}
@media (prefers-reduced-motion:reduce){.karusel{scroll-behavior:auto}}

.hlava-karusel .mezititulek{margin:0 0 18px;align-self:flex-end}
.hlava-karusel .mezititulek + .karusel-sipky{margin-bottom:16px}




/* ---------- přihláška na kemp ----------
   Karta uprostřed tmavé sekce. Jednotný rytmus: popisek 8 px nad polem,
   24 px mezi poli, sekce oddělené linkou a 40 px vzduchu. */
.sekce.tmava.sekce-formular{padding-top:clamp(40px,5vw,64px);scroll-margin-top:var(--hlavicka-h)}
.formular-karta{color:var(--text);background:#fff;max-width:760px;margin:0 auto;padding:clamp(24px,4.5vw,52px);
  box-shadow:0 24px 60px -30px rgba(0,0,0,.6);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 26px),calc(100% - 26px) 100%,0 100%)}

.formular fieldset{border:0;margin:0;padding:0;min-width:0;
  display:grid;grid-template-columns:1fr 1fr;gap:26px 20px}
.formular fieldset + fieldset{margin-top:40px;padding-top:40px;border-top:1px solid var(--linka)}
.formular legend{grid-column:1/-1;float:left;width:100%;padding:0;margin:0 0 2px;
  display:flex;align-items:center;gap:12px;font-family:var(--nadpisy);font-weight:700;
  font-size:21px;line-height:1.2;text-transform:uppercase;color:var(--cerna)}
.formular .krok{display:inline-grid;place-items:center;width:32px;height:32px;flex:none;
  background:var(--nebeska);color:var(--cerna);font-size:16px;transform:skewX(-10deg)}

.formular .pole{display:flex;flex-direction:column;gap:8px;min-width:0}
.formular .pole.siroke{grid-column:1/-1}
.formular label,.formular .popisek{font-size:15px;line-height:1.35;font-weight:600;color:var(--cerna)}
.formular .povinne{color:#C0392B;margin-left:3px;font-weight:700}
.formular .napoveda{font-size:13.5px;line-height:1.45;color:var(--text-60);margin:0}
.formular .pole > .napoveda{margin-top:-4px}

.formular input:not([type="radio"]):not([type="checkbox"]):not([type="file"]),
.formular select,.formular textarea{
  font:inherit;font-size:16px;line-height:1.4;color:var(--cerna);background:var(--podklad-2);
  border:2px solid transparent;border-bottom-color:var(--namorni);border-radius:0;
  min-height:50px;padding:12px 14px;width:100%;transition:border-color .15s,background .15s}
.formular select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:36px;
  background-image:linear-gradient(45deg,transparent 50%,var(--namorni) 50%),
                   linear-gradient(135deg,var(--namorni) 50%,transparent 50%);
  background-position:calc(100% - 19px) 52%,calc(100% - 13px) 52%;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat}
.formular textarea{resize:vertical;min-height:90px}
.formular input:focus,.formular select:focus,.formular textarea:focus{
  outline:none;background:#fff;border-color:var(--namorni)}
.formular input::placeholder,.formular textarea::placeholder{color:var(--text-38)}

/* datum narození */
.formular .datum{display:grid;grid-template-columns:1fr 1.7fr 1.25fr;gap:10px;max-width:420px}
.formular .upozorneni{margin:0;font-size:14px;line-height:1.45;color:#8A5A00;font-weight:500}
.formular .upozorneni:empty{display:none}

/* tréninky: nenápadné štítky v řádku ke každé kategorii */
.formular .treninky-volby{display:flex;flex-direction:column;gap:16px;margin-top:10px}
.formular .skupina{display:flex;flex-direction:column;gap:7px}
.formular .skupina-nazev{font-size:13px;font-weight:600;color:var(--text-60);line-height:1.3}
.formular .cipy{display:flex;flex-wrap:wrap;gap:8px}
.formular .cip{cursor:pointer}
.formular .cip input{position:absolute;opacity:0;width:1px;height:1px}
.formular .cip span{display:inline-flex;align-items:baseline;gap:6px;padding:7px 12px;
  border:1.5px solid var(--linka);background:#fff;font-size:14px;font-weight:600;color:var(--cerna);
  line-height:1.3;transition:border-color .15s,background .15s,color .15s}
.formular .cip small{font-size:12.5px;font-weight:400;color:var(--text-60)}
.formular .cip:hover span{border-color:var(--namorni)}
.formular .cip input:checked + span{background:var(--namorni);border-color:var(--namorni);color:#fff}
.formular .cip input:checked + span small{color:rgba(255,255,255,.75)}
.formular .cip input:checked + span::before{content:'✓';font-weight:700}
.formular .cip input:focus-visible + span{outline:3px solid var(--nebeska-tm);outline-offset:2px}

/* přepínače plavec a odchod */
.formular .volby{display:flex;gap:8px}
.formular .volby label{flex:1;cursor:pointer}
.formular .volby input{position:absolute;opacity:0;width:1px;height:1px}
.formular .volby span{display:flex;align-items:center;justify-content:center;min-height:50px;padding:10px;
  border:1.5px solid var(--linka);background:#fff;font-weight:600;font-size:15px;
  color:var(--text-60);transition:all .15s}
.formular .volby label:hover span{border-color:var(--namorni)}
.formular .volby input:checked + span{border-color:var(--namorni);background:var(--namorni);color:#fff}
.formular .volby input:focus-visible + span{outline:3px solid var(--nebeska-tm);outline-offset:2px}
/* velikost trička: víc možností, tak ve dvou řadách */
.formular .volby.velikosti{display:grid;grid-template-columns:repeat(4,1fr)}
.formular .volby.velikosti span{flex-direction:column;gap:2px;min-height:58px;padding:10px 4px}
.formular .volby.velikosti small{font-size:12px;font-weight:400;opacity:.8;white-space:nowrap}
.formular .volby.velikosti .jina{grid-column:1/-1}
.formular .volby.velikosti .jina span{min-height:46px}

/* kartička */
.formular .nahrat{display:flex;align-items:center;gap:14px;cursor:pointer;font-weight:400;
  border:1.5px dashed var(--nebeska-tm);background:var(--podklad-2);padding:14px 16px;
  transition:background .15s,border-color .15s}
.formular .nahrat:hover{background:var(--nebeska-sv);border-color:var(--namorni)}
.formular .nahrat input{position:absolute;opacity:0;width:1px;height:1px}
.formular .nahrat:focus-within{outline:3px solid var(--nebeska-tm);outline-offset:2px}
.formular .nahrat-ikona{display:grid;place-items:center;width:40px;height:40px;flex:none;
  background:var(--namorni);color:#fff;font:700 24px/1 var(--nadpisy)}
.formular .nahrat-text{display:flex;flex-direction:column;gap:3px}
.formular .nahrat-text b{font-size:15px;font-weight:600;color:var(--cerna)}
.formular .nahrat-text small{font-size:13px;line-height:1.4;color:var(--text-60)}
.formular .nahrano{display:none;align-items:center;gap:14px;padding:10px 12px;border:1.5px solid var(--linka)}
.formular .nahrano.ukazat{display:flex}
.formular .nahrano img{width:64px;height:44px;object-fit:cover;flex:none}
.formular .nahrano span{flex:1;min-width:0;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.formular .odebrat{font:600 13.5px var(--pismo);color:var(--namorni);background:none;border:0;
  cursor:pointer;text-decoration:underline;padding:6px}

/* souhlasy */
.formular .gdpr{grid-column:1/-1;background:var(--podklad-2)}
.formular .gdpr summary{cursor:pointer;padding:14px 16px;font-weight:600;font-size:15px;color:var(--namorni)}
.formular .gdpr p{font-size:14px;line-height:1.6;color:var(--text-60);margin:0 16px 12px}
.formular .gdpr p:last-child{margin-bottom:16px}
.formular .odkaz-zasady{grid-column:1/-1;margin-top:-10px}
.formular .odkaz-zasady a{color:var(--namorni);font-weight:600}
.formular .zaskrt{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px 14px;align-items:flex-start;
  font-size:15px;font-weight:400;line-height:1.5;cursor:pointer}
.formular .zaskrt > span{flex:1;min-width:0}
.formular .zaskrt small{display:block;margin-top:3px;font-size:13px;color:var(--text-60)}
.formular .zaskrt input{width:22px;height:22px;flex:none;margin:1px 0 0;accent-color:var(--namorni)}

/* chyby u polí */
.formular .zprava{margin:0;font-size:13.5px;line-height:1.4;font-weight:600;color:#B3261E;flex-basis:100%}
.formular .chybne input:not([type="radio"]):not([type="checkbox"]),
.formular .chybne select,.formular .chybne textarea{border-color:#B3261E;background:#FDF1F0}
.formular .chybne .volby span,.formular .chybne .cip span{border-color:#E5A39D}
.formular .zaskrt.chybne input{outline:2px solid #B3261E;outline-offset:2px}

.sekce.tmava .formular-karta h2,.sekce.tmava .formular-karta h3{color:var(--cerna)}

/* děti: každé ve vlastním rámečku, pod nimi tlačítko na další */
.formular .siroke{grid-column:1/-1}
.formular .deti{display:flex;flex-direction:column;gap:22px}
.formular .dite{border:1.5px solid var(--linka);padding:24px 24px 28px;scroll-margin-top:calc(var(--hlavicka-h) + 20px)}
.formular .dite-hlava{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-bottom:22px;padding-bottom:14px;border-bottom:1px solid var(--linka)}
.sekce.tmava .formular .dite-nazev{margin:0;font-family:var(--nadpisy);font-weight:700;font-size:17px;
  text-transform:uppercase;letter-spacing:.02em;color:var(--cerna)}
.formular .odebrat-dite{font:600 14px var(--pismo);color:#B3261E;background:none;border:0;
  padding:6px 0;cursor:pointer;text-decoration:underline}
.formular .dite-pole{display:grid;grid-template-columns:1fr 1fr;gap:26px 20px}
.formular .pridat-dite{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px}
.formular .pridat-dite .tlacitko{padding:13px 22px}

/* popis alergií a léků se ukáže až po volbě „má“ */
.formular .doplneni{display:none;margin-top:6px}
.formular .doplneni.ukazat{display:block}

.formular .souhlas-foto{margin-top:6px}

/* nahrání kartičky se ukáže až po volbě „nahraju teď“ */
.formular .karticka-nahrani{display:none;flex-direction:column;gap:8px;margin-top:6px}
.formular .karticka-nahrani.ukazat{display:flex}

/* seznam nahraných stran kartičky */
.formular .nahrane-soubory{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.formular .nahrane-soubory:empty{display:none}
.formular .nahrane-soubory li{display:flex;align-items:center;gap:12px;padding:8px 10px;border:1.5px solid var(--linka);background:#fff}
.formular .nahrane-soubory img,.formular .pdf-ikona{width:56px;height:40px;flex:none;object-fit:cover}
.formular .pdf-ikona{display:grid;place-items:center;background:#B3261E;color:#fff;font:700 12px/1 var(--nadpisy);letter-spacing:.04em}
.formular .soubor-popis{color:var(--cerna);flex:1;min-width:0;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* odeslání */
.formular .chyba-odeslani{margin:36px 0 0;color:#B3261E;font-weight:600;max-width:none}
.formular .chyba-odeslani:empty{display:none}
.formular{scroll-margin-top:calc(var(--hlavicka-h) + 24px)}
.formular .odeslat{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;
  margin-top:36px;padding-top:28px;border-top:2px solid var(--cerna)}
.formular .chyba-odeslani:not(:empty) + .odeslat{margin-top:14px}
.formular button[disabled]{opacity:.6;cursor:wait}
.formular .odesilam{display:none;flex-basis:100%;margin:0;font-size:14.5px;font-weight:500;color:var(--namorni)}
.formular .odesilam.ukazat{display:block}
.formular .odesilam.ukazat::before{content:'';display:inline-block;width:12px;height:12px;margin-right:9px;
  border:2px solid var(--nebeska);border-top-color:var(--namorni);border-radius:50%;
  vertical-align:-1px;animation:tocit .8s linear infinite}
@keyframes tocit{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.formular .odesilam.ukazat::before{animation:none}}
/* past na roboty: display:none, aby ji nevyplnilo automatické doplňování prohlížeče */
.formular .past{display:none !important}

/* karty s potvrzením a uzávěrkou leží v tmavé sekci, písmo jim nastavuji zvlášť */
.hlaseni{display:none;scroll-margin-top:calc(var(--hlavicka-h) + 24px)}
.hlaseni.ukazat{display:block}
.sekce.tmava .hlaseni h2{margin:0;color:var(--cerna);font-size:clamp(26px,3.4vw,34px)}
.sekce.tmava .hlaseni h2 + p{margin-top:20px}
.sekce.tmava .hlaseni p{color:var(--text);font-size:16.5px;line-height:1.6;margin:0 0 12px}
.hlaseni p b{color:var(--cerna)}
.sekce.tmava .hlaseni .napoveda{font-size:14px;color:var(--text-60)}
.hlaseni:focus{outline:none}
.hotovo-ikona{display:grid;place-items:center;width:56px;height:56px;margin-bottom:22px;
  background:var(--nebeska);color:var(--cerna);font:700 30px/1 var(--nadpisy);transform:skewX(-10deg)}
.tlacitka-hlaseni{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.formular-karta .tlacitko.svetle{color:var(--cerna);border-color:var(--cerna)}
.formular-karta .tlacitko.svetle:hover{color:#fff}

@media(max-width:640px){
  .formular-karta{margin:0 -6px;padding:26px 20px 34px}
  .formular fieldset{grid-template-columns:1fr;gap:28px}
  .formular fieldset + fieldset{margin-top:36px;padding-top:36px}
  .formular legend{font-size:19px}
  .formular .datum{grid-template-columns:.95fr 1.6fr 1.2fr;gap:8px;max-width:none}
  .formular .datum select{padding-left:11px;padding-right:26px;
    background-position:calc(100% - 15px) 52%,calc(100% - 9px) 52%}
  .formular .zaskrt{font-size:14.5px}
  .formular .odeslat .tlacitko{width:100%}
  .formular .dite{border:0;border-top:2px solid var(--cerna);padding:18px 0 0}
  .formular .dite-pole{grid-template-columns:1fr;gap:26px}
  .formular .pridat-dite .tlacitko{width:100%}
}

/* ---------- stránka 404 ---------- */
.stranka-404{min-height:60vh}
.stranka-404 h1{margin-bottom:0}
.rozcestnik{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;
  margin-top:36px;max-width:900px;background:var(--cerna);border:2px solid var(--cerna)}
.rozcestnik a{display:flex;flex-direction:column;gap:4px;padding:20px 22px;background:#fff;
  text-decoration:none;transition:background .15s}
.rozcestnik a:hover{background:var(--nebeska-sv)}
.rozcestnik b{font-family:var(--nadpisy);font-weight:700;font-size:18px;text-transform:uppercase;color:var(--cerna)}
.rozcestnik span{font-size:14.5px;color:var(--text-60)}
@media(max-width:760px){.rozcestnik{grid-template-columns:1fr 1fr}}
@media(max-width:460px){.rozcestnik{grid-template-columns:1fr}}

/* kontakty: tlačítko nahoře vede na formulář */
.kontakt-skok{margin:24px 0 0}
#napiste-nam{scroll-margin-top:var(--hlavicka-h)}
#dotaz .krok{font-size:15px}