/* ============================================================================
   365 DENTAL CARE — štýly
   ----------------------------------------------------------------------------
   Tento súbor rieši VZHĽAD stránky. Obsah (texty, ceny, hodiny) je v js/obsah.js.
   Ak chcete zmeniť farby alebo zaoblenie, meňte hodnoty v bloku :root nižšie.
   ========================================================================== */

/* --- 1. Premenné: farby, rozmery, tiene ----------------------------------
   Každá farba je zapísaná RAZ, cez light-dark(svetlá, tmavá). Prehliadač
   si podľa režimu vyberie sám. Pred každým takým riadkom je ešte riadok
   so svetlou hodnotou — staršie prehliadače, ktoré light-dark() nepoznajú,
   druhý riadok preskočia a zobrazia svetlý režim namiesto rozbitej stránky.

   Tmavý režim sa riadi nastavením telefónu či počítača. Návštevník ho
   môže prepnúť tlačidlom v hlavičke; vtedy sa na stránku pridá
   data-theme a prepíše sa tým color-scheme nižšie.
   -------------------------------------------------------------------- */
:root {
  color-scheme: light dark;

  /* Firemné farby. --modra a --cervena slúžia na TEXT, preto sa v tmavom
     zosvetlia. --modra-plocha a --cervena-plocha sú pevné firemné plochy
     (tlačidlá, karty, pásy) a tmavé zostávajú vždy. */
  --modra:        #055090;
  --modra:        light-dark(#055090, #8cb8f0);
  --modra-plocha: #055090;
  --modra-tmava:  #0a3062;
  --modra-tmava:  light-dark(#0a3062, #6fa2e2);
  --modra-svetla: #e8eef7;
  --modra-svetla: light-dark(#e8eef7, #1a2a40);

  /* Oranžová je firemná farba interiéru. Odtieň je zámerne tmavší než
     oranžová na stenách — svetlejšia totiž neunesie biely text
     (kontrast by klesol pod normu). Takto má biely text 4,6. */
  --cervena:      #bf5700;
  --cervena:      light-dark(#bf5700, #fdba74);
  --cervena-plocha:#bf5700;
  --cervena-tmava:#9a4600;
  --cervena-tmava:light-dark(#9a4600, #fb923c);
  --cervena-svetla:#fdf0e3;
  --cervena-svetla:light-dark(#fdf0e3, #2a1c0e);

  --cierna:       #1d1d1b;
  --cierna:       light-dark(#1d1d1b, #080d14);
  --text:         #1f2933;
  --text:         light-dark(#1f2933, #e9eef6);
  --text-slaby:   #5a6775;
  --text-slaby:   light-dark(#5a6775, #a8b5c7);
  --text-slabsi:  #8795a3;
  --text-slabsi:  light-dark(#8795a3, #7f8da3);

  /* --biela je vždy biela (text na farebných plochách).
     Na plochy samotné slúži --povrch, ktorý sa v tmavom zmení. */
  --biela:        #ffffff;
  --povrch:       #ffffff;
  --povrch:       light-dark(#ffffff, #141c28);
  --povrch-2:     #fcfdfe;
  --povrch-2:     light-dark(#fcfdfe, #18212f);
  --povrch-prieh:  rgba(255, 255, 255, .88);
  --povrch-prieh:  light-dark(rgba(255,255,255,.88), rgba(20,28,40,.86));
  --povrch-prieh2: rgba(255, 255, 255, .95);
  --povrch-prieh2: light-dark(rgba(255,255,255,.95), rgba(20,28,40,.95));
  --podklad:      #f7f8fa;
  --podklad:      light-dark(#f7f8fa, #0e151f);
  --podklad-2:    #eef1f5;
  --podklad-2:    light-dark(#eef1f5, #1e2838);
  --ciara:        #e2e7ee;
  --ciara:        light-dark(#e2e7ee, #293549);

  --zelena:       #15803d;
  --zelena:       light-dark(#15803d, #4ade80);
  --zelena-svetla:#e8f6ed;
  --zelena-svetla:light-dark(#e8f6ed, #11271c);
  --oranzova:     #b45309;
  --oranzova:     light-dark(#b45309, #fbbf24);
  --oranzova-svetla:#fdf3e4;
  --oranzova-svetla:light-dark(#fdf3e4, #2a2011);

  /* Zaoblenie rohov */
  --r-s:  10px;
  --r-m:  16px;
  --r-l:  24px;
  --r-xl: 32px;
  --r-max: 999px;

  /* Tiene — v tmavom musia byť výraznejšie, inak ich nevidno */
  --tien-s: 0 1px 2px rgba(16, 35, 60, .06), 0 1px 3px rgba(16, 35, 60, .04);
  --tien-m: 0 4px 12px rgba(16, 35, 60, .07), 0 2px 4px rgba(16, 35, 60, .04);
  --tien-l: 0 12px 32px rgba(16, 35, 60, .10), 0 4px 10px rgba(16, 35, 60, .05);
  --tien-xl:0 24px 60px rgba(16, 35, 60, .16), 0 8px 20px rgba(16, 35, 60, .08);

  /* Šírka obsahu a odsadenie od okrajov */
  --sirka: 1180px;
  --gutter: 20px;

  --prechod: 180ms cubic-bezier(.4, 0, .2, 1);
}

/* Ručné prepnutie tlačidlom v hlavičke */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"]  { color-scheme: dark; }

/* Výraznejšie tiene v tmavom režime (toto light-dark() nevie) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --tien-s: 0 1px 2px rgba(0, 0, 0, .40), 0 1px 3px rgba(0, 0, 0, .28);
    --tien-m: 0 4px 12px rgba(0, 0, 0, .44), 0 2px 4px rgba(0, 0, 0, .30);
    --tien-l: 0 12px 32px rgba(0, 0, 0, .50), 0 4px 10px rgba(0, 0, 0, .32);
    --tien-xl:0 24px 60px rgba(0, 0, 0, .62), 0 8px 20px rgba(0, 0, 0, .40);
  }
}
:root[data-theme="dark"] {
  --tien-s: 0 1px 2px rgba(0, 0, 0, .40), 0 1px 3px rgba(0, 0, 0, .28);
  --tien-m: 0 4px 12px rgba(0, 0, 0, .44), 0 2px 4px rgba(0, 0, 0, .30);
  --tien-l: 0 12px 32px rgba(0, 0, 0, .50), 0 4px 10px rgba(0, 0, 0, .32);
  --tien-xl:0 24px 60px rgba(0, 0, 0, .62), 0 8px 20px rgba(0, 0, 0, .40);
}

/* --- 2. Reset ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 90px; /* aby nadpis neskončil pod lepkavou hlavičkou */
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  color: var(--text);
  background: var(--povrch);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: Poppins, Inter, -apple-system, sans-serif;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.02em;
  margin: 0;
  color: var(--modra);
}

p { margin: 0; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }

/* Dôležité: vlastné display (flex, grid) by inak prebilo atribút hidden
   a skryté položky by zostali viditeľné. */
[hidden] { display: none !important; }

:focus-visible {
  outline: 3px solid var(--modra);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Len pre čítačky obrazovky (Google a nevidiaci to čítajú, oko nie) */
.sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- 3. Opakujúce sa prvky ----------------------------------------------- */
.obal {
  width: 100%;
  max-width: var(--sirka);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.sekcia { padding-block: clamp(56px, 8vw, 104px); }
.sekcia--podklad { background: var(--podklad); }

.sekcia__hlava { max-width: 680px; margin-bottom: clamp(32px, 4vw, 52px); }
.sekcia__nadpis { font-size: clamp(28px, 4.2vw, 42px); }
.sekcia__popis {
  margin-top: 14px;
  font-size: clamp(16px, 1.6vw, 18.5px);
  color: var(--text-slaby);
}

.stitok {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 13px;
  border-radius: var(--r-max);
  background: var(--modra-svetla);
  color: var(--modra);
  font-size: 13px; font-weight: 600;
  letter-spacing: .02em;
  margin-bottom: 16px;
}
.stitok svg { width: 15px; height: 15px; flex: none; }

/* Tlačidlá */
.tlacidlo {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 26px;
  border-radius: var(--r-max);
  font-weight: 600; font-size: 16.5px;
  transition: transform var(--prechod), box-shadow var(--prechod), background var(--prechod);
  white-space: nowrap;
}
.tlacidlo svg { width: 19px; height: 19px; flex: none; }
.tlacidlo:hover { transform: translateY(-2px); }
.tlacidlo:active { transform: translateY(0); }

.tlacidlo--cervene { background: var(--cervena-plocha); color: var(--biela); box-shadow: var(--tien-m); }
.tlacidlo--cervene:hover { background: var(--cervena-tmava); box-shadow: var(--tien-l); }

.tlacidlo--modre { background: var(--modra-plocha); color: var(--biela); box-shadow: var(--tien-m); }
.tlacidlo--modre:hover { background: var(--modra-tmava); box-shadow: var(--tien-l); }

.tlacidlo--obrys {
  background: var(--povrch); color: var(--modra);
  box-shadow: inset 0 0 0 2px var(--ciara);
}
.tlacidlo--obrys:hover { box-shadow: inset 0 0 0 2px var(--modra); }

/* Odznak so stavom otvorenia */
.stav {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px 7px 12px;
  border-radius: var(--r-max);
  font-size: 14px; font-weight: 600;
  white-space: nowrap;
}
.stav__bod { width: 9px; height: 9px; border-radius: 50%; flex: none; position: relative; }
.stav--otvorene { background: var(--zelena-svetla); color: var(--zelena); }
.stav--otvorene .stav__bod { background: var(--zelena); }
.stav--otvorene .stav__bod::after {
  content: ""; position: absolute; inset: -4px;
  border-radius: 50%; border: 2px solid var(--zelena);
  animation: pulz 2s ease-out infinite;
}
.stav--zatvorene { background: var(--podklad-2); color: var(--text-slaby); }
.stav--zatvorene .stav__bod { background: var(--text-slabsi); }
.stav--coskoro { background: var(--oranzova-svetla); color: var(--oranzova); }
.stav--coskoro .stav__bod { background: var(--oranzova); }

@keyframes pulz {
  0%   { transform: scale(.8); opacity: 1; }
  100% { transform: scale(2.1); opacity: 0; }
}

/* ============================================================================
   4. HLAVIČKA
   ========================================================================== */
.hlavicka {
  position: sticky; top: 0; z-index: 60;
  background: var(--povrch-prieh);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--prechod), box-shadow var(--prechod);
}
.hlavicka--posunuta { border-bottom-color: var(--ciara); box-shadow: var(--tien-s); }

.hlavicka__vnutro {
  display: flex; align-items: center; gap: 24px;
  height: 76px;
}
.hlavicka__logo { flex: none; display: flex; align-items: center; }
.hlavicka__logo img { height: 46px; width: auto; }
/* Farebné logo má tmavomodrý text — na tmavom pozadí by zmizlo,
   preto sa tam prepne na bielu verziu. */
.logo--tmavy { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo--svetly { display: none; }
  :root:not([data-theme="light"]) .logo--tmavy { display: block; }
}
:root[data-theme="dark"] .logo--svetly { display: none; }
:root[data-theme="dark"] .logo--tmavy { display: block; }

.hlavicka__nav { margin-left: auto; }
.hlavicka__nav ul { display: flex; align-items: center; gap: 4px; }
.hlavicka__nav a {
  display: block; padding: 9px 14px;
  border-radius: var(--r-s);
  font-size: 15.5px; font-weight: 500; color: var(--text-slaby);
  transition: color var(--prechod), background var(--prechod);
}
.hlavicka__nav a:hover { color: var(--modra); background: var(--modra-svetla); }
/* Sekcia, v ktorej sa práve nachádzate */
.hlavicka__nav a[aria-current="true"] {
  color: var(--modra);
  background: var(--modra-svetla);
  font-weight: 600;
}

.hlavicka__akcie { display: flex; align-items: center; gap: 12px; flex: none; }
.hlavicka__tel {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 20px;
  background: var(--cervena-plocha); color: var(--biela);
  border-radius: var(--r-max);
  font-weight: 600; font-size: 15.5px;
  transition: background var(--prechod), transform var(--prechod);
}
.hlavicka__tel:hover { background: var(--cervena-tmava); transform: translateY(-1px); }
.hlavicka__tel svg { width: 17px; height: 17px; }

/* Prepínač svetlý / tmavý režim */
.hlavicka__rezim {
  width: 42px; height: 42px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  color: var(--text-slaby);
  transition: background var(--prechod), color var(--prechod);
}
.hlavicka__rezim:hover { background: var(--modra-svetla); color: var(--modra); }
.hlavicka__rezim svg { width: 19px; height: 19px; display: block; }
.hlavicka__rezim-slnko, .hlavicka__rezim-mesiac { grid-area: 1 / 1; }
/* Ukazujeme ikonu toho, na čo sa prepne — v svetlom mesiac, v tmavom slnko */
.hlavicka__rezim-slnko { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hlavicka__rezim-slnko { display: block; }
  :root:not([data-theme="light"]) .hlavicka__rezim-mesiac { display: none; }
}
:root[data-theme="dark"] .hlavicka__rezim-slnko { display: block; }
:root[data-theme="dark"] .hlavicka__rezim-mesiac { display: none; }
:root[data-theme="light"] .hlavicka__rezim-slnko { display: none; }
:root[data-theme="light"] .hlavicka__rezim-mesiac { display: block; }

/* Tenká čiara, ktorá ukazuje, koľko stránky má človek za sebou */
.hlavicka__postup {
  position: absolute; left: 0; bottom: -1px;
  height: 3px; width: 100%;
  transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--modra-plocha), var(--cervena-plocha));
  will-change: transform;
}

/* Hamburger (len na mobile) */
.hlavicka__menu {
  display: none;
  width: 44px; height: 44px;
  border-radius: var(--r-s);
  align-items: center; justify-content: center;
  color: var(--modra);
}
.hlavicka__menu:hover { background: var(--modra-svetla); }
.hlavicka__menu svg { width: 24px; height: 24px; }

/* ============================================================================
   5. ÚVODNÁ OBRAZOVKA
   ========================================================================== */
.uvod {
  position: relative;
  padding-block: clamp(40px, 6vw, 76px) clamp(48px, 7vw, 92px);
  background:
    radial-gradient(900px 440px at 88% -8%, rgba(190, 22, 34, .07), transparent 62%),
    radial-gradient(760px 420px at 6% 4%, rgba(15, 69, 134, .09), transparent 60%),
    var(--povrch);
  overflow: hidden;
}


.uvod__mriezka {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(36px, 5vw, 72px);
  align-items: center;
}

.uvod__nadpis {
  font-size: clamp(34px, 5.6vw, 60px);
  line-height: 1.05;
}
.uvod__nadpis em { font-style: normal; color: var(--cervena); }

.uvod__popis {
  margin-top: 20px;
  font-size: clamp(17px, 1.9vw, 20px);
  color: var(--text-slaby);
  max-width: 30em;
}

.uvod__akcie { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 30px; }

.uvod__drobne {
  display: flex; flex-wrap: wrap; gap: 10px 22px;
  margin-top: 26px;
  font-size: 15px; color: var(--text-slaby);
}
.uvod__drobne li { display: flex; align-items: center; gap: 8px; }
.uvod__drobne svg { width: 17px; height: 17px; color: var(--zelena); flex: none; }

/* Karty s otváracími hodinami */
.hodiny { display: grid; gap: 16px; }

.hodiny__karta {
  position: relative;
  padding: 26px 26px 24px;
  border-radius: var(--r-l);
  color: var(--biela);
  overflow: hidden;
  box-shadow: var(--tien-l);
}
.hodiny__karta--cervena { background: linear-gradient(145deg, #c05a02 0%, var(--cervena-plocha) 55%, #a44800 100%); }
.hodiny__karta--modra   { background: linear-gradient(145deg, #1a5699 0%, var(--modra-plocha) 55%, #0a3062 100%); }



.hodiny__hlava {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  margin-bottom: 18px;
}
.hodiny__nazov { color: var(--biela); font-size: clamp(21px, 2.4vw, 26px); }

.hodiny__karta .stav {
  background: rgba(255, 255, 255, .17);
  color: var(--biela);
  backdrop-filter: blur(4px);
}
.hodiny__karta .stav__bod { background: #6ee7a0; }
.hodiny__karta .stav--otvorene .stav__bod::after { border-color: #6ee7a0; }
.hodiny__karta .stav--zatvorene .stav__bod { background: rgba(255, 255, 255, .6); }
.hodiny__karta .stav--coskoro .stav__bod { background: #fcd34d; }

/* Oranžová karta: priesvitné vrstvy musia podklad STMAVIŤ, nie presvetliť.
   Presvetlená oranžová má s bielym textom kontrast len 3,6 pri norme 4,5;
   stmavená má 5,6. Musí to stáť až tu, za pravidlami, ktoré prebíja. */
.hodiny__karta--cervena .hodiny__riadok--dnes { background: rgba(0, 0, 0, .14); }
.hodiny__karta--cervena .stav { background: rgba(0, 0, 0, .17); }
.hodiny__karta--cervena .hodiny__dni { color: rgba(255, 255, 255, .92); }
.hodiny__karta--cervena .hodiny__poznamka { color: rgba(255, 255, 255, .95); }

.hodiny__zoznam { display: grid; gap: 9px; position: relative; z-index: 1; }
.hodiny__riadok {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; font-size: 15.5px;
}
.hodiny__riadok--dnes {
  font-weight: 700;
  padding: 7px 12px; margin-inline: -12px;
  background: rgba(255, 255, 255, .15);
  border-radius: var(--r-s);
}
.hodiny__dni { color: rgba(255, 255, 255, .85); }
.hodiny__riadok--dnes .hodiny__dni { color: var(--biela); }
.hodiny__cas { font-weight: 700; font-variant-numeric: tabular-nums; }

/* Dni s úplne inou otváracou dobou (Vianoce, Silvester, dovolenka) */
.hodiny__mimo {
  position: relative; z-index: 1;
  margin-top: 16px; padding-top: 15px;
  border-top: 1px solid rgba(255, 255, 255, .22);
  display: grid; gap: 7px;
}
.hodiny__mimoNadpis {
  font-size: 11.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255, 255, 255, .72);
  margin-bottom: 2px;
}
.hodiny__mimo .hodiny__riadok { font-size: 14.5px; }

.hodiny__poznamka {
  margin-top: 16px; padding-top: 15px;
  border-top: 1px solid rgba(255, 255, 255, .22);
  font-size: 14.5px; color: rgba(255, 255, 255, .88);
  position: relative; z-index: 1;
}

/* ============================================================================
   6. AKÚTNE STAVY
   ========================================================================== */
.akutne { background: var(--cervena-svetla); }
.akutne__mriezka {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}
.akutne__nadpis { font-size: clamp(25px, 3.2vw, 34px); color: var(--cervena-tmava); }
.akutne__zoznam {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 11px;
}
.akutne__polozka {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 15px 18px;
  background: var(--povrch);
  border-radius: var(--r-m);
  font-size: 15.5px; font-weight: 500;
  box-shadow: var(--tien-s);
}
.akutne__polozka svg { width: 19px; height: 19px; color: var(--cervena); flex: none; margin-top: 2px; }

/* ============================================================================
   7. SLUŽBY
   ========================================================================== */
.sluzby__mriezka {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 18px;
}
.sluzba {
  padding: 28px 26px;
  background: var(--povrch);
  border: 1px solid var(--ciara);
  border-radius: var(--r-l);
  transition: transform var(--prechod), box-shadow var(--prechod), border-color var(--prechod);
}
.sluzba:hover {
  transform: translateY(-4px);
  box-shadow: var(--tien-l);
  border-color: transparent;
}
.sluzba__ikona {
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border-radius: var(--r-m);
  background: var(--modra-svetla);
  color: var(--modra);
  margin-bottom: 18px;
}
.sluzba__ikona svg { width: 26px; height: 26px; }
.sluzba--akutna .sluzba__ikona { background: var(--cervena-svetla); color: var(--cervena); }
.sluzba__nazov { font-size: 19.5px; margin-bottom: 9px; }
.sluzba__popis { color: var(--text-slaby); font-size: 15.5px; }

/* ============================================================================
   8. PREČO MY
   ========================================================================== */
/* Rovnaký prechod ako na modrej karte hore, nech to pôsobí jednotne */
.preco {
  background: linear-gradient(145deg, #1a5699 0%, var(--modra-plocha) 55%, #0a3062 100%);
  color: var(--biela);
}
.preco .sekcia__nadpis { color: var(--biela); }
.preco__mriezka {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 20px;
}
.preco__polozka {
  padding: 28px 24px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--r-l);
}
.preco__cislo {
  font-family: Poppins, sans-serif;
  font-size: clamp(34px, 4.4vw, 46px); font-weight: 700;
  line-height: 1; color: var(--biela);
  letter-spacing: -.03em;
}
.preco__nazov {
  margin-top: 10px; font-size: 15px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em;
  color: #9dc0ea;
}
.preco__popis { margin-top: 10px; font-size: 15px; color: rgba(255, 255, 255, .8); }

/* ============================================================================
   9. TÍM
   ========================================================================== */
/* Pružné rozloženie namiesto mriežky: pri piatich lekároch sa zmestia
   do jedného radu a keby ich bol iný počet, posledný rad sa vycentruje —
   nezostane osamelá karta pri ľavom okraji. */
.tim__mriezka {
  display: flex; flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}
.lekar {
  flex: 1 1 195px;
  max-width: 290px;
}
.lekar {
  background: var(--povrch);
  border: 1px solid var(--ciara);
  border-radius: var(--r-l);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: box-shadow var(--prechod), transform var(--prechod);
}
.lekar:hover { box-shadow: var(--tien-l); transform: translateY(-3px); }
/* Fotky sú 265×253 px s oranžovým pozadím od fotografa.
   Pomer 1:1 ich drží v natívnej veľkosti, takže nezrnia. */
.lekar__foto {
  aspect-ratio: 1 / 1;
  width: 100%; height: auto;
  object-fit: cover; object-position: center;
  background: var(--podklad-2);
}
.lekar__telo { padding: 22px 22px 20px; display: flex; flex-direction: column; flex: 1; }
/* Mená a špecializácie majú rôzny počet riadkov, čo by posunulo text
   aj tlačidlá v každej karte inam. Vyhradená výška na dva riadky ich
   zrovná; dlhšie texty si výšku pokojne vezmú väčšiu. */
.lekar__meno { font-size: 18.5px; min-height: 2.3em; }
.lekar__titul {
  margin-top: 5px; font-size: 13.5px; font-weight: 600;
  min-height: 3.2em;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--cervena);
}
.lekar__bio {
  margin-top: 14px; font-size: 15px; color: var(--text-slaby);
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;
  overflow: hidden;
}
.lekar--rozbaleny .lekar__bio { display: block; }
.lekar__bio p + p { margin-top: 11px; }
.lekar__viac {
  /* auto pritlačí tlačidlo na spodok karty — v rade rovnako vysokých
     kariet sú tým všetky tlačidlá presne v jednej línii */
  margin-top: auto; padding-top: 10px;
  align-self: flex-start;
  /* 44 px je najmenší pohodlný cieľ pre prst */
  min-height: 44px; padding-bottom: 9px;
  font-size: 15px; font-weight: 600; color: var(--modra);
  display: inline-flex; align-items: center; gap: 6px;
}
.lekar__viac:hover { text-decoration: underline; }
.lekar__viac svg { width: 15px; height: 15px; transition: transform var(--prechod); }
.lekar--rozbaleny .lekar__viac svg { transform: rotate(180deg); }

/* ============================================================================
   10. CENNÍK
   ========================================================================== */
.cennik__ovladanie {
  display: flex; flex-wrap: wrap; gap: 14px;
  align-items: center; justify-content: space-between;
  margin-bottom: 26px;
}
.zalozky {
  display: inline-flex; gap: 4px; padding: 5px;
  background: var(--podklad-2);
  border-radius: var(--r-max);
}
.zalozky__btn {
  padding: 10px 22px;
  border-radius: var(--r-max);
  font-size: 15.5px; font-weight: 600; color: var(--text-slaby);
  transition: background var(--prechod), color var(--prechod), box-shadow var(--prechod);
}
.zalozky__btn[aria-selected="true"] {
  background: var(--povrch); color: var(--modra);
  box-shadow: var(--tien-s);
}

.hladanie { position: relative; flex: 1; min-width: 230px; max-width: 340px; }
.hladanie svg {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; color: var(--text-slabsi); pointer-events: none;
}
.hladanie input {
  width: 100%; padding: 13px 16px 13px 46px;
  border: 1px solid var(--ciara);
  border-radius: var(--r-max);
  font-size: 15.5px; font-family: inherit; color: var(--text);
  background: var(--povrch);
  transition: border-color var(--prechod), box-shadow var(--prechod);
}
.hladanie input:focus {
  outline: none; border-color: var(--modra);
  box-shadow: 0 0 0 4px rgba(15, 69, 134, .1);
}
.hladanie input::placeholder { color: var(--text-slabsi); }

/* Rýchle filtre nad cenníkom */
.filtre {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: -8px 0 22px;
}
.filtre__popis {
  font-size: 14px; font-weight: 600; color: var(--text-slabsi);
  margin-right: 2px;
}
.filtre__btn {
  padding: 8px 15px;
  border-radius: var(--r-max);
  border: 1px solid var(--ciara);
  background: var(--povrch);
  font-size: 14.5px; font-weight: 500; color: var(--text-slaby);
  transition: border-color var(--prechod), color var(--prechod),
              background var(--prechod);
}
.filtre__btn:hover { border-color: var(--modra); color: var(--modra); }
.filtre__btn[aria-pressed="true"] {
  background: var(--modra-svetla); border-color: var(--modra);
  color: var(--modra); font-weight: 600;
}
.filtre__btn--zrusit { color: var(--cervena); border-style: dashed; }
.filtre__btn--zrusit:hover { border-color: var(--cervena); color: var(--cervena); }

.cennik__skupina[hidden] { display: none; }

/* Jemné vynorenie rozbaleného obsahu */
.cennik__telo:not([hidden]), .otazka__odpoved:not([hidden]) {
  animation: rozbalenie 260ms cubic-bezier(.2, .8, .3, 1);
}
@keyframes rozbalenie {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}

.cennik__sekcia {
  border: 1px solid var(--ciara);
  border-radius: var(--r-m);
  background: var(--povrch);
  overflow: hidden;
}
.cennik__sekcia + .cennik__sekcia { margin-top: 12px; }

.cennik__prepinac {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 22px;
  font-family: Poppins, sans-serif;
  font-size: 17.5px; font-weight: 600; color: var(--modra);
  text-align: left;
  transition: background var(--prechod);
}
.cennik__prepinac:hover { background: var(--podklad); }
.cennik__pocet {
  margin-left: auto; margin-right: 4px;
  font-family: Inter, sans-serif;
  font-size: 13.5px; font-weight: 500; color: var(--text-slabsi);
}
.cennik__sipka { width: 19px; height: 19px; flex: none; color: var(--text-slaby); transition: transform var(--prechod); }
.cennik__prepinac[aria-expanded="true"] .cennik__sipka { transform: rotate(180deg); }

.cennik__telo { border-top: 1px solid var(--ciara); }
.cennik__telo[hidden] { display: none; }

.cennik__polozka {
  display: flex; align-items: baseline; gap: 14px;
  padding: 13px 22px;
  font-size: 15.5px;
}
.cennik__polozka + .cennik__polozka { border-top: 1px solid var(--podklad-2); }
.cennik__polozka:nth-child(odd) { background: var(--povrch-2); }
.cennik__nazov { flex: 1; min-width: 0; }
.cennik__bodky {
  flex: 1; min-width: 18px;
  border-bottom: 1px dotted var(--ciara);
  transform: translateY(-4px);
}
.cennik__cena {
  font-weight: 700; color: var(--modra);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.cennik__cena--zdarma { color: var(--zelena); }

.cennik__prazdne {
  padding: 40px 22px; text-align: center; color: var(--text-slaby);
  font-size: 15.5px;
}
mark { background: #ffe066; color: #1f2933; border-radius: 3px; padding: 0 2px; }

.cennik__poznamka {
  margin-top: 22px; padding: 16px 20px;
  display: flex; align-items: center; gap: 11px;
  background: var(--modra-svetla);
  border-radius: var(--r-m);
  font-size: 14.5px; color: var(--modra);
}
.cennik__poznamka svg { width: 18px; height: 18px; flex: none; }

/* ============================================================================
   11. ČASTÉ OTÁZKY
   ========================================================================== */
.otazky__zoznam { max-width: 820px; }
.otazka {
  border-bottom: 1px solid var(--ciara);
}
.otazka__prepinac {
  width: 100%;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
  padding: 22px 0;
  font-family: Poppins, sans-serif;
  font-size: clamp(16.5px, 2vw, 19px); font-weight: 600; color: var(--modra);
  text-align: left;
}
.otazka__prepinac:hover { color: var(--cervena); }
.otazka__ikona {
  width: 26px; height: 26px; flex: none; margin-top: 2px;
  border-radius: 50%; background: var(--modra-svetla); color: var(--modra);
  display: grid; place-items: center;
  transition: transform var(--prechod), background var(--prechod);
}
.otazka__ikona svg { width: 14px; height: 14px; }
.otazka__prepinac[aria-expanded="true"] .otazka__ikona { transform: rotate(180deg); }
.otazka__odpoved { padding-bottom: 24px; max-width: 70ch; color: var(--text-slaby); }
.otazka__odpoved[hidden] { display: none; }

/* ============================================================================
   12. KONTAKT
   ========================================================================== */
.kontakt__mriezka {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(28px, 4vw, 52px);
  align-items: start;
}
.kontakt__udaje { display: grid; gap: 14px; }
.kontakt__polozka {
  display: flex; gap: 15px; align-items: flex-start;
  padding: 19px 21px;
  background: var(--povrch);
  border: 1px solid var(--ciara);
  border-radius: var(--r-m);
  transition: border-color var(--prechod), box-shadow var(--prechod);
}
a.kontakt__polozka:hover { border-color: var(--modra); box-shadow: var(--tien-m); }
.kontakt__ikona {
  width: 42px; height: 42px; flex: none;
  display: grid; place-items: center;
  border-radius: var(--r-s);
  background: var(--modra-svetla); color: var(--modra);
}
.kontakt__ikona svg { width: 20px; height: 20px; }
.kontakt__nadpisok {
  display: block;
  font-size: 13px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-slabsi);
}
.kontakt__hodnota {
  display: block;
  font-size: 16.5px; font-weight: 600; color: var(--modra); margin-top: 3px;
}

.kontakt__mapa {
  position: relative;
  border-radius: var(--r-l);
  overflow: hidden;
  border: 1px solid var(--ciara);
  box-shadow: var(--tien-m);
  aspect-ratio: 4 / 3;
  background:
    radial-gradient(520px 360px at 70% 20%, rgba(190, 22, 34, .08), transparent 60%),
    radial-gradient(460px 340px at 20% 80%, rgba(15, 69, 134, .10), transparent 62%),
    var(--podklad);
}
.kontakt__mapa { display: block; }
.kontakt__mapa img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform 500ms cubic-bezier(.2, .8, .3, 1);
}
.kontakt__mapa:hover img { transform: scale(1.03); }

/* Tlačidlo navigácie priamo v rohu mapy */
.mapa__navigacia {
  position: absolute; left: 14px; bottom: 14px; z-index: 2;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 12px 20px;
  border-radius: var(--r-max);
  background: var(--cervena-plocha); color: var(--biela);
  font-size: 15.5px; font-weight: 600;
  box-shadow: var(--tien-l);
  transition: background var(--prechod), transform var(--prechod);
}
.mapa__navigacia:hover { background: var(--cervena-tmava); transform: translateY(-2px); }
.mapa__navigacia svg { width: 18px; height: 18px; flex: none; }

/* V tmavom režime mapu jemne stlmíme, nech nesvieti do očí */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .kontakt__mapa img {
    filter: brightness(.78) saturate(.85) contrast(1.05);
  }
}
:root[data-theme="dark"] .kontakt__mapa img {
  filter: brightness(.78) saturate(.85) contrast(1.05);
}


/* ============================================================================
   13. PÄTIČKA
   ========================================================================== */
.paticka {
  background: var(--cierna);
  color: rgba(255, 255, 255, .72);
  padding-block: 54px 32px;
  font-size: 15px;
}
.paticka__mriezka {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
  gap: 36px;
  padding-bottom: 36px;
  border-bottom: 1px solid rgba(255, 255, 255, .13);
}
.paticka__logo img { height: 62px; width: auto; }
.paticka__tagline { margin-top: 16px; max-width: 32ch; }
.paticka__nadpis {
  font-size: 13px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--biela); margin-bottom: 15px;
}
.paticka a { transition: color var(--prechod); }
.paticka a:hover { color: var(--biela); }
.paticka__zoznam { display: grid; gap: 10px; }

.paticka__socialne { display: flex; gap: 10px; margin-top: 20px; }
.paticka__socialne a {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .09);
  color: var(--biela);
  transition: background var(--prechod), transform var(--prechod);
}
.paticka__socialne a:hover { background: var(--cervena-plocha); transform: translateY(-2px); }
.paticka__socialne svg { width: 18px; height: 18px; }

.paticka__spodok {
  display: flex; flex-wrap: wrap; gap: 10px 24px;
  justify-content: space-between; align-items: center;
  padding-top: 26px;
  font-size: 14px; color: rgba(255, 255, 255, .55);
}

/* ============================================================================
   14. LEPKAVÁ LIŠTA NA MOBILE
   ========================================================================== */
.lista {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
  background: var(--povrch-prieh2);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--ciara);
  gap: 10px;
}
.lista .tlacidlo { flex: 1; padding-inline: 14px; font-size: 16px; }
.lista__stav {
  flex: none; display: flex; flex-direction: column; justify-content: center;
  font-size: 12px; font-weight: 600; line-height: 1.25;
  padding-right: 4px;
}
.lista__stav b { font-size: 13px; }
.lista__stav--otvorene { color: var(--zelena); }
.lista__stav--zatvorene { color: var(--text-slaby); }

/* ============================================================================
   15. VYSKAKOVACIE OKNO (POPUP)
   ========================================================================== */
/* Flex + margin:auto namiesto place-items:center — pri vysokom obsahu
   na nízkej obrazovke (telefón naležato) sa inak orezáva horná časť. */
.oznam {
  position: fixed; inset: 0; z-index: 200;
  display: flex;
  padding: var(--gutter);
  background: rgba(10, 25, 48, .72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: oznamVstup 240ms ease-out;
  overflow-y: auto;
}
.oznam[hidden] { display: none; }

@keyframes oznamVstup { from { opacity: 0; } to { opacity: 1; } }
@keyframes oknoVstup {
  from { opacity: 0; transform: translateY(16px) scale(.97); }
  to   { opacity: 1; transform: none; }
}

.oznam__okno {
  position: relative;
  width: 100%; max-width: 530px;
  margin: auto;
  background: var(--povrch);
  border-radius: var(--r-xl);
  box-shadow: var(--tien-xl);
  overflow: hidden;
  animation: oknoVstup 300ms cubic-bezier(.2, .8, .3, 1);
}

.oznam__pruh { height: 7px; background: var(--cervena-plocha); }
.oznam--modra .oznam__pruh { background: var(--modra-plocha); }

.oznam__zavriet {
  position: absolute; top: 18px; right: 18px;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--podklad-2); color: var(--text-slaby);
  transition: background var(--prechod), color var(--prechod);
}
.oznam__zavriet:hover { background: var(--ciara); color: var(--text); }
.oznam__zavriet svg { width: 17px; height: 17px; }

.oznam__telo { padding: 34px clamp(24px, 5vw, 40px) clamp(26px, 4vw, 34px); }

.oznam__obrazok {
  width: 100%; max-height: 230px; object-fit: cover;
  border-radius: var(--r-m);
  margin-bottom: 22px;
}

.oznam__stitok {
  display: inline-block;
  padding: 5px 13px; border-radius: var(--r-max);
  background: var(--cervena-svetla); color: var(--cervena);
  font-size: 12.5px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
  margin-bottom: 14px;
}
.oznam--modra .oznam__stitok { background: var(--modra-svetla); color: var(--modra); }

.oznam__nadpis { font-size: clamp(23px, 3.4vw, 30px); }
.oznam--cervena .oznam__nadpis { color: var(--cervena); }
.oznam__text { margin-top: 13px; color: var(--text-slaby); font-size: 16px; }

.oznam__tabulka {
  margin-top: 22px;
  border: 1px solid var(--ciara);
  border-radius: var(--r-m);
  overflow: hidden;
}
.oznam__riadok {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 12px 17px;
  font-size: 15.5px;
}
.oznam__riadok + .oznam__riadok { border-top: 1px solid var(--podklad-2); }
.oznam__riadok:nth-child(odd) { background: var(--podklad); }
.oznam__kedy { color: var(--text-slaby); }
.oznam__hodiny { font-weight: 700; color: var(--modra); font-variant-numeric: tabular-nums; white-space: nowrap; }

.oznam__akcie { margin-top: 26px; display: grid; gap: 11px; }
.oznam__akcie .tlacidlo { width: 100%; }

/* ============================================================================
   15a. JEMNÉ NABEHNUTIE PRI ROLOVANÍ
   ----------------------------------------------------------------------------
   Prvky sa pri príchode do obrazovky jemne vynoria. Skrytý stav platí len
   vtedy, keď beží JavaScript (trieda ma-js) — keby zlyhal, obsah je normálne
   vidieť. Pri zapnutom obmedzení pohybu v systéme sa animácia nespustí vôbec.
   ========================================================================== */
.ma-js .odhal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 560ms cubic-bezier(.2, .7, .3, 1),
              transform 560ms cubic-bezier(.2, .7, .3, 1);
}
.ma-js .odhal--viditelny { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .ma-js .odhal { opacity: 1 !important; transform: none !important; }
}

/* ============================================================================
   15c. TLAČIDLO SPÄŤ NAHOR
   ========================================================================== */
.nahor {
  position: fixed; right: var(--gutter); bottom: var(--gutter);
  z-index: 55;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--povrch); color: var(--modra);
  border: 1px solid var(--ciara);
  box-shadow: var(--tien-l);
  opacity: 0; visibility: hidden;
  transform: translateY(10px);
  transition: opacity var(--prechod), transform var(--prechod),
              visibility var(--prechod), background var(--prechod);
}
.nahor--vidno { opacity: 1; visibility: visible; transform: none; }
.nahor:hover { background: var(--modra-svetla); }
.nahor svg { width: 20px; height: 20px; transform: rotate(180deg); }

/* ============================================================================
   15b. FOTKY AMBULANCIE
   ========================================================================== */
.fotky__mriezka {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 16px;
}
.fotka {
  margin: 0; position: relative;
  border-radius: var(--r-l);
  overflow: hidden;
  background: var(--podklad-2);
  box-shadow: var(--tien-m);
}
/* Prvá fotka zaberie dva stĺpce — tam patrí tá najlepšia */
.fotka--velka { grid-column: span 2; }

.fotka img {
  width: 100%; height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 400ms cubic-bezier(.2, .8, .3, 1);
}
.fotka:hover img { transform: scale(1.04); }

.fotka figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 26px 18px 14px;
  font-size: 14.5px; font-weight: 600; color: var(--biela);
  background: linear-gradient(to top, rgba(10, 25, 48, .82), transparent);
}

/* ============================================================================
   16. RECENZIE
   ========================================================================== */
.recenzie__mriezka {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 18px;
}
.recenzia {
  margin: 0;
  padding: 26px 24px;
  background: var(--povrch);
  border: 1px solid var(--ciara);
  border-radius: var(--r-l);
  display: flex; flex-direction: column; gap: 14px;
}
.recenzia__hviezdy { color: #f0a500; font-size: 17px; letter-spacing: 2px; line-height: 1; }
.recenzia__text { margin: 0; font-size: 16px; color: var(--text); }
.recenzia__text p { margin: 0; }
.recenzia__autor {
  margin-top: auto; padding-top: 6px;
  display: flex; flex-direction: column; gap: 2px;
  font-size: 14.5px; color: var(--text-slaby);
}
.recenzia__autor strong { color: var(--modra); font-size: 15.5px; }
.recenzie__odkaz { margin-top: 24px; }

/* ============================================================================
   17. LIŠTA SO SÚHLASOM (COOKIES)
   ========================================================================== */
.suhlas {
  position: fixed; z-index: 90;
  left: var(--gutter); bottom: var(--gutter);
  width: min(430px, calc(100vw - 2 * var(--gutter)));
  padding: 20px 22px;
  background: var(--povrch);
  border: 1px solid var(--ciara);
  border-radius: var(--r-l);
  box-shadow: var(--tien-xl);
  animation: suhlasVstup 280ms cubic-bezier(.2, .8, .3, 1);
}
@keyframes suhlasVstup {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.suhlas__text { font-size: 14.5px; color: var(--text-slaby); }
.suhlas__text a { color: var(--modra); font-weight: 600; text-decoration: underline; }
.suhlas__akcie { display: flex; gap: 10px; margin-top: 16px; }
.suhlas__akcie .tlacidlo { flex: 1; padding: 12px 16px; font-size: 15px; }

/* ============================================================================
   18. MOBIL A TABLET
   ========================================================================== */
@media (max-width: 1024px) {
  .uvod__mriezka { grid-template-columns: 1fr; }
  .akutne__mriezka { grid-template-columns: 1fr; }
  .kontakt__mriezka { grid-template-columns: 1fr; }
  .paticka__mriezka { grid-template-columns: 1fr 1fr; }
  .paticka__znacka { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
  html { scroll-padding-top: 80px; }

  .hlavicka__vnutro { height: 66px; gap: 12px; }
  .hlavicka__logo img { height: 38px; }
  .hlavicka__nav { display: none; }
  .hlavicka__nav--otvorene {
    display: block;
    position: absolute; left: 0; right: 0; top: 100%;
    margin: 0;
    background: var(--povrch);
    border-bottom: 1px solid var(--ciara);
    box-shadow: var(--tien-l);
    padding: 10px var(--gutter) 18px;
  }
  .hlavicka__nav--otvorene ul { flex-direction: column; align-items: stretch; gap: 2px; }
  .hlavicka__nav--otvorene a { padding: 14px 14px; font-size: 17px; border-radius: var(--r-m); }
  .hlavicka__menu { display: flex; margin-left: auto; }
  .hlavicka__tel span { display: none; }
  .hlavicka__tel { padding: 11px 13px; }

  /* Lepkavá lišta nahradí tlačidlá v hlavičke */
  .lista { display: flex; }
  body { padding-bottom: 78px; }

  /* Súhlas musí sedieť nad lištou s telefónom, nie cez ňu */
  .suhlas {
    left: var(--gutter); right: var(--gutter);
    bottom: calc(78px + env(safe-area-inset-bottom) + 10px);
    width: auto;
  }

  /* Tlačidlo späť nahor by sedelo presne na lište so Zavolať.
     Lišta je dôležitejšia, tak tlačidlo schováme — na mobile sa aj tak
     roluje prstom a na dlhej stránke by len zavadzalo. */
  .nahor { display: none; }

  /* Odkazy v pätičke musia byť dosť veľké na prst */
  .paticka__zoznam { gap: 2px; }
  .paticka__zoznam a {
    display: inline-flex; align-items: center;
    min-height: 40px; padding-block: 4px;
  }

  .uvod::after { display: none; }
  .uvod__nadpis { font-size: clamp(30px, 8vw, 40px); }

  .cennik__ovladanie { flex-direction: column; align-items: stretch; }
  .zalozky { width: 100%; }
  .zalozky__btn { flex: 1; text-align: center; padding-inline: 12px; }
  .hladanie { max-width: none; }

  /* Krátky názov nechá cenu na tom istom riadku, dlhý si vezme celý
     riadok a cena sa zalomí pod neho doprava. */
  .cennik__polozka { flex-wrap: wrap; gap: 2px 12px; padding: 12px 17px; }
  .cennik__nazov { flex: 1 1 auto; }
  .cennik__bodky { display: none; }
  .cennik__cena { margin-left: auto; }

  .preco__mriezka { grid-template-columns: repeat(2, 1fr); }
  .preco__polozka { padding: 22px 18px; }
}

@media (max-width: 560px) {
  :root { --gutter: 16px; }
  body { font-size: 16.5px; }

  .hodiny__karta { padding: 22px 20px; }
  .hodiny__hlava { margin-bottom: 15px; }
  .hodiny__riadok { font-size: 15px; }

  .akutne__zoznam { grid-template-columns: 1fr; }
  .sluzby__mriezka { grid-template-columns: 1fr; }
  .tim__mriezka { gap: 14px; }
  .lekar { flex: 1 1 calc(50% - 7px); max-width: none; }
  .lekar__telo { padding: 16px 15px 18px; }
  .lekar__meno { font-size: 16px; }
  .lekar__titul { font-size: 12px; }
  .lekar__bio { font-size: 14px; -webkit-line-clamp: 3; }

  .paticka__mriezka { grid-template-columns: 1fr; gap: 28px; }
  .uvod__akcie .tlacidlo { width: 100%; }

  .oznam__telo { padding: 28px 20px 24px; }
  .oznam__riadok { font-size: 14.5px; padding: 11px 14px; }

  .fotky__mriezka { grid-template-columns: 1fr; }
  .fotka--velka { grid-column: span 1; }
  .recenzie__mriezka { grid-template-columns: 1fr; }
  .recenzia { padding: 22px 20px; }
  .recenzie__odkaz { width: 100%; }
  .suhlas { padding: 18px 18px; }
  .suhlas__akcie { flex-direction: column-reverse; }
}

/* Nízka obrazovka (telefón naležato) — popup nesmie prerásť cez okraj */
@media (max-height: 560px) {
  .oznam { padding: 12px; }
  .oznam__telo { padding: 22px 20px 20px; }
  .oznam__obrazok { max-height: 120px; margin-bottom: 14px; }
  .oznam__nadpis { font-size: 20px; }
  .oznam__riadok { padding: 8px 14px; font-size: 14px; }
  .oznam__akcie { margin-top: 18px; }
}

/* Jeden lekár na riadok až na veľmi úzkych telefónoch. Pri dvoch
   stĺpcoch má fotka asi 160 px, čiže sa nenaťahuje nad svoje rozlíšenie
   (265 px) a zostáva ostrá. */
@media (max-width: 330px) {
  .lekar { flex: 1 1 100%; }
  .preco__mriezka { grid-template-columns: 1fr; }
}

/* --- Tlač ---------------------------------------------------------------- */
@media print {
  .hlavicka, .lista, .oznam, .kontakt__mapa, .uvod__akcie { display: none !important; }
  body { padding: 0; font-size: 11pt; }
  .cennik__telo[hidden] { display: block !important; }
  .sekcia { padding-block: 16px; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #666; }
}