/* ==========================================================================
   G-INNOVA — sdílený stylopis
   Pořadí: tokeny → reset → typografie → layout → komponenty → animace → media
   ========================================================================== */

/* --------------------------------------------------------------------------
   1) TOKENY
   DUMMY: barvy odvozené z vizuálu stávajícího webu, ne změřené z logo souboru.
   Ověřit u klienta / z originálu loga a případně přepsat POUZE zde.
   -------------------------------------------------------------------------- */
:root{
  /* Značka — #0077C0 změřeno přímo z pixelů dodaného loga (lg.png).
     Ostatní odstíny jsou odvozené z téhož tónu. */
  --brand:#0077C0;          /* primární modrá — logo, CTA, odkazy */
  --brand-tmava:#04395E;    /* tmavá varianta pro tmavé sekce a patičku */
  --brand-hloubka:#022C49;  /* nejtmavší, jen pro overlaye */
  --brand-svetla:#4EA8DE;   /* hover, jemné akcenty */

  /* Podklady odvozené z primární modré */
  --nebe:#DCEDF9;           /* výrazný světle modrý podklad */
  --nebe-slabe:#F2F8FC;     /* jemný modrý podklad pro alternující sekce */

  /* Akcent — zelenomodrá z lístku v logu, používat střídmě */
  --akcent:#00A79D;
  --akcent-svetly:#5FD3C9;

  /* Neutrály */
  --papir:#FBFCFD;
  --papir-2:#F1F5F9;
  --bila:#FFFFFF;
  --ink:#12212E;
  --ink-slaby:#55677A;
  --linka:rgba(18,33,46,.12);

  /* Rozměry */
  --gutter:1.5rem;
  --max:88rem;
  --r:14px;
  --r-velky:26px;

  /* Stíny */
  --stin:0 1px 2px rgba(4,57,94,.05), 0 8px 28px -12px rgba(4,57,94,.20);
  --stin-hover:0 2px 4px rgba(4,57,94,.06), 0 22px 46px -18px rgba(0,119,192,.36);

  /* Typografie */
  --display:"Fraunces", "Georgia", serif;
  --telo:"Instrument Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;

  /* Jediná křivka pro celý web: ease-out (cubic-bezier easeOutCubic).
     Pohyb začne rychle a doběhne, což u UI působí svižně, ne gumově. */
  --krivka:cubic-bezier(.22,.61,.36,1);
  --prechod:.28s var(--krivka);
  --prechod-pomaly:.55s var(--krivka);
}

@media (min-width:64rem){
  :root{ --gutter:2rem; }
}

/* --------------------------------------------------------------------------
   2) RESET
   -------------------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  /* clip, ne hidden — hidden na html/body rozbíjí position:sticky v hlavičce.
     Řeší přetok od zasunutého mobilního menu (translateX(100%)). */
  overflow-x:clip;
}
body{
  margin:0;
  background:var(--papir);
  color:var(--ink);
  font-family:var(--telo);
  font-size:1.0625rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
img,svg,video{ max-width:100%; display:block; }
img{ height:auto; }
a{ color:inherit; }
button,input,select,textarea{ font:inherit; color:inherit; }
ul,ol{ margin:0; padding:0; }
figure{ margin:0; }
table{ border-collapse:collapse; width:100%; }
:focus-visible{ outline:3px solid var(--brand-svetla); outline-offset:3px; border-radius:4px; }

/* --------------------------------------------------------------------------
   3) TYPOGRAFIE
   -------------------------------------------------------------------------- */
h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:600;
  line-height:1.1;
  letter-spacing:-.015em;
  margin:0 0 .5em;
  font-variation-settings:"SOFT" 0, "WONK" 0;
}
h1{ font-size:clamp(2.35rem, 1.4rem + 4.2vw, 4.4rem); letter-spacing:-.028em; }
h2{ font-size:clamp(1.85rem, 1.2rem + 2.4vw, 3rem); letter-spacing:-.022em; }
h3{ font-size:clamp(1.25rem, 1.05rem + .8vw, 1.6rem); }
h4{ font-size:1.1rem; }
p{ margin:0 0 1.1em; }
p:last-child{ margin-bottom:0; }

.nadpisek{
  font-family:var(--mono);
  font-size:.75rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--brand);
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  margin:0 0 1rem;
}
.nadpisek::before{
  content:"";
  width:26px; height:1px;
  background:currentColor;
  opacity:.55;
}
.nadpisek--svetly{ color:var(--akcent); }

.perex{
  font-size:clamp(1.05rem, .98rem + .35vw, 1.25rem);
  color:var(--ink-slaby);
  max-width:56ch;
}
.tmave .perex{ color:rgba(255,255,255,.78); }

.zvyraznit{
  position:relative;
  color:var(--brand);
  font-style:italic;
  white-space:nowrap;
}
.tmave .zvyraznit{ color:var(--nebe); }

/* --------------------------------------------------------------------------
   4) LAYOUT
   -------------------------------------------------------------------------- */
.obal{
  width:100%;
  max-width:var(--max);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.sekce{ padding-block:clamp(3.5rem, 2rem + 7vw, 7rem); position:relative; }
/* Oblouk má nahoře výrazný oblý ústřižek, který sám o sobě dělá optickou mezeru.
   Kde sekci otevírá, ubereme horní odsazení, jinak fotka „plave" příliš nízko. */
.sekce--oblouk-nahore{ padding-top:clamp(1.5rem, .8rem + 2.5vw, 2.75rem); }
.sekce--uzka{ padding-block:clamp(2.5rem, 1.5rem + 4vw, 4.5rem); }
.sekce--papir2{ background:var(--papir-2); }
.sekce--nebe{ background:var(--nebe-slabe); }

.tmave{
  background:var(--brand-tmava);
  color:#fff;
}
.tmave h1,.tmave h2,.tmave h3{ color:#fff; }

.hlavicka-sekce{ max-width:62ch; margin-bottom:clamp(2rem,1rem + 2.5vw,3.25rem); }
.hlavicka-sekce--stred{ margin-inline:auto; text-align:center; }
.hlavicka-sekce--stred .nadpisek{ justify-content:center; }

.mrizka{ display:grid; gap:1.25rem; }
.mrizka--2{ grid-template-columns:1fr; }
.mrizka--3{ grid-template-columns:1fr; }
.mrizka--4{ grid-template-columns:1fr 1fr; }

@media (min-width:48rem){
  .mrizka{ gap:1.5rem; }
  .mrizka--2{ grid-template-columns:repeat(2,1fr); }
  .mrizka--3{ grid-template-columns:repeat(2,1fr); }
  .mrizka--4{ grid-template-columns:repeat(2,1fr); }
}
@media (min-width:64rem){
  .mrizka--3{ grid-template-columns:repeat(3,1fr); }
  .mrizka--4{ grid-template-columns:repeat(4,1fr); }
}

/* --------------------------------------------------------------------------
   5) SIGNATURE PRVEK — OBLOUK
   Fotky a bloky v oblouku (klenba). Opakuje se napříč celým webem.
   -------------------------------------------------------------------------- */
.oblouk{
  border-radius:min(50vw, 22rem) min(50vw, 22rem) var(--r) var(--r)
             / 42% 42% var(--r) var(--r);
  overflow:hidden;
  background:var(--nebe);
}
.oblouk img{ width:100%; height:100%; object-fit:cover; }

/* Samostatná fotka v obsahu. Bez spodního okraje by na ni text navazoval
   natěsno — proto ho má i varianta bez popisku. */
.figura{ margin:0 0 2rem; }
.figura--bez-popisku{ margin-bottom:2.25rem; }
.figura .oblouk{ margin-bottom:.7rem; }
.figura--bez-popisku .oblouk{ margin-bottom:0; }

/* --------------------------------------------------------------------------
   FOTKA VEDLE TEXTU
   Pevný poměr stran tu nedává smysl: u krátkého textu vyroste fotka do
   nesmyslné výšky a rozhodí celou sekci. Fotka se proto řídí výškou textu
   vedle a přesahuje ji o --presah nahoru i dolů.
   -------------------------------------------------------------------------- */
.mrizka--foto{ gap:2rem; }
.figura--vypln{ margin:0; }
.figura--vypln .oblouk{ aspect-ratio:16/11; }

@media (min-width:64rem){
  .mrizka--foto{
    --presah:1.75rem;          /* 28 px nad i pod → dohromady 56 px */
    align-items:stretch;
    gap:3.5rem;
  }
  .mrizka--foto > .figura--vypln{
    display:flex;
    margin-block:calc(var(--presah) * -1);
  }
  .mrizka--foto > .figura--vypln .oblouk{
    aspect-ratio:auto;
    flex:1;
    min-height:16rem;          /* pod tuhle mez už by fotka byla nečitelná */
    position:relative;
  }
  /* Bez vyjmutí z toku by <img> s height:100% spadl na svou vlastní výšku
     a diktoval by výšku celého řádku — přesně to, čemu se tu vyhýbáme. */
  .mrizka--foto > .figura--vypln .oblouk img{
    position:absolute; inset:0;
    width:100%; height:100%;
  }
}
.figura figcaption{
  font-family:var(--mono); font-size:.75rem; letter-spacing:.05em;
  color:var(--ink-slaby); line-height:1.4;
  padding-left:.15rem;
  display:flex; align-items:flex-start; gap:.5rem;
}
.figura figcaption::before{
  content:""; flex:none;
  width:16px; height:1px; margin-top:.55rem;
  background:var(--brand); opacity:.6;
}
.tmave .figura figcaption{ color:rgba(255,255,255,.65); }
.tmave .figura figcaption::before{ background:var(--akcent-svetly); }

.oblouk-maly{
  border-radius:6rem 6rem var(--r) var(--r) / 3rem 3rem var(--r) var(--r);
  overflow:hidden;
  background:var(--nebe);
}

/* Dekorativní oblouková linka na pozadí sekce */
.oblouk-dekor{
  position:absolute;
  inset-inline:0;
  pointer-events:none;
  opacity:.5;
  z-index:0;
}
.oblouk-dekor svg{ width:100%; height:auto; }
.sekce > .obal{ position:relative; z-index:1; }

/* --------------------------------------------------------------------------
   6) TLAČÍTKA
   -------------------------------------------------------------------------- */
.btn{
  --bg:var(--brand);
  --fg:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.6rem;
  padding:.9rem 1.5rem;
  background:var(--bg);
  color:var(--fg);
  border:1px solid transparent;
  border-radius:100px;
  font-weight:600;
  font-size:.98rem;
  line-height:1.25;
  white-space:nowrap;
  text-decoration:none;
  cursor:pointer;
  transition:transform var(--prechod), box-shadow var(--prechod), background var(--prechod);
  box-shadow:0 10px 24px -14px rgba(0,119,192,.8);
}
.btn:hover{ transform:translateY(-2px); box-shadow:var(--stin-hover); }
.btn:active{ transform:translateY(0); }
.btn svg{ width:1.05em; height:1.05em; flex:none; }

.btn--obrys{
  --bg:transparent;
  --fg:var(--brand);
  border-color:currentColor;
  box-shadow:none;
}
.btn--obrys:hover{ background:var(--brand); --fg:#fff; border-color:var(--brand); }

.btn--svetly{ --bg:#fff; --fg:var(--brand-tmava); }
.btn--duch{
  --bg:transparent; --fg:#fff;
  border-color:rgba(255,255,255,.45);
  box-shadow:none;
}
.btn--duch:hover{ background:#fff; --fg:var(--brand-tmava); }

.btn--velky{ padding:1.05rem 1.9rem; font-size:1.05rem; }

.tlacitka{ display:flex; flex-wrap:wrap; gap:.75rem; }

/* Textový odkaz se šipkou */
.odkaz-sipka{
  display:inline-flex; align-items:center; gap:.45rem;
  font-weight:600; color:var(--brand); text-decoration:none;
  font-size:.98rem;
}
.odkaz-sipka svg{ width:1em; height:1em; transition:transform var(--prechod); }
.odkaz-sipka:hover svg{ transform:translateX(4px); }
.tmave .odkaz-sipka{ color:var(--akcent); }

/* --------------------------------------------------------------------------
   7) HLAVIČKA
   -------------------------------------------------------------------------- */
.hlavicka{
  position:sticky; top:0; z-index:60;
  transition:background var(--prechod), box-shadow var(--prechod), backdrop-filter var(--prechod);
}
.hlavicka__pruh{
  display:flex; align-items:center; gap:1rem;
  min-height:84px;
  flex-wrap:nowrap;
}
.hlavicka__akce{ flex:none; }
.navigace__seznam{ min-width:0; }
.hlavicka.je-scrollnuta{
  background:rgba(251,252,253,.88);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  box-shadow:0 1px 0 var(--linka);
}
.logo{ display:flex; align-items:center; text-decoration:none; flex:none; }
.logo img{ height:44px; width:auto; }
.logo__nahrada{
  font-family:var(--display); font-weight:700; font-size:1.35rem;
  letter-spacing:-.02em; color:var(--brand);
}

.navigace{ margin-left:auto; }
.navigace > .tlacitka{ display:none; }   /* jen pro mobilní off-canvas menu */
.navigace__seznam{ display:flex; align-items:center; gap:.1rem; list-style:none; }
.navigace__odkaz{
  display:inline-flex; align-items:center; gap:.3rem;
  padding:.5rem .62rem; border-radius:100px;
  text-decoration:none; font-weight:500; font-size:.9rem;
  white-space:nowrap;
  color:var(--ink);
  transition:color var(--prechod), background var(--prechod);
  background:none; border:0; cursor:pointer;
}
.navigace__odkaz:hover,
.navigace__odkaz[aria-current="page"]{ color:var(--brand); background:var(--nebe-slabe); }
.navigace__odkaz svg{ width:.7em; height:.7em; opacity:.6; transition:transform var(--prechod); }
.navigace__polozka.je-otevrena > .navigace__odkaz svg{ transform:rotate(180deg); }

.navigace__polozka{ position:relative; }
.podmenu{
  position:absolute; top:calc(100% + .4rem); left:0;
  min-width:19rem;
  background:var(--bila);
  border:1px solid var(--linka);
  border-radius:var(--r);
  box-shadow:var(--stin);
  padding:.5rem;
  list-style:none;
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .2s, transform .2s, visibility .2s;
}
.navigace__polozka.je-otevrena .podmenu,
.navigace__polozka:hover .podmenu{ opacity:1; visibility:visible; transform:translateY(0); }
.podmenu a{
  display:block; padding:.5rem .7rem; border-radius:8px;
  text-decoration:none; font-size:.93rem; color:var(--ink-slaby);
}
.podmenu a:hover{ background:var(--nebe-slabe); color:var(--brand); }

.hlavicka__akce{ display:flex; align-items:center; gap:.6rem; margin-left:.75rem; }
.hlavicka__tel{
  display:inline-flex; align-items:center; gap:.45rem;
  font-family:var(--mono); font-size:.9rem; font-weight:500;
  text-decoration:none; color:var(--brand); white-space:nowrap;
}

.prepinac{
  display:none;
  margin-left:auto;
  width:46px; height:46px;
  border:1px solid var(--linka); border-radius:12px;
  background:var(--bila);
  align-items:center; justify-content:center;
  cursor:pointer;
}
.prepinac span{
  display:block; width:20px; height:2px; background:var(--ink);
  position:relative; transition:background .2s;
}
.prepinac span::before,.prepinac span::after{
  content:""; position:absolute; left:0; width:20px; height:2px; background:var(--ink);
  transition:transform .25s;
}
.prepinac span::before{ top:-6px; }
.prepinac span::after{ top:6px; }
.prepinac[aria-expanded="true"] span{ background:transparent; }
.prepinac[aria-expanded="true"] span::before{ transform:translateY(6px) rotate(45deg); }
.prepinac[aria-expanded="true"] span::after{ transform:translateY(-6px) rotate(-45deg); }

/* Telefonní text v hlavičce až tam, kde se vejde vedle navigace */
/* Telefon v hlavičce se vejde až tam, kde je pruh širší než obsahový kontejner.
   Pod 1500px má přednost navigace a CTA — telefon je i ve spodní liště a v patičce. */
@media (max-width:1499px){
  .hlavicka__tel{ display:none; }
}


@media (max-width:1200px){
  .prepinac{ display:flex; }
  .navigace > .tlacitka{ display:flex; }
  .navigace{
    position:fixed; inset:84px 0 0;
    background:var(--papir);
    padding:1.25rem var(--gutter) 6rem;
    overflow-y:auto;
    transform:translateX(100%);
    transition:transform .35s cubic-bezier(.22,.61,.36,1);
    margin-left:0;
  }
  .navigace.je-otevrena{ transform:translateX(0); }
  .navigace__seznam{ flex-direction:column; align-items:stretch; gap:.15rem; }
  .navigace__odkaz{
    width:100%; justify-content:space-between;
    padding:.85rem .5rem; font-size:1.05rem;
    border-bottom:1px solid var(--linka); border-radius:0;
  }
  .podmenu{
    position:static; opacity:1; visibility:visible; transform:none;
    box-shadow:none; border:0; background:transparent;
    max-height:0; overflow:hidden; padding:0;
    transition:max-height .3s ease;
  }
  .navigace__polozka.je-otevrena .podmenu{ max-height:40rem; padding:.35rem 0 .75rem .5rem; }
  .navigace__polozka:hover .podmenu{ max-height:0; }
  .navigace__polozka.je-otevrena:hover .podmenu{ max-height:40rem; }
  .podmenu a{ padding:.55rem .5rem; border-left:2px solid var(--nebe); border-radius:0; }
  .hlavicka__akce{ display:none; }
  .navigace .tlacitka{ margin-top:1.5rem; flex-direction:column; }
  .navigace .btn{ width:100%; }
}

/* --------------------------------------------------------------------------
   8) HERO
   -------------------------------------------------------------------------- */
.hero{
  position:relative;
  padding-block:clamp(2rem,1rem + 5vw,4rem) clamp(3rem,2rem + 5vw,5.5rem);
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute; top:-30vh; right:-15vw;
  width:70vw; height:70vw; max-width:60rem; max-height:60rem;
  background:radial-gradient(circle at center, rgba(220,237,249,.75), rgba(220,237,249,0) 62%);
  pointer-events:none;
}
.hero__mrizka{ display:grid; gap:2.5rem; align-items:center; position:relative; z-index:1; }
.hero__text h1{ margin-bottom:.35em; }
.hero__odrazky{ list-style:none; display:grid; gap:.55rem; margin:1.6rem 0 2rem; }
.hero__odrazky li{ display:flex; gap:.7rem; align-items:flex-start; font-size:1rem; }
.hero__odrazky svg{ width:1.15rem; height:1.15rem; color:var(--brand); flex:none; margin-top:.25rem; }

.hero__media{ position:relative; }
.hero__foto{ aspect-ratio:4/5; }
/* Odznak sedí uvnitř fotky v levém dolním rohu, s odsazením od obou okrajů. */
.hero__odznak{
  position:absolute; left:1.25rem; right:auto; bottom:1.25rem;
  background:var(--bila);
  border-radius:var(--r);
  box-shadow:var(--stin);
  padding:.9rem 1.15rem;
  display:flex; align-items:center; gap:.75rem;
  max-width:17rem;
}
@media (max-width:30rem){
  .hero__odznak{ left:.85rem; bottom:.85rem; right:.85rem; max-width:none; }
}
.hero__odznak strong{ display:block; font-size:.95rem; line-height:1.3; margin-bottom:.15rem; }
.hero__odznak span{ font-size:.8rem; line-height:1.3; color:var(--ink-slaby); display:block; }
.tecka-zivo{
  width:9px; height:9px; border-radius:50%; background:#2FA36B; flex:none;
  box-shadow:0 0 0 4px rgba(47,163,107,.18);
}
.tecka-zivo.je-zavreno{ background:#C0574B; box-shadow:0 0 0 4px rgba(192,87,75,.18); }

@media (min-width:64rem){
  .hero__mrizka{ grid-template-columns:1.05fr .95fr; gap:4rem; }
}

/* Pás důvěry */
.pas-duvery{
  display:grid; gap:.75rem;
  grid-template-columns:repeat(2,1fr);
  border-top:1px solid var(--linka);
  padding-top:1.5rem; margin-top:2.5rem;
}
.pas-duvery div strong{
  display:block;
  font-family:var(--display); font-weight:600;
  font-size:clamp(2rem, 1.5rem + 1.2vw, 2.6rem);
  color:var(--brand); line-height:1; letter-spacing:-.02em;
  margin-bottom:.3rem;
}
.pas-duvery div span{
  display:block;
  font-size:.82rem; line-height:1.25; color:var(--ink-slaby);
  max-width:14ch;
}
@media (min-width:48rem){ .pas-duvery{ grid-template-columns:repeat(4,1fr); gap:1.25rem; } }

/* --------------------------------------------------------------------------
   9) KARTY
   -------------------------------------------------------------------------- */
.karta{
  background:var(--bila);
  border:1px solid var(--linka);
  border-radius:var(--r-velky);
  padding:1.6rem;
  display:flex; flex-direction:column; gap:.75rem;
  text-decoration:none; color:inherit;
}
/* Přechod jen u odkazové varianty — .karta se používá i jako statický box
   (například vizitky lékařů na stránce O nás), kde není na co reagovat. */
a.karta{
  transition:transform var(--prechod), box-shadow var(--prechod), border-color var(--prechod);
}
a.karta:hover{ transform:translateY(-4px); box-shadow:var(--stin-hover); border-color:var(--nebe); }
.karta h3{ margin:0; }
.karta p{ color:var(--ink-slaby); font-size:.96rem; }
.karta__pata{ margin-top:auto; padding-top:.5rem; }

/* Rozcestníková karta oboru — s fotkou v oblouku */
.karta-obor{
  position:relative;
  background:var(--bila);
  border:1px solid var(--linka);
  border-radius:var(--r-velky);
  overflow:hidden;
  display:flex; flex-direction:column;
  text-decoration:none; color:inherit;
  transition:transform var(--prechod), box-shadow var(--prechod);
}
.karta-obor:hover{ transform:translateY(-5px); box-shadow:var(--stin-hover); }
.karta-obor__media{
  aspect-ratio:16/10;
  background:var(--nebe-slabe);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.karta-obor__media img{ width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.22,.61,.36,1); }
.karta-obor:hover .karta-obor__media img{ transform:scale(1.05); }
.karta-obor__telo{ padding:1.5rem; display:flex; flex-direction:column; gap:.6rem; flex:1; }
.karta-obor__telo p{ color:var(--ink-slaby); font-size:.95rem; }
.karta-obor__seznam{
  list-style:none; display:flex; flex-wrap:wrap; gap:.35rem; margin:.25rem 0 .5rem;
}
.karta-obor__seznam li{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.03em;
  background:var(--nebe-slabe); color:var(--brand);
  padding:.28rem .6rem; border-radius:100px;
}
.karta-obor__pata{ margin-top:auto; }

/* Ikonová karta (výhody) */
.vyhoda{ display:flex; gap:1rem; align-items:flex-start; }
.vyhoda__ikona{
  width:44px; height:44px; flex:none;
  border-radius:12px; background:var(--nebe-slabe); color:var(--brand);
  display:flex; align-items:center; justify-content:center;
}
.tmave .vyhoda__ikona{ background:rgba(255,255,255,.1); color:var(--akcent); }
.vyhoda__ikona svg{ width:22px; height:22px; }
.vyhoda h3{ font-size:1.08rem; margin-bottom:.25em; }
.vyhoda p{ font-size:.94rem; color:var(--ink-slaby); margin:0; }
.tmave .vyhoda p{ color:rgba(255,255,255,.72); }

/* --------------------------------------------------------------------------
   10) ROZCESTNÍK „CO ŘEŠÍTE?" — signature interakce
   -------------------------------------------------------------------------- */
.rozcestnik{
  background:var(--bila);
  border:1px solid var(--linka);
  border-radius:var(--r-velky);
  padding:clamp(1.25rem,.8rem + 1.6vw,2.25rem);
  box-shadow:var(--stin);
}
.rozcestnik__chipy{
  display:flex; flex-wrap:wrap; gap:.55rem;
  list-style:none;
}
.chip{
  font-size:.94rem; font-weight:500;
  padding:.6rem 1.05rem;
  border-radius:100px;
  border:1px solid var(--linka);
  background:var(--papir);
  cursor:pointer;
  transition:all var(--prechod);
  text-align:left;
}
.chip:hover{ border-color:var(--brand-svetla); color:var(--brand); }
.chip[aria-selected="true"]{
  background:var(--brand); color:#fff; border-color:var(--brand);
  box-shadow:0 8px 20px -12px rgba(0,119,192,.9);
}
.rozcestnik__panel{
  margin-top:1.5rem;
  border-top:1px dashed var(--linka);
  padding-top:1.5rem;
  display:grid; gap:1.25rem;
}
.rozcestnik__panel[hidden]{ display:none; }
.rozcestnik__panel.je-prepnuty{ animation:vjezd .35s cubic-bezier(.22,.61,.36,1); }
.rozcestnik__stitek{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--akcent);
}
.rozcestnik__panel h3{ margin:.35rem 0 .5rem; }
.rozcestnik__panel p{ color:var(--ink-slaby); font-size:1rem; }
.rozcestnik__kroky{ list-style:none; display:grid; gap:.5rem; margin:.5rem 0 0; }
.rozcestnik__kroky li{ display:flex; gap:.6rem; font-size:.95rem; align-items:flex-start; }
.rozcestnik__kroky svg{ width:1.05rem; height:1.05rem; color:var(--brand); flex:none; margin-top:.28rem; }
@media (min-width:64rem){
  .rozcestnik__panel{ grid-template-columns:1.3fr .9fr; align-items:start; gap:2.5rem; }
}
@media (max-width:30rem){
  .rozcestnik__chipy{ gap:.45rem; }
  .chip{ font-size:.86rem; padding:.5rem .8rem; }
}
@keyframes vjezd{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:none; } }

/* --------------------------------------------------------------------------
   11) KROKY / PRŮBĚH
   -------------------------------------------------------------------------- */
.kroky{
  counter-reset:krok;
  list-style:none;
  display:grid; gap:0;
  max-width:46rem;
}
.kroky li{
  position:relative;
  padding:0 0 2.25rem 4.25rem;
}
.kroky li:last-child{ padding-bottom:0; }

/* kolečko s pořadím */
.kroky li::before{
  counter-increment:krok;
  content:"0" counter(krok);
  position:absolute; left:0; top:0;
  font-family:var(--mono); font-size:.85rem; font-weight:500;
  color:var(--brand);
  width:2.9rem; height:2.9rem;
  border:1px solid var(--linka); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--bila);
  z-index:1;
  transition:background var(--prechod), color var(--prechod), border-color var(--prechod);
}
.kroky li.viditelne::before{
  background:var(--brand); color:#fff; border-color:var(--brand);
}

/* spojnice — kreslí se shora dolů, až když se krok objeví */
.kroky li::after{
  content:"";
  position:absolute; left:1.45rem; top:2.9rem; bottom:0;
  width:2px; margin-left:-1px;
  background:var(--linka);
  transform:scaleY(0); transform-origin:top;
  transition:transform .55s cubic-bezier(.22,.61,.36,1) .12s;
}
.kroky li.viditelne::after{ transform:scaleY(1); }
.kroky li:last-child::after{ display:none; }

.kroky h3{ font-size:1.15rem; margin:.45rem 0 .25rem; }
.kroky p{ font-size:.97rem; color:var(--ink-slaby); margin:0; max-width:52ch; }

.tmave .kroky li::before{ background:var(--brand-tmava); border-color:rgba(255,255,255,.28); color:var(--akcent-svetly); }
.tmave .kroky li.viditelne::before{ background:var(--akcent); border-color:var(--akcent); color:#fff; }
.tmave .kroky li::after{ background:rgba(255,255,255,.2); }
.tmave .kroky p{ color:rgba(255,255,255,.72); }

@media (prefers-reduced-motion: reduce){
  .kroky li::after{ transform:scaleY(1); }
}

/* --------------------------------------------------------------------------
   12) KLIENTSKÁ KARTA / CENOVÉ BOXY
   -------------------------------------------------------------------------- */
.tarify{ display:grid; gap:1rem; }
.tarif{
  border:1px solid rgba(255,255,255,.18);
  border-radius:var(--r-velky);
  padding:1.5rem;
  background:rgba(255,255,255,.05);
}
.tarif h3{ font-size:1.15rem; margin-bottom:.15em; }
.tarif__cena{
  font-family:var(--display); font-size:2rem; color:var(--akcent); line-height:1.1;
  display:block; margin:.4rem 0 .3rem;
}
.tarif__pozn{ font-size:.85rem; color:rgba(255,255,255,.65); margin:0; }
@media (min-width:48rem){ .tarify{ grid-template-columns:repeat(3,1fr); } }

.seznam-fajfky{ list-style:none; display:grid; gap:.6rem; }
.seznam-fajfky li{ display:flex; gap:.65rem; align-items:flex-start; font-size:.97rem; }
.seznam-fajfky svg{ width:1.1rem; height:1.1rem; flex:none; margin-top:.28rem; color:var(--brand); }
.tmave .seznam-fajfky svg{ color:var(--akcent); }

/* --------------------------------------------------------------------------
   13) TÝM
   -------------------------------------------------------------------------- */
/* Základní monogram — používá se i v recenzích a u vizitek lékařů */
.clen__monogram{
  width:56px; height:56px; border-radius:50%; flex:none;
  background:linear-gradient(140deg, var(--nebe), var(--nebe-slabe));
  color:var(--brand);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--display); font-weight:600; font-size:1.15rem;
  letter-spacing:.02em;
}

.tym{
  display:grid; gap:1.25rem; list-style:none;
  grid-template-columns:repeat(2,1fr);
}
@media (min-width:48rem){ .tym{ grid-template-columns:repeat(3,1fr); } }

/* Karta člena týmu není proklik — hover by sliboval akci, která nepřijde. */
.clen{
  background:var(--bila); border:1px solid var(--linka);
  border-radius:var(--r-velky); overflow:hidden;
  display:flex; flex-direction:column;
}

.clen__foto{
  aspect-ratio:1/1;
  background:linear-gradient(150deg, var(--nebe) 0%, var(--nebe-slabe) 100%);
  display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden;
}
.clen__foto img{ width:100%; height:100%; object-fit:cover; object-position:center 18%; }

/* zástupná grafika, dokud klient nedodá portréty */
.clen__foto .clen__monogram{
  width:auto; height:auto; background:none;
  font-size:clamp(1.6rem, 1rem + 2.2vw, 2.4rem);
  color:var(--brand); letter-spacing:.04em; z-index:1;
}
.clen__foto .znacka-vodoznak{
  position:absolute; right:-14%; bottom:-16%;
  width:64%; height:auto; color:var(--brand);
  opacity:.09; pointer-events:none;
}

.clen__telo{ padding:1.05rem 1.15rem 1.25rem; display:flex; flex-direction:column; gap:.28rem; }
.clen strong{ font-size:1.02rem; line-height:1.3; }
.clen__telo span{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.07em;
  text-transform:uppercase; color:var(--ink-slaby); line-height:1.4;
}

/* --------------------------------------------------------------------------
   14) GALERIE
   -------------------------------------------------------------------------- */
.galerie{ display:grid; gap:.85rem; grid-template-columns:repeat(2,1fr); }
@media (min-width:48rem){ .galerie{ grid-template-columns:repeat(3,1fr); gap:1rem; } }
.galerie figure{
  position:relative; overflow:hidden; border-radius:var(--r);
  aspect-ratio:1/1; background:var(--nebe-slabe);
}
.galerie--siroka figure{ aspect-ratio:3/2; }
.galerie img{ width:100%; height:100%; object-fit:cover; }
/* Popisek leží na fotce a je vidět vždy — hover-only varianta je na dotykových
   zařízeních neviditelná. Fotky nikam nevedou, takže na hover nereagují. */
.galerie figcaption{
  position:absolute; left:0; right:0; bottom:0;
  padding:2rem .9rem .75rem;
  background:linear-gradient(to top, rgba(4,57,94,.82) 15%, rgba(4,57,94,0));
  color:#fff;
  font-family:var(--mono); font-size:.74rem; letter-spacing:.06em;
  text-transform:uppercase; line-height:1.3;
}

/* --------------------------------------------------------------------------
   15) RECENZE
   -------------------------------------------------------------------------- */
.recenze{
  background:var(--bila); border:1px solid var(--linka);
  border-radius:var(--r-velky); padding:1.6rem;
  display:flex; flex-direction:column; gap:1rem;
}
.hvezdy{ display:flex; gap:.15rem; color:var(--akcent); }
.hvezdy svg{ width:1rem; height:1rem; }
.recenze blockquote{ margin:0; font-size:1rem; line-height:1.6; }
.recenze__autor{ margin-top:auto; display:flex; align-items:center; gap:.7rem; }
.recenze__autor .clen__monogram{ width:40px; height:40px; font-size:.95rem; }
.recenze__autor strong{ display:block; font-size:.92rem; }
.recenze__autor span{ font-size:.78rem; color:var(--ink-slaby); font-family:var(--mono); }

/* --------------------------------------------------------------------------
   16) TABULKA CENÍKU
   -------------------------------------------------------------------------- */
.cenik-blok{
  background:var(--bila); border:1px solid var(--linka);
  border-radius:var(--r-velky); overflow:hidden; margin-bottom:1.5rem;
}
.cenik-blok > h3{
  margin:0; padding:1.15rem 1.35rem;
  background:var(--nebe-slabe); color:var(--brand);
  font-size:1.1rem;
}
.cenik-blok table{ font-size:.96rem; }
.cenik-blok td{ padding:.85rem 1.35rem; border-top:1px solid var(--linka); vertical-align:top; }
.cenik-blok td:last-child{
  text-align:right; white-space:nowrap; font-family:var(--mono);
  font-size:.92rem; font-weight:500; color:var(--brand);
}
.cenik-blok__pozn{
  padding:.9rem 1.35rem; font-size:.85rem; color:var(--ink-slaby);
  border-top:1px solid var(--linka); background:var(--papir);
}
@media (max-width:36rem){
  .cenik-blok td{ padding:.75rem 1rem; }
  .cenik-blok td:last-child{ font-size:.88rem; }
}

/* --------------------------------------------------------------------------
   17) FAQ
   -------------------------------------------------------------------------- */
.faq{ max-width:52rem; margin-inline:auto; }
.faq details{
  border-bottom:1px solid var(--linka);
  padding:.35rem 0;
}
.faq summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.1rem .25rem;
  font-family:var(--display); font-weight:600; font-size:1.08rem;
  transition:color var(--prechod);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary:hover{ color:var(--brand); }
.faq summary::after{
  content:""; flex:none;
  width:20px; height:20px;
  background:
    linear-gradient(currentColor,currentColor) center/100% 2px no-repeat,
    linear-gradient(currentColor,currentColor) center/2px 100% no-repeat;
  color:var(--brand);
  transition:transform .28s cubic-bezier(.22,.61,.36,1);
}
.faq details[open] summary::after{ transform:rotate(135deg); }
/* Rozbalení: grid 0fr→1fr je jediný způsob, jak animovat neznámou výšku bez JS. */
.faq__obal{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .38s cubic-bezier(.22,.61,.36,1);
}
/* Otevřený stav řídí skript (viz web.js) — bez něj musí obsah zůstat vidět. */
.faq details[open] .faq__obal{ grid-template-rows:1fr; }
.faq.je-ozivene details[open] .faq__obal{ grid-template-rows:0fr; }
.faq__odpoved{
  overflow:hidden;
  color:var(--ink-slaby); font-size:.98rem; max-width:62ch;
  opacity:0; transform:translateY(-4px);
  transition:opacity .3s ease .06s, transform .3s ease .06s;
}
.faq details[open] .faq__odpoved{ opacity:1; transform:none; }
.faq.je-ozivene details[open] .faq__odpoved{ opacity:0; transform:translateY(-4px); }
.faq.je-ozivene details.je-otevrene .faq__obal{ grid-template-rows:1fr; }
.faq.je-ozivene details.je-otevrene .faq__odpoved{ opacity:1; transform:none; }
.faq__odpoved > *:first-child{ padding-top:.15rem; }
.faq__odpoved > *:last-child{ padding-bottom:1.25rem; }

/* --------------------------------------------------------------------------
   18) FORMULÁŘ
   -------------------------------------------------------------------------- */
.formular{ display:grid; gap:1rem; }
.pole{ display:grid; gap:.4rem; }
.pole label{ font-size:.88rem; font-weight:600; cursor:pointer; }
.pole label span{ color:var(--brand-svetla); }
.pole input,.pole select,.pole textarea{
  width:100%; padding:.85rem 1rem;
  border:1px solid var(--linka); border-radius:12px;
  background:var(--bila);
  transition:border-color var(--prechod), box-shadow var(--prechod);
  font-size:1rem;
}
.pole input:focus,.pole select:focus,.pole textarea:focus{
  outline:none; border-color:var(--brand-svetla);
  box-shadow:0 0 0 3px rgba(78,168,222,.16);
}
.pole.je-chybne input,.pole.je-chybne select,.pole.je-chybne textarea{ border-color:#C0574B; }
.pole textarea{ min-height:7rem; resize:vertical; }

/* Vlastní šipka selectu — nativní chevron se nedá nastylovat */
.pole__vyber{ position:relative; }
.pole__vyber::after{
  content:"";
  position:absolute; right:1rem; top:50%;
  width:.55rem; height:.55rem;
  margin-top:-.4rem;
  border-right:2px solid var(--brand);
  border-bottom:2px solid var(--brand);
  transform:rotate(45deg);
  pointer-events:none;
  transition:transform var(--prechod);
}
.pole__vyber:focus-within::after{ transform:rotate(225deg); margin-top:-.15rem; }
.pole__vyber select{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  padding-right:2.6rem; cursor:pointer;
}
.pole__vyber select::-ms-expand{ display:none; }

/* Vlastní checkbox */
.souhlas{ cursor:pointer; }
.souhlas input[type="checkbox"]{
  position:absolute; opacity:0; width:1.35rem; height:1.35rem; margin:0;
  cursor:pointer;
}
.souhlas__box{
  width:1.35rem; height:1.35rem; flex:none; margin-top:.1rem;
  border:1.5px solid var(--linka); border-radius:6px;
  background:var(--bila);
  display:flex; align-items:center; justify-content:center;
  color:#fff;
  transition:background var(--prechod), border-color var(--prechod), box-shadow var(--prechod);
}
.souhlas__box svg{ width:.85rem; height:.85rem; opacity:0; transform:scale(.6); transition:opacity .18s, transform .18s; }
.souhlas:hover .souhlas__box{ border-color:var(--brand-svetla); }
.souhlas input:checked ~ .souhlas__box{ background:var(--brand); border-color:var(--brand); }
.souhlas input:checked ~ .souhlas__box svg{ opacity:1; transform:scale(1); }
.souhlas input:focus-visible ~ .souhlas__box{ box-shadow:0 0 0 3px rgba(78,168,222,.3); }
.souhlas.je-chybne .souhlas__box{ border-color:#C0574B; }
.souhlas a{ color:var(--brand); }
.pole--dve{ display:grid; gap:1rem; }
@media (min-width:40rem){ .pole--dve{ grid-template-columns:1fr 1fr; } }
.souhlas{ display:flex; gap:.7rem; align-items:flex-start; font-size:.85rem; color:var(--ink-slaby); position:relative; }
.medvedi-past{ position:absolute; left:-9999px; opacity:0; height:0; overflow:hidden; }
.hlaska{
  padding:1rem 1.15rem; border-radius:12px; font-size:.95rem;
  background:rgba(47,163,107,.1); border:1px solid rgba(47,163,107,.3);
}
.hlaska--chyba{ background:rgba(192,87,75,.1); border-color:rgba(192,87,75,.3); }

/* --------------------------------------------------------------------------
   19) KONTAKTNÍ BLOK / MAPA
   -------------------------------------------------------------------------- */
.kontakt-mrizka{ display:grid; gap:2rem; }
@media (min-width:64rem){ .kontakt-mrizka{ grid-template-columns:1fr 1fr; gap:3.5rem; } }
.kontakt-radek{
  display:flex; gap:.9rem; align-items:flex-start;
  padding:.9rem 0; border-bottom:1px solid var(--linka);
}
.kontakt-radek:last-child{ border-bottom:0; }
.kontakt-radek svg{ width:1.25rem; height:1.25rem; color:var(--brand); flex:none; margin-top:.2rem; }
.kontakt-radek strong{ display:block; font-size:.8rem; text-transform:uppercase; letter-spacing:.1em; font-family:var(--mono); color:var(--ink-slaby); font-weight:500; margin-bottom:.15rem; }
.kontakt-radek a{ text-decoration:none; font-size:1.05rem; font-weight:600; }
.kontakt-radek a:hover{ color:var(--brand); }

.hodiny{ list-style:none; display:grid; gap:.15rem; }
.hodiny li{
  display:flex; justify-content:space-between; gap:1rem;
  padding:.55rem .75rem; border-radius:8px;
  font-size:.95rem;
}
.hodiny li:nth-child(odd){ background:var(--papir-2); }
.hodiny li.je-dnes{ background:var(--brand); color:#fff; font-weight:600; }
.hodiny li span:first-child{ font-family:var(--mono); font-size:.85rem; letter-spacing:.06em; text-transform:uppercase; }

.mapa{
  border-radius:var(--r-velky); overflow:hidden;
  border:1px solid var(--linka); background:var(--nebe-slabe);
  aspect-ratio:16/9;
  max-height:20rem;
}
@media (max-width:40rem){ .mapa{ aspect-ratio:4/3; max-height:16rem; } }
.mapa iframe{ width:100%; height:100%; border:0; display:block; }

/* --------------------------------------------------------------------------
   20) CTA PÁS
   -------------------------------------------------------------------------- */
.cta-pas{
  background:var(--brand);
  color:#fff;
  border-radius:var(--r-velky);
  padding:clamp(2rem,1.2rem + 3vw,3.5rem);
  text-align:center;
  position:relative; overflow:hidden;
}
.cta-pas::after{
  content:""; position:absolute; left:50%; bottom:-60%;
  width:120%; aspect-ratio:2/1; transform:translateX(-50%);
  background:radial-gradient(ellipse at center top, rgba(255,255,255,.14), transparent 65%);
  pointer-events:none;
}
.cta-pas h2{ color:#fff; }
.cta-pas p{ color:rgba(255,255,255,.82); max-width:50ch; margin-inline:auto; }
.cta-pas .tlacitka{ justify-content:center; margin-top:1.75rem; position:relative; z-index:1; }

/* --------------------------------------------------------------------------
   21) PATIČKA
   -------------------------------------------------------------------------- */
.paticka{ background:var(--brand-tmava); color:rgba(255,255,255,.75); padding-block:3.5rem 0; }
.paticka__mrizka{ display:grid; gap:2.5rem; }
@media (min-width:48rem){ .paticka__mrizka{ grid-template-columns:1.4fr 1fr 1fr; gap:3rem; } }
.paticka h4{
  color:#fff; font-family:var(--mono); font-size:.75rem;
  letter-spacing:.14em; text-transform:uppercase; font-weight:500; margin-bottom:1rem;
}
.paticka a{ color:rgba(255,255,255,.75); text-decoration:none; }
.paticka a:hover{ color:#fff; }
.paticka ul{ list-style:none; display:grid; gap:.55rem; font-size:.94rem; }
.paticka__logo img{ height:52px; width:auto; margin-bottom:1rem; }
.paticka__pod{
  margin-top:3rem; padding-block:1.5rem;
  border-top:1px solid rgba(255,255,255,.14);
  display:flex; flex-wrap:wrap; gap:.75rem 1.5rem;
  justify-content:space-between; align-items:center;
  font-size:.82rem;
}
.paticka__pod nav{ display:flex; flex-wrap:wrap; gap:1rem; }

/* --------------------------------------------------------------------------
   22) MOBILNÍ SPODNÍ LIŠTA (konverze)
   -------------------------------------------------------------------------- */
.spodni-lista{
  position:fixed; left:0; right:0; bottom:0; z-index:55;
  display:none; gap:.5rem;
  padding:.6rem var(--gutter) calc(.6rem + env(safe-area-inset-bottom));
  background:rgba(251,252,253,.94);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-top:1px solid var(--linka);
}
.spodni-lista .btn{ flex:1; padding:.8rem 1rem; font-size:.92rem; }
@media (max-width:1200px){
  .spodni-lista{ display:flex; }
  body{ padding-bottom:4.5rem; }
}

/* --------------------------------------------------------------------------
   23) DROBEČKY + HLAVIČKA PODSTRÁNKY
   -------------------------------------------------------------------------- */
.zahlavi{
  background:var(--nebe-slabe);
  padding-block:clamp(2rem,1.2rem + 3vw,3.5rem) clamp(2.5rem,1.5rem + 4vw,4.5rem);
  position:relative; overflow:hidden;
}
/* Dekor záhlaví řeší .dekor--oblouky vkládaný šablonou. */
.drobecky{
  font-family:var(--mono); font-size:.75rem; letter-spacing:.06em;
  color:var(--ink-slaby); margin-bottom:1.25rem;
  display:flex; flex-wrap:wrap; gap:.4rem; list-style:none;
}
.drobecky a{ text-decoration:none; }
.drobecky a:hover{ color:var(--brand); }
.drobecky li:not(:last-child)::after{ content:" /"; opacity:.4; }

.obsah{ max-width:44rem; }
.obsah h2{ margin-top:2.5rem; }
.obsah h3{ margin-top:1.75rem; }
.obsah ul{ list-style:none; display:grid; gap:.55rem; margin:0 0 1.4rem; }
.obsah ul li{ display:flex; gap:.7rem; align-items:flex-start; }
.obsah ul li::before{
  content:""; width:7px; height:7px; border-radius:50%;
  background:var(--brand); flex:none; margin-top:.62rem;
}
/* Odkazy v textu obarvujeme, ale tlačítka a šipkové odkazy si nesou barvu samy —
   bez :not() by tenhle selektor (0,1,1) přebil .btn (0,1,0) a vzniklo by
   modré písmo na modrém pozadí. */
.obsah a:not(.btn):not(.odkaz-sipka){ color:var(--brand); text-underline-offset:3px; }

.rozvrzeni-podstrany{ display:grid; gap:2.5rem; }
@media (min-width:64rem){
  .rozvrzeni-podstrany{ grid-template-columns:1fr 20rem; gap:4rem; align-items:start; }
}
.bocni{ position:sticky; top:100px; display:grid; gap:1.25rem; }
.bocni-box{
  background:var(--bila); border:1px solid var(--linka);
  border-radius:var(--r-velky); padding:1.5rem;
}
.bocni-box h3{ font-size:1.1rem; }
.bocni-box ul{ list-style:none; display:grid; gap:.15rem; margin-top:.75rem; }
.bocni-box ul a{
  display:block; padding:.42rem 0; border-radius:8px;
  text-decoration:none; font-size:.93rem; color:var(--ink-slaby);
  transition:color var(--prechod), padding-left var(--prechod), background var(--prechod);
}
.bocni-box ul a:hover{ color:var(--brand); padding-left:.55rem; }
.bocni-box ul a[aria-current="page"]{
  background:var(--nebe-slabe); color:var(--brand); font-weight:600;
  padding-inline:.65rem;
}
/* V bočním boxu uvnitř rozcestníku jde o krátký seznam „Kam dál" —
   žádné vodorovné odsazení, ať odkazy lícují s nadpisem. */
.rozcestnik .bocni-box ul a[aria-current="page"]{ padding-inline:0; }

/* --------------------------------------------------------------------------
   24) REVEAL PŘI SCROLLU
   -------------------------------------------------------------------------- */
/* Odkrývání používá samostatnou vlastnost `translate`, ne `transform`.
   Kdyby šlo o transform, přepsalo by `.odkryv.viditelne{transform:none}`
   hover efekty karet (stejná specificita, ale pozdější pozice v souboru)
   a karty by se při najetí myší přestaly zvedat. */
/* Skrývá se jen když běží JS — jinak by prvek nikdo neodkryl a obsah
   by zůstal navždy neviditelný. */
.js .odkryv{ opacity:0; translate:0 18px; }
.js .odkryv.viditelne{ opacity:1; translate:0 0; }

/* --------------------------------------------------------------------------
   25) DROBNOSTI
   -------------------------------------------------------------------------- */
.nahrada-obrazku{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.6rem;
  width:100%; height:100%; min-height:8rem;
  background:
    linear-gradient(150deg, var(--nebe) 0%, var(--nebe-slabe) 100%);
  color:var(--brand);
  font-family:var(--mono); font-size:.74rem; letter-spacing:.08em;
  text-transform:uppercase;
  text-align:center; padding:1.25rem;
}
.nahrada-obrazku::before{
  content:""; width:26px; height:26px; opacity:.35;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Ccircle cx='8.5' cy='9.5' r='1.5'/%3E%3Cpath d='M21 15l-5-5L5 20'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Ccircle cx='8.5' cy='9.5' r='1.5'/%3E%3Cpath d='M21 15l-5-5L5 20'/%3E%3C/svg%3E") center/contain no-repeat;
}
.jen-pro-cteni{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap;
}
.pruh-oznameni{
  background:var(--brand); color:#fff;
  font-size:.86rem; text-align:center;
  padding:.6rem var(--gutter);
}
.pruh-oznameni a{ color:#fff; font-weight:600; text-underline-offset:3px; }

/* --------------------------------------------------------------------------
   26) OMEZENÍ POHYBU
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .odkryv{ opacity:1; translate:none; }
}

/* ==========================================================================
   27) LOGO — inline SVG sprite
   Jedno logo, barva přes currentColor. Varianty:
   #logo-plne (se claimem), #logo (bez claimu), #znacka (jen symbol)
   ========================================================================== */
.logo{
  display:inline-flex; align-items:center; gap:.6rem;
  color:var(--brand); text-decoration:none; flex:none;
}
.logo svg{ display:block; height:auto; }
.logo__znacka{ width:34px; flex:none; }
.logo__slovo{ width:124px; flex:none; }
.logo__lockup{ width:168px; }
.paticka .logo,
.tmave .logo{ color:#fff; }
@media (max-width:26rem){
  .logo__slovo{ width:104px; }
  .logo__znacka{ width:30px; }
}

/* Přepínač jazyka — rozbalovací, aby unesl libovolný počet mutací.
   Seznam se plní v šabloně; přidání jazyka je jeden řádek. */
.jazyky{ position:relative; flex:none; }
.jazyky__spousteni{
  display:inline-flex; align-items:center; gap:.4rem;
  border:1px solid var(--linka); border-radius:100px;
  background:var(--bila);
  padding:.42rem .7rem .42rem .8rem;
  font-family:var(--mono); font-size:.75rem; font-weight:500; letter-spacing:.06em;
  color:var(--ink); cursor:pointer;
  transition:border-color var(--prechod), color var(--prechod);
}
.jazyky__spousteni:hover{ border-color:var(--brand-svetla); color:var(--brand); }
.jazyky__spousteni svg{ width:.6rem; height:.6rem; opacity:.65; transition:transform var(--prechod); }
.jazyky.je-otevrena .jazyky__spousteni{ border-color:var(--brand); color:var(--brand); }
.jazyky.je-otevrena .jazyky__spousteni svg{ transform:rotate(180deg); }

.jazyky__seznam{
  position:absolute; top:calc(100% + .4rem); right:0;
  min-width:11rem;
  background:var(--bila);
  border:1px solid var(--linka);
  border-radius:var(--r);
  box-shadow:var(--stin);
  padding:.35rem;
  list-style:none;
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .2s, transform .2s, visibility .2s;
  z-index:70;
}
.jazyky.je-otevrena .jazyky__seznam{ opacity:1; visibility:visible; transform:translateY(0); }
.jazyky__volba{
  display:flex; align-items:center; gap:.6rem;
  padding:.5rem .6rem; border-radius:8px;
  text-decoration:none; font-size:.9rem; color:var(--ink-slaby);
  transition:background var(--prechod), color var(--prechod);
}
.jazyky__volba:hover{ background:var(--nebe-slabe); color:var(--brand); }
.jazyky__volba abbr{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.06em;
  color:var(--brand); background:var(--nebe-slabe);
  border-radius:100px; padding:.14rem .42rem;
  text-decoration:none; border:0;
}
.jazyky__volba[aria-current="true"]{ color:var(--brand); font-weight:600; }
.jazyky__volba[aria-current="true"] abbr{ background:var(--brand); color:#fff; }
.jazyky__volba[aria-disabled="true"]{ opacity:.45; pointer-events:none; }

/* Na mobilu je přepínač součástí rozbaleného menu, ne horní lišty. */
.navigace .jazyky{ display:none; }
@media (max-width:1200px){
  .navigace .jazyky{ display:block; margin-top:1.5rem; }
  .navigace .jazyky__spousteni{ width:100%; justify-content:space-between; padding:.8rem 1rem; font-size:.85rem; }
  .navigace .jazyky__seznam{ right:auto; left:0; width:100%; }
}

.znacka-dekor{
  width:2.5rem; height:2.5rem; color:var(--brand);
  opacity:.9; flex:none;
}

/* ==========================================================================
   28) PÁS S ÚHRADOU POJIŠŤOVNOU — klíčová informace, opakuje se
   ========================================================================== */
.pojistovna{
  display:flex; gap:.85rem; align-items:flex-start;
  background:var(--nebe-slabe);
  border:1px solid rgba(0,119,192,.22);
  border-left:3px solid var(--brand);
  border-radius:var(--r);
  padding:1rem 1.15rem;
  font-size:.95rem;
}
.pojistovna svg{ width:1.35rem; height:1.35rem; color:var(--brand); flex:none; margin-top:.1rem; }
.pojistovna strong{ display:block; margin-bottom:.15rem; }
.pojistovna p{ margin:0; color:var(--ink-slaby); }
.tmave .pojistovna{
  background:rgba(255,255,255,.07);
  border-color:rgba(255,255,255,.18);
  border-left-color:var(--akcent-svetly);
}
.tmave .pojistovna svg{ color:var(--akcent-svetly); }
.tmave .pojistovna p{ color:rgba(255,255,255,.75); }

/* ==========================================================================
   29) KONTAKTNÍ KANÁLY — telefon / e-mail / WhatsApp / Medevio / formulář
   ========================================================================== */
.kanaly{ display:grid; gap:.85rem; list-style:none; }
@media (min-width:40rem){ .kanaly{ grid-template-columns:repeat(2,1fr); } }
.kanal{
  display:flex; gap:1.1rem; align-items:center;
  background:var(--bila); border:1px solid var(--linka);
  border-radius:var(--r-velky); padding:1.25rem 1.35rem;
  text-decoration:none; color:inherit; height:100%;
  transition:transform var(--prechod), box-shadow var(--prechod), border-color var(--prechod);
}
.kanal:hover{ transform:translateY(-3px); box-shadow:var(--stin-hover); border-color:var(--brand-svetla); }
.kanal__ikona{
  width:52px; height:52px; flex:none; border-radius:14px;
  background:var(--nebe-slabe); color:var(--brand);
  display:flex; align-items:center; justify-content:center;
}
.kanal__ikona svg{ width:25px; height:25px; }
.kanal--whatsapp .kanal__ikona{ background:rgba(37,211,102,.12); color:#1FAE54; }
.kanal--medevio .kanal__ikona{ background:rgba(0,167,157,.12); color:var(--akcent); }
.kanal strong{
  display:block; font-size:1.12rem; line-height:1.3;
  margin-bottom:.15rem; color:var(--ink);
}
.kanal span span{ font-size:.88rem; color:var(--ink-slaby); line-height:1.35; display:block; }

/* ==========================================================================
   30) ROZCESTNÍK OBTÍŽÍ — mřížka odkazů na podstránky (urogynekologie ap.)
   ========================================================================== */
.obtize{ display:grid; gap:.75rem; list-style:none; counter-reset:obtiz; }
@media (min-width:40rem){ .obtize{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:64rem){ .obtize{ grid-template-columns:repeat(3,1fr); } }
.obtiz{
  display:flex; gap:.85rem; align-items:flex-start;
  background:var(--bila); border:1px solid var(--linka);
  border-radius:var(--r); padding:1.05rem 1.15rem;
  text-decoration:none; color:inherit; height:100%;
  transition:transform var(--prechod), box-shadow var(--prechod), border-color var(--prechod);
}
.obtiz:hover{ transform:translateY(-3px); box-shadow:var(--stin-hover); border-color:var(--brand-svetla); }
.obtiz::before{
  counter-increment:obtiz; content:counter(obtiz,decimal-leading-zero);
  font-family:var(--mono); font-size:.72rem; color:var(--brand);
  background:var(--nebe-slabe); border-radius:8px;
  width:2rem; height:2rem; flex:none;
  display:flex; align-items:center; justify-content:center;
}
.obtiz strong{ font-size:.98rem; font-weight:600; line-height:1.35; display:block; }
.obtiz span{ font-size:.85rem; color:var(--ink-slaby); display:block; margin-top:.2rem; }

/* ==========================================================================
   31) OBSAH PODSTRÁNKY — doplňky
   ========================================================================== */
.obsah ol{ list-style:none; counter-reset:polozka; display:grid; gap:.7rem; margin:0 0 1.4rem; }
.obsah ol li{ display:flex; gap:.8rem; align-items:flex-start; }
.obsah ol li::before{
  counter-increment:polozka; content:counter(polozka) ".";
  font-family:var(--mono); font-size:.85rem; color:var(--brand);
  flex:none; min-width:1.4rem; padding-top:.1rem;
}
.obsah > .pojistovna{ margin:2rem 0; }
.obsah table{ font-size:.95rem; margin:0 0 1.5rem; }
.obsah table td{ padding:.7rem .9rem; border-top:1px solid var(--linka); }

.ramecek{
  background:var(--papir-2); border:1px solid var(--linka);
  border-radius:var(--r-velky); padding:1.5rem;
  margin:2rem 0;
}
.ramecek > :first-child{ margin-top:0; }
.ramecek h3{ margin-top:0; }
.ramecek--upozorneni{
  background:rgba(0,119,192,.05);
  border-color:rgba(0,119,192,.2);
}

/* Souvisejicí stránky na konci obsahu */
.souvisejici{ margin-top:2.5rem; padding-top:1.5rem; border-top:1px solid var(--linka); }
.souvisejici h3{ font-size:1rem; margin-bottom:.85rem; }
.souvisejici ul{ display:flex; flex-wrap:wrap; gap:.5rem; list-style:none; margin:0; }
.souvisejici ul li::before{ display:none; }
.souvisejici a{
  display:inline-block; padding:.45rem .9rem;
  background:var(--nebe-slabe); color:var(--brand);
  border-radius:100px; font-size:.88rem; text-decoration:none;
  transition:background var(--prechod);
}
.souvisejici a:hover{ background:var(--nebe); }

/* Lékař — vizitka v obsahu */
.lekar{
  display:flex; gap:1rem; align-items:center;
  background:var(--bila); border:1px solid var(--linka);
  border-radius:var(--r); padding:1rem 1.15rem; margin-bottom:.75rem;
}
.lekar .clen__monogram{ width:46px; height:46px; font-size:1rem; }
.lekar strong{ display:block; font-size:.97rem; line-height:1.3; }
.lekar span{ font-size:.83rem; color:var(--ink-slaby); }

/* ==========================================================================
   32) SMLUVNÍ POJIŠŤOVNY — heslovitý výčet uvnitř informačního pruhu
   ========================================================================== */
.pojistovny{
  list-style:none;
  display:flex; flex-wrap:wrap; gap:.4rem;
  margin:.85rem 0 0;
}
.pojistovny li{
  display:inline-flex; align-items:center; gap:.4rem;
  background:var(--bila);
  border:1px solid rgba(0,119,192,.22);
  border-radius:100px;
  padding:.28rem .7rem .28rem .5rem;
  font-size:.86rem; font-weight:600;
  color:var(--brand-tmava);
  white-space:nowrap;
}
.pojistovny li span{
  font-family:var(--mono); font-size:.72rem; font-weight:500;
  color:var(--brand);
  background:var(--nebe-slabe);
  border-radius:100px;
  padding:.1rem .38rem;
}
.pojistovna__pozn{
  font-size:.82rem !important;
  margin-top:.7rem !important;
  opacity:.85;
}
.tmave .pojistovny li{
  background:rgba(255,255,255,.1);
  border-color:rgba(255,255,255,.2);
  color:#fff;
}
.tmave .pojistovny li span{
  background:rgba(255,255,255,.14);
  color:var(--akcent-svetly);
}

/* ==========================================================================
   33) KONTAKTNÍ FORMULÁŘ NA STRÁNCE KONTAKT
   Bez orámování — vedle kontaktních kanálů by dva boxy vedle sebe soupeřily.
   ========================================================================== */
.formular-blok{ display:block; }
.formular-blok > h3{ font-size:clamp(1.4rem,1.1rem+1vw,1.85rem); font-family:var(--display); margin-bottom:.4rem; }
.formular-blok > p{ color:var(--ink-slaby); font-size:.96rem; max-width:46ch; }
.formular-blok .formular{ margin-top:1.5rem; }

/* ==========================================================================
   34) PŘECHODY — jednotné chování všech stavů
   Poslední sekce záměrně: přebíjí dílčí deklarace u jednotlivých komponent,
   takže všechny stavy (hover, focus, aktivní, rozbalený) mají stejnou
   rychlost i křivku a nikde nedochází ke skoku.

   Pozn.: `transition: all` je vědomé rozhodnutí kvůli konzistenci. Cenou je,
   že prohlížeč sleduje víc vlastností. Na webu této velikosti je to zanedbatelné,
   ale kdyby se sem někdy přidal těžký interaktivní prvek (mapa, plátno,
   dlouhý seznam s překreslováním), je lepší mu dát vlastní výčet vlastností.
   ========================================================================== */
/* Seznam obsahuje jen prvky, které skutečně mění stav — proklikatelné prvky
   a formulářová pole. Statické bloky (karty týmu, fotky v galerii, řádky
   ceníku) tu záměrně nejsou: přechod bez stavu je mrtvý kód. */
a,
button,
summary,
input,
select,
textarea,
.btn,
.chip,
a.karta,
.karta-obor,
.karta-obor__media img,
.obtiz,
.kanal,
.souhlas,
.souhlas__box,
.souhlas__box svg,
.jazyky__spousteni,
.jazyky__spousteni svg,
.jazyky__volba,
.navigace__odkaz,
.navigace__odkaz svg,
.podmenu,
.podmenu a,
.bocni-box ul a,
.odkaz-sipka,
.odkaz-sipka svg,
.souvisejici a,
.drobecky a,
.kontakt-radek a,
.paticka a,
.prepinac,
.prepinac span,
.prepinac span::before,
.prepinac span::after,
.faq summary,
.faq summary::after,
.pole input,
.pole select,
.pole textarea,
.pole__vyber::after,
/* stavy řízené skriptem, ne myší */
.tecka-zivo,
.kroky li::before{
  transition:all var(--prechod);
}

/* Karta oboru je proklik, takže přiblížení fotky má smysl — jen pomalejší,
   rychlý zoom u obrázku působí trhaně. */
.karta-obor__media img{ transition:transform var(--prechod-pomaly); }

/* Prvky s vlastní delší animací, kde by jednotná rychlost byla na škodu. */
.navigace{ transition:transform .35s var(--krivka); }
.faq__obal{ transition:grid-template-rows .38s var(--krivka); }
.faq__odpoved{
  transition:opacity .3s var(--krivka) .06s, transform .3s var(--krivka) .06s;
}
.kroky li::after{ transition:transform .55s var(--krivka) .12s; }

/* Odkrývání při scrollu. Odstupňované zpoždění platí jen dokud je prvek
   skrytý — jinak by se stejné zpoždění projevilo i při najetí myší. */
.odkryv{ transition:opacity .55s var(--krivka), translate .55s var(--krivka); }
.odkryv:not(.viditelne){ transition-delay:calc(var(--i, 0) * 60ms); }

/* Proklikatelné prvky se po odkrytí vracejí k jednotné rychlosti stavů.
   Statické bloky (karta týmu, recenze) tu nejsou — žádný stav nemají. */
a.odkryv.viditelne,
.karta-obor.viditelne,
.obtiz.viditelne,
.kanal.viditelne{ transition:all var(--prechod); }

/* Obrys fokusu se objevuje stejně rychle jako ostatní stavy. Kdyby měl někdy
   naskakovat okamžitě, patří sem `outline-color` mimo `all` — pravidlo
   `:focus-visible` samotné by nestačilo, přebijí ho selektory komponent. */

@media (prefers-reduced-motion: reduce){
  .odkryv{ transition:none; opacity:1; translate:none; }
}

/* ==========================================================================
   35) NÁJEZD PŘI NAČTENÍ A PŘI SCROLLU

   Dvě různé situace, dvě různá řešení:

   a) `.nabeh` — obsah viditelný hned po otevření stránky (hero, záhlaví
      podstránky). Nemá smysl čekat na scroll, spouští se animací rovnou.
   b) `[data-postupne]` a `.odkryv` — obsah níže na stránce, který se odkrývá
      až když na něj přijde řada při scrollování.

   Obojí se skrývá jen tehdy, když běží JS (třída `js` na <html>, nastavená
   skriptem v hlavičce). Bez JS zůstane všechno normálně vidět a nic se
   neztratí — a protože se třída přidává ještě před vykreslením, obsah
   ani neproblikne.
   ========================================================================== */
.js .nabeh > *{
  opacity:0;
  translate:0 22px;
  animation:najezd .62s var(--krivka) forwards;
  animation-delay:calc(var(--zpozdeni, 0ms) + var(--i, 0) * 70ms);
}
.js .nabeh--pozdeji{ --zpozdeni:160ms; }

@keyframes najezd{
  to{ opacity:1; translate:0 0; }
}

/* Pořadí položek — každá vyjede o kousek později než ta předchozí. */
.js .nabeh > *:nth-child(1){ --i:0; }
.js .nabeh > *:nth-child(2){ --i:1; }
.js .nabeh > *:nth-child(3){ --i:2; }
.js .nabeh > *:nth-child(4){ --i:3; }
.js .nabeh > *:nth-child(5){ --i:4; }
.js .nabeh > *:nth-child(6){ --i:5; }
.js .nabeh > *:nth-child(n+7){ --i:6; }

/* Fotka v heru je jeden velký blok — vyjede jako celek, o něco později. */
.js .hero__media.nabeh > *{ animation-duration:.75s; }

/* Postupné odkrývání delšího obsahu. Skrytí je řízené z rodiče, ať potomci
   nemusí mít třídu už v HTML a nemůže dojít k probliknutí.
   `:not(.viditelne)` je nutné: tohle pravidlo stojí na konci souboru, takže
   by jinak při shodné specificitě přebilo `.odkryv.viditelne` a obsah by
   po odkrytí zůstal průhledný. */
.js [data-postupne] > *:not(.viditelne){ opacity:0; translate:0 18px; }

@media (prefers-reduced-motion: reduce){
  .js .nabeh > *,
  .js [data-postupne] > *{
    opacity:1; translate:none; animation:none;
  }
}

/* ==========================================================================
   36) DOPLŇKOVÁ GRAFIKA V POZADÍ SEKCÍ

   Záměrně velmi tlumená (3–7 % krytí). Má vyplnit prázdná místa a udržet
   motiv značky, ne přitáhnout pozornost — jakmile si jí čtenář všimne dřív
   než textu, je moc výrazná.

   Nosič má vždy `pointer-events:none` a `aria-hidden`, takže nezasahuje
   do ovládání ani do čteček. Sekce s dekorem musí mít `overflow:hidden`,
   jinak by grafika přesahující okraj vytvořila vodorovné posouvání.
   ========================================================================== */
.sekce,
.zahlavi,
.hero{ overflow:hidden; }

.dekor{
  position:absolute;
  pointer-events:none;
  user-select:none;
  z-index:0;
  color:var(--brand);
}
/* Na barevném podkladu musí být dekor bílý — jinak splyne s pozadím.
   CTA pás má značkovou modrou, takže patří sem stejně jako tmavé sekce. */
.tmave .dekor,
.cta-pas .dekor{ color:#fff; }

/* obsah sekce musí zůstat nad dekorem */
.sekce > .obal,
.zahlavi > .obal,
.hero > .obal{ position:relative; z-index:1; }

/* --- umístění ---
   „vpravo" drží u horního okraje, „vlevo" u spodního. V dlouhé sekci tak
   dvojice dekorů rámuje obsah shora i zdola. */
.dekor--vpravo{ top:-4rem; right:-6rem; }
.dekor--vlevo{ top:auto; bottom:-5rem; left:-6rem; }

/* Hero — grafika drží u levého okraje, aby se nepřekrývala s fotkou vpravo,
   a je posazená nízko, kde by jinak zůstalo prázdné místo pod statistikami. */
.dekor--hero-vlevo{
  top:50%; left:-14rem;
  translate:0 -50%;
  width:min(40rem, 46vw);
}
.dekor--hero-dole{
  bottom:-3rem; left:30%;
  width:min(22rem, 26vw);
}
@media (max-width:64rem){
  .dekor--hero-dole{ display:none; }
  .dekor--hero-vlevo{ left:-20rem; }
}

/* Ikony a tečky jsou drobná kresba — při velkém přesahu by zůstala mimo
   sekci jen useknutá torza, proto se drží blíž u okraje. */
.dekor--ikony.dekor--vpravo{ top:3rem; right:2rem; }
.dekor--ikony.dekor--vlevo{ bottom:3rem; left:2rem; }
.dekor--tecky.dekor--vpravo{ top:-2rem; right:-3rem; }
.dekor--tecky.dekor--vlevo{ bottom:-2rem; left:-3rem; }
/* Značka je uzavřený tvar — při velkém přesahu by z ní zbyl nečitelný útržek. */
.dekor--znacka.dekor--vpravo{ top:-1.5rem; right:-2rem; }
.dekor--znacka.dekor--vlevo{ bottom:-1.5rem; left:-2rem; }

/* --- 1) soustředné oblouky (stejný tvar jako fotky) --- */
.dekor--oblouky{
  width:min(34rem, 55vw); aspect-ratio:1;
  opacity:1;
}
.dekor--oblouky .dekor__oblouk{
  position:absolute; inset:0;
  border:1.5px solid currentColor;
  border-radius:50% 50% var(--r) var(--r) / 50% 50% var(--r) var(--r);
  opacity:.2;
}
.dekor--oblouky .dekor__oblouk:nth-child(2){ inset:14%; opacity:.15; }
.dekor--oblouky .dekor__oblouk:nth-child(3){ inset:28%; opacity:.1; }
.tmave .dekor--oblouky .dekor__oblouk{ opacity:.26; }
.tmave .dekor--oblouky .dekor__oblouk:nth-child(2){ opacity:.19; }
.tmave .dekor--oblouky .dekor__oblouk:nth-child(3){ opacity:.13; }

/* --- 2) síť teček --- */
.dekor--tecky{
  width:min(30rem, 50vw); aspect-ratio:1;
  background-image:radial-gradient(currentColor 1.5px, transparent 1.5px);
  background-size:20px 20px;
  opacity:.24;
  mask-image:radial-gradient(closest-side, #000 25%, transparent 100%);
  -webkit-mask-image:radial-gradient(closest-side, #000 25%, transparent 100%);
}
.tmave .dekor--tecky{ opacity:.3; }

/* --- 3) rozptýlené ikony oborů --- */
.dekor--ikony{
  width:min(24rem, 40vw); aspect-ratio:1;
  opacity:.16;
}
.tmave .dekor--ikony{ opacity:.2; }
.dekor__ikona{ position:absolute; display:block; }
.dekor__ikona svg{ width:100%; height:100%; stroke-width:1.3; }
.dekor__ikona--1{ width:32%; top:6%;  left:10%; rotate:-8deg; }
.dekor__ikona--2{ width:26%; top:38%; left:52%; rotate:6deg; }
.dekor__ikona--3{ width:22%; top:66%; left:16%; rotate:-4deg; }
.dekor__ikona--4{ width:18%; top:14%; left:66%; rotate:10deg; }

/* --- 4) vodoznak značky --- */
.dekor--znacka{
  width:min(17rem, 28vw); aspect-ratio:1;
  opacity:.09;
}
.tmave .dekor--znacka{ opacity:.15; }
.cta-pas .dekor--znacka{ opacity:.16; }
.dekor--znacka svg{ width:100%; height:100%; fill:currentColor; }

/* Na malých displejích jde dekor pryč — v úzkém sloupci by se pral
   s textem a jen by zvyšoval množství vykreslované plochy. */
@media (max-width:48rem){
  .dekor{ display:none; }
}

@media (prefers-reduced-motion: reduce){
  .dekor{ opacity:.04; }
}