*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--font-sans);font-size:var(--body-size);line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5{font-family:var(--font-serif);font-weight:var(--sw-hd);line-height:var(--serif-lh);color:var(--accent);margin:0 0 .5em}
h1{font-size:calc(clamp(2.75rem,5vw,4.5rem) * var(--disp-k-h1,1));letter-spacing:var(--tr-h1);margin-bottom:24px}
h2{font-size:calc(clamp(2.125rem,3.2vw,3.25rem) * var(--disp-k,1));line-height:1.08;letter-spacing:var(--tr-h2);margin-bottom:18px}
h3{font-size:calc(clamp(1.625rem,2vw,2.125rem) * var(--disp-k-sm,1));line-height:1.18;letter-spacing:var(--tr-h3);margin-bottom:14px;font-weight:var(--w-h3)}
h4{font-size:calc(clamp(1.3125rem,1.5vw,1.5rem) * var(--disp-k-sm,1));line-height:1.3;letter-spacing:var(--tr-h4);margin-bottom:10px;font-weight:var(--w-h4)}
h5{font-size:calc(1.125rem * var(--disp-k-sm,1));line-height:1.4;letter-spacing:var(--tr-h5);margin-bottom:8px;font-weight:var(--w-h5)}
p{margin:0 0 1.15rem}
p:last-child{margin-bottom:0}
/* Súvislý text na 66 znakov — odstavec cez celú šírku monitora sa nečíta,
   oko stratí začiatok ďalšieho riadku. Mriežky a karty si šírku určujú samy. */
.article p,.article li{max-width:66ch}
a{color:var(--accent);text-decoration:none}
/* Bočné odsadenie sa píše longhandom (padding-left/right), NIKDY skráteným
   zápisom: .section a .page-head sú súčasne .container a skrátený zápis by
   im vynuloval zvislé odsadenie. Presne to sa dialo medzi 561 a 900 px do
   23. 8. 2026 — na tablete boli sekcie nalepené na sebe. */
.container{max-width:var(--maxw);margin:0 auto;padding-left:32px;padding-right:32px}
.section{padding-top:110px;padding-bottom:110px}
.muted{color:var(--ink-soft)}

/* Kurzívny akcent v nadpisoch */
.script{font-style:var(--serif-italic);font-weight:var(--sw-lt);color:var(--moss)}

/* Eyebrow – malý uppercase label */
.eyebrow{
  display:flex;align-items:center;gap:14px;
  font-size:14px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-muted);margin-bottom:28px;
}
.eyebrow::before{content:'';width:44px;height:1px;background:var(--line-strong);flex-shrink:0}
/* Riadok nad nadpisom leží na PLOCHE ÚVODU, nie na podklade stránky — preto
   si farbu berie z dopočtu voči nej. Záskok = pôvodná hodnota, takže web
   s východiskovou paletou sa nemení. (24. 8. 2026) */
.hero .eyebrow{color:var(--hero-ink-muted,var(--ink-muted))}
.eyebrow-hero{align-items:flex-start}
.eyebrow-hero::before{display:none}
.eyebrow-hero span{line-height:1.9}

/* Tlačidlá – ostré, elegantné */
.btn{
  display:inline-flex;align-items:center;gap:12px;
  padding:12px 28px;min-height:48px;justify-content:center;line-height:1.2;
  font-size:16px;font-weight:600;letter-spacing:0;text-transform:none;
  font-family:var(--font-sans);cursor:pointer;border:1px solid var(--accent);
  transition:background .22s ease,color .22s ease;text-decoration:none;
}
.btn .arr{transition:transform .22s ease}
.btn:hover .arr{transform:translateX(5px)}
/* Primárne tlačidlo nesie AKCENT, nie hlavnú farbu — je to jediné miesto na
   stránke, kde má farba kričať. Nápis sa dopočítava (biely alebo tmavý) podľa
   toho, čo je na akcente čitateľnejšie; pri východiskovej palete je akcent
   totožný s hlavnou farbou, takže sa nič nemení. Sekundárne (.btn-ghost)
   zostáva v hlavnej farbe, aby si dve tlačidlá vedľa seba nekonkurovali. */
.btn-primary{background:var(--spark);border-color:var(--spark);color:var(--on-spark)}
.btn-primary:hover{background:var(--spark-hover);border-color:var(--spark-hover)}
.btn-ghost{background:transparent;color:var(--accent)}
.btn-ghost:hover{background:var(--accent);color:var(--on-accent)}

/* Header */
.site-header{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:40px;height:64px}
.brand{font-family:var(--font-serif);font-size:1.3rem;font-weight:var(--sw-md);color:var(--accent);display:flex;align-items:center;gap:12px}
/* Všetky rozmery loga sa násobia --logo-k (Vzhľad → Veľkosť loga, 23. 9. 2026).
   V hlavičke strop 60 px — lišta má 64 px. Násobí sa aj max-width, inak by
   sa zväčšené logo pri pevnej výške zúžilo a zdeformovalo. */
.brand .brand-img{display:block;height:min(60px,calc(48px*var(--logo-k,1)));width:auto;max-width:calc(340px*var(--logo-k,1))}
/* Logo a názov ambulancie vedľa seba (Nastavenia → Vzhľad → Značka a médiá).
   Vtedy je logo nižšie, aby sa vedľa neho zmestil text aj s menu — rozšírenie
   značky je zmena rozloženia celej lišty, nie ozdoba (poučenie z 11. 8.).
   Text sa nezmenšuje pod 1 rem; keď dôjde miesto, zmenší sa logo (voľba 2B).
   Selektor :has() drží obe pravidlá pri sebe — bez neho by trieda musela ísť
   na .brand v hlavičke aj v pätičke a tie dve miesta by sa časom rozišli. */
.brand .brand-nm{min-width:0;line-height:1.15}
.brand:has(.brand-img+.brand-nm) .brand-img{height:min(60px,calc(38px*var(--logo-k,1)));max-width:calc(200px*var(--logo-k,1))}
@media(max-width:1080px){.brand:has(.brand-img+.brand-nm) .brand-img{height:min(60px,calc(32px*var(--logo-k,1)));max-width:calc(150px*var(--logo-k,1))}}
@media(max-width:720px){
  .site-header .brand:has(.brand-img+.brand-nm){gap:10px}
  .site-header .brand:has(.brand-img+.brand-nm) .brand-img{height:auto;max-height:calc(34px*var(--logo-k,1));max-width:32vw;width:auto}
  .brand:has(.brand-img+.brand-nm) .brand-nm{font-size:1rem}
}
/* tasky #52: logo v navigácii na mobile zjednotené na veľkosť footer loga (.brand-img-big = 51px).
   Vyššia špecificita (.site-header ...) prebíja neskoršie @media(max-width:1080px){height:44px}.
   Mirror footera: max-width:100% + zmenšený gap + shrinkable .brand (min-width:0) → na bežných
   telefónoch 51px (ako footer), na úzkych plynulo zmenší (nikdy neoreže/nepretečie). */
@media(max-width:720px){
  .site-header .nav{gap:16px}
  .site-header .brand{min-width:0}
  .site-header .brand .brand-img{height:auto;max-height:min(60px,calc(51px*var(--logo-k,1)));max-width:100%;width:auto}
}
.nav-links{display:flex;align-items:center;gap:37px;list-style:none;margin:0;padding:0}
.nav-links a{color:var(--accent);font-size:16px;font-weight:500;letter-spacing:normal;text-transform:none;position:relative;padding:4px 0;white-space:nowrap;line-height:1.2}
.nav-links a::after{content:'';position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--accent);transition:width .25s ease}
.nav-links a:hover::after{width:100%}
.nav-links a.active{color:var(--accent)}
.nav-links a.active::after{width:100%}
.nav-links .nav-cta{border:1px solid var(--accent);padding:11px 20px;color:var(--accent)}
.nav-links .nav-cta:hover{background:var(--accent);color:var(--on-accent)}
.nav-links .nav-cta::after{display:none}
/* Menu v hlavičke nesie aj položky navyše pre mobil — na desktope sú skryté. */
.nav-links .only-mob{display:none}
.nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:12px 4px}
.nav-toggle span{display:block;width:26px;height:2px;background:var(--accent);transition:transform .35s cubic-bezier(.65,0,.35,1),background .3s ease}
.nav-toggle span+span{margin-top:8px}
body.nav-open .nav-toggle span{background:var(--bg)}
body.nav-open .nav-toggle span:first-child{transform:translateY(5px) rotate(45deg)}
body.nav-open .nav-toggle span:last-child{transform:translateY(-5px) rotate(-45deg)}



/* Textove linky v obsahu – hairline sage podciarknutie, hover do moss */
main p a:not(.btn), main li a:not(.btn){color:var(--accent);font-weight:500;border-bottom:1px solid var(--sage);padding-bottom:1px;transition:color .2s ease,border-color .2s ease}
main p a:not(.btn):hover, main li a:not(.btn):hover{color:var(--moss);border-bottom-color:var(--moss)}

/* Oznam */
/* Oznam – pás pod hlavičkou */
.announce-strip{background:var(--accent);color:var(--on-accent)}
.announce-strip .container{display:flex;align-items:baseline;gap:20px;padding-top:14px;padding-bottom:14px;flex-wrap:wrap}
.announce-strip .msg{font-family:var(--font-accent,var(--font-serif));font-style:var(--serif-italic);font-size:calc(1.05rem * var(--disp-k,1));line-height:1.5}
/* Oznam je od 8/2026 mimo <header>: hlavička zostáva prilepená hore, pás s oznamom odscrolluje so stránkou a podsunie sa pod ňu. Linka pod hlavičkou sa nad pásom ruší, inak by nad tmavým pruhom visela svetlá vlásočnica. */
.site-header:has(+ .announce-strip){border-bottom-color:transparent}

/* ===== HERO ===== */
/* Full-width hero (07/2026): sekcia bez .container – text drží pozíciu containera
   cez ľavý gutter, fotka tečie až po pravý okraj viewportu.
   Pod 1240px (=--maxw): gutter 32px ako .container, stĺpce fr ako predtým
   (fotka navyše zhltne bývalý pravý padding). Nad 1240px: 1. stĺpec =
   gutter containera + fixná šírka textu (pôvodných 1.15fr), extra šírku
   viewportu berie fotka. 104px = 2×32 padding + 40 gap.
   Pri zmene --maxw upraviť aj media query nižšie! */
/* Úvodná sekcia má tri polohy podľa nastavenia Vzhľadu: tichá (pozadie = podklad
   stránky, hierarchiu robí typografia), jemná plocha, alebo sýta plocha z hlavnej
   farby. Hodnotu dopočíta lib/palette.js — farba sa v paneli nezadáva.
   Shorthand padding sa nesmie použiť: prepísal by bočný padding z .container. */
.hero{padding-top:96px;padding-bottom:30px;position:relative;overflow:hidden;
  background:var(--hero-bg);color:var(--hero-ink)}
.hero-bleed{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:40px;align-items:center;padding-left:32px}
@media(min-width:1240px){
  .hero-bleed{grid-template-columns:calc((100% - var(--maxw))/2 + 32px + (var(--maxw) - 104px)*.575) minmax(0,1fr);padding-left:0}
  .hero-copy{width:calc((var(--maxw) - 104px)*.575);justify-self:end}
}
/* Nadpis úvodu si farbu berie z dopočtu pre PLOCHU ÚVODU, nie z globálneho
   pravidla pre nadpisy. Bez toho by na sýtej ploche stál nadpis v hlavnej
   farbe na ploche z tej istej farby a zmizol by. Záskok = hlavná farba, takže
   web s východiskovou paletou sa nemení. (25. 8. 2026) */
.hero h1{margin-bottom:.45em;color:var(--hero-title,var(--accent))}
/* To isté pre kurzívne zvýraznené slovo a ručne kreslenú linku pod ním —
   obe brali farbu počítanú voči podkladu stránky. */
.hero .script{color:var(--hero-script,var(--moss))}
.hero .u-stroke path{stroke:var(--hero-stroke,var(--sage))}
/* Tlačidlá na ploche úvodu. Na sýtej ploche sa primárne obráti (svetlá plocha,
   na nej farba úvodu) a sekundárne prejde na farbu nápisu; akcent by na nej
   stál na 1,5 : 1. Mimo sýtej plochy sa premenné rovnajú --spark / --accent,
   takže sa nemení nič. */
.hero .btn{border-color:var(--hero-title,var(--accent))}
.hero .btn-primary{background:var(--hero-btn-bg,var(--spark));border-color:var(--hero-btn-bg,var(--spark));color:var(--hero-btn-ink,var(--on-spark))}
.hero .btn-primary:hover{background:var(--hero-btn-bg-hover,var(--spark-hover));border-color:var(--hero-btn-bg-hover,var(--spark-hover))}
.hero .btn-ghost{color:var(--hero-title,var(--accent))}
.hero .btn-ghost:hover{background:var(--hero-title,var(--accent));color:var(--hero-bg,var(--on-accent))}
.hero .lead{font-size:calc(clamp(1.125rem,.5vw + 1rem,1.25rem) * var(--disp-k,1));line-height:1.55;color:var(--hero-ink-soft,var(--ink-soft));max-width:48ch;margin-bottom:44px}
.hero-actions{display:flex;gap:16px;flex-wrap:wrap}
.hero-art{color:var(--moss);display:flex;justify-content:flex-start;align-self:end}
.hero-art svg{width:100%;max-width:430px;height:auto}
/* Full-bleed fotka (07/2026, ruší tasky #19/#20): stĺpec od čiary pod nav (margin-top:-96px = padding-top .hero) po linku .hero-facts (margin-bottom:-70px = jej margin-top).
   object-fit:cover + object-position:top – prípadné orezanie len po okrajoch, tvár hore ostáva.
   Výšku hero naďalej riadi textový stĺpec, takže task #22 (hero + fakty v okne notebooku) platí ďalej. */
.hero-photo{width:100%;height:100%;object-fit:cover;object-position:left top;display:block}
.hero-art:has(.hero-photo){justify-content:center;align-self:stretch;margin-top:-96px;margin-bottom:-70px}
/* Výrez s priehľadným pozadím (postava bez pozadia) je iný druh obrázka než fotka:
   orezať sa nesmie, lebo orez by figúre podľa šírky okna odsekol nohy alebo hlavu.
   Preto sa ruší celoplošné roztiahnutie aj horný presah pod lištu — obrázok sa
   zobrazí celý a postaví sa na spodnú hranu stĺpca. */
.hero-photo.is-vyrez{width:auto;max-width:100%;height:auto;max-height:560px;object-fit:contain;margin:0 auto}
/* `align-items:flex-end` je nutné: obrázok má strop výšky (max-height) a prvok,
   ktorému strop zabráni vyplniť výšku stĺpca, sa pritlačí na začiatok osi, teda
   hore — a pod ním ostane prázdno. Záporné spodné odsadenie je tá istá hodnota
   ako pri bežnej fotke: rovná sa hornému odsadeniu pásu faktov, takže spodná
   hrana výrezu sadne presne na jeho linku. */
.hero-art:has(.hero-photo.is-vyrez){align-self:end;align-items:flex-end;margin-top:0;margin-bottom:-70px}

/* ── Úvod s fotkou v pozadí (08/2026, prestavané 22. 9. 2026): rozloženia
   „pozadie" a „pozadie + postava".
   Fotka a vrstva ležia v .hero-stage — to je PRESNE viditeľná plocha úvodu,
   od lišty po pás faktov. Pás faktov je pod rámom, nie cez neho: keby fotka
   vypĺňala aj jeho plochu, prehliadač by ju zväčšil pre vyšší rám a jej
   spodok by skončil pod pásom (do 22. 9. bola o 11–13 % väčšia, než treba).
   Fotka sa NEOREZÁVA zhora ani zdola (Marek 14. 10. 2026): má vždy výšku
   rámu a šírku podľa vlastného pomeru strán. Kde fotka nesiaha, je farba
   úvodu a okraj fotky do nej plynulo dobehne (maska na fotke, nie vrstva —
   vrstva nevie, kde fotka končí). Do 14. 10. fotka vypĺňala celý rám
   (object-fit:cover) a pri širokom okne jej chýbal spodok — ľudia bez nôh.
   Orezať sa smie len do strany, keď je rám užší než fotka.
   Vrstva vo farbe úvodu (--hero-bg = tichý/plocha/výrazný) sa počíta od
   pravého okraja TEXTU (--tx), nie v percentách šírky: pod textom je plná,
   za ním plynulo dobehne do nuly, takže ľudia vpravo sú bez závoja.
   --tx kopíruje šírku prvého stĺpca .hero-bleed (1.15fr/.85fr, padding 32,
   gap 40; nad 1240 px vzorec z media query vyššie) — pri zmene mriežky
   úvodu upraviť aj tu. Výšku ďalej určuje textový stĺpec, min-height rámu
   zodpovedá doterajšej minimálnej viditeľnej výške. */
.hero.is-full{padding-top:0;padding-bottom:0}
.hero-stage{--hero-fx:right top;--tx:calc(57.5% - 9px);position:relative;overflow:hidden;min-height:460px;padding-top:96px;padding-bottom:70px;display:flex;flex-direction:column;justify-content:center}
@media(min-width:1240px){.hero-stage{--tx:calc(50% + 65px)}}
.hero.is-full .hero-bleed{flex:1;align-content:center}
.hero.is-full .hero-bg{position:absolute;top:0;bottom:0;right:0;left:auto;height:100%;width:auto;max-width:none;z-index:0;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 38%);mask-image:linear-gradient(90deg,transparent 0,#000 38%)}
.hero-stage::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,var(--hero-bg) 0,var(--hero-bg) calc(var(--tx) - 220px),
    color-mix(in srgb,var(--hero-bg) 88%,transparent) calc(var(--tx) - 110px),
    color-mix(in srgb,var(--hero-bg) 62%,transparent) var(--tx),
    color-mix(in srgb,var(--hero-bg) 30%,transparent) calc(var(--tx) + 100px),
    color-mix(in srgb,var(--hero-bg) 9%,transparent) calc(var(--tx) + 180px),
    transparent calc(var(--tx) + 240px))}
.hero.is-full .hero-bleed,.hero.is-full .hero-facts-wrap{position:relative;z-index:2}
/* Poloha fotky (Nastavenia → Vzhľad): ku ktorej strane sa fotka priloží
   a ktorá jej časť ostane, keď je rám užší než fotka. Pri texte vľavo je to
   takmer vždy pravá strana — preto je vpravo východisko. Voľné okraje fotky
   dobehnú do farby úvodu. --hero-fx ďalej riadi orez na telefóne. */
.hero.is-full.hero-fx-vlavo .hero-stage{--hero-fx:left top}
.hero.is-full.hero-fx-stred .hero-stage{--hero-fx:center top}
.hero.is-full.hero-fx-vlavo .hero-bg{right:auto;left:0;-webkit-mask-image:linear-gradient(270deg,transparent 0,#000 38%);mask-image:linear-gradient(270deg,transparent 0,#000 38%)}
.hero.is-full.hero-fx-stred .hero-bg{right:auto;left:50%;transform:translateX(-50%);-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 30%,#000 70%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 30%,#000 70%,transparent 100%)}
/* Pri fotke na celú šírku sa pás faktov roztiahne na celú šírku SÁM:
   čiary od kraja po kraj, text stále v kontajneri. Je to soklík pod fotkou,
   nie samostatná voľba. Pri pôvodnom rozložení obal nič nekreslí. */
.hero.is-full .hero-facts-wrap{background:var(--bg)}
.hero.is-full .hero-facts{margin-top:0;border-top:0;border-bottom:0}
.hero.is-full .hero-facts .fact{position:relative;border-right-color:transparent}
.hero.is-full .hero-facts .fact::after{content:'';position:absolute;top:20px;bottom:20px;right:-1px;width:1px;background:var(--line-strong)}
.hero.is-full .hero-facts .fact:last-child::after{content:none}
/* Výrez postavy pri fotke v pozadí: stojí na linke pásu rovnako ako doteraz. */
.hero.is-full .hero-art:has(.hero-photo.is-vyrez){position:relative;z-index:2}

/* underline pod kurzívnym slovom – ručný ťah */
.u-stroke{position:relative;white-space:nowrap}
/* Zalomenie pred viacslovnou frázou s linkou — platí len na telefóne (lib/pageText.js, heading). */
.us-br{display:none}
.u-stroke svg{position:absolute;left:0;bottom:-.08em;width:100%;height:.28em;overflow:visible}
.u-stroke path{stroke:var(--sage);stroke-width:2.5;fill:none;stroke-linecap:round;
  stroke-dasharray:1000;stroke-dashoffset:1000;animation:draw 1.1s .5s ease forwards}
@keyframes draw{to{stroke-dashoffset:0}}

/* Fakty pod hero – hairline riadok */
.hero-facts{display:flex;gap:0;border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong);margin-top:70px}
.hero-facts .fact{flex:1;padding:22px 26px;border-right:1px solid var(--line-strong);font-size:14px;color:var(--ink-soft)}
/* Sprievodná informácia, nie druhý nadpis: najľahší rez nálady, nie najťažší. */
.hero-facts .fact:first-child{padding-left:0}
.hero-facts .fact:last-child{border-right:none}
/* Pás faktov leží pri rozloženiach bez fotky v pozadí NA PLOCHE ÚVODU, takže
   aj jeho vlasové čiary sa počítajú voči nej — tmavá čiara na tmavej ploche
   by bola neviditeľná. Záskok = --line-strong, teda doterajší stav. */
.hero:not(.is-full) .hero-facts{border-top-color:var(--hero-line,var(--line-strong));border-bottom-color:var(--hero-line,var(--line-strong))}
.hero:not(.is-full) .hero-facts .fact{border-right-color:var(--hero-line,var(--line-strong))}
.hero:not(.is-full) .hero-facts .fact{color:var(--hero-ink-soft,var(--ink-soft))}
.hero:not(.is-full) .hero-facts .fact b{color:var(--hero-accent,var(--accent))}
.hero-facts .fact b{display:block;font-family:var(--font-accent,var(--font-serif));font-style:var(--serif-italic);font-weight:var(--sw-lt);font-size:calc(1.0625rem * var(--disp-k,1));color:var(--accent);margin-bottom:2px}

/* ===== DVE HLAVNÉ AKCIE ===== */
.actions-grid{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line-strong)}
.action-card{
  padding:52px 40px;display:flex;flex-direction:column;align-items:flex-start;
  background:transparent;position:relative;transition:background .28s ease,color .28s ease;
}
.action-card + .action-card{border-left:1px solid var(--line-strong)}
.action-card .tag{font-size:14px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-muted);margin-bottom:26px;transition:color .28s ease}
.action-card h3{font-size:calc(clamp(1.625rem,2vw,2.125rem) * var(--disp-k-sm,1));line-height:calc(var(--serif-lh) + .12);margin-bottom:.5em;transition:color .28s ease}
.action-card p{color:var(--ink-soft);max-width:34ch;font-size:.95rem;flex:1;transition:color .28s ease}
.action-card .go{
  margin-top:30px;display:inline-flex;align-items:center;gap:12px;
  font-size:14px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);
  border-bottom:1px solid var(--accent);padding-bottom:6px;transition:color .28s ease,border-color .28s ease;
}
.action-card .go .arr{transition:transform .22s ease}
.action-card:hover{background:var(--accent)}
.action-card:hover .tag{color:color-mix(in srgb,var(--bg) 60%,var(--sage))}
.action-card:hover h3,.action-card:hover .go{color:var(--on-accent);border-color:var(--on-accent)}
.action-card:hover p{color:color-mix(in srgb,var(--bg) 78%,var(--sage))}
.action-card:hover .go .arr{transform:translateX(6px)}
.action-card:hover h3 .script{color:color-mix(in srgb,var(--bg) 50%,var(--sage))}

.priority-note{
  display:flex;align-items:center;gap:16px;margin-top:54px;
  font-size:15px;color:var(--ink-soft);font-style:var(--serif-italic);font-family:var(--font-serif);
}
.priority-note svg{width:20px;height:20px;stroke:var(--moss);flex-shrink:0}

/* Tretí kontaktný bod — vedome slabší: riadok na spodku mriežky akcií.
   Je to <a>, takže hover inverzia je v poriadku (DESIGN bod: hover len na klikateľných). */
.ask-row{
  grid-column:1/-1;border-top:1px solid var(--line-strong);
  display:flex;align-items:center;gap:24px;padding:28px 56px;transition:background .28s ease;
}
.ask-row .ask-ico{flex-shrink:0;width:24px;height:24px;color:var(--moss);transition:color .28s ease}
.ask-row .ask-ico svg{display:block;width:100%;height:100%}
.ask-row .ask-main{flex:1;min-width:0}
.ask-row .ask-t{display:block;font-family:var(--font-serif);font-weight:var(--sw-hd);font-size:calc(1.22rem * var(--disp-k-sm,1));line-height:1.25;color:var(--accent);transition:color .28s ease}
.ask-row .ask-p{display:block;margin-top:5px;font-size:.93rem;color:var(--ink-soft);transition:color .28s ease}
.ask-row .go{
  flex-shrink:0;display:inline-flex;align-items:center;gap:10px;
  font-size:14px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);
  border-bottom:1px solid var(--accent);padding-bottom:5px;white-space:nowrap;
  transition:color .28s ease,border-color .28s ease;
}
.ask-row .go .arr{transition:transform .22s ease}
.ask-row:hover{background:var(--accent)}
.ask-row:hover .ask-ico{color:color-mix(in srgb,var(--bg) 60%,var(--sage))}
.ask-row:hover .ask-t,.ask-row:hover .go{color:var(--on-accent);border-color:var(--on-accent)}
.ask-row:hover .ask-t .script{color:color-mix(in srgb,var(--bg) 50%,var(--sage))}
.ask-row:hover .ask-p{color:color-mix(in srgb,var(--bg) 78%,var(--sage))}
.ask-row:hover .go .arr{transform:translateX(6px)}

/* ===== VYBAVENIE – hairline mriežka (statická, bez hoveru) ===== */
/* Deliace linky kreslia SAMOTNÉ dlaždice, nie podklad mriežky.

   Predtým bol podkladom mriežky `--line-strong` a linky vznikali tým, že sa
   cez medzery presvitá. Lenže presvitá aj tam, kde dlaždica nie je: pri počte
   prístrojov, ktorý sa nedelí počtom stĺpcov, zostal na konci sivý obdĺžnik.
   A ten počet sa mení s šírkou obrazovky (4 / 2 / 1 stĺpec), takže doplniť
   prázdne dlaždice do HTML by problém len presunulo na inú šírku.

   Teraz má každá dlaždica 1px tieň dookola, ktorý medzeru vyplní. Kde
   dlaždica nie je, nie je ani tieň — a plocha zostane vo farbe podkladu.
   Vonkajšie hrany orezáva `overflow:hidden` na mriežke, takže sa rám
   nezdvojuje. */
.equip-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--bg);border:1px solid var(--line-strong)}
.equip{padding:38px 30px;background:var(--bg);box-shadow:0 0 0 1px var(--line-strong)}
.equip-ico{display:block;margin-bottom:18px}
.equip-ico svg{display:block;width:27px;height:27px;color:var(--moss)}
.equip h4{font-family:var(--font-sans);font-weight:600;font-size:14px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin:0 0 10px}
.equip p{font-size:calc(1rem * var(--sec-k,1));line-height:1.6;color:var(--ink-soft);margin:0}
.equip.equip-intro .big{font-family:var(--font-serif);font-style:normal;font-weight:var(--sw-md);font-size:calc(1.875rem * var(--disp-k-sm,1));color:var(--accent);line-height:1.25}

/* ===== HODINY + KONTAKT vedľa seba ===== */
.info-split{display:grid;grid-template-columns:2fr 3fr;border:1px solid var(--line-strong)}
/* Nadpisy zostávajú v jednej línii, zvislo sa centrujú AŽ zoznamy pod nimi.

   Prvý pokus centroval celý obsah polovice (`justify-content:center`) a bolo
   to horšie než pôvodný stav: nadpis „Kontakt" spadol doprostred a prestal
   byť v jednej línii s „Ordinačné hodiny". Dva nadpisy vedľa seba v rôznej
   výške čítal človek ako chybu, nie ako zámer.

   Zoznam a kontaktné riadky preto dostávajú `margin: auto 0` — v zvislom
   flexe si tým rozdelia voľné miesto rovnako hore aj dole. Nadpisy zostanú,
   kde boli. Na mobile sú polovice pod sebou a vysoké presne na svoj obsah,
   takže sa nič nedelí a pravidlo je bez účinku. */
.hours{background:var(--accent);color:var(--on-accent);padding:64px 56px 44px;display:flex;flex-direction:column}
.hours h2{color:var(--on-accent);font-size:calc(clamp(1.75rem,2.2vw,2.25rem) * var(--disp-k,1));margin-bottom:.12em}
/* Podnadpis je veta, nie odkaz. Akcentová farba na ňom sľubovala kliknutie,
   ktoré neexistuje — odteraz neutrálna a tlmená (Marek 24. 8. 2026): v hodinách
   ten istý tlmený nápis, akým sú vypísané časy. */
.hours .sub{color:var(--on-accent-soft);font-size:calc(1rem * var(--sec-k,1));line-height:1.35;margin-bottom:38px}
.hours-list{display:grid}
.hours-row{display:grid;grid-template-columns:1fr auto;align-items:baseline;padding:15px 0;border-bottom:1px solid color-mix(in srgb,var(--bg) 18%,transparent);font-size:calc(16px * var(--sec-k,1))}
.hours-row:last-child{border-bottom:none}
/* Časy na pravom okraji bloku. Deň vľavo, čas vpravo — stĺpec časov tak
   drží jednu zvislú hranu vo všetkých riadkoch bez ohľadu na to, či má
   deň jeden úsek alebo dva. Platí rovnako na desktope aj na mobile. */
.hours-row .time{justify-self:end;text-align:right}
.hours-row .day{letter-spacing:.07em;text-transform:uppercase;font-size:calc(15px * var(--sec-k,1));font-weight:600}
.hours-row .time{font-family:var(--font-accent,var(--font-serif));font-size:calc(1.05rem * var(--sec-k,1));letter-spacing:.02em;color:var(--on-accent-soft)}
/* Deň s dvoma úsekmi: časy pod seba. Rozsah sa nikdy nesmie zalomiť uprostred —
   preto sa úseky nesadzujú za sebou, ale pod seba, a čiarka medzi nimi sa skrýva
   (v HTML zostáva, aby sa text dal skopírovať v čitateľnej podobe). */
/* Úsek je riadok zarovnaný doprava: popis vľavo, čas vpravo. Rozsah drží
   pohromade trieda tval — deliť sa nesmie —, popis smie na úzkej obrazovke
   spadnúť na vlastný riadok (preto flex-wrap, nie nowrap na celom úseku). */
.hours-row .time .tseg{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:baseline;gap:2px 14px}
.hours-row .time .tval{white-space:nowrap}
.hours-row .time .tsep{display:none}
/* Popis úseku („detská poradňa“, „návštevná služba“) — bežnou rečou, rovnako
   veľký ako čas (Marek 12. 10. 2026: popisy nemajú byť menšie; predtým 13 px).
   Farbu má tú istú ako čas; odlišuje ho len písmo (bežné vs. akcentové). V HTML stojí PRED časom, aby sa
   poradie čítania zhodovalo s poradím na obrazovke (čítačka obrazovky). */
.hours-row .time .tnote{font-family:var(--font-body,var(--font-sans));font-size:inherit;letter-spacing:0;line-height:1.3}
.hours-row .time .tseg+.tseg{margin-top:4px}
/* Zlúčený rozsah dní bez popisov („Pondelok – Piatok" · čas), 22. 9. 2026.
   Rozsah sa nikdy nedelí; keď sa s časom nezmestí do riadku (úzky telefón),
   čas zalomí pod neho a drží pravý okraj. Bez prahu v px — rozhoduje miesto,
   nie odhad šírky písma, takže platí pre každú typografickú náladu. */
.hours-row.is-range{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;column-gap:14px;row-gap:4px}
.hours-row.is-range .day{white-space:nowrap}
.hours-row.is-range .time{margin-left:auto}
/* Deň (alebo rozsah) s popisom úsekov: celý riadok je jedna mriežka o dvoch
   stĺpcoch — vľavo názov dňa a popisy, vpravo časy. Popisy tak držia jednu ľavú
   hranu a časy jednu pravú; dlhý popis („Preventívne prehliadky") sa zalomí vo
   svojom stĺpci a čas neodtlačí. .time a .tseg sú display:contents, takže ich
   deti sú bunkami tejto mriežky (písmo a farbu dedia ďalej).
   Prvý úsek s popisom (nemec): názov dňa na vlastnom riadku. Prvý úsek bez
   popisu (gregova, is-lead): názov dňa v ľavej bunke prvého času. */
.hours-row.is-stack{grid-template-columns:minmax(min-content,1fr) auto;column-gap:14px;row-gap:18px} /* min-content: dlhé slovo popisu nevylezie do času */
.hours-row.is-stack .day{grid-column:1/-1}
.hours-row.is-stack.is-lead .day{grid-column:1;margin-bottom:0}
.hours-row.is-stack .time,.hours-row.is-stack .time .tseg{display:contents;text-align:left}
.hours-row.is-stack .time .tnote{grid-column:1}
.hours-row.is-stack .time .tval{grid-column:2;justify-self:end}
/* Zalomený popis: čas na jeho POSLEDNOM riadku. Všetky bunky musia byť v tej istej
   skupine účiarí (last baseline) — čas v „last" a popis vo „first" sa nezarovnajú
   ani na jednom riadku (rozdiel 2,5 px). end = záloha pre staršie prehliadače. */
.hours-row.is-stack .day,.hours-row.is-stack .time .tnote,.hours-row.is-stack .time .tval{align-self:end;align-self:last baseline}
.contact-block{padding:64px 56px 44px;display:flex;flex-direction:column}
.hours-list,.contact-rows{margin-top:auto;margin-bottom:auto}
.contact-block h2{font-size:calc(clamp(1.75rem,2.2vw,2.25rem) * var(--disp-k,1));margin-bottom:.12em}
/* To isté na svetlej polovici: tlmený text webu, nie farba odkazov. */
.contact-block .sub{color:var(--ink-soft);font-size:calc(1rem * var(--sec-k,1));line-height:1.35;margin-bottom:38px}
.contact-rows{display:grid;grid-template-columns:1fr 1fr;grid-auto-flow:column;grid-template-rows:auto auto;column-gap:56px}
.contact-row{padding:0 0 24px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:5px}
.contact-row:nth-child(even){padding:24px 0 0;border-bottom:none}
/* Štítok (Telefón, E-mail, Adresa) je popis, nie odkaz — neutrálnou farbou ako drobné štítky kariet (.tag), akcent patrí klikateľnej hodnote (Marek 15. 10. 2026). */
.contact-row .lbl{font-size:14px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-muted);margin-bottom:10px}
.contact-row a,.contact-row span{font-size:calc(1rem * var(--sec-k,1));line-height:1.5;color:var(--ink)}
.contact-row a:hover{color:var(--moss)}
.contact-row a[href^="tel:"],.contact-row a[href^="mailto:"],.contact-row a.soc{color:var(--moss)}
.contact-row a[href^="tel:"]:hover,.contact-row a[href^="mailto:"]:hover,.contact-row a.soc:hover{color:var(--moss-deep)}
.contact-row a .arr{color:inherit} /* šípka je súčasť odkazu — inak ju prebije .contact-row span */
/* Označenie pri čísle / e-maile (Lekár, Sestra…): drobné tiché písmo nad hodnotou.
   Nie vedľa — úzky stĺpec kontaktu by hodnotu zlomil. 14 px = najmenší text webu. */
.contact-row .ct-lines{display:flex;flex-direction:column;gap:12px}
.contact-row .ct-i{display:flex;flex-direction:column}
.contact-row .ct-l{color:var(--ink-muted);font-size:calc(.875rem * var(--sec-k,1));line-height:1.35}
.contact-row a[href^="tel:"]{font-size:calc(1.15rem * var(--sec-k,1));font-weight:500;letter-spacing:.01em}

/* ===== Formuláre ===== */
.page-head{padding-top:52px;padding-bottom:16px}
.form-wrap{max-width:600px;margin:0 auto;background:var(--white);padding:38px 42px;border:1px solid var(--line-strong)}
.form-wrap.form-wide{max-width:760px}
/* Dvojica rozhodnutí pod otázkou (zrušenie termínu). Medzeru nesie gap, nie margin
   pri druhom tlačidle — na mobile sa tlačidlá (.btn{width:100%}) zalomia pod seba
   a gap drží rovnaký odstup zvislo aj vodorovne, bez posunu doprava. */
.confirm-acts{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:26px}
.page-head .lead{margin-top:20px;max-width:64ch;color:var(--ink-soft);font-size:calc(clamp(1.125rem,.5vw + 1rem,1.25rem) * var(--disp-k,1));line-height:1.55}
.form-grid-2{display:grid;grid-template-columns:1fr 1fr;column-gap:22px}
.form-grid-2 .span-2{grid-column:1/-1}
.field{margin-bottom:18px}
.field label{display:block;font-size:16px;font-weight:500;letter-spacing:0;text-transform:none;margin-bottom:6px;color:var(--ink)}
.field input,.field textarea,.field select{
  width:100%;padding:12px 14px;border:1px solid var(--line);
  font-family:var(--font-sans);font-size:16px;background:var(--bg);color:var(--ink);transition:border .15s;
}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--accent)}
/* Chrome autofill – prebitie modrého pozadia inset tieňom vo farbe poľa */
.field input:-webkit-autofill,.field textarea:-webkit-autofill,.field select:-webkit-autofill,
.field input:-webkit-autofill:hover,.field input:-webkit-autofill:focus,
.field textarea:-webkit-autofill:focus,.field select:-webkit-autofill:focus{
  -webkit-box-shadow:0 0 0 1000px var(--bg) inset;
  -webkit-text-fill-color:var(--ink);
  caret-color:var(--ink);
}
.field textarea{min-height:96px;resize:vertical}
.field .hint{font-size:15px;color:var(--ink-soft);margin-top:7px}
.check-row{display:flex;align-items:flex-start;gap:12px;margin-bottom:20px;font-size:1rem;line-height:1.55;color:var(--ink-soft)}
.check-row input{width:20px;height:20px;margin-top:3px;flex-shrink:0;accent-color:var(--accent)}
.callout{
  border-left:2px solid var(--sage);padding:6px 0 6px 24px;margin:34px 0;
  font-family:var(--font-serif);font-style:var(--serif-italic);font-size:1.1rem;color:var(--accent);
}

.notice{padding:16px 20px;margin-bottom:20px;font-size:1.0625rem;border:1px solid transparent}
.notice-ok{background:var(--success-bg);color:var(--success-tx);border-color:color-mix(in srgb,var(--success-tx) 25%,transparent)}
.notice-err{background:var(--danger-bg);color:var(--danger-tx);border-color:color-mix(in srgb,var(--danger-tx) 25%,transparent)}
/* Triáž / upozornenie (napr. „nie je to linka pre akútne ťažkosti") */
.notice-warn{background:var(--warning-bg);color:var(--warning-tx);border-color:color-mix(in srgb,var(--warning-tx) 25%,transparent)}
/* Potvrdenie termínu — dátum na novom riadku, celé jemne väčšie */
.notice-appt{font-size:1.125rem;padding:22px 24px}
/* Stránka po odoslaní: veta pod časom v rámiku a odsek pod rámikom jednou veľkosťou —
   stred medzi textom stránky a tichou poznámkou (Marek 14. 10. 2026). Mobil v @media nižšie. */
.appt-info{font-size:calc(var(--body-size) - 1.5px);line-height:1.55}
.notice-appt .appt-when{display:block;margin-top:8px;font-family:var(--font-accent,var(--font-serif));font-weight:600;font-size:calc(1.375rem * var(--disp-k,1));line-height:1.35}

/* Stav žiadosti o eRecept (/stav/<token>) — tri vrstvy, nie zoznam odsekov
   (Marek 2026-08-09).

   1. kto a ako to dopadlo — meno je dominantné, výsledok je malý tichý štítok
   2. pôvodná požiadavka — pacient ju už pozná, preto tlmená a kompaktná
   3. odpoveď ambulancie — vlastná plocha, a tlačidlo patrí do nej, nie pod kartu

   Odpoveď má o odtieň inú plochu, nie druhý rám. Ide dovnútra k akcentu, nie
   von k bielej: `--white` je v tejto palete najsvetlejší podklad a pri palete
   s tmavými kartami (lib/palette.js, vetva `svetly:false`) by „ešte belšie"
   znamenalo šedý fľak. Tón ambulancie na odpovedi od ambulancie navyše niečo
   hovorí. Zaoblenie berie `--radius-inset` — prvok vnorený v boxe má o stupeň
   menší rádius a drží ho ten istý jediný posuvník v admine. */
.rxs{max-width:560px;margin:0 auto;background:var(--white);border:1px solid var(--line-strong);border-radius:var(--radius-box);padding:32px 34px 30px}
.rxs-kicker{margin:0 0 10px;font-size:15px;font-weight:400;letter-spacing:0;line-height:1.4;color:var(--ink-muted)}
.rxs-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 16px;margin:0 0 22px}
.rxs-name{margin:0;font-family:var(--font-sans);font-size:24px;font-weight:600;letter-spacing:0;line-height:1.25;color:var(--ink)}
/* Štítok nie je flex — inline-flex si berie účiarie zo spodnej hrany ikony,
   nie z textu, a sadol by o kúsok vyššie než meno. */
.rxs-badge{margin-left:auto;padding:4px 11px;border-radius:var(--radius-btn);font-size:14px;font-weight:600;line-height:1.35;white-space:nowrap}
.rxs-badge svg{width:14px;height:14px;vertical-align:-2px;margin-right:5px}
.rxs-badge.is-ok{background:var(--success-bg);color:var(--success-tx)}
.rxs-badge.is-wait{background:var(--warning-bg);color:var(--warning-tx)}
/* Pôvodná požiadavka — metadáta, nie sekcia. Popisok bežnou rečou; verzálky
   s rozpalom si necháva až odpoveď, inak kričia obe rovnako a splynú. */
.rxs-meta-lbl{margin:0 0 2px;font-size:13px;font-weight:500;letter-spacing:0;line-height:1.4;color:var(--ink-muted)}
.rxs-meta-val{margin:0;font-size:16px;line-height:1.45;color:var(--ink-soft)}
.rxs-answer{margin-top:22px;background:color-mix(in srgb,var(--accent) 4%,var(--white));border:1px solid color-mix(in srgb,var(--line) 55%,transparent);border-radius:var(--radius-inset);padding:21px 26px}
.rxs-answer-lbl{margin:0 0 9px;font-size:15px;font-weight:600;letter-spacing:0;line-height:1.4;color:var(--ink-soft)}
.rxs-txt{font-size:calc(var(--body-size) - 1px);line-height:1.55;color:var(--ink)}
.rxs-cta{margin-top:20px}
/* Lieky stoja pod odpoveďou — odstup nesie táto dvojica, nie okraj bloku. */
.rxs-answer + .rxs-meta-lbl{margin-top:24px}
@media(max-width:560px){
  .rxs{padding:26px 20px 24px}
  .rxs-badge{margin-left:0}
  .rxs-answer{padding:18px 18px}
}

/* ===== Footer ===== */
.site-footer{background:var(--bg);color:var(--ink-soft);padding:80px 0 36px;margin-top:60px;border-top:1px solid var(--line)}
/* Podstránky (bez .hero = všetko okrem úvodnej): medzera nad footrom na ~1/3.
   Záporný margin prekrýva len spodný padding poslednej sekcie (aj inline
   padding-bottom:100px na /kontakt) – výsledok ~65–75px namiesto ~220px. */
body:not(:has(.hero)) .site-footer{margin-top:-35px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:48px;margin-bottom:60px}
.site-footer h4{color:var(--accent);font-family:var(--font-sans);font-weight:600;font-size:14px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:1.4em}
.site-footer .brand-img-big{display:block;height:calc(51px*var(--logo-k,1));width:auto;max-width:100%} /* 80 % loga v hlavičke (64px) */
/* Pätička s logom aj názvom: vedľa seba, na úzkej obrazovke pod seba —
   stĺpec pätičky je užší než horná lišta a meno sa doň vedľa loga nezmestí. */
.site-footer .brand-two{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.site-footer .brand-two .brand-img-big{height:calc(44px*var(--logo-k,1))}
.site-footer .brand-two .brand-big{font-size:1.25rem}
/* Názov ambulancie v pätičke je ten istý zápis ako v hlavičke (.brand) —
   rovnaká rodina, rovnaká váha, vzpriamený rez. Predtým bol kurzívny a v
   nadpisovej váhe, takže tá istá ambulancia mala hore a dole dve rôzne
   podoby svojho mena. Líši sa len veľkosťou: 1.5rem oproti 1.3rem hore. */
.site-footer .brand-big{font-family:var(--font-serif);font-weight:var(--sw-md);font-style:normal;font-size:1.5rem;color:var(--accent);line-height:1.15}
.site-footer a{color:var(--ink-soft);display:block;margin:.55em 0;font-size:.95rem;transition:color .2s}
.site-footer a:hover{color:var(--accent)}
.footer-bottom{border-top:1px solid var(--line);padding-top:26px;font-size:.95rem;color:var(--ink-muted);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}
.footer-bottom a{display:inline;margin:0;font-size:inherit;color:var(--ink-muted)}
.footer-bottom a:hover{color:var(--accent)}

/* Reveal on load */
@media(prefers-reduced-motion:no-preference){
  .reveal{opacity:0;transform:translateY(18px);animation:rise .8s ease forwards}
  .reveal.d1{animation-delay:.08s}.reveal.d2{animation-delay:.18s}.reveal.d3{animation-delay:.3s}
  @keyframes rise{to{opacity:1;transform:none}}
  /* Fotka v hero sa len rozsvieti — bez pohybu zdola. */
  .hero-art:has(.hero-photo){transform:none;animation-name:fade}
  @keyframes fade{to{opacity:1}}
}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

@media(max-width:960px){
  .equip-grid{grid-template-columns:repeat(2,1fr)}
}
/* Tri akčné karty potrebujú širší viewport než zvyšok layoutu — vlastný
   medzistupeň, aby sa nadpisy nelámali na úzke stĺpce (breakpoint webu je 860). */
@media(max-width:1150px){
  .actions-grid{grid-template-columns:1fr}
  .action-card + .action-card{border-left:none;border-top:1px solid var(--line-strong)}
  .action-card{padding:44px 40px}
  .action-card p{max-width:52ch}
}
/* Medzistupne: logo a linky sa zmenšujú, aby sa menu nelámalo (burger až pod 860) */
@media(max-width:1360px){
  .brand .brand-img{height:min(60px,calc(52px*var(--logo-k,1)));max-width:calc(260px*var(--logo-k,1))}
  .nav-links{gap:24px}
}
@media(max-width:1080px){
  .brand .brand-img{height:min(60px,calc(44px*var(--logo-k,1)));max-width:calc(210px*var(--logo-k,1))}
  .nav-links{gap:14px}
  .nav-links a{font-size:15px;letter-spacing:normal}
}
@media(max-width:860px){
  .hero{padding-top:60px}
  .hero-bleed{grid-template-columns:1fr;gap:24px;padding-left:0}
  .hero-copy{padding:0 24px}
  .hero-art{order:-1;align-self:auto}
  .hero-art svg{max-width:220px;margin-left:24px}
  /* fotka edge-to-edge: pritiahnutá k linke pod nav (-60px = padding-top .hero),
     pevný pomer strán, orez sprava ostáva (left top) */
  .hero-photo{width:100%;max-width:none;height:auto;aspect-ratio:4/3}
  /* linka pod fotkou: od ľavej hrany displeja, 50 % šírky, 2px – zámerné
     "usadenie" fotky namiesto tvrdého orezu */
  .hero-art:has(.hero-photo){align-self:auto;margin-top:-60px;margin-bottom:0;position:relative}
  /* odsadenie zľava ako text (24px / 16px v 560), gradient do stratena doprava */
  .hero-art:has(.hero-photo)::after{content:'';position:absolute;left:24px;bottom:0;width:50%;height:2px;background:linear-gradient(90deg,var(--hero-stroke,var(--sage)) 0%,var(--hero-stroke,var(--sage)) 35%,transparent 100%)}
  /* Výrez ani na mobile nedostane pevný pomer strán — ten je orez inými slovami. */
  .hero-photo.is-vyrez{width:auto;max-width:82%;height:auto;max-height:340px;aspect-ratio:auto;margin:0 auto}
  /* Na mobile sa pás faktov nezobrazuje, takže záporné odsadenie nemá čo dobehnúť
     a výrez by pretiekol do ďalšej sekcie. Spodná hrana tu sadá na tenkú linku,
     ktorú si pod fotkou kreslí sám stĺpec. */
  .hero-art:has(.hero-photo.is-vyrez){margin-top:0;margin-bottom:0}
  /* tasky #49: pás faktov (Prijímame/E-recept/Terasa/Akupunktúra) sa na mobile nezobrazuje */
  .hero-facts{display:none}
  /* Fotka v pozadí na mobile (prestavané 22. 9. 2026): fotka je samostatný pás
     hore v pomere 4 : 3, orezaný podľa ťažiska a od horného okraja — ľudia na
     nej sú celí. Spodok pásu dobehne do farby úvodu a text pokračuje pod ním
     na plnej ploche, rovnako čitateľný ako bez fotky. Do 22. 9. bola fotka
     pozadím celého vysokého úvodu, zväčšená asi 2,6× a z ľudí ostala len tvár
     za textom. Výrez postavy sa ani tu neukazuje — text cez postavu sa nedá
     čítať (rozhodnutie Mareka 22. 8.). */
  .hero-stage{display:block;min-height:0;padding:0 0 40px}
  .hero.is-full .hero-bg,.hero.is-full.hero-fx-vlavo .hero-bg,.hero.is-full.hero-fx-stred .hero-bg{position:relative;display:block;
    left:auto;right:auto;transform:none;width:100%;max-width:100%;height:auto;aspect-ratio:4/3;
    object-fit:cover;object-position:var(--hero-fx);-webkit-mask-image:none;mask-image:none}
  .hero-stage::before{inset:0 0 auto;aspect-ratio:4/3;background:linear-gradient(180deg,transparent 58%,color-mix(in srgb,var(--hero-bg) 55%,transparent) 82%,var(--hero-bg) 100%)}
  .hero.is-full .hero-bleed{margin-top:-28px}
  .hero.is-full .hero-facts-wrap{border:0}
  .hero.is-full .hero-art{display:none}
  /* tasky #50: sekcia Vybavenie ambulancie (Diagnostika priamo v ambulancii) sa na mobile nezobrazuje */
  #vybavenie{display:none}
  .actions-grid{grid-template-columns:1fr}
  .action-card + .action-card{border-left:none;border-top:1px solid var(--line-strong)}
  .action-card{padding:44px 30px}
  /* Karty sú pod sebou, nie vedľa seba: vzdušnosť, ktorá v troch stĺpcoch
     držala rytmus, tu už len naťahuje stránku. Text karty patrí k sebe. */
  .action-card .tag{margin-bottom:14px}
  /* P-2 (Marek 17. 9.): odkaz je výzva karty — pri 36 px nadpise a 18–20 px
     texte bol so 14 px najmenším prvkom. Štítok nad nadpisom zostáva 14 px
     (tichý nadpisík). Menší rozostup písmen, aby sa riadok nenaťahoval;
     najdlhší text („Požiadať o recept") sa zmestí aj na 320 px. */
  .action-card .go{margin-top:20px;font-size:16px;letter-spacing:.1em}
  /* Tri hlavne akcie su na telefone to najdolezitejsie na stranke, preto tu
     nadpis aj text rastu (Marek 30. 8.).
     Nadpis je plynuly (9vw), nie pevny: prvy riadok "Chcem predpisat" ma pri
     36 px na 320px displeji sirku uz na hrane a body{overflow-wrap:anywhere}
     by ho zlomil po pismenach. Strop 2.25rem = 36 px je cca +40 % oproti
     povodnym 26 px a dosahuje sa od ~400 px sirky vyssie.
     Text karty umyselne kopiruje VYRAZ z ".hero .lead", nie hodnotu — tak
     zostane rovnako velky ako uvodny odstavec vo vsetkych typografickych
     naladach (opticka korekcia --disp-k). */
  .action-card h3{font-size:calc(clamp(1.75rem,9vw,2.25rem) * var(--disp-k-sm,1))}
  .action-card p{font-size:calc(clamp(1.125rem,.5vw + 1rem,1.25rem) * var(--disp-k,1));line-height:1.55}
  .ask-row{padding:30px;flex-direction:column;align-items:flex-start;gap:18px}
  .info-split{grid-template-columns:1fr}
  .hours,.contact-block{padding:44px 30px}
  .footer-grid{grid-template-columns:1fr;gap:32px}
  body:not(:has(.hero)) .site-footer{margin-top:0} /* mobil: sekcie sú tesnejšie, stačí zrušiť extra margin */
  html,body{overflow-x:clip}
  body{overflow-wrap:anywhere;font-size:17px}
  .appt-info{font-size:15.5px}
  .btn{width:100%}
  main *{min-width:0}
  main img,main svg,main video{max-width:100%;height:auto}
  .nav-links{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;background:var(--accent);padding:96px 32px calc(56px + env(safe-area-inset-bottom,0px));gap:0;visibility:hidden;opacity:0;overflow-y:auto;overscroll-behavior:contain;transition:opacity .35s ease,visibility 0s linear .35s}
  body.nav-open .nav-links{visibility:visible;opacity:1;transition:opacity .35s ease}
  .nav-links li{border-bottom:1px solid color-mix(in srgb,var(--bg) 16%,transparent);opacity:0;transform:translateY(28px);transition:opacity .4s ease,transform .55s cubic-bezier(.22,1,.36,1)}
  .nav-links li:last-child{border-bottom:none}
  body.nav-open .nav-links li{opacity:1;transform:none}
  body.nav-open .nav-links li{transition-delay:calc(.06s + var(--i,0) * .035s)}
  .nav-links a{display:block;font-family:var(--font-sans);font-size:1.15rem;font-weight:600;letter-spacing:.01em;text-transform:none;color:var(--on-accent);padding:20px 0}
  .nav-links a.active{color:var(--sage)}
  .nav-links a::after{display:none}
  .nav-links .only-mob{display:block}
  .nav-toggle{display:block;position:relative;z-index:70}
  /* logo sa do bielej preklápa plynulo spolu s fade-in overlay-a – bez bieleho bliknutia */
  .brand .brand-img{transition:filter .35s ease}
  .brand span{transition:color .35s ease}
  body.nav-open{overflow:hidden}
  /* pri otvorenom menu header fixne hore – X nesmie odscrollovat (iOS scroll pri locknutom body) */
  body.nav-open .site-header{position:fixed;top:0;left:0;right:0;z-index:70;background:transparent;backdrop-filter:none;border-bottom-color:transparent}
  body.nav-open .brand span{color:var(--on-accent)}
  body.nav-open .brand .brand-img{filter:brightness(0) invert(1)}
  body.nav-open .announce-strip{visibility:hidden}
  .section{padding-top:70px;padding-bottom:70px}
  .container{padding-left:24px;padding-right:24px}
  .form-wrap{padding:28px 20px}
  .page-head{padding-top:40px}
  .form-grid-2{grid-template-columns:1fr}
}
@media(max-width:560px){
  .equip-grid{grid-template-columns:1fr}
  .container{padding-left:16px;padding-right:16px}
  .hero-copy{padding:0 16px}
  .hero-art:has(.hero-photo)::after{left:16px}
  /* Viacslovná fráza s linkou: vlastný riadok, zalomenie medzi slovami, nikdy
     uprostred slova. Linka ide pod posledný riadok frázy. (22. 9. 2026) */
  .us-br{display:inline}
  .u-stroke.u-multi{white-space:normal;overflow-wrap:normal}
  .form-wrap{padding:24px 16px}
  .section{padding-top:56px;padding-bottom:56px}
  .page-head{padding-top:32px}
  .hours,.contact-block{padding:36px 22px}
  .action-card{padding:36px 24px}
  .action-card .tag{margin-bottom:12px}
  .action-card .go{margin-top:18px}
  .ask-row{padding:26px 24px}
  .choice-card{padding:30px 22px}
}

/* ===== Textové bloky vlastných stránok (bez deliacich liniek, serif nadpisy) ===== */
.page-block{margin-top:52px}
.page-block h2{font-size:1.6rem;margin-bottom:.55em} /* dedí serif + accent z globálneho h2, len menšia */
.page-block p{color:var(--ink-soft);line-height:1.7;max-width:62ch}
.page-block p+p{margin-top:.8em}
.page-block+.callout{margin-top:52px}

/* FAQ – hairline riadky, details/summary */
.faq{border-top:1px solid var(--line-strong)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:baseline;gap:18px;padding:16px 0;font-weight:500;color:var(--accent)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:'+';font-family:var(--font-sans);font-weight:400;font-size:1.25rem;line-height:1;color:var(--sage);flex-shrink:0;transition:transform .25s ease}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item summary:hover{color:var(--moss)}
.faq-item p{color:var(--ink-soft);line-height:1.65;max-width:62ch;padding:0 0 18px}

/* GDPR odkaz v súhlasoch pod formulármi – vždy podčiarknutý (text-decoration,
   nie border – text sa môže zalomiť na viac riadkov) */
label a[href="/gdpr"]{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}

/* ===== Google hodnotenie v hero ===== */
.rating{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:6px}
.rating .stars{display:inline-flex;gap:2px;color:var(--sage)}
.rating .stars svg{width:17px;height:17px}
.rating .score{font-family:var(--font-serif);font-style:var(--serif-italic);font-weight:var(--sw-md);font-size:1.35rem;color:var(--accent)}
.rating .of{font-size:14px;color:var(--ink-soft)}
/* Hodnotenie z Google a odkaz pod ním ležia na ploche úvodu — tá istá oprava
   ako pri riadku s menom (24. 8. 2026). */
.hero .rating .stars{color:var(--hero-sage,var(--sage))}
.hero .rating .score{color:var(--hero-accent,var(--accent))}
.hero .rating .of{color:var(--hero-ink-soft,var(--ink-soft))}
.hero .link-arrow{color:var(--hero-accent,var(--accent));border-bottom-color:var(--hero-accent,var(--accent))}
.link-arrow{display:inline-block;font-size:14px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);border-bottom:1px solid var(--accent);padding-bottom:3px}
.link-arrow .arr{display:inline-block;transition:transform .22s ease}
.link-arrow:hover .arr{transform:translateX(4px)}
.rating .link-arrow{margin-left:6px}

/* Ikony v kontaktoch */
.contact-row .lbl{display:flex;align-items:center;gap:10px}
.contact-row .lbl svg{width:17px;height:17px;color:var(--moss);flex-shrink:0}
.contact-row .map-link{color:var(--moss);margin-top:2px}
.contact-row .map-link:hover{color:var(--moss-deep)}
.contact-row a .arr{display:inline-block;transition:transform .22s ease} /* každá šípka v kontakte: mapa aj sociálne siete */
.contact-row a:hover .arr{transform:translateX(4px)}

/* ===== Cenník ===== */
.price-section{margin-bottom:70px}
.price-section h2{font-size:calc(clamp(2.125rem,3.2vw,3.25rem) * var(--disp-k,1));margin-bottom:.3em}
.price-note{font-family:var(--font-accent,var(--font-serif));font-style:var(--serif-italic);color:var(--ink-soft);font-size:14px;margin-bottom:26px;max-width:60ch}
.price-table{border-top:1px solid var(--line-strong)}
.price-row{display:flex;align-items:baseline;gap:14px;padding:15px 0;border-bottom:1px solid var(--line)}
.price-name{font-size:.98rem;color:var(--ink);max-width:62ch}
.price-dots{flex:1;border-bottom:1px dotted var(--line-strong);transform:translateY(-4px);min-width:24px}
.price-val{font-family:var(--font-sans);font-style:normal;font-weight:500;font-size:1.125rem;color:var(--accent);white-space:nowrap;font-variant-numeric:tabular-nums;letter-spacing:.01em}
.price-legal{margin-top:30px;padding:26px 30px;border:1px solid var(--line);font-size:.95rem;line-height:1.7;color:var(--ink-muted)}

/* ===== Certifikáty ===== */
.cert-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line-strong);border:1px solid var(--line-strong)}
.cert-grid a{display:block;background:var(--white);padding:28px;transition:background .25s ease}
.cert-grid a:hover{background:var(--accent-soft)}
.cert-grid img{width:100%;height:auto;display:block}
@media(max-width:700px){
  .cert-grid{grid-template-columns:1fr}
  .price-name{max-width:none}
}

/* ===== Cenník v2 – dvojstĺpcová tabuľka, ceny zarovnané doprava ===== */
.price-row{display:grid;grid-template-columns:1fr 170px;gap:24px;align-items:baseline}
.price-dots{display:none}
.price-val{text-align:right;white-space:normal;font-size:.98rem}
@media(max-width:600px){.price-row{grid-template-columns:1fr 110px;gap:14px}.price-val{font-size:.9rem}}

/* Telefónne odkazy sa nikdy nelámu do dvoch riadkov. Nezalomiteľné medzery
   dopĺňa už server (contact.nbNum), toto je poistka pre budúce miesta. */
a[href^="tel:"]{white-space:nowrap}

/* ===== Certifikáty – náhľady =====
   JEDNA mriežka pre obe stránky (/certifikaty aj /akreditovane-pracovisko).
   Dlaždica má vždy pomer 4:3 a certifikát sa do nej vkladá celý (contain) —
   funguje pre dokument na šírku, na výšku aj štvorcový, bez akéhokoľvek
   nastavovania podľa ambulancie.

   Od 24. 8. 2026 (Marek) je na dlaždici IBA náhľad: znak „+" v rohu ani názov
   pod obrázkom tam nie sú. Názov nesie aria-label tlačidla a alt obrázka,
   názov aj poznámka sa vypisujú pod zväčšeným certifikátom. Popis bol vnútri
   tlačidla s overflow:hidden, takže dlhší názov pretekal cez dlaždicu. */
.certs-gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:26px;align-items:start}
.cert-thumb{
  position:relative;display:block;padding:0;border:1px solid var(--line-strong);
  background:var(--white);cursor:zoom-in;width:auto;overflow:hidden;
}
.cert-thumb img{display:block;width:100%;height:auto;aspect-ratio:4/3;
  object-fit:contain;object-position:center;padding:14px;
  transition:transform .35s ease,opacity .35s ease}
/* Že sa dá kliknúť, hovorí zväčšenie obrázka; klávesnica dostáva rámik
   z globálneho :focus-visible vyššie v tomto súbore. */
.cert-thumb:hover img{transform:scale(1.04);opacity:.85}

/* ===== Lightbox ===== */
.lightbox{
  position:fixed;inset:0;z-index:200;background:color-mix(in srgb,var(--accent) 96%,black);
  display:flex;align-items:center;justify-content:center;padding:56px;
}
.lightbox[hidden]{display:none}
.lightbox figure{margin:0;max-width:min(760px,86vw);max-height:86vh;display:flex;flex-direction:column;align-items:center;gap:16px}
.lightbox img{max-width:100%;max-height:72vh;object-fit:contain;background:var(--white);padding:12px}
.lightbox figcaption{font-family:var(--font-serif);font-style:var(--serif-italic);font-size:1rem;color:var(--bg);text-align:center}
/* Poznámka certifikátu — od 24. 8. 2026 jediné miesto na webe, kde sa ukáže.
   Bežné písmo, aby sa nemiešala s názvom nad ňou. */
.lb-note{display:block;margin:6px auto 0;max-width:52ch;font-family:var(--font-sans);font-style:normal;font-size:.9rem;line-height:1.55;color:color-mix(in srgb,var(--bg) 72%,transparent)}
.lb-note[hidden]{display:none}
.lb-count{font-size:14px;font-weight:500;letter-spacing:.14em;color:var(--sage)}
.lb-close,.lb-prev,.lb-next{
  position:absolute;background:transparent;border:1px solid color-mix(in srgb,var(--bg) 35%,transparent);
  color:var(--bg);cursor:pointer;font-family:var(--font-sans);
  width:52px;height:52px;font-size:22px;display:flex;align-items:center;justify-content:center;
  transition:background .2s ease,border-color .2s ease;
}
.lb-close:hover,.lb-prev:hover,.lb-next:hover{background:color-mix(in srgb,var(--bg) 14%,transparent);border-color:var(--bg)}
.lb-close{top:28px;right:28px}
.lb-prev{left:28px;top:50%;transform:translateY(-50%)}
.lb-next{right:28px;top:50%;transform:translateY(-50%)}
@media(max-width:640px){
  .lightbox{padding:20px}
  .lb-prev{left:10px}.lb-next{right:10px}.lb-close{top:10px;right:10px}
  .lb-prev,.lb-next,.lb-close{width:44px;height:44px}
}

/* ===== Objednávanie – kalendár ===== */
.booking-wrap{max-width:820px}
/* Krok 1 – výber typu návštevy: akčné karty (vzor úvodka) */
.choice-wrap{max-width:980px;margin:0 auto}
.choose-label{font-size:14px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:22px}
/* Počet kariet v riadku dodáva stránka (--cols, --cols-md; pravidlo je
   v routes/forms.js typeChooserPage). Flex so zalamovaním: posledný riadok
   sa roztiahne na celú šírku, takže nikdy nevznikne prázdna bunka.
   Deliace čiary kreslí každá karta tieňom vpravo a dole; tie na vonkajšom
   okraji oreže overflow:hidden a nahradí ich rámik mriežky — preto čiary
   sedia pri 2, 3, 4 aj 3+2 bez pravidiel pre jednotlivé počty.
   (Do 15. 10. 2026 grid so stropom 3 a border-left medzi súrodencami:
   pri 4 typoch padla štvrtá karta do druhého riadka bez hornej čiary.) */
.choice-wrap.is-wide{max-width:none}
.choice-grid{display:flex;flex-wrap:wrap;border:1px solid var(--line-strong);border-radius:var(--radius-box);overflow:hidden}
/* Zarovnanie na SPODOK (Marek 24. 8. 2026): popis nad názvom je text
   ambulancie, takže môže mať jeden aj dva riadky. Keby obsah sedel hore,
   dlhší popis by na jednej karte posunul názov aj odkaz nižšie než na
   susednej. Takto rastie popis nahor a názvy aj odkazy držia jednu líniu.
   Preto .go NEMÁ margin-top:auto — to by voľné miesto rozdelilo na dvakrát. */
.choice-card{
  padding:46px 38px 42px;display:flex;flex-direction:column;align-items:flex-start;
  justify-content:flex-end;
  color:inherit;text-decoration:none;background:transparent;
  transition:background .28s ease,color .28s ease;
  flex:1 0 calc(100% / var(--cols,3) - .5px);min-width:0;
  box-shadow:1px 0 0 var(--line-strong),0 1px 0 var(--line-strong);
}
.is-wide .choice-card{padding:44px 30px 40px}
.choice-card:focus-visible{outline:2px solid var(--accent);outline-offset:-6px}
@media(max-width:1099px){
  .choice-card{flex-basis:calc(100% / var(--cols-md,var(--cols,3)) - .5px)}
}
.choice-card .tag{font-size:14px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-muted);margin-bottom:20px;transition:color .28s ease}
.choice-card h3{font-family:var(--font-serif);font-weight:var(--sw-hd2);font-size:calc(clamp(1.625rem,2vw,2.125rem) * var(--disp-k-sm,1));line-height:calc(var(--serif-lh) + .12);margin:0 0 30px;transition:color .28s ease}
.choice-card .go{
  display:inline-flex;align-items:center;gap:11px;
  font-size:14px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);
  border-bottom:1px solid var(--accent);padding-bottom:5px;transition:color .28s ease,border-color .28s ease;
}
.choice-card .go .arr{transition:transform .22s ease}
.choice-card:hover{background:var(--accent)}
.choice-card:hover .tag{color:color-mix(in srgb,var(--bg) 60%,var(--sage))}
.choice-card:hover h3,.choice-card:hover .go{color:var(--on-accent);border-color:var(--on-accent)}
.choice-card:hover .go .arr{transform:translateX(6px)}

/* Krok 2 – lišta zvoleného typu + odkaz späť na výber */
.type-picked{display:flex;align-items:baseline;gap:16px;margin-bottom:22px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.type-picked .lbl{font-size:14px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.type-picked .val{font-family:var(--font-serif);font-size:1.25rem;color:var(--accent)}
.type-picked a{margin-left:auto;font-size:15px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--moss);text-decoration:none;border-bottom:1px solid var(--line-strong);padding-bottom:2px;transition:color .2s,border-color .2s}
.type-picked a:hover{color:var(--accent);border-color:var(--accent)}

.cal-grid-wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:28px;margin-bottom:24px}
.cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.cal-month{font-family:var(--font-serif);font-style:normal;font-weight:500;font-size:1.25rem;color:var(--accent);text-transform:capitalize}
.cal-nav{background:transparent;border:1px solid var(--line);border-radius:var(--radius-btn);width:38px;height:38px;cursor:pointer;color:var(--accent);font-size:15px;transition:border-color .2s,background .2s}
.cal-nav:hover{border-color:var(--accent)}
.cal-days{display:grid;grid-template-columns:repeat(7,1fr);margin-bottom:8px}
.cal-days span{text-align:center;font-size:14px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);padding:6px 0}
.cal-cells{display:grid;grid-template-columns:repeat(7,1fr);row-gap:6px}
.cal-day{
  width:42px;height:42px;margin:0 auto;border:none;background:transparent;
  font-family:var(--font-sans);font-size:14px;color:var(--ink-muted);
  border-radius:50%;cursor:default;position:relative;transition:background .18s,color .18s;
}
.cal-day.free{background:var(--accent-soft);color:var(--accent);cursor:pointer;font-weight:500}
.cal-day.free:hover{background:var(--sage);color:var(--bg)}
.cal-day.sel{background:var(--accent);color:var(--on-accent)}
.cal-day.today::after{content:'';position:absolute;left:50%;bottom:3px;transform:translateX(-50%);width:4px;height:4px;border-radius:50%;background:var(--moss)}

.times-head{font-family:var(--font-serif);font-weight:var(--sw-hd);font-size:calc(1.45rem * var(--disp-k-sm,1));color:var(--accent);margin-bottom:14px}
/* Len prvé písmeno veľké: „Vyberte deň", „Po, 19. októbra" (capitalize robil „Vyberte Deň"). */
.times-head::first-letter{text-transform:uppercase}
.times-list{display:flex;flex-direction:column;gap:10px;max-height:340px;overflow-y:auto;padding-right:4px}
.time-chip{
  padding:13px;background:var(--accent-soft);border:1px solid transparent;cursor:pointer;
  font-family:var(--font-sans);font-size:16.5px;font-weight:600;color:var(--accent);
  transition:background .18s,color .18s,border-color .18s;text-align:center;
}
.time-chip:hover{border-color:var(--accent)}
.time-chip.sel{background:var(--accent);color:var(--on-accent)}

/* Riadok s vybranym terminom je sesterský riadok k .type-picked — rovnaka osnova
   LABEL / hodnota / akcia vpravo. Nie je to karta: dva ramy pod sebou by z dvoch
   rovnocennych udajov spravili hierarchiu, ktora tam nie je. */
.picked{
  display:flex;align-items:baseline;gap:16px;
  padding:0 0 14px;margin-bottom:22px;
  border:0;border-bottom:1px solid var(--line);background:transparent;
}
.picked .lbl{font-size:14px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
/* Návrat ku kalendáru — rovnaký jazyk ako „Zmeniť" pri type návštevy */
.picked-change{
  margin-left:auto;background:none;border:0;padding:0 0 2px;cursor:pointer;
  font-family:var(--font-sans);font-size:15px;font-weight:500;letter-spacing:0;
  text-transform:none;color:var(--moss);border-bottom:1px solid var(--line-strong);
  transition:color .2s,border-color .2s;
}
.picked-change:hover{color:var(--accent);border-color:var(--accent)}
/* .picked ma display:flex — bez tohto riadku by atribut hidden neplatil a prazdny box by svietil aj pred vyberom casu. */
#cal-area[hidden],.picked[hidden]{display:none}
.times-hint{font-family:var(--font-sans);font-style:normal;font-size:.95rem;line-height:1.6;color:var(--ink-soft);margin:0;padding:14px 16px;background:var(--accent-soft);border-radius:var(--radius-inset)}
/* „Zmeniť“ ostáva vpravo aj na mobile — rovnako pri type, dátume narodenia aj termíne. */
.picked .val{font-family:var(--font-serif);font-weight:400;font-size:1.25rem;color:var(--accent)}

@media(max-width:700px){
  .choice-card,.is-wide .choice-card{flex-basis:100%;padding:34px 28px}
  .choice-card h3{font-size:2.1rem}
  .type-picked,.picked{flex-wrap:wrap;row-gap:6px}
  .type-picked .lbl,.picked .lbl{width:100%}
  .type-picked .val{font-size:1.15rem;white-space:nowrap;overflow-wrap:normal}
  .type-picked a{white-space:nowrap;overflow-wrap:normal}
  .cal-grid-wrap{grid-template-columns:1fr;gap:24px}
  .cal-day{width:38px;height:38px}
  .times-list{flex-direction:row;flex-wrap:wrap;max-height:none}
  .time-chip{flex:1 1 30%}
}

/* =========================================================================
   BLOG – magazínový grid (feature + 2 vedľa + mriežka) a článok
   ========================================================================= */
.blog-thumb{overflow:hidden}
.blog-thumb img{width:100%;object-fit:cover;display:block;
  filter:saturate(.92);transition:transform .5s ease,filter .5s ease}
.blog-cat{display:block;font-size:14px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--moss);margin:22px 0 12px}
.blog-cat:first-child{margin-top:0} /* karta bez fotky začína rovno kategóriou */

/* horný blok: 1 veľký + 2 menšie */
.mag-top{display:grid;grid-template-columns:1.55fr 1fr;
  border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line)}
.mag-feature{display:block;color:inherit;text-decoration:none;
  padding:44px 48px 52px 0;border-right:1px solid var(--line)}
.mag-feature .blog-thumb img{aspect-ratio:1/1}
.mag-feature h2{font-family:var(--font-serif);font-weight:var(--sw-hd);
  font-size:calc(clamp(1.8rem,2.7vw,2.35rem) * var(--disp-k-sm,1));line-height:calc(var(--serif-lh) + .16);margin-bottom:14px;
  max-width:18ch;transition:color .25s}
.mag-feature p{color:var(--ink-soft);max-width:54ch}
.mag-side-col{display:flex;flex-direction:column}
.mag-side{display:block;color:inherit;text-decoration:none;flex:1;
  padding:44px 0 44px 44px}
.mag-side + .mag-side{border-top:1px solid var(--line)}
.mag-side .blog-thumb img{aspect-ratio:21/10}
.mag-side h3{font-family:var(--font-serif);font-weight:var(--sw-hd2);font-size:calc(1.32rem * var(--disp-k-sm,1));
  line-height:calc(var(--serif-lh) + .18);max-width:20ch;transition:color .25s}
.mag-side p{color:var(--ink-soft);font-size:.95rem;line-height:1.6;margin-top:12px;max-width:46ch}

/* spodná mriežka */
.mag-grid{display:grid;grid-template-columns:calc((100% - 160px)/3 + 40px) calc((100% - 160px)/3 + 80px) calc((100% - 160px)/3 + 40px)}
.mag-cell{display:block;color:inherit;text-decoration:none;
  padding:46px 40px 54px 0;border-bottom:1px solid var(--line)}
.mag-cell:nth-child(3n+2),.mag-cell:nth-child(3n){border-left:1px solid var(--line);padding-left:40px}
.mag-cell:nth-child(3n){padding-right:0}
.mag-cell .blog-thumb img{aspect-ratio:16/10}
.mag-cell h3{font-family:var(--font-serif);font-weight:var(--sw-hd2);font-size:calc(1.22rem * var(--disp-k-sm,1));
  line-height:calc(var(--serif-lh) + .18);margin-bottom:10px;transition:color .25s}
.mag-cell p{color:var(--ink-soft);font-size:.95rem;line-height:1.6}

/* hover */
.mag-feature:hover .blog-thumb img,.mag-side:hover .blog-thumb img,
.mag-cell:hover .blog-thumb img{transform:scale(1.03);filter:saturate(1)}
.mag-feature:hover h2,.mag-side:hover h3,.mag-cell:hover h3{color:var(--accent)}

/* článok */
.blog-go{font-size:14px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);
  border-bottom:1px solid var(--accent);padding-bottom:3px;padding-right:8px;
  display:inline-flex;align-items:center;gap:8px}
.blog-go .arr{display:inline-block;transition:transform .22s ease}
.blog-go:hover .arr{transform:translateX(4px)}
.article-meta{font-size:14px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-muted);margin-top:18px}
.article-hero{margin:10px 0 56px;max-width:980px}
.article-hero img{width:100%;display:block;filter:saturate(.92)}
.article{max-width:720px}
.article p{line-height:1.75;color:var(--ink);margin-bottom:1.25em}
.article .article-perex{font-family:var(--font-serif);font-size:1.1875rem;line-height:1.6;
  color:var(--ink-soft);margin-bottom:1.6em}
.article h2{font-family:var(--font-serif);font-weight:var(--sw-md);font-size:calc(1.625rem * var(--disp-k-sm,1));line-height:1.22;
  margin:1.8em 0 .7em;padding-top:.9em;border-top:1px solid var(--line)}
.article ol,.article ul{margin:0 0 1.25em 1.2em;line-height:1.75}
.article li{margin-bottom:.55em;padding-left:.3em}
.article em{font-family:var(--font-serif);font-style:italic}
.article strong{font-weight:600}
.article-foot{max-width:720px;margin-top:64px;padding-top:56px;border-top:1px solid var(--line-strong);
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}

@media (max-width:960px){
  .mag-top{grid-template-columns:1fr}
  .mag-feature{border-right:0;padding-right:0;padding-bottom:44px}
  .mag-side{padding-left:0;border-top:1px solid var(--line)}
  .mag-grid{grid-template-columns:1fr 1fr}
  .mag-cell{padding:38px 24px 44px 0}
  .mag-cell:nth-child(3n+2),.mag-cell:nth-child(3n){border-left:0;padding-left:0}
  .mag-cell:nth-child(2n){border-left:1px solid var(--line);padding-left:24px;padding-right:0}
}
@media (max-width:640px){
  .mag-grid{grid-template-columns:1fr}
  .mag-cell,.mag-cell:nth-child(2n){border-left:0;padding-left:0;padding-right:0}
  .article-hero{margin-bottom:36px}
  .article-foot{flex-direction:column;align-items:flex-start}
}


/* Blog teaser na uvodnej stranke */
.blog-teaser{border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong);padding:24px 0;display:flex;justify-content:space-between;align-items:flex-end;gap:32px}
.blog-teaser .blog-go{flex-shrink:0;margin-bottom:5px;white-space:nowrap}
.blog-teaser .lbl{display:block;font-size:14px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-muted);white-space:nowrap;margin-bottom:14px}
.blog-teaser-title{font-family:var(--font-serif);font-weight:var(--sw-hd);font-size:calc(clamp(1.125rem,1.7vw,1.4rem) * var(--disp-k-sm,1));line-height:calc(var(--serif-lh) + .2);color:var(--accent);display:block;transition:color .25s ease}
.blog-teaser-title:hover{color:var(--moss)}
.blog-teaser-title .arr{display:inline-block;font-family:var(--font-sans);font-weight:500;transition:transform .25s ease} /* šípka v sans ako malé šípkové odkazy, text ostáva serif */
.blog-teaser-title:hover .arr{transform:translateX(6px)}
@media(max-width:700px){.blog-teaser{flex-direction:column;align-items:flex-start;gap:18px}.blog-teaser .blog-go{margin-bottom:0}}

/* ===== Ordinačné hodiny po dňoch (.info-split.is-week, 15. 10. 2026) =====
   Hodiny na celú šírku, dni ako stĺpce týždňa; kontakt pod nimi v jednom
   riadku. Kedy sa použije: lib/hodinyWeb.js rozhodni(). Pod 861 px sú dni
   pod sebou (popis vľavo, čas vpravo — ako zoznam) a kontakt ako doteraz. */
/* Kolo 3 + 4 (Marek 15. 10. 2026): dve samostatné karty pod sebou, obe
   zaoblené hore aj dole na všetkých šírkach — hodiny farebná plocha,
   kontakt tenký rám ako ostatné boxy webu (bez tieňa). Voľne položený
   kontakt (kolo 3) sa pod výraznou kartou strácal. Pri zaoblení 0 ostré. */
.info-split.is-week{grid-template-columns:1fr;row-gap:36px;border:none;border-radius:0;overflow:visible}
.is-week .hours{border-radius:var(--radius-box)}
.is-week .contact-block{border:1px solid var(--line-strong);border-radius:var(--radius-box)}
/* Riadok s ikonou v krúžku (len po dňoch): krúžok 34 px, ikona 16 px. */
.contact-row.is-ico{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:14px;align-items:start}
.contact-row .ct-ico{width:34px;height:34px;border-radius:50%;background:var(--accent-soft);color:var(--moss);display:flex;align-items:center;justify-content:center;margin-top:-6px}
.contact-row .ct-ico svg{width:16px;height:16px;flex-shrink:0}
.contact-row .ct-body{display:flex;flex-direction:column;gap:5px;min-width:0}
.contact-row.is-ico .lbl{margin-bottom:6px}
.contact-row.is-ico a[href^="mailto:"]{overflow-wrap:anywhere}
/* Názov dňa stojí NAD deliacou čiarou, čiara ho oddeľuje od úsekov
   (Marek 15. 10. 2026, kolo 2); nad názvami 24 px vzduchu navyše. */
.hours-week{display:grid;grid-template-columns:repeat(var(--dni,5),minmax(0,1fr));column-gap:28px;row-gap:28px;margin-top:24px}
.hw-den{min-width:0}
.hw-nazov{letter-spacing:.07em;text-transform:uppercase;font-size:calc(15px * var(--sec-k,1));font-weight:600;padding-bottom:12px;border-bottom:1px solid color-mix(in srgb,var(--bg) 30%,transparent);margin-bottom:18px}
.hw-useky{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px}
.hw-seg{display:flex;flex-direction:column;gap:3px}
.hw-cas{font-family:var(--font-accent,var(--font-serif));font-size:calc(1.05rem * var(--sec-k,1));letter-spacing:.02em;white-space:nowrap;color:var(--on-accent)}
.hw-pop{font-size:calc(15px * var(--sec-k,1));line-height:1.35;color:var(--on-accent-soft);overflow-wrap:break-word}
.hw-den.is-zatv .hw-pop{opacity:.75}
@media(min-width:861px){
  .is-week .hours{padding:60px 56px 52px}
  .is-week .contact-block{padding:46px 56px 44px}
  .is-week .contact-block .sub{margin-bottom:32px}
  /* Stĺpce oddeľuje tenká zvislá čiara; prvý stĺpec bez nej. */
  .is-week .contact-rows{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));grid-auto-flow:row;grid-template-rows:none;column-gap:0;row-gap:28px;margin:0}
  .is-week .contact-row,.is-week .contact-row:nth-child(even){padding:0 28px;border-bottom:none;border-left:1px solid var(--line)}
  .is-week .contact-row:first-child{padding-left:0;border-left:none}
}
@media(max-width:1100px) and (min-width:861px){
  .is-week .hours{padding:52px 36px 46px}
  .is-week .contact-block{padding:42px 36px 40px}
  .is-week .contact-row,.is-week .contact-row:nth-child(even){padding:0 18px}
  .is-week .contact-row:first-child{padding-left:0}
  .hours-week{grid-template-columns:repeat(auto-fit,minmax(118px,1fr));column-gap:20px}
}
@media(max-width:860px){
  .hours-week{grid-template-columns:1fr;row-gap:36px;margin-top:20px}
  .hw-nazov{padding-bottom:10px;margin-bottom:14px}
  .is-week .contact-block{padding:40px 30px 36px}
  .hw-useky{gap:8px}
  .hw-seg{flex-direction:row-reverse;justify-content:space-between;align-items:baseline;gap:14px}
  .hw-cas{color:var(--on-accent-soft)}
  .hw-pop{color:var(--on-accent);font-size:calc(16px * var(--sec-k,1))}
}

@media(max-width:560px){.is-week .contact-block{padding:34px 22px 30px}}

/* Rytmus úvodu (Marek 15. 10. 2026): dve sekcie za sebou dávali
   zdvojený odstup (spodok jednej + vrch druhej = 220 px), pod blokom
   hodín a kontaktu ďalších 110 px + odstup pätičky. Na úvode preto
   vybavenie a kontakt hneď za sekciou nemajú vlastný horný odstup (stačí spodok sekcie
   nad nimi) a kontakt má k pätičke polovičný. Ostatné stránky bez zmeny. */
.section + #vybavenie.section,.section + #kontakt.section{padding-top:0}
#kontakt.section{padding-bottom:30px}

/* kontakt: mobil pod seba */
@media(max-width:860px){
  .contact-rows{grid-template-columns:1fr;grid-auto-flow:row;grid-template-rows:none}
  .contact-row,.contact-row:nth-child(even){padding:19px 0;border-bottom:1px solid var(--line)}
  .contact-row:first-child{padding-top:0}
  .contact-row:last-child{border-bottom:none;padding-bottom:0}
}

/* ===== Konfigurovateľné zaoblenie vybraných boxov (Admin → Nastavenia → Dizajn) =====
   Jedna premenná --radius-box (default 0 = ostré editorial hrany). Zaobľujú sa LEN
   tieto štyri prvky: akčné karty, mriežka vybavenia, blok hodiny+kontakt, kontajnery
   formulárov. Ostatné (hero, hairline, nav, cenník mriežka, lightbox) ostáva ostré. */
.actions-grid,.equip-grid,.info-split{border-radius:var(--radius-box);overflow:hidden}

/* ===== Pruh verejného dema =====
   `position:sticky; bottom:0` a nie `fixed`: pruh sa drží pri spodnej hrane,
   kým sa stránka roluje, a na konci dokumentu si sadne na svoje miesto —
   takže pätičku neprekrýva natrvalo a netreba telu dopĺňať odsadenie.
   z-index je pod mobilným menu (60), aby ho neprekryl; pri otvorenom menu sa
   skrýva rovnako ako pás oznamu. */
.demo-pas{position:sticky;bottom:0;z-index:40;background:var(--accent);color:var(--on-accent)}
.demo-pas .container{display:flex;align-items:center;justify-content:space-between;gap:14px 26px;flex-wrap:wrap;padding-top:12px;padding-bottom:calc(12px + env(safe-area-inset-bottom,0px))}
.demo-pas .t{font-size:calc(.95rem * var(--sec-k,1));line-height:1.45}
.demo-pas .t b{font-weight:600}
.demo-pas a{color:var(--on-accent);text-decoration:underline;text-underline-offset:3px;font-weight:500;white-space:nowrap}
.demo-pas a:hover{color:var(--on-accent-soft)}
.demo-pas .arr{display:inline-block;transition:transform .22s ease}
.demo-pas a:hover .arr{transform:translateX(4px)}
@media(max-width:560px){
  .demo-pas .container{gap:6px 16px}
  .demo-pas .t{font-size:calc(.85rem * var(--sec-k,1))}
  .demo-pas a{font-size:.9rem}
}
body.nav-open .demo-pas{visibility:hidden}
.form-wrap{border-radius:var(--radius-box)}
/* Formulárové PRVKY plošne cez --radius-btn (konzistentnosť: každý nový input/button/chip
   verejného webu dostáva var(--radius-btn) — pozri DESIGN.md bod 41) */
.btn,.field input,.field textarea,.field select,.time-chip,.notice{border-radius:var(--radius-btn)}

/* ---- Fotky: rovnaký slider, odvodený polomer podľa veľkosti plochy (DESIGN 78).
   Malé náhľady --radius-thumb, veľké fotky --radius-media. Pri slideri 0 dá calc
   všade nulu, takže editorial ostrosť ostáva default a nič sa nemení. ---- */
.blog-thumb,.blog-thumb img{border-radius:var(--radius-thumb)}
.cert-thumb{border-radius:var(--radius-thumb)}
.article-hero img{border-radius:var(--radius-media)}
.lightbox img{border-radius:var(--radius-media)}

/* Pätička: oba právne odkazy spolu vpravo (© ostáva vľavo cez space-between) */
.footer-links{display:flex;gap:18px;flex-wrap:wrap}

/* ===== Nový pacient — číslované kroky (statický obsah, bez hoveru) ===== */
ol.steps{list-style:none;margin:6px 0 34px;padding:0;counter-reset:step;max-width:62ch}
ol.steps li{counter-increment:step;position:relative;margin:0;padding:0 0 30px 64px;line-height:1.75;color:var(--ink)}
ol.steps li:last-child{padding-bottom:0}
ol.steps li::before{content:counter(step);position:absolute;left:0;top:-4px;width:40px;height:40px;
  display:grid;place-items:center;border:1px solid var(--accent);border-radius:var(--radius-btn);
  font-family:var(--font-serif);font-size:1.15rem;color:var(--accent)}
ol.steps li:not(:last-child)::after{content:"";position:absolute;left:20px;top:44px;bottom:8px;width:1px;background:var(--line)}
ol.steps .btn{margin-top:14px}

/* ── Stránka odpovede na otázku (/odpoved/<token>) ─────────────────────────
   Vlákno otázka → odpoveď v duchu konverzácie. Stav nesie nadpis a dátum,
   NIE veľký farebný štítok — ten preberal pozornosť nadpisu (DESIGN 74). */
.iq-thread{max-width:660px;margin:0 auto}
.iq-block{margin:0 0 30px}
.iq-block:last-child{margin-bottom:0}
.iq-title{font-size:clamp(2.2rem,5vw,3.4rem);margin:0 0 26px}
.iq-h{font-family:var(--font-sans);font-size:1.05rem;font-weight:600;letter-spacing:0;margin:0 0 12px;color:var(--accent)}
.iq-cat{font-size:.78rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-muted);margin:0 0 10px}
.iq-text{white-space:pre-line;line-height:1.65;color:var(--ink);margin:0}
.iq-answer{background:var(--white);border:1px solid var(--line-strong);border-radius:var(--radius-box);padding:26px 28px}
/* Podpis ambulancie. Ten istý prvok na stránke žiadosti (/odpoved) aj na
   stránke eReceptu (/stav) — preto nie je viazaný na predponu .iq-. */
.amb-sign{margin-top:22px;font-size:.95rem;line-height:1.45}
.amb-sign strong{display:block;font-weight:600;color:var(--ink)}
.amb-sign span{display:block;color:var(--ink-soft)}
.iq-when{margin:16px 0 0;font-size:.86rem;color:var(--ink-muted)}
.iq-ok{color:var(--accent)}
/* Vlastná správa je tichá — bez karty, na podklade stránky. Pacient prišiel
   čítať odpoveď; svoju žiadosť už pozná a potrebuje ju na pripomenutie. */
/* Odsadenie kopíruje výplň karty odpovede — texty oboch blokov majú mať
   spoločnú ľavú zvislicu, hoci jeden kartu má a druhý nie. */
.iq-mine{padding:0 28px}
.iq-mine .iq-h{margin-bottom:6px}
.iq-h-quiet{color:var(--ink-soft)}
@media(max-width:560px){.iq-answer{padding:20px 18px}.iq-mine{padding:0 18px}}

/* ── Prikladanie dokumentov (žiadosť pacienta) ─────────────────────────────
   Tlačidlo je viditeľné až po pridaní triedy .atc-on, ktorú nastavuje
   public/priloha.js. Bez JavaScriptu by inak pacient dostal ovládanie, ktoré
   nič nerobí — a nedozvedel by sa prečo. */
/* Editor prílohy je vedľajšia akcia, nie druhá polovica stránky (Marek
   24. 8. 2026) — biela karta s 24/26 px výplňou súperila so stavom žiadosti.
   Zoznamy na čítanie majú .atc-plain a menia sa nezávisle. */
.atc{margin:34px 0 0;padding:24px 26px;background:var(--white);border-radius:var(--radius-box)}
.atc.atc-quiet{background:none;border-radius:0;padding:18px 0 0;margin:26px 0 0;border-top:1px solid var(--line)}
.atc-quiet .atc-h{font-size:.95rem}
.atc-quiet .atc-desc{margin:0 0 14px}
.atc-hint{margin:10px 0 0;font-size:.86rem;color:var(--ink-muted)}
.atc-hint[hidden]{display:none}
.atc-h{font-family:var(--font-sans);font-size:1.05rem;font-weight:600;letter-spacing:0;margin:0 0 8px;color:var(--accent)}
.atc-desc{margin:0 0 16px;font-size:.95rem;line-height:1.55;color:var(--ink-soft)}
.atc-list{list-style:none;margin:0;padding:0}
.atc-list:not(:empty){margin-bottom:16px}
.atc-item{display:flex;align-items:center;gap:12px;padding:11px 14px;margin-bottom:8px;
  background:var(--bg);border-radius:var(--radius-btn)}
.atc-item:last-child{margin-bottom:0}
.atc-name{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:.95rem;color:var(--ink)}
.atc-size{flex:0 0 auto;font-size:.82rem;color:var(--ink-muted)}
/* Odobrať je tiché: je to oprava preklepu, nie hlavná akcia stránky. */
.atc-del{flex:0 0 auto;background:none;border:0;padding:6px 8px;margin:-6px -8px -6px 0;
  font:inherit;font-size:.86rem;color:var(--ink-muted);cursor:pointer;border-radius:var(--radius-btn)}
.atc-del:hover,.atc-del:focus-visible{color:var(--danger-tx);text-decoration:underline}
.atc-del[disabled]{opacity:.5;cursor:default;text-decoration:none}
/* Tlačidlo je <label> so skrytým polom — vyzerá a správa sa ako tlačidlo. */
.atc-add{display:none;align-items:center;gap:9px;cursor:pointer}
.atc-on .atc-add{display:inline-flex}
.atc-on .atc-add[hidden]{display:none}
.atc-add.is-busy{opacity:.6;pointer-events:none}
.atc-file{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* Klávesnica: fokus je na skrytom poli, obtiahnuť treba tlačidlo. */
.atc-file:focus-visible + .atc-lbl,.atc-add:focus-within{outline:2px solid var(--accent);outline-offset:2px}
/* Spôsoby pridania vedľa seba: súbor vždy; fotoaparát len na dotykovom
   zariadení; QR mostík na telefón len na počítači s myšou. Rozhoduje spôsob
   ovládania, nie šírka — tablet fotí sám, notebook potrebuje telefón.
   Bez JavaScriptu (bez .atc-on) sa neukáže nič z toho. */
.atc-btns{display:flex;flex-wrap:wrap;gap:10px 12px;align-items:center}
/* Hlavička bloku: nadpis a tiché počítadlo „n z 3" (nahrádza vety o limite). */
.atc-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.atc-count{flex:0 0 auto;font-size:.86rem;color:var(--ink-muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.atc-count[hidden],.atc-desc[hidden]{display:none}
/* Hotovo počas nahrávania — odchod by súbor stratil. */
.atc-done.is-busy{opacity:.6;pointer-events:none}
/* .btn má vlastné display — [hidden] by inak neplatilo (aj mobilné width:100%). */
.atc-done[hidden],.atc-skip[hidden]{display:none}
/* Odchod bez prílohy je tichý odkaz, nie tlačidlo — hlavná akcia je priložiť. */
.atc-skip{margin:18px 0 0;font-size:.95rem}
.atc-skip a{color:var(--ink-soft);text-decoration:underline;text-underline-offset:3px}
.atc-skip a:hover,.atc-skip a:focus-visible{color:var(--accent)}
.atc-skip.is-busy{opacity:.6;pointer-events:none}
.atc-toast{position:fixed;left:50%;bottom:24px;z-index:80;transform:translate(-50%,12px);
  padding:10px 18px;border-radius:999px;background:var(--ink);color:var(--bg);
  font-size:.95rem;font-weight:500;opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease}
.atc-toast.is-on{opacity:1;transform:translate(-50%,0)}
@media(prefers-reduced-motion:reduce){.atc-toast{transition:none}}
.atc-qr{display:none}
/* Rovnaký vzhľad ako tlačidlo-štítok „Pridať dokument": <button> by inak
   dostal systémové pozadie prehliadača. */
.atc-qr,.atc-qrhide{background:none;color:inherit}
.atc-on .atc-add.atc-cam{display:none}
@media (hover:hover) and (pointer:fine){.atc-on .atc-qr{display:inline-flex}}
@media (hover:none) and (pointer:coarse){.atc-on .atc-add.atc-cam{display:inline-flex}}
.atc-on .atc-add.atc-cam[hidden],.atc-on .atc-qr[hidden]{display:none}
/* Kým beží fotenie telefónom, tlačidlo nie je — druhý kód by zneplatnil prvý. */
.atc-on .atc-qr.is-live{display:none}
.atc-qrbox{margin-top:14px;padding:14px;
  border:1px solid var(--line);border-radius:var(--radius-inset);background:var(--white)}
.atc-qrbox[hidden],.atc-qrkod[hidden],.atc-qrok[hidden]{display:none}
.atc-qrkod{display:flex;gap:18px;align-items:flex-start}
/* Pripojený telefón = jedna tichá veta, bez rámika a bez tlačidla (Marek 16. 9.):
   koniec je „Hotovo" — na telefóne alebo na počítači. */
.atc-qrbox.is-tichy{padding:0;border:0;background:none}
.atc-qrok{margin:0;font-size:.95rem;line-height:1.5;color:var(--ink-soft)}
.atc-qrok strong{color:var(--ink)}
/* Biely podklad pod kódom aj pri tmavej palete — inak ho telefón neprečíta. */
.atc-qrimg{flex:0 0 auto;width:180px;height:180px;line-height:0;background:#fff;border-radius:4px}
.atc-qrimg svg{width:100%;height:100%;display:block}
.atc-qrtxt{flex:1 1 auto;min-width:0}
.atc-qrtxt p{margin:0 0 8px;font-size:.9rem;line-height:1.5;color:var(--ink-soft)}
.atc-qrtxt .atc-qrnote{font-size:.86rem;color:var(--ink-muted)}
@media(max-width:560px){.atc-qrkod{flex-direction:column}}
.atc-msg{margin:14px 0 0;font-size:.9rem;line-height:1.5;color:var(--ink-soft);min-height:1.35em}
.atc-msg.is-err{color:var(--danger-tx)}
.atc-msg.is-ok{color:var(--success-tx);font-weight:500}
/* Fajka = uložené. Stav nesie tvar a text hlásenia, farba je až tretia. */
.atc-okico{flex:0 0 auto;color:var(--accent);font-weight:600}
.atc-full{margin:0;font-size:.9rem;color:var(--ink-muted)}
.atc-note{margin:14px 0 0;font-size:.86rem;color:var(--ink-muted)}

/* Prílohy na čítanie — to, čo poslala ambulancia, a vlastné súbory po
   vybavení žiadosti. Celý riadok je odkaz, preto hover patrí naň. */
.atc-ro .atc-item{background:var(--bg)}
.atc-ro .atc-name{color:var(--accent);font-weight:500}
/* Uložiť je tiché: hlavné je meno dokumentu, toto je druhá cesta k nemu. */
.atc-save{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;padding:9px 10px;
  margin:-5px -6px -5px 0;font-size:.86rem;color:var(--ink-muted);text-decoration:none;
  border-radius:var(--radius-btn)}
.atc-save svg{width:16px;height:16px;flex:0 0 auto}
.atc-save:hover,.atc-save:focus-visible{color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,transparent)}
.atc-ico{flex:0 0 auto;width:20px;height:20px;color:var(--ink-muted)}
.atc-thumb{display:block;max-width:100%;border-radius:var(--radius-inset);margin-top:10px}
/* Náhľad v riadku prílohy — kontrola obsahu bez kliknutia. Pevná veľkosť,
   orezanie na stred: fotky dokumentov sú na výšku aj na šírku. */
.atc-item .atc-thumb{flex:0 0 auto;width:38px;height:38px;margin:0;object-fit:cover;
  border-radius:var(--radius-btn);background:var(--bg)}
.atc-link{color:var(--accent);text-decoration:none}
.atc-link:hover,.atc-link:focus-visible{text-decoration:underline}
/* Tichý zoznam — prílohy vypísané priamo v texte (v karte odpovede a pri
   vlastnej správe). Bez vlastnej karty, aby nevznikla karta v karte; riadok
   drží obrys, takže vyzerá rovnako na bielej ploche aj na podklade stránky. */
.atc.atc-plain{background:none;padding:0;margin:22px 0 0}
.atc-plain .atc-h{font-size:.95rem}
.atc-plain .atc-item{background:none;border:1px solid var(--line)}
.atc-plain a.atc-item:hover,.atc-plain a.atc-item:focus-visible{background:color-mix(in srgb,var(--accent) 6%,transparent)}
@media(max-width:560px){
  .atc{padding:20px 18px}
  .atc-item{flex-wrap:wrap;gap:6px 12px}
  .atc-name{flex:1 1 100%}
  .atc-save{margin-left:auto;padding:14px 12px;margin-top:-6px;margin-bottom:-6px}
}

@media(min-width:1151px){.actions-grid.cards-n1{grid-template-columns:1fr}.actions-grid.cards-n1 .action-card{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto auto;column-gap:64px;align-content:center}.actions-grid.cards-n1 .action-card .tag{grid-column:1;grid-row:1;margin-bottom:18px}.actions-grid.cards-n1 .action-card h3{grid-column:1;grid-row:2}.actions-grid.cards-n1 .action-card p{grid-column:1;grid-row:3;max-width:64ch}.actions-grid.cards-n1 .action-card .go{grid-column:2;grid-row:1/span 3;align-self:center;margin-top:0;white-space:nowrap}.actions-grid.cards-n2{grid-template-columns:repeat(2,1fr)}}