/* ROZCESTNÍK VEREJNÉHO DEMA — dizajnový jazyk produktu Paciento.

   PREČO VLASTNÝ SÚBOR A NIE theme.css APLIKÁCIE
   Táto stránka nie je webom ambulancie. Je to brána medzi predajným webom
   paciento.istora.eu a ukážkou, a návštevník na ňu prichádza priamo z neho.
   Keby prevzala paletu demo-ambulancie, po kliknutí na „Vyskúšať demo" by
   sa mu zmenil celý vizuál skôr, než si vôbec vybral, čo chce vidieť.
   Preto tu platia tokeny Paciento.

   ZDROJ PRAVDY O VZHĽADE PRODUKTU JE PREDAJNÝ WEB.
   Hodnoty nižšie sú kópiou témy `paciento` z jeho theme.css (finálna paleta
   zadaná 2026-08-10) a jeho kartového jazyka zo style.css. Zmena vizuálu ide
   TAM a potom sem; toto nie je druhý zdroj pravdy. Keď sa tam paleta zmení,
   zmení sa aj tento blok — inak sa rozcestník opäť rozíde s webom, z ktorého
   naň ľudia prichádzajú (presne to sa stalo medzi 8. a 19. 8. 2026).

   Rozsah je zámerne jedna stránka. Nič odtiaľto sa nepoužíva vo webe
   ambulancie ani v paneli a žiadna trieda nemá také meno, aby sa mohla
   pomiešať so style.css — všetky majú predponu `pi-`.

   PÍSMO: stránka má jedno písmo, Inter. Leží vedľa tohto súboru a sťahuje sa
   z nášho servera, nie od Googlu (GDPR, ako všetky písma projektu).
   Akcentové (serifové) písmo v nadpise je pripravené, ale vypnuté — viď blok
   „AKCENTOVÉ PÍSMO" nižšie. */

/* ── Inter (rovnaké súbory ako na paciento.istora.eu) ─────────────────── */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/paciento/inter-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/paciento/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Tokeny (téma „paciento" z predajného webu, 2026-08-10) ───────────── */
:root {
  --pi-bg:         #F7F4EF;  /* podklad celej stránky */
  --pi-bg-soft:    #EFEAE1;  /* jemný teplý panel — štítky, poznámka */
  --pi-surface:    #E4DED2;  /* hranice kariet, hairline */
  --pi-neutral:    #BFB3A3;  /* tlmené detaily */
  --pi-accent:     #A3523E;  /* akcent — tlačidlá a odkazy */
  --pi-accent-2:   #85422F;  /* tmavší akcent — hover */
  --pi-verde:      #324339;  /* hlavná — nadpisy */
  --pi-ink:        #333230;  /* bežný text */
  --pi-ink-soft:   #605D57;  /* sekundárny text */

  --pi-font:       'Inter', system-ui, -apple-system, sans-serif;
  --pi-font-acc:   'DM Serif Display', 'Fraunces', Georgia, serif;

  /* Kartový jazyk predajného webu: mäkký radius, hairline, veľmi jemný tieň. */
  --pi-radius:     24px;   /* karta voľby — zámerne o kúsok viac než 20 px webu */
  --pi-radius-sm:  20px;   /* menšie plochy (poznámka o deme) */
  --pi-shadow:     0 24px 60px -30px color-mix(in srgb, var(--pi-verde) 25%, transparent);
  --pi-shadow-up:  0 30px 70px -30px color-mix(in srgb, var(--pi-verde) 34%, transparent);

  --pi-maxw:       1120px;
}

/* ── Základ ───────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--pi-bg);
  color: var(--pi-ink);
  font-family: var(--pi-font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* Pätička nie je — obsah drží stred obrazovky a rozcestník sedí v optickom
     ťažisku. Na nízkych oknách sa `center` správa ako `start`, takže sa nič
     neodreže a stránka normálne scrolluje. */
  display: flex;
  flex-direction: column;
}

a { color: inherit; text-decoration: none; }

.pi-wrap { width: 100%; max-width: var(--pi-maxw); margin: 0 auto; padding: 0 24px; }

/* Odkaz na preskočenie hlavičky — vidno ho až pri prechode klávesnicou. */
.pi-skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--pi-verde); color: var(--pi-bg);
  padding: 12px 18px; font-size: 14px; font-weight: 600; z-index: 10;
  border-radius: 0 0 12px 0;
}
.pi-skip:focus { left: 12px; top: 12px; }

/* ── Hlavička ─────────────────────────────────────────────────────────── */
/* Hairline pod hlavičkou je ten istý prvok, aký má predajný web — pri
   prechode z neho sa horná časť okna vôbec nezmení. Sticky sa nerobí:
   stránka má jednu obrazovku a lepiaca lišta by len ubrala výšku. */
.pi-head { padding: 22px 0; flex: 0 0 auto; border-bottom: 1px solid var(--pi-bg-soft); }
.pi-head .pi-wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; }

/* Wordmark ako na paciento.istora.eu: malé písmená, bodka v akcente.
   Nie je to odkaz — sme na koreni tejto stránky a odkaz sám na seba je
   pre čítačku obrazovky slepá ulička. */
.pi-brand {
  font-size: 23px; font-weight: 700; letter-spacing: -0.02em;
  color: var(--pi-verde);
}
.pi-brand::after { content: "."; color: var(--pi-accent); }

/* Sekundárny, nenápadný — nesmie súťažiť s hlavnou voľbou. */
.pi-back {
  font-size: 14.5px; color: var(--pi-ink-soft);
  border-bottom: 1px solid transparent; padding-bottom: 2px;
  transition: color .2s ease, border-color .2s ease;
}
.pi-back:hover { color: var(--pi-verde); border-bottom-color: var(--pi-neutral); }
.pi-back:focus-visible { outline: 2px solid var(--pi-accent); outline-offset: 4px; border-radius: 4px; }

/* ── Hlavná os ────────────────────────────────────────────────────────── */
main { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; }

.pi-hero { text-align: center; padding: 64px 0 44px; }

.pi-hero h1 {
  margin: 0 0 16px;
  font-size: clamp(38px, 5.6vw, 64px);
  font-weight: 650;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--pi-verde);
}

/* ── AKCENTOVÉ PÍSMO — jedno miesto na zapnutie ───────────────────────── */
/* Dnes je nadpis celý jedným písmom. Slovo „Paciento" má vlastný obal
   `.pi-acc`, ktorý zatiaľ nemení nič — je to pripravené miesto, nie ozdoba.

   Zapnutie serifového akcentu (ako má hero na predajnom webe) = dve veci:
     1. odkomentovať pravidlo hneď pod týmto komentárom,
     2. priložiť súbor písma vedľa tohto štýlu a doplniť naň @font-face
        (rovnako ako Inter vyššie) — z Googlu sa nesťahuje nič.
   V šablóne stránky sa pritom nemení ani znak. */
.pi-acc { font: inherit; color: inherit; }
/* .pi-acc {
     font-family: var(--pi-font-acc);
     font-style: italic;
     font-weight: 400;
     letter-spacing: 0;
     color: var(--pi-accent);
   } */

.pi-hero p {
  margin: 0 auto;
  /* Na desktope sa veta zmestí do jedného riadku. Užšia miera ju lámala
     uprostred frázy („funguje pre | pacienta"), čo sa zle číta. */
  max-width: 60ch;
  font-size: clamp(17px, 1.6vw, 19px);
  color: var(--pi-ink-soft);
}

/* ── Voľba: dve karty ─────────────────────────────────────────────────── */
/* Karta má presne tie hodnoty, aké má `.card` na predajnom webe: podklad
   stránky, hairline rámik a veľmi rozptýlený tieň. Radius je o kúsok väčší
   (24 namiesto 20 px), lebo tu sú karty len dve a nesú celú stránku. */
.pi-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.pi-side {
  /* Stĺpec s výzvou na spodku: popisy majú rôznu dĺžku a bez toho by
     „Otvoriť web" a „Otvoriť panel" sedeli v inej výške. Oko to číta ako
     nedbalosť, aj keď nevie prečo. */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 34px 32px 30px;
  background: var(--pi-bg);
  border: 1px solid var(--pi-surface);
  border-radius: var(--pi-radius);
  box-shadow: var(--pi-shadow);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

/* Hover smie byť len tu — celá karta je odkaz. */
.pi-side:hover {
  transform: translateY(-2px);
  box-shadow: var(--pi-shadow-up);
  border-color: color-mix(in srgb, var(--pi-accent) 32%, var(--pi-surface));
}

/* Viditeľné ohraničenie pri prechode klávesnicou — celý blok, nie len text. */
.pi-side:focus-visible {
  outline: 2px solid var(--pi-accent);
  outline-offset: 3px;
  box-shadow: var(--pi-shadow-up);
}

/* Štítok je ten istý prvok ako `.lbl` na predajnom webe: pilulka, veľké
   písmená, akcent na teplom podklade. */
.pi-eyebrow {
  display: inline-block;
  font-size: 12.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--pi-accent);
  background: var(--pi-bg-soft);
  border-radius: 999px;
  padding: 7px 15px;
  margin-bottom: 20px;
}

.pi-side h2 {
  margin: 0 0 8px;
  font-size: clamp(24px, 2.4vw, 30px);
  font-weight: 650;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--pi-verde);
}

.pi-side p {
  margin: 0 0 26px;
  max-width: 28ch;
  color: var(--pi-ink-soft);
  font-size: 16px;
}

/* Výzva je plné tlačidlo v tvare pilulky — rovnaké ako `.btn` na predajnom
   webe. Nie je to <button>, ale text vnútri odkazu: klikateľná je celá karta,
   takže druhý ovládací prvok vnútri prvého by bol chybný aj pre čítačku. */
.pi-cta {
  margin-top: auto;   /* viď .pi-side — spodná linka je spoločná */
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 48px;
  padding: 12px 26px;
  border-radius: 999px;
  background: var(--pi-accent);
  color: #fff;
  font-size: 15px; font-weight: 600;
  transition: background .25s ease;
}
.pi-side:hover .pi-cta,
.pi-side:focus-visible .pi-cta { background: var(--pi-accent-2); }

.pi-arr { display: inline-block; transition: transform .22s ease; }
.pi-side:hover .pi-arr,
.pi-side:focus-visible .pi-arr { transform: translateX(4px); }

/* ── Poznámka o deme ──────────────────────────────────────────────────── */
/* Vlastná plocha, nie holý text pod čiarou: na mobile inak pôsobila ako
   odrezaný zvyšok stránky. Podklad je jemný panel, teda o stupeň tichšie
   než karty volieb — poradie dôležitosti zostáva zachované. */
.pi-note {
  margin: 40px 0 56px;
  background: var(--pi-bg-soft);
  border-radius: var(--pi-radius-sm);
  padding: 22px 26px;
  text-align: center;
}

.pi-note > p { margin: 0; font-size: 13.5px; color: var(--pi-ink-soft); }

.pi-det { margin-top: 10px; font-size: 13.5px; }
.pi-det > summary {
  display: inline-block;      /* skryje natívny trojuholník, značka zostáva */
  cursor: pointer;
  color: var(--pi-ink-soft);
  border-bottom: 1px solid var(--pi-neutral);
  padding-bottom: 1px;
  list-style: none;
}
.pi-det > summary::-webkit-details-marker { display: none; }
.pi-det > summary:hover { color: var(--pi-verde); }
.pi-det > summary:focus-visible { outline: 2px solid var(--pi-accent); outline-offset: 3px; border-radius: 4px; }
.pi-det[open] > summary { color: var(--pi-verde); }
.pi-det > p {
  margin: 14px auto 0;
  max-width: 62ch;
  color: var(--pi-ink-soft);
  line-height: 1.7;
}

/* ── Tablet ───────────────────────────────────────────────────────────── */
/* Medzi 761 a 900 px sú karty ešte vedľa seba, ale úzke — bez tohto by sa
   nadpis „Panel ambulancie" lámal a výplň by pôsobila natesno. */
@media (max-width: 900px) {
  .pi-side { padding: 28px 24px 26px; }
  .pi-side p { max-width: none; }
  .pi-hero { padding: 48px 0 36px; }
}

/* ── Mobil ────────────────────────────────────────────────────────────── */
/* Hero nesmie zabrať celú prvú obrazovku: návštevník má bez scrollovania
   vidieť obe karty. Preto menšie odsadenia a nadpis zarovnaný doľava. */
@media (max-width: 760px) {
  .pi-wrap { padding: 0 18px; }
  .pi-head { padding: 16px 0; }
  main { justify-content: flex-start; }

  .pi-hero { padding: 30px 0 26px; text-align: left; }
  .pi-hero h1 { font-size: clamp(31px, 8vw, 38px); margin-bottom: 12px; }
  .pi-hero p { margin: 0; max-width: 36ch; font-size: 16.5px; }

  /* Polovice idú pod seba a zostávajú kartami — na dotyku je celá karta cieľ. */
  .pi-split { grid-template-columns: 1fr; gap: 14px; }
  .pi-side { padding: 22px 22px 20px; border-radius: 20px; }
  .pi-eyebrow { margin-bottom: 14px; padding: 6px 13px; font-size: 12px; }
  .pi-side h2 { font-size: 22px; }
  .pi-side p { margin-bottom: 18px; font-size: 15.5px; }
  /* Tlačidlo na celú šírku karty: na telefóne je to hlavná akcia a palec
     má trafiť plochu, nie slovo. */
  .pi-cta { width: 100%; }

  .pi-note { margin: 22px 0 40px; padding: 18px 20px; text-align: left; }
  .pi-det > p { margin-left: 0; }
}

/* Veľmi úzke telefóny (do 360 px) — nadpis karty a tlačidlo si nesmú
   vynútiť vodorovné rolovanie. */
@media (max-width: 360px) {
  .pi-side { padding: 20px 18px 18px; }
  .pi-cta { padding: 12px 18px; font-size: 14.5px; }
}

/* ── Menej pohybu ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  .pi-side:hover { transform: none; }
  .pi-side:hover .pi-arr, .pi-side:focus-visible .pi-arr { transform: none; }
}