/* Kindent — komponenty: tlačítka, karty, hero rozcestník, cookie lišta */

/* ---------- CTA řádek: primární xdent tlačítko + telefon jako druhá volba ---------- */
.cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin-top: var(--space-2);
}

.cta-row .btn--ghost {
  font-weight: var(--fw-medium);
  color: var(--color-grey);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cta-row .btn--ghost:hover {
  color: var(--color-turquoise-deep);
}

/* Telefon v hero CTA (dentalni-hygiena, zubni-ordinace): celý text "nebo
   zavolejte +420 724 202 103" se na mobilu nevejde vedle tlačítka
   Objednat se a zalomí se pod něj. Klient chce číslo vždy vpravo od
   tlačítka, ne pod ním — na mobilu proto zobrazíme jen samotné číslo
   (odkaz i tak zůstává rozklikávací "tel:" na celou dobu), od 768px, kde
   je na řádek dost místa, se vrátí plný text "nebo zavolejte …". */
.cta-row__phone-label {
  display: none;
}

@media (min-width: 768px) {
  .cta-row__phone-label {
    display: inline;
  }
}

/* ---------- Kroky léčby (číslované) ---------- */
.step-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-4);
}

.step {
  display: flex;
  gap: var(--space-3);
}

/* Ikona místo číslice — bledé kolečko s "1"/"2" působilo jako placeholder.
   Plný tyrkysový podklad + bílá ikona čte jako záměrný grafický prvek. */
.step__number {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-turquoise-deep);
  color: #fff;
}

.step__number svg {
  width: 22px;
  height: 22px;
}

.step h3 {
  margin-bottom: 0.4rem;
}

/* ---------- Jednoduchý odrážkový seznam výsledků/přínosů ---------- */
.check-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.check-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
}

.check-list li svg {
  flex-shrink: 0;
  margin-top: 0.2rem;
  color: var(--color-turquoise-deep);
}

/* ---------- Tlačítka ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.9rem 1.6rem;
  border-radius: var(--radius-pill);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-small);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--duration-base) var(--ease-out),
              color var(--duration-base) var(--ease-out),
              transform var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out);
  min-height: 44px;
}

.btn--primary {
  background: var(--color-cta-bg);
  color: var(--color-cta-text);
  box-shadow: var(--shadow-sm);
}

.btn--primary:hover {
  background: var(--color-cta-bg-hover);
  box-shadow: var(--shadow-md);
}

.btn--primary:active {
  transform: scale(0.97);
}

.btn--outline {
  background: transparent;
  color: var(--color-ink);
  border: 1.5px solid var(--color-ink);
}

.btn--outline:hover {
  background: var(--color-ink);
  color: #fff;
}

.btn--ghost {
  background: transparent;
  color: var(--color-ink);
  padding-inline: 0.25rem;
}

.btn--ghost:hover {
  color: var(--color-turquoise-deep);
}

.btn--block {
  width: 100%;
}

/* ---------- Hero (homepage rozcestník) ---------- */
.hero {
  padding-block: var(--space-6) var(--space-5);
}

/* Hlavní claim homepage — záměrně Poppins Medium, lehčí než tučný nápis
   v headeru (ten musí zůstat vizuálně silnější). Ostatní H1 na webu
   zůstávají Poppins Bold dle base.css. */
.hero h1 {
  font-weight: var(--fw-medium);
}

.hero__eyebrow {
  display: inline-block;
  color: var(--color-turquoise-deep);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: var(--fs-small);
  margin-bottom: var(--space-2);
}

.hero__lead {
  font-size: 1.125rem;
  max-width: 60ch;
  margin-top: var(--space-2);
}

/* Parodontitida: dlouhý úvodní odstavec bez jakéhokoli obrázku vedle sebe
   působí na mobilu jako "zeď textu" — o kousek menší písmo jen na mobilu
   (klientovo přání), desktop beze změny. Necháno na --fs-body (16px),
   tedy na spodní hranici čitelnosti, ne níž. */
@media (max-width: 767px) {
  .hero__lead--small-mobile {
    font-size: var(--fs-body);
  }
}

/* Dvě velké vstupní karty — hlavní nástroj wayfindingu na homepage */
.path-grid {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-5);
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .path-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.path-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.35rem;
  min-height: 360px;
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background-color: var(--color-ink);
  background-repeat: no-repeat;
  background-size: cover;
  text-decoration: none;
  color: #fff;
  box-shadow: var(--shadow-md);
  transition: transform var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out);
}

@media (min-width: 640px) {
  .path-card { min-height: 420px; }
}

@media (min-width: 1024px) {
  .path-card { min-height: 480px; }
}

/* Ztmavení fotky místo stínu pod písmem (na přání klienta).
   50 % černé není odhad: změřeno na obou fotkách ve středním pásu dlaždice,
   kde nově sedí text — bílý text tam vychází nad 5:1 v 95 % plochy, tedy
   s rezervou nad hranicí 4,5:1 pro drobné písmo. Při 45 % už hygiena
   klesala na 4,35:1, což by na podnadpis nestačilo.
   Vrstva je ::before, ne gradient v background-image — fotky se mění na
   dvou breakpointech u dvou dlaždic, tohle je jedno pravidlo místo čtyř. */
.path-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  /* 55 %, ne 50: obě současné fotky jsou světlé (bílé stěny, lampa,
     šedé skříňky) a při 50 % padal bílý text na 4,47:1 u hygieny
     a 4,81:1 u zubní — kolem hranice 4,5. Při 55 % je to 5,3:1 a 5,7:1.
     Jedna hodnota pro obě dlaždice, rozdíl 5 % okem stejně není znát. */
  background: rgba(0, 0, 0, 0.55);
  pointer-events: none;
}


/* Obsah musí být nad ztmavovací vrstvou — ::before je sice dřív v pořadí
   vykreslování, ale jen mezi pozicovanými prvky. */
.path-card > * {
  position: relative;
}

/* Menší foto na mobil, větší od tabletu, ať se zbytečně nestahuje foto
   v plné kráse na malý displej. Čitelnost textu řeší rovnoměrné ztmavení
   v .path-card::before výš; světlá varianta (prosvětlená fotka, tmavý
   text) byla vyzkoušena a zamítnuta, viz commit 72e0ed5. */
/* Na mobilu je dlaždice mnohem nižší/širší (viz .path-card--big), takže
   se ze stejné portrétové fotky ořízne mnohem víc — se stejným % jako na
   desktopu vychází obličej níž a blíž tlačítku. Na mobilu proto použijeme
   vyšší % (posune viditelný výřez níž ve zdrojové fotce → subjekt vyjde
   výš v rámci dlaždice). Od 768px, kde je dlaždice vyšší/užší, zůstávají
   původní hodnoty, tam už to sedí. */
/* Hygiena: IMG_1032 (na přání klienta), upravená verze z ZUBNI WEB FOTKY.
   Fotka je na šířku 4:3, dlaždice na výšku — cover použije celou výšku
   a ořízne strany, proto pozice na střed (lampa, zrcadlo a křeslo jsou
   uprostřed). Upravená verze existuje jen v 1448x1086; RAW originál
   (8064x6048) je neupravený a vypadá jinak, tak větší verze zatím není. */
.path-card--hygiena {
  background-image: url('/assets/img/hygiena/tile-hygiena-700.jpg');
  background-position: center;
}

/* Zubní péče: portrét MDDr. Kindlové u mikroskopu (na přání klienta).
   Subjekt je člověk, takže výřez musí sedět na postavu, ne na prostor.

   Na mobilu má dlaždice na šířku (kolem 402x320 CSS px), zdroj je ale
   portrét 2:3 — cover proto ořezával skoro dvě třetiny výšky a hlava
   vycházela těsně nad horní hranou, na nižším displeji už uříznutá
   (klient poslal screen z iPhonu 16 Pro). Posouvání background-position
   to nespraví: níž posazený výřez sice hlavu ukáže, ale zároveň přisune
   bradu k nápisu, což klient reklamoval dřív.
   Řešením je vlastní mobilní výřez: pruh 5:4 ze středu originálu, kde je
   celá hlava s rezervou nad ní a pod ní tělo po stehna. Cover z něj pak
   ořezává jen pár procent a background-position může být prostě střed. */
.path-card--ordinace {
  background-image: url('/assets/img/ordinace/tile-ordinace-mobil-600.jpg');
  background-position: center;
}

@media (min-width: 768px) {
  .path-card--hygiena {
    background-image: url('/assets/img/hygiena/tile-hygiena-1400.jpg');
  }
  .path-card--ordinace {
    background-image: url('/assets/img/ordinace/tile-ordinace-1400.jpg');
    background-position: center 30%;
  }
}

/* Retina telefony dostanou velkou verzi taky. Dlaždice je na mobilu sice
   úzká (kolem 400 CSS px), ale při DPR 3 z ní displej kreslí ~1200
   fyzických pixelů — verze -700 má 466-700px, takže se roztahovala
   zhruba 2,5x a byla viditelně měkká. Rozhoduje hustota displeje, ne
   šířka dlaždice, proto min-resolution a ne další breakpoint.
   Výřez (background-position) zůstává mobilní, mění se jen soubor. */
@media (max-width: 767px) and (min-resolution: 1.5dppx) {
  .path-card--hygiena {
    background-image: url('/assets/img/hygiena/tile-hygiena-1400.jpg');
  }
  .path-card--ordinace {
    background-image: url('/assets/img/ordinace/tile-ordinace-mobil-1200.jpg');
  }
}

.path-card:hover {
  box-shadow: var(--shadow-lg);
}

/* Skutečná příčina, proč se dřív dlaždice po najetí myší nezvětšovala:
   .js .reveal.is-visible (layout.css) má specificitu 3 tříd a nastavuje
   transform: translateY(0) — na stejnou vlastnost jako hover, ale silněji,
   takže hover transform vždycky prohrál. Řešení: vyšší specificita zde. */
.path-card.reveal.is-visible:hover {
  transform: scale(1.03) translateY(-4px);
}

.path-card__icon {
  width: 52px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  flex-shrink: 0;
  margin-bottom: var(--space-1);
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
}

.path-card__icon svg {
  width: 26px;
  height: 26px;
}

/* Bez text-shadow — čitelnost drží ztmavená fotka (viz .path-card::before). */
.path-card h2 {
  font-size: var(--fs-h3);
  color: #fff;
}

.path-card p {
  color: #fff;
}

.path-card__cta {
  margin-top: 0.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: var(--fw-semibold);
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.path-card__cta svg {
  width: 18px;
  height: 18px;
  transition: transform var(--duration-base) var(--ease-out);
}

.path-card:hover .path-card__cta svg {
  transform: translateX(4px);
}

/* ---------- Minimalistická homepage — jen 2 velké dlaždice ----------
   Klient chce na úvodní stránce jen jasnou volbu, žádný další text.
   Skutečné tlačítko (ne jen podtržený text jako .path-card__cta), ať je
   akce nepřehlédnutelná. */
/* Na mobilu se dlaždice řadí pod sebe (viz .path-grid), takže tu nechceme
   70vh minimum ani velké dlaždice — obě se musí vejít na obrazovku bez
   scrollování. Vyšší/60vh varianta až od 768px, kde už sedí vedle sebe. */
/* Rozcestník = dvě dlaždice přes celou plochu (na přání klienta, mobil
   i desktop). Sekce nemá žádný vertikální padding a .container tu nesmí
   nic omezovat — jinak by na širokém monitoru zůstal krémový rám kolem
   dlaždic (container--wide má strop 1440px). */
.hero--minimal {
  padding-block: 0;
  display: flex;
  align-items: center;
}

.hero--minimal .container {
  max-width: none;
  padding-inline: 0;
}

.path-grid--big {
  margin-top: 0;
  width: 100%;
}

/* Obsah dlaždice na střed — vodorovně i svisle (na přání klienta).
   .path-card má justify-content:flex-end (text dole), tady ho přebíjíme. */
.path-card--big {
  min-height: 220px;
  padding: var(--space-4);
  justify-content: center;
  align-items: center;
  text-align: center;
}

/* Tlačítko má v .path-card__enter align-self:flex-start, jinak by se
   od vycentrovaného textu odlepilo doleva. */
.path-card--big .path-card__enter {
  align-self: center;
  margin-top: var(--space-3);
}

/* Podnadpisy obou dlaždic musí zabírat stejně místa, jinak si nesednou
   nadpisy a tlačítka na stejnou výšku (klient: "není to esteticky pěkné").
   Rezervujeme dva řádky i tomu kratšímu. */
/* Nadpis má rezervované dva řádky, takže obě dlaždice mají stejnou vnitřní
   geometrii i tam, kde se "Dentální hygiena" zalomí a "Zubní péče" ne.
   Bez toho si nesednou tlačítka na stejnou výšku. */
.path-card--big h2 {
  min-height: 2lh;
}

/* Výška dlaždic na mobilu. Rozcestník nemá hlavičku (na přání klienta
   odstraněna), takže dvě dlaždice vyplní celý displej — každá jeho
   polovinu. Počítá se z výšky displeje, ne pevným číslem: pevná hodnota
   by na menším telefonu druhou dlaždici odsunula pod okraj.
     Jednotka je lvh, a stálo to tři kola u klienta, tak proč:
     - svh (viewport s rozbalenými lištami) je na iPhonu moc malé — Safari
       si do něj počítá i spodní lištu, takže pod dlaždicemi vykukovala
       patička (661px proti 791px reálně viděným).
     - dvh (co je právě vidět) sedělo při načtení, ale rostlo během
       scrollování, jak si Safari lištu sbalilo — dlaždice se před očima
       zvětšovaly. Zmrazení té hodnoty skriptem to sice zastavilo, ale
       patička se vrátila.
     - protáhnout jen spodní dlaždici pod lištu bylo ještě horší: byla
       pak vidět vyšší než horní a cover z vyššího rámu jinak zvětšil
       fotku, takže nadpis padal Kindlové přes obličej.
     lvh je výška stránky se zataženými lištami, tedy celá plocha displeje.
     Je statická (nescrolluje se s ní), obě dlaždice z ní dostanou stejný
     díl a patička spadne pod okraj. Daň: dokud si prohlížeč lištu nesbalí,
     je spodek druhé dlaždice za ní — ale je to jen její pozadí, nadpis
     ani tlačítko tam nesahají.
   max(260px, …) drží rozumné minimum na hodně nízkých displejích.
   Prohlížeč bez podpory svh celé pravidlo zahodí a zůstane mu 220px výš. */
@media (max-width: 767px) {
  /* Rovnost se pocitá z plochy POD hlavičkou, ne z celého displeje:
     hlavička leží přes horní dlaždici, takže při stejné výšce obou by
     z té horní bylo vidět o 93px míň (klient: "horní dlaždice se o velikost
     hlavičky zmenšila"). Spodní dlaždice proto dostane půlku zbytku... */
  .path-card--big {
    /* svh jako záloha pro prohlížeče bez lvh; lvh o řádek níž ji přebije. */
    min-height: max(260px, calc((100svh - var(--vyska-hlavicky-home)) / 2));
    min-height: max(260px, calc((100lvh - var(--vyska-hlavicky-home)) / 2));
  }

  /* ...a horní je o výšku hlavičky vyšší a o tolik víc odsazená shora.
     Viditelná část i vycentrovaný obsah pak u obou sedí na stejné míře.
     Cíleno na :first-child, ne na konkrétní sekci — je to dlaždice pod
     hlavičkou, ne zrovna hygiena. */
  .path-grid--bleed .path-card--big:first-child {
    min-height: calc(max(260px, (100svh - var(--vyska-hlavicky-home)) / 2)
                     + var(--vyska-hlavicky-home));
    min-height: calc(max(260px, (100lvh - var(--vyska-hlavicky-home)) / 2)
                     + var(--vyska-hlavicky-home));
    padding-top: calc(var(--space-4) + var(--vyska-hlavicky-home));
  }

  /* grid-auto-rows:1fr tu být nesmí — srovnal by obě řady na stejnou výšku
     a tím by celý výpočet výš zrušil. (Dřív tu byl kvůli různě dlouhým
     podnadpisům, ty už na dlaždicích nejsou.) */
}

/* Od 768px stojí dlaždice vedle sebe a každá má celou výšku displeje. */
@media (min-width: 768px) {
  .path-card--big {
    min-height: 100svh;
    min-height: 100lvh;
    /* Mezi 768 a 1024 jsou dlaždice úzké — 48px odsazení tam nechávalo
       textu jen 260px a nadpis "Dentální hygiena" se lámal na dva řádky,
       zatímco "Zubní péče" zůstala na jednom. */
    padding: var(--space-4);
  }
}

@media (min-width: 1024px) {
  .path-card--big {
    padding: var(--space-5);
  }
}

/* Dlaždice přes celou plochu (na přání klienta): bez zaoblených rohů, bez
   stínu a bez mezery mezi sebou — na mobilu pod sebou, od 768px vedle sebe.
   Odsazení .containeru tu není (viz .hero--minimal .container výš), takže
   žádné záporné marginy. */
.path-grid--bleed {
  gap: 0;
}

.path-grid--bleed .path-card {
  border-radius: 0;
  box-shadow: none;
}

/* Zvětšení při hoveru by u dlaždice přes celou plochu přeteklo mimo
   displej. Stejná specificita jako původní pravidlo, vyhrává pořadím
   v souboru. Hover pořád ukazuje tlačítko (viz .path-card__enter). */
.path-grid--bleed .path-card.reveal.is-visible:hover {
  transform: translateY(0);
}

/* Nájezd zdola (.reveal posouvá o 16px) se u obou dlaždic nerozjede
   na milisekundu stejně, takže mezi dlaždicemi bez mezery na okamžik
   probleskne spára. Proto jen prolnutí, bez posunu. */
.js .path-grid--bleed .path-card.reveal {
  transform: none;
}

.path-card--big h2 {
  font-size: var(--fs-h2);
}

/* Na mobilu je nadpis dlaždice o polovinu větší (na přání klienta).
   Jen do 767px — na desktopu zůstává --fs-h2 jako u zbytku webu. */
@media (max-width: 767px) {
  /* Postupně 1.5x -> 1.05x -> 0.95x, jak si klient velikost doladil.
     Na 375px to dělá 27px. */
  .path-card--big h2 {
    font-size: calc(var(--fs-h2) * 0.95);
    line-height: 1.15;
    /* Rezerva dvou řádků je tu jen kvůli šířkám, kde se jeden nadpis
       vejde na řádek a druhý ne. Pod 768px jsou oba vždy na jednom
       řádku, takže by dělala jen prázdné místo pod nadpisem — což byla
       přesně ta "mezera mezi nadpisem a podnadpisem". */
    min-height: 0;
  }

  /* Odstup tlačítka od nadpisu nese jeho vlastní margin-top. */
  .path-card--big {
    gap: 0;
  }
}

.path-card__enter {
  margin-top: var(--space-2);
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 0.5rem;
  /* Jen obrys, bez bílé výplně (na přání klienta). Bílý text i obrys
     drží na ztmavené fotce přes 5:1, stejně jako zbytek textu v dlaždici. */
  background: transparent;
  color: #fff;
  border: 2px solid #fff;
  font-weight: var(--fw-semibold);
  /* Větší než dřív: bez podnadpisu je tlačítko jediná věc vedle nadpisu
     a po odlehčení "Objednat se" v hlavičce je nejsilnějším prvkem stránky
     — velikost teď nese hierarchii, ne výplň. */
  font-size: 1.0625rem;
  padding: 1rem 2.25rem;
  border-radius: var(--radius-pill);
  transition: transform var(--duration-base) var(--ease-out),
              background-color var(--duration-base) var(--ease-out),
              border-color var(--duration-base) var(--ease-out),
              color var(--duration-base) var(--ease-out);
}

.path-card__enter svg {
  width: 18px;
  height: 18px;
  transition: transform var(--duration-base) var(--ease-out);
}

.path-card.reveal.is-visible:hover .path-card__enter {
  transform: translateX(4px);
  background: rgba(255, 255, 255, 0.18);
}

/* Nadpis "Moderní zubní péče v příjemném prostředí" se i s text-wrap:balance
   láme na mobilu kvůli délce jednotlivých slov do 4 řádků, zbytečně tak roste
   a tlačí dvojici fotek pod hero mimo viditelnou plochu displeje. Na mobilu
   proto nadpis o kousek zmenšíme (od 768px se vrací na běžnou škálu --fs-h1). */
.hero__title--compact {
  font-size: 1.875rem;
}

@media (min-width: 768px) {
  .hero__title--compact {
    font-size: var(--fs-h1);
  }
}

/* Sekce hned pod hero (dentalni-hygiena, zubni-ordinace): mnohem blíž
   k hero než výchozích 64px (klient: "zbytečná mezera"), ale ne na nulu.
   Při nule zbývalo nad nadpisem "Co u nás ošetříme" jen 8px, zatímco pod
   ním 32px — nadpis pak opticky patřil k fotkám nad sebou místo
   k dlaždicím pod sebou. Teď je nad ním 24px a pod ním 16px. */
.hero-next--tight-mobile {
  padding-top: var(--space-2);
}

@media (min-width: 768px) {
  .hero-next--tight-mobile {
    padding-top: var(--space-3);
  }
}

/* Mezera podnadpis -> obsah (oba ceníky): pod 768px na 0 (výchozí
   responzivní padding ze "section" se jinak nedá přebít jedním číslem,
   proto max-width, ne min-width — od 768px výš se nic nedeklaruje a
   uplatní se výchozí --space-6/--space-7). Od 768px byla i tak zbytečně
   velká (96px), tak zkrácena zvlášť na polovinu (space-4). */
@media (max-width: 767px) {
  .section-top--tight {
    padding-top: 0;
  }
}

@media (min-width: 768px) {
  .section-top--tight {
    padding-top: var(--space-4);
  }
}

/* Dlaždice mají sedět hned pod podnadpisem, na horní hraně barevného
   pruhu (klient: "velká mezera mezi podnadpisem a dlaždicemi").
   Ne na nulu — při nule se horní zaoblené rohy první karty ořežou
   o hranu pruhu. 16px = stejné odsazení, jaké má karta po stranách.
   Zmenšen i spodek, aby mezi poslední kartou a patičkou nebylo prázdno. */
.section--band-tight {
  padding-top: var(--space-2);
  padding-bottom: var(--space-4);
}

/* Mřížka uvnitř má vlastní odstup shora (--space-4), který se k paddingu
   sekce jen přičítal — dohromady 48px místo zamýšlených 16. */
.section--band-tight .service-grid {
  margin-top: 0;
}

/* Odstup pruhu od hero sekce. Musí mít stejnou specificitu (0,3,2) jako
   pravidlo s margin-top:2cm v layout.css — vyhrává pořadím, protože
   components.css se načítá později. */
main.alt-hygiena:not(.no-stripe) > section.section--band-tight,
main.alt-ordinace:not(.no-stripe) > section.section--band-tight {
  margin-top: var(--space-3);
}

/* Mezera podnadpis -> dlaždice týmu (obě stránky Náš tým): na mobilu na 0,
   klient hlásil "opravdu velký prostor" (bylo 120px: 24 hero + 64 padding
   sekce + 32 margin mřížky; ten margin je pryč úplně, viz .team-grid).
   Na desktopu se záměrně nic nedeklaruje — sekce s týmem je tam barevný
   pruh a jeho odstup od hero byl doladěn v dřívějším kole (margin 2cm,
   viz layout.css), takže by se to tady přebíjelo naslepo. */
@media (max-width: 767px) {
  .section-top--tight-mobile {
    /* Ne na nulu: sekce s týmem je barevný pruh a při nule se horní
       zaoblené rohy první karty ořízly o jeho hranu — karta vypadala,
       že z pruhu vypadává. var(--space-2) = stejné odsazení jako má
       karta po stranách (--container-pad), takže sedí v pruhu rovnoměrně. */
    padding-top: var(--space-2);
  }
}

/* Zubní péče, sekce "Co u nás ošetříme": tlačítko "Prohlédnout všechny
   služby a ceny" se na mobilu skrývá, ale zbylý spodní padding sekce by
   pak byl neopodstatněná mezera před další sekcí — proto se na mobilu
   zároveň zkracuje na 0. Na desktopu (kde tlačítko zůstává) beze změny. */
@media (max-width: 767px) {
  .section-bottom--tight-mobile {
    padding-bottom: 0;
  }
}

/* Obecná utilita: skrýt prvek jen na mobilu, na desktopu beze změny. */
@media (max-width: 767px) {
  .hide-mobile {
    display: none;
  }
}

/* Tlačítko v CTA řádku vycentrovat jen na mobilu (parodontitida). */
@media (max-width: 767px) {
  .cta-row--center-mobile {
    justify-content: center;
  }
}

/* Fotka v textu: na mobilu přes celou šířku (ať je detail vidět),
   od 768px zpět na polovinu, jak byla. */
.media-band--half-desktop {
  max-width: 100%;
}

/* Zdrojová fotka je na výšku (2:3). Výchozí výřez 16:10 z ní na mobilu
   ukazoval jen triko a ruce — ne to, co hygienistka dělá. Čtvercový
   výřez zabere zhruba 83–750 px z 1000 px výšky originálu, takže je
   vidět i nástroj a pacient. Od 768px zůstává původní 16:10. */
@media (max-width: 767px) {
  /* dvě třídy — ".media-band img" je v souboru níž, při stejné
     specificitě by vyhrálo pořadím */
  .media-band.media-band--half-desktop img {
    aspect-ratio: 1 / 1;
  }
}

@media (min-width: 768px) {
  .media-band--half-desktop {
    max-width: 50%;
  }
}

/* Kotvy na /zubni-ordinace/sluzby/ — hlavička je sticky (101 px na mobilu
   i desktopu), bez odsazení by nadpis po skoku skončil schovaný pod ní.
   120 px = výška hlavičky + ~20 px vzduchu. */
[id^="sluzba-"] {
  scroll-margin-top: 120px;
}

/* Mezera header -> H1 v hero sekci: na mobilu zkrácena o polovinu (klient:
   nadpis má být víc "namačknutý" na horní lištu), ne na nulu — nadpis by
   jinak lepil přímo na header. Použito plošně na hero sekce podstránek. */
@media (max-width: 767px) {
  .hero-top--half-mobile {
    padding-top: var(--space-4);
  }
}

/* ---------- Dvojice fotek vedle hero textu (styl původního webu) ----------
   Fotky drženy blízko u sebe, stejně velké, ostré rohy, bez stínu — a
   textový sloupec dostává většinu místa (1fr), aby se nadpis nezalamoval
   do útlých řádků. Dvojice fotek má naopak pevný strop (viz grid níže),
   takže se nenatahuje do zbylého volného místa. */
.hero-photo-pair {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  /* Vlastní margin-top zrušen — mezeru nad dvojicí fotek už dává grid gap
     rodiče (.statement, viz níže), takže tohle byla nechtěná dvojitá
     mezera navrch. Pod 1024px je .statement jednosloupcový (fotky pod
     textem), gap tam funguje jako svislý odstup mezi nimi. */
  margin-top: 0;
}

/* Pod 1024px je .statement jednosloupcový — jeho gap (--space-4, 32px)
   tak funguje jako svislá mezera mezi hero textem a dvojicí fotek pod
   ním. Spolu se zrušeným margin-top na .hero-photo-pair (viz výš) to
   dělalo dvojitou mezeru; teď je to jediný zdroj a zkrácený na polovinu
   (klient: fotky ať se vejdou hned při načtení stránky). Od 1024px, kde
   .statement přejde na 2 sloupce vedle sebe, gap slouží jako vodorovná
   mezera mezi textem a fotkami — tam beze změny. */
@media (max-width: 1023px) {
  .statement.hero-split--wide-photos {
    gap: var(--space-3);
  }
}

/* Textový sloupec je 1fr (flexibilní, dostane většinu místa), dvojice
   fotek má pevný strop — proto se text nezalamuje divně a fotky se
   nenatahují přes celou zbylou šířku.
   Selektor musí mít vyšší specificitu než ".statement" samotné (řádek ~352
   v tomto souboru), jinak by při stejné specificitě vyhrálo podle pořadí
   v souboru ono, ne tohle pravidlo. */
@media (min-width: 1024px) {
  .statement.hero-split--wide-photos {
    grid-template-columns: minmax(0, 1fr) minmax(0, 480px);
  }
}

/* flex: 1 1 0 na "picture" (ne width:50% na "img") — obě fotky tak vyjdou
   spolehlivě stejně široké bez ohledu na přirozený poměr stran zdrojového
   souboru. Ostré rohy a bez stínu podle referenčního náhledu. */
.hero-photo-pair picture {
  display: block;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  border-radius: var(--radius-lg);
}

.hero-photo-pair picture img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

/* Levá fotka posazená o kousek níž, pravá o kousek výš. Posun patří na
   "picture" (box fotky), ne na "img" — img má overflow:hidden rodiče, takže
   margin na img by ho jen ořízl. */
.hero-photo-pair picture:first-child {
  margin-top: var(--space-6);
}

/* ---------- Obrázkový pás (hero foto) ---------- */
.media-band {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.media-band img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 16 / 10;
}

/* ---------- Brand statement ---------- */
.statement {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  align-items: center;
}

/* minmax(0, 1fr), ne jen 1fr / bez explicitního sloupce vůbec — grid sloupec
   se jinak (i s min-width:0 na položce) roztáhne na šířku nejširšího obsahu
   (třeba tabulky), místo aby širší obsah nechal scrollovat v rámci
   .price-table-wrap. */
.statement > div {
  min-width: 0;
}

@media (min-width: 1024px) {
  .statement {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-6);
  }
}

/* ---------- Feature list (ikony + krátký text) ---------- */
.feature-list {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-4);
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .feature-list {
    grid-template-columns: repeat(3, 1fr);
  }
}

.feature {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.feature__icon {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-turquoise) 22%, white);
  color: var(--color-ink);
  margin-bottom: 0.25rem;
}

.feature__icon svg { width: 24px; height: 24px; }

.feature h3 {
  font-size: 1.05rem;
  font-weight: var(--fw-semibold);
}

.feature p {
  font-size: var(--fs-small);
}

/* ---------- Ceníková tabulka ---------- */
.price-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

/* Na cenik-hygiena je to "ta velká dlaždice, kde je cena" — barevná
   stejným tónem jako ostatní dlaždice v barevných pruzích, i když tahle
   sekce žádný pruh nemá (main.no-stripe). Scoped na alt-hygiena, aby na
   případné ordinační stránce se stejnou třídou nezůstala špatná barva. */
main.alt-hygiena.no-stripe .price-table-wrap {
  background: color-mix(in srgb, var(--color-section-hygiena) 82%, white 18%);
  border-color: transparent;
  box-shadow: var(--shadow-md);
}

.price-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 480px;
}

.price-table th,
.price-table td {
  text-align: left;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--fs-small);
}

.price-table th {
  font-weight: var(--fw-semibold);
  color: var(--color-grey);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.75rem;
}

.price-table td:last-child {
  font-weight: var(--fw-semibold);
  color: var(--color-ink);
  white-space: nowrap;
}

.price-table tbody tr:last-child td {
  border-bottom: none;
}

.price-table__note {
  display: block;
  font-weight: var(--fw-regular);
  color: var(--color-grey);
  font-size: 0.75rem;
  white-space: normal;
}

/* ---------- Ceníkový seznam řádků (bez tabulky, bez scrollu) ----------
   Alternativa k .price-table pro místa, kde by tabulka s min-width:480px
   v užším sloupci vždy skončila horizontálním scrollem ("slider"). Popisek
   a cena sedí normálně na jednom řádku (cena zarovnaná doprava přes
   margin-left:auto); když se popisek nevejde, flex-wrap ho prostě zalomí
   na vlastní řádek nad cenu — nikdy nescrolluje do strany. */
.price-rows {
  margin-top: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

/* Na zubni-ordinace/cenik je to "ta dlaždice s cenovkami" — barevná
   tón-v-tónu stejně jako ostatní dlaždice, i když stránka žádný pruh
   nemá (main.no-stripe). */
main.alt-ordinace.no-stripe .price-rows {
  background: color-mix(in srgb, var(--color-section-ordinace) 82%, white 18%);
  border-color: transparent;
  box-shadow: var(--shadow-md);
}

.price-rows li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border);
}

.price-rows li:last-child {
  border-bottom: none;
}

.price-rows__label {
  flex: 1 1 220px;
  font-size: var(--fs-small);
}

.price-rows__price {
  flex: 0 0 auto;
  margin-left: auto;
  font-weight: var(--fw-semibold);
  color: var(--color-ink);
  font-size: var(--fs-small);
  white-space: nowrap;
}

/* ---------- Obecný zástupný rámeček pro fotku, která ještě chybí ---------- */
.photo-placeholder {
  width: 100%;
  max-width: 320px;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-turquoise) 16%, white);
  border: 1px dashed color-mix(in srgb, var(--color-turquoise-deep) 55%, transparent);
  color: var(--color-turquoise-deep);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  text-align: center;
  padding: var(--space-2);
}

.photo-placeholder svg {
  width: 32px;
  height: 32px;
}

.photo-placeholder span {
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
}

/* ---------- Tým ---------- */
/* Bez margin-top: mřížka je na obou stránkách týmu první v .containeru,
   takže by se jen přičítal k paddingu sekce a dělal mezeru pod podnadpisem
   ještě větší (klient: "ten prostor je opravdu velký"). Odstup nad mřížkou
   řeší padding sekce (.section-top--tight). */
.team-grid {
  display: grid;
  gap: var(--space-4);
  /* minmax(0,…) místo 1fr: bez něj je minimum sloupce min-content,
     takže obsah karty (avatar, dlouhé slovo) dokáže mřížku roztlačit
     přes šířku stránky. */
  grid-template-columns: minmax(0, 1fr);
  /* Karty se nesmí natahovat na výšku souseda — po zavedení roletek by
     rozbalení jedné karty nafouklo i ostatní a nechalo v nich prázdné
     místo (ověřeno: 535 -> 874 px u všech čtyř). */
  align-items: start;
}

@media (min-width: 640px) {
  .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .team-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* Menší mezera než --space-4: každých ušetřených 8px na mezeru
     je +6px na fotku v každé ze čtyř karet. */
  .team-grid { gap: var(--space-3); }
}

/* Tým dentální hygieny (4 lidi). Na mobilu jedna hygienistka pod druhou —
   stejný vzhled jako jediná karta v zubní sekci, na kterou klient odkazoval
   ("pěkně je to udělané u zubní péče"). Dřív tu byly na mobilu dvojice vedle
   sebe se zmenšenou kartou i avatarem; klient to 13. 9. 2026 otočil zpět na
   jeden sloupec, proto ty mobilní výjimky zmizely a platí výchozí .team-grid.
   Od 640px 2 sloupce (z .team-grid), od 1024px všechny 4 v řadě. */
/* Mezi 1024 a 1280 by .team-grid dalo tři sloupce a čtvrtá hygienistka by
   zůstala sama na druhém řádku. Dvě a dvě vypadají vyváženěji. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .team-grid--hygiena {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Čtyři v řadě až od 1280px, ne od 1024px. Mezi 1024 a 1280 vycházel
   sloupec tak úzký, že se fotka zmenšila na 156px a vzdělání se lámalo
   do pěti řádků — dvousloupcové rozložení je tam čitelnější. */
@media (min-width: 1280px) {
  .team-grid--hygiena {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Karty týmu nesou barvu své sekce a barevný pruh za nimi je pryč
   (na přání klienta, viz no-stripe na <main> obou stránek týmu).
   POZOR na čitelnost: na tyrkysu má --color-grey jen 3,1:1 a tyrkysový
   podnadpis dokonce 1,6:1, tedy prakticky neviditelný. Uvnitř barevné
   karty proto všechen text přechází na --color-ink (6,7:1 na tyrkysu,
   7,5:1 na hnědé) a hierarchii nese tučnost místo barvy. */
main.alt-hygiena { --barva-sekce: var(--color-section-hygiena); }
main.alt-ordinace { --barva-sekce: var(--color-section-ordinace); }

.team-card {
  background: var(--barva-sekce, var(--color-surface));
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  padding: var(--space-4);
  text-align: center;
  color: var(--color-ink);
}

/* Pevných 170px avatar drží kolo všude, kde je místo, ale ve čtyřech
   sloupcích kolem 1024px už se do karty nevejde (sloupec 224px minus
   2x32 padding = 160px) a celá stránka pak přetékala do strany.
   max-width + aspect-ratio nechá avatar v těsnu zmenšit a zůstat kulatý. */
.team-card__avatar {
  /* 330px = 255 + 30 % (klient). Vnitřek karty na to ale nestačí — na
     mobilu má 277px a na desktopu se čtyřmi kartami v řadě jen 260px.
     Fotka proto smí přetéct do odsazení karty až k jejím okrajům; text
     pod ní zůstává odsazený jako dřív.

     Postranní margin (100% - šířka) / 2 drží fotku na středu i ve chvíli,
     kdy je širší než vnitřek karty — procentní margin se počítá ze šířky
     vnitřku, takže při přetečení vyjde záporný a přesah je na obou
     stranách stejný. Samotné margin-inline:auto by to nezvládlo, to při
     přetečení spadne na nulu a fotka by utekla doleva. */
  --sirka-fotky: min(330px, calc(100% + var(--space-4) * 2));
  width: var(--sirka-fotky);
  margin-inline: calc((100% - var(--sirka-fotky)) / 2);
  height: auto;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.team-card__avatar img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  object-position: center 20%;
}

/* Dočasný zástupný avatar, dokud nejsou k dispozici portrétní fotky —
   iniciály na tónované ploše ve značkových barvách. */
.team-card__avatar--placeholder {
  background: color-mix(in srgb, var(--color-turquoise) 30%, white);
  color: var(--color-ink);
  font-size: 2.25rem;
  font-weight: var(--fw-bold);
}

.team-card h3 {
  margin-top: var(--space-2);
}

.team-card__role {
  color: var(--color-ink);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-small);
  margin-top: 0.15rem;
}

.team-card__edu {
  font-size: var(--fs-small);
  color: var(--color-ink);
  margin-top: 0.5rem;
}

.team-card p:last-child {
  margin-top: var(--space-2);
  font-size: var(--fs-small);
  text-align: left;
}

/* Karty vedle sebe mají mít stejnou výšku a "Více informací" na stejné
   lince. Nejde to přes align-items:stretch — to by při rozbalení jedné
   roletky nafouklo i ostatní (viz .team-grid výš). Místo toho srovnáme to,
   co se mezi kartami liší: jméno se vejde na jeden nebo dva řádky
   a vzdělání na dva až čtyři. Rezervujeme proto vždy ten nejdelší případ.
   Jednotka lh = jeden řádek daného prvku, takže to drží i při změně písma.
   Jen od 640px, kde karty stojí vedle sebe; na mobilu jsou pod sebou
   a prázdné místo by tam bylo jen na obtíž. */
@media (min-width: 640px) {
  .team-card h3 {
    min-height: 2lh;
  }

  .team-card__edu {
    min-height: 3lh;
  }
}

/* Detail o člověku schovaný pod roletku (stejný princip jako u služeb,
   jen vycentrovaný — karta týmu má text na střed). */
.team-card details {
  margin-top: var(--space-2);
  /* Linka musí být tmavá, ne --color-border: světlá krémová by na
     tyrkysu ani na hnědé nebyla vidět. */
  border-top: 1px solid rgba(35, 39, 42, 0.22);
  padding-top: var(--space-2);
  text-align: left;
}

.team-card summary {
  cursor: pointer;
  font-weight: var(--fw-medium);
  font-size: var(--fs-small);
  color: var(--color-ink);
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}

.team-card summary::-webkit-details-marker {
  display: none;
}

.team-card summary::after {
  content: "+";
  font-size: 1.25rem;
  line-height: 1;
  color: var(--color-ink);
  transition: transform var(--duration-base) var(--ease-out);
  flex-shrink: 0;
}

.team-card details[open] summary::after {
  transform: rotate(45deg);
}

.team-card details p {
  margin-top: var(--space-2);
  font-size: var(--fs-small);
  text-align: left;
}

/* ---------- Service karty (typy dentální hygieny) ---------- */
.service-grid {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-4);
  grid-template-columns: 1fr;
}

/* Jen stránky s rozbalovacím obsahem (typy-dentalni-hygieny, beleni-zubu):
   karty se NESMÍ natahovat na výšku souseda, jinak rozklik jednoho boxu
   opticky "nafoukne" i zavřený vedlejší box (viz komentář u .service-card
   níže). Jinde (zubni-ordinace apod.) naopak chceme karty stejně vysoké,
   takže tam zůstává výchozí stretch. */
.service-grid--indep-height {
  align-items: start;
}

@media (min-width: 768px) {
  .service-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* Konzervační zubní lékařství (5 karet): na desktopu napevno 3 nahoře +
   2 dole, místo auto-fit, které by při širším plátnu udělalo nerovnoměrné
   řady. Pod 1024px necháváme běžné chování .service-grid (1 sloupec na
   mobilu, 2 na tabletu). */
@media (min-width: 1024px) {
  .service-grid--3up {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Menší nadpisy jen na typy-dentalni-hygieny — se standardní --fs-h3 se
   "Pravidelná dentální hygiena – děti" lámalo na dva řádky na desktopu. */
.service-grid--tight-h3 .service-card h3 {
  font-size: var(--fs-h4);
}

.service-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  box-shadow: var(--shadow-md);
}

.service-card__meta {
  color: var(--color-turquoise-deep);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-small);
}

.service-card__meta strong {
  color: var(--color-ink);
}

.service-card__lead {
  font-size: var(--fs-small);
  color: var(--color-grey);
}

/* Statická (natrvalo otevřená) varianta "Co vás čeká" — použito na
   beleni-zubu, kde klient chtěl vidět vše hned bez rozklikávání. */
.service-card-info {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-2);
}

.service-card-info__label {
  font-weight: var(--fw-medium);
  color: var(--color-ink);
}

.service-card-info p {
  margin-top: var(--space-2);
  font-size: var(--fs-small);
}

.service-card-info p + p {
  margin-top: var(--space-2);
}

/* Rozbalovací (<details>/<summary>) varianta — vrácena zpět na
   typy-dentalni-hygieny na přání (tam se rozbalování líbilo). */
.service-card details {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-2);
}

.service-card summary {
  cursor: pointer;
  font-weight: var(--fw-medium);
  color: var(--color-ink);
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.service-card summary::-webkit-details-marker {
  display: none;
}

.service-card summary::after {
  content: "+";
  font-size: 1.25rem;
  line-height: 1;
  color: var(--color-turquoise-deep);
  transition: transform var(--duration-base) var(--ease-out);
  flex-shrink: 0;
}

.service-card details[open] summary::after {
  transform: rotate(45deg);
}

.service-card details p {
  margin-top: var(--space-2);
  font-size: var(--fs-small);
}

.service-card details p + p {
  margin-top: var(--space-2);
}

.service-card .btn {
  margin-top: auto;
  align-self: flex-start;
}

/* Dlaždice uvnitř barevného pruhu — o pár odstínů světlejší než podklad
   (ne 1:1 stejná barva), odlišené hlavně stínem (--shadow-md, zděděný
   z .service-card výše) místo bílé/orámované karty. Text zůstává tmavý
   (dědí se) — bílý text na tyrkysu/hnědé má i po zesvětlení jen ~2:1
   kontrast (potřeba min. 3:1 na nadpisy, 4.5:1 na běžný text), viz
   poznámka u --color-turquoise v tokens.css. */
main.alt-hygiena > section:nth-of-type(even) .service-card {
  background: color-mix(in srgb, var(--color-section-hygiena) 82%, white 18%);
  border-color: transparent;
}

main.alt-ordinace > section:nth-of-type(even) .service-card {
  background: color-mix(in srgb, var(--color-section-ordinace) 82%, white 18%);
  border-color: transparent;
}

/* main.no-stripe: dlaždice barevné VŽDY, bez ohledu na to, jestli by
   jejich section vyšla jako sudá/lichá — na "služby" (zubní ordinace)
   jsou karty rozdělené do 3 samostatných gridů napříč sekcemi a měly by
   být barevné všechny, ne jen ty v "sudé" sekci. */
main.alt-hygiena.no-stripe .service-card {
  background: color-mix(in srgb, var(--color-section-hygiena) 82%, white 18%);
  border-color: transparent;
}

main.alt-ordinace.no-stripe .service-card {
  background: color-mix(in srgb, var(--color-section-ordinace) 82%, white 18%);
  border-color: transparent;
}

/* Celá dlaždice klikací, se stejným hover efektem jako .path-card na
   homepage (viz tamní komentář o specificitě — proto ".reveal.is-visible"
   v selektoru, ne jen ":hover"). Jen pro jednoduché "teaser" karty s jedním
   jasným cílem (bez vlastního tlačítka uvnitř) — karty s vlastní akcí
   (ceník, "Co vás čeká" apod.) zůstávají klikací jen na svém tlačítku. */
.service-card--link {
  text-decoration: none;
  color: inherit;
  transition: transform var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out);
}

.service-card--link:hover {
  box-shadow: var(--shadow-lg);
}

.service-card--link.reveal.is-visible:hover {
  transform: scale(1.03) translateY(-4px);
}

/* ---------- Cookie lišta ---------- */
.cookie-banner {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: var(--z-cookie);
  background: var(--color-ink);
  color: #fff;
  padding: var(--space-3) var(--container-pad);
  transform: translateY(100%);
  transition: transform var(--duration-slow) var(--ease-out);
}

.cookie-banner.is-visible {
  transform: translateY(0);
}

.cookie-banner__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.cookie-banner p {
  font-size: var(--fs-small);
  max-width: 70ch;
  color: #e6e4df;
}

.cookie-banner a {
  color: #fff;
  text-decoration: underline;
}

.cookie-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.cookie-banner .btn--outline {
  color: #fff;
  border-color: #6a6e70;
}

.cookie-banner .btn--outline:hover {
  background: #fff;
  color: var(--color-ink);
  border-color: #fff;
}

@media (min-width: 768px) {
  .cookie-banner__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cookie-banner {
    transition: none;
  }
}

/* ---------- Blog ----------
   Blog je společný pro obě sekce (patří značce Kindent jako celku), proto
   používá neutrální hlavičku .site-header--home jako rozcestník a ochrana
   osobních údajů. Příslušnost článku k sekci nese jen štítek na kartě
   a v hlavičce článku — barvy si bere ze stejných tokenů jako .section-badge
   v hlavičce webu, aby to bylo poznat na první pohled. */
.blog-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: minmax(0, 1fr);
  /* Karty se ZÁMĚRNĚ natahují na výšku nejvyšší v řádku (výchozí stretch) —
     "Číst dál" má margin-top:auto, takže u všech sedí na stejné lince dole
     a řádek nemá roztřepený spodní okraj. Pozor: na .team-grid je naopak
     align-items:start, tam by stretch nafoukl karty při rozbalení roletky.
     Tady žádná roletka není, takže to nehrozí. */
}

@media (min-width: 768px) {
  .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .blog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.blog-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  box-shadow: var(--shadow-md);
  text-decoration: none;
  color: inherit;
  transition: transform var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out);
}

/* Stejný trik jako u .path-card: .js .reveal.is-visible nastavuje
   transform se specificitou 3 tříd a bez toho by hover prohrál. */
.blog-card.reveal.is-visible:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.blog-card h2,
.blog-card h3 {
  font-size: var(--fs-h3);
}

.blog-card__perex {
  font-size: var(--fs-small);
  color: var(--color-grey);
}

.blog-card__more {
  margin-top: auto;
  padding-top: var(--space-2);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-small);
  color: var(--color-turquoise-text);
}

/* Řádek s datem nad nadpisem karty i článku. Štítek sekce tu byl
   původně taky — blog je ale společný pro obě sekce, takže se články
   neoznačují. */
.blog-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-small);
  color: var(--color-grey);
}

/* ---------- Tělo článku ----------
   Šířka 720px je stejná čtecí míra, jakou používá ochrana osobních údajů.
   Odstupy jsou na prvcích uvnitř .article, ne inline v HTML, aby se nový
   článek dal napsat jako čistý text bez stylů. */
.article {
  max-width: 720px;
}

.article h2 {
  margin-top: var(--space-5);
}

.article h3 {
  margin-top: var(--space-4);
}

.article p,
.article ul,
.article ol {
  margin-top: var(--space-2);
}

.article ul,
.article ol {
  padding-left: 1.2rem;
}

.article li + li {
  margin-top: 0.4rem;
}

.article img {
  border-radius: var(--radius-md);
  margin-top: var(--space-4);
}

/* Obrázek v článku i s popiskem. Obrázky jsou 1600px na delší straně
   a kvalita 88 — víc než zbytek webu (1400 / 82), protože klient chtěl
   ve článcích lepší kvalitu. Sloupec textu má 720px, takže i na displeji
   s trojnásobnou hustotou je to pořád nadbytek. */
.article figure {
  margin: var(--space-5) 0 0;
}

.article figure img {
  margin-top: 0;
  width: 100%;
  height: auto;
  display: block;
}

.article figcaption {
  margin-top: 0.6rem;
  font-size: var(--fs-small);
  color: var(--color-grey);
  text-align: center;
}

/* Dvojice snímků před/po vedle sebe. Pod 640px pod sebou — vedle sebe by
   na telefonu byly tak malé, že by rozdíl nebyl poznat. */
.article .snimky-dvojice {
  display: grid;
  gap: var(--space-2);
  grid-template-columns: minmax(0, 1fr);
  margin-top: var(--space-5);
}

@media (min-width: 640px) {
  .article .snimky-dvojice {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.article .snimky-dvojice figure {
  margin-top: 0;
}

/* Závěr článku: odkaz zpět na výpis + objednání. Bez toho je článek slepá
   ulička — blog má neutrální hlavičku, takže se z něj jinak není kam vrátit
   do sekce, ze které návštěvník přišel. */
.article-footer {
  max-width: 720px;
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

.article-footer__back {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-small);
  text-decoration: none;
  color: var(--color-turquoise-text);
}

.article-footer__back:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}