/* 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; }
}

/* Tmavší dole (kde sedí text), lehčí nahoře (ať je foto poznat) — jedna
   gradientová vrstva zvládne obojí najednou. Menší foto na mobil, větší
   od tabletu, ať se zbytečně nestahuje foto v plné kráse na malý displej. */
/* Bez tmavého gradientu přes fotku (na přání klienta) — jen text-shadow
   na h2/p/CTA drží čitelnost. */
/* 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í. */
.path-card--hygiena {
  background-image: url('/assets/img/hygiena/tile-hygiena-700.jpg');
  background-position: center 40%;
}

.path-card--ordinace {
  background-image: url('/assets/img/ordinace/tile-ordinace-700.jpg');
  background-position: center 40%;
}

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

.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;
}

.path-card h2 {
  font-size: var(--fs-h3);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75), 0 2px 8px rgba(0, 0, 0, 0.6), 0 12px 28px rgba(0, 0, 0, 0.45);
}

.path-card p {
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75), 0 2px 8px rgba(0, 0, 0, 0.55);
}

.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. */
.hero--minimal {
  padding-block: var(--space-4);
  display: flex;
  align-items: center;
}

@media (min-width: 768px) {
  .hero--minimal {
    padding-block: var(--space-6);
    min-height: 70vh;
  }
}

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

.path-card--big {
  min-height: 220px;
  padding: var(--space-4);
}

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

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

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

.path-card__enter {
  margin-top: var(--space-2);
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 0.5rem;
  background: #fff;
  color: var(--color-ink);
  font-weight: var(--fw-semibold);
  padding: 0.85rem 1.75rem;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-md);
  transition: transform var(--duration-base) var(--ease-out),
              box-shadow 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);
  box-shadow: var(--shadow-lg);
}

/* 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): na mobilu ještě
   blíž k hero (klient: "zbytečná mezera"), na desktopu beze změny —
   zůstává na hodnotě var(--space-3), jak už bylo doladěno dřív. */
.hero-next--tight-mobile {
  padding-top: 0;
}

@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);
  }
}

/* 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 ---------- */
.team-grid {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-4);
  grid-template-columns: 1fr;
}

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

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

/* Tým dentální hygieny (4 lidi): na mobilu chce klient dvojice vedle sebe
   místo jednoho sloupce pod sebou — karta i avatar se proto na mobilu
   zmenší, ať se dva vejdou vedle sebe bez přetečení. Od 640px se vrací na
   plnou velikost (pořád 2 sloupce), od 1024px 4 v řadě. Nahrazuje dřívější
   auto-fit/minmax řešení téže věci. */
.team-grid--hygiena {
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2);
}

.team-grid--hygiena .team-card {
  padding: var(--space-2);
}

.team-grid--hygiena .team-card__avatar {
  width: 125px;
  height: 125px;
}

@media (min-width: 640px) {
  .team-grid--hygiena {
    gap: var(--space-4);
  }
  .team-grid--hygiena .team-card {
    padding: var(--space-4);
  }
  .team-grid--hygiena .team-card__avatar {
    width: 170px;
    height: 170px;
  }
}

@media (min-width: 1024px) {
  .team-grid--hygiena {
    grid-template-columns: repeat(4, 1fr);
  }
}

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

.team-card__avatar {
  width: 170px;
  height: 170px;
  border-radius: 50%;
  margin-inline: auto;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.team-card__avatar img {
  width: 100%;
  height: 100%;
  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-turquoise-deep);
  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-grey);
  margin-top: 0.5rem;
}

.team-card p:last-child {
  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;
  }
}