/* =========================================================
   Očné Sasinkova, design tokens
   Paleta prevzatá z investičného prospektu (Sasinkova-Ivanka-prospekt-SK_1.pdf),
   aby ambulancia a investičná ponuka vyzerali ako jedna značka.
   ========================================================= */

:root {
  /* Papier */
  --paper:        #fbfaf7;
  --paper-warm:   #f6f3ed;
  --panel:        #e1ded7;
  --line:         #d4d1ca;

  /* Text */
  --ink:          #252529;
  --ink-warm:     #3a3833;
  --ink-deep:     #211f1b;
  --ink-soft:     #66635e;
  --muted:        #8b877f;
  --muted-light:  #a8a29a;

  /* Akcent: terakota z prospektu, drží typografické značky */
  --accent:       #a94c2e;
  --accent-light: #c87a56;
  --accent-wash:  #a94c2e1a;
  --on-accent:    #fbfaf7;

  /* Medicínsky tón: tyrkysová prevzatá z pôvodného webu (#18bcc7).
     Text na nej je tmavý zámerne: biely text dáva kontrast 2,3:1 (pod AA),
     tmavý 6,6:1. Odtieň zostáva rovnaký, mení sa len popredie. */
  --medical:      #18bcc7;
  --medical-deep: #0b6d75;
  --medical-wash: #18bcc71f;
  --on-medical:   #16333a;

  /* Odtiene na tmavom podklade */
  --on-dark-strong: #fbfaf7cc;
  --on-dark:        #fbfaf7b3;
  --on-dark-muted:  #fbfaf799;
  --on-dark-line:   #fbfaf733;
  --on-dark-fill:   #fbfaf70d;

  /* Písmo */
  --font-body:    "Inter", system-ui, sans-serif;
  --font-display: "Lora", Georgia, serif;
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;

  /* Rytmus */
  --wrap:        72rem;
  --gutter:      1.25rem;
  --radius:      0.5rem;
  --radius-sm:   0.375rem;
  --section-gap: 4.5rem;
}

/* =========================================================
   Reset
   ========================================================= */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
table { border-collapse: collapse; width: 100%; }

/* Fokus je tyrkysový ako tlačidlá. Na papieri musí ísť tmavší odtieň:
   svetlý #18bcc7 má proti pozadiu len 2,2:1, čo je pod hranicou viditeľnosti. */
:focus-visible {
  outline: 2px solid var(--medical-deep);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Na tmavom paneli je to naopak: tam svieti svetlý odtieň. */
.panel--dark :focus-visible { outline-color: var(--medical); }

[id] { scroll-margin-top: 5.5rem; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* =========================================================
   Layout
   ========================================================= */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: var(--section-gap);
  border-bottom: 1px solid var(--line);
}
.section:last-of-type { border-bottom: 0; }
.section--tint { background: var(--paper-warm); }

.section__head {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
}
.section__num {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  color: var(--accent);
}
.section__title {
  font-family: var(--font-display);
  font-size: 1.875rem;
  line-height: 2.25rem;
  font-weight: 500;
}
.section__aside {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1rem;
  text-transform: uppercase;
  color: var(--muted);
}
.section__head + .lead { margin-top: 0.75rem; }

/* =========================================================
   Opakované prvky
   ========================================================= */

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  line-height: 1.5;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.eyebrow--accent  { color: var(--accent); }
.eyebrow--on-dark { color: var(--on-dark-muted); }

.lead {
  max-width: 42rem;
  font-size: 1.125rem;
  line-height: 1.625;
  color: var(--ink-soft);
}

.panel {
  padding: 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper-warm);
}
.panel--dark {
  border-color: transparent;
  background: var(--ink);
  color: var(--paper);
}
/* Zvýraznený panel: tyrkysový, aby ladil s tlačidlami a fokusom. */
.panel--highlight {
  border-color: var(--medical);
  background: var(--medical-wash);
}

.media {
  width: 100%;
  border-radius: var(--radius);
  object-fit: cover;
  background: var(--panel);
}
.media--4x3  { aspect-ratio: 4 / 3; }
.media--16x9 { aspect-ratio: 16 / 9; }
.media--1x1  { aspect-ratio: 1 / 1; }

/* Tlačidlá ------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3rem;
  padding: 0.75rem 1.25rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.btn--sm    { min-height: 2.5rem; padding: 0.5rem 1rem; font-size: 0.875rem; }
.btn--block { width: 100%; }

/* Primárna akcia: tyrkysová. Všetko, čo vedie k objednaniu. */
.btn--accent { background: var(--medical); color: var(--on-medical); }
.btn--accent:hover { background: var(--medical-deep); color: var(--paper); }

.btn--ink { background: var(--ink); color: var(--paper); }
.btn--ink:hover { background: var(--medical); color: var(--on-medical); }

.btn--ghost { border-color: var(--line); }
.btn--ghost:hover { border-color: var(--medical-deep); color: var(--medical-deep); }

.btn--light { background: var(--medical); color: var(--on-medical); }
.btn--light:hover:not(:disabled) { background: var(--paper); color: var(--ink); }

.btn:disabled { opacity: 0.55; cursor: not-allowed; }

/* =========================================================
   Hlavička
   ========================================================= */

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  border-bottom: 1px solid var(--line);
  background: #fbfaf7f2;
  backdrop-filter: blur(8px);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.875rem;
}

.brand { display: flex; align-items: center; gap: 0.75rem; }
/* Značka z letáku: kruh so zvislou tetivou. Prekreslená do SVG, aby bola ostrá
   v každej veľkosti. Farbu dedí cez `currentColor`, takže na tmavom podklade
   stačí zmeniť `color`. */
.brand__mark {
  flex: none;
  width: 2.5rem; height: 2.5rem;
  color: var(--ink);
}
.brand__mark svg { width: 100%; height: 100%; }
.brand__text { line-height: 1.25; }
.brand__name {
  display: block;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 500;
}
.brand__tag {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.site-nav { display: none; gap: 1.75rem; font-size: 0.9375rem; color: var(--ink-soft); }
.site-nav a:hover { color: var(--accent); }

.site-header__actions { display: flex; align-items: center; gap: 0.75rem; }

.nav-toggle {
  display: grid;
  place-items: center;
  width: 2.75rem; height: 2.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: none;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 1.125rem;
  height: 1.5px;
  background: var(--ink);
  box-shadow: 0 -5px var(--ink), 0 5px var(--ink);
}

.mobile-nav {
  display: grid;
  gap: 0.25rem;
  padding: 0 var(--gutter) 1rem;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}
.mobile-nav[hidden] { display: none; }
.mobile-nav a {
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--line);
  font-weight: 500;
}
.mobile-nav a:last-child { border-bottom: 0; }

/* =========================================================
   Hero
   ========================================================= */

.hero { padding-block: 3rem; }
.hero__kicker { color: var(--accent); }
.hero__title {
  margin-top: 0.75rem;
  max-width: 16ch;
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 6vw, 3.5rem);
  line-height: 1.15;
  font-weight: 500;
}
.hero__lead { margin-top: 1.25rem; }
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.75rem;
}
/* Bez pomeru strán: fotka si drží vlastný, takže sa nič neoreže. */
.hero__image { display: block; margin-top: 2.5rem; }

.hero-facts {
  display: grid;
  gap: 1.5rem;
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
}
.hero-fact__value {
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 500;
}
.hero-fact p {
  margin-top: 0.375rem;
  font-size: 0.9375rem;
  color: var(--ink-soft);
}

/* =========================================================
   O nás
   ========================================================= */

.about { display: grid; gap: 2.5rem; margin-top: 2rem; }
.about__title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 500;
}
.about__text { margin-top: 1rem; color: var(--ink-soft); }
.about__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }

/* =========================================================
   Služby
   ========================================================= */

.services {
  display: grid;
  gap: 1.5rem;
  margin-top: 2rem;
}
.service { padding: 1.5rem; }
.service__title {
  margin-top: 0.75rem;
  font-family: var(--font-display);
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 500;
}
.service__text { margin-top: 0.5rem; color: var(--ink-soft); }

/* Štatistiky ---------------------------------------------- */

.stats {
  display: grid;
  gap: 1px;
  margin-top: 2rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--line);
  overflow: hidden;
}
.stat { padding: 1.5rem; background: var(--paper); }
.stat__value {
  font-family: var(--font-display);
  font-size: 2.25rem;
  line-height: 1.1;
  font-weight: 500;
  color: var(--accent);
}
.stat p { margin-top: 0.5rem; color: var(--ink-soft); }

/* =========================================================
   Dôležité informácie
   ========================================================= */

.notes { display: grid; gap: 1.5rem; margin-top: 2rem; }

.checklist { display: grid; gap: 0.75rem; margin-top: 1rem; }
.checklist li {
  display: flex;
  gap: 0.75rem;
  align-items: baseline;
  color: var(--ink-soft);
}
.checklist li::before {
  content: "";
  flex: none;
  width: 0.375rem; height: 0.375rem;
  border-radius: 50%;
  background: var(--accent);
  transform: translateY(-0.15em);
}

.note__title {
  font-family: var(--font-display);
  font-size: 1.125rem;
  line-height: 1.625rem;
  font-weight: 500;
}
.note p { margin-top: 0.5rem; color: var(--ink-soft); }

/* =========================================================
   Tím
   ========================================================= */

.team { display: grid; gap: 2rem; margin-top: 2rem; }
.about__media { display: block; }
.doctor__photo { display: block; max-width: 12rem; }
.doctor__role { margin-top: 1.25rem; }
.doctor__name {
  margin-top: 0.375rem;
  font-family: var(--font-display);
  font-size: 1.375rem;
  line-height: 1.875rem;
  font-weight: 500;
}
.doctor__bio { margin-top: 0.75rem; line-height: 1.7; color: var(--ink-soft); }
.doctor__bio + .doctor__bio { margin-top: 1rem; }

/* Karty sú rovnako vysoké a tabuľka sadá na dno, takže obe končia v jednej
   línii aj keď má jedno bio o riadok viac. */
.doctor { display: flex; flex-direction: column; height: 100%; }
.doctor__meta { margin-top: auto; padding-top: 1.5rem; }
.doctor__meta > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.625rem;
  border-top: 1px solid var(--line);
  font-size: 0.875rem;
}
.doctor__meta > div:last-child { border-bottom: 1px solid var(--line); }
.doctor__meta dt { flex: none; color: var(--muted); }
.doctor__meta dd { text-align: right; font-weight: 500; }

/* =========================================================
   Cenník
   ========================================================= */

.pricing { display: grid; gap: 2rem; margin-top: 2rem; }
.price-group__title {
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.price-table tr { border-bottom: 1px solid var(--line); }
.price-table th,
.price-table td { padding: 0.75rem 0; text-align: left; font-weight: 400; }
.price-table td {
  width: 1%;
  white-space: nowrap;
  padding-left: 1rem;
  text-align: right;
  font-family: var(--font-mono);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* =========================================================
   Kontakt
   ========================================================= */

.contact-grid { display: grid; gap: 2rem; margin-top: 2rem; }

.hours { margin-top: 1rem; }
.hours tr { border-bottom: 1px solid var(--line); }
.hours th,
.hours td { padding: 0.625rem 0; text-align: left; font-weight: 400; }
.hours td {
  text-align: right;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.hours__note {
  margin-top: 0.75rem;
  font-size: 0.875rem;
  color: var(--muted);
}

/* Kontaktné údaje v ráme, rovnako ako karty Parkovanie a MHD vedľa. */
.contact-card { align-self: start; }

.detail + .detail { margin-top: 1.5rem; }
.detail__value { margin-top: 0.25rem; font-size: 1.0625rem; }
.detail__value a:hover { color: var(--medical-deep); }
.detail__hint { color: var(--muted); }

/* =========================================================
   Formulár
   ========================================================= */

.booking { display: grid; gap: 2rem; margin-top: 2rem; }
.booking__intro { display: flex; flex-direction: column; }
.booking__media { display: block; margin-top: 2rem; }

.lead__tel {
  color: var(--ink);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--medical);
  text-underline-offset: 0.2em;
  text-decoration-thickness: 2px;
}
.lead__tel:hover { color: var(--medical-deep); }

.form { display: grid; gap: 1rem; margin-top: 1.5rem; }
.field { display: grid; gap: 0.375rem; }
.field label { font-size: 0.875rem; font-weight: 500; color: var(--on-dark-strong); }
.field input,
.field select,
.field textarea {
  min-height: 3rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--on-dark-line);
  border-radius: var(--radius-sm);
  background: var(--on-dark-fill);
  color: var(--paper);
}
.field textarea { min-height: 6rem; resize: vertical; }

/* Pri fokuse sa prefarbí aj samotný rám poľa, nielen prstenec okolo neho. */
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  border-color: var(--medical);
  outline-offset: 1px;
}
/* Záloha pre prehliadače bez vlastného vzhľadu zoznamu: popup kreslí systém
   na bielom podklade, tak nech je v ňom text tmavý a čitateľný. */
.field select option { color: var(--ink); }

/* Vlastný vzhľad rozbaľovacieho zoznamu. Zatiaľ len prehliadače na Chromiu;
   inde ostane natívny ovládač, funkčne v poriadku, len ho kreslí systém. */
@supports (appearance: base-select) {
  .field select,
  .field select::picker(select) { appearance: base-select; }

  .field select {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    text-align: left;
  }
  .field select::picker-icon {
    color: var(--on-dark-muted);
    transition: transform 0.15s;
  }
  .field select:open::picker-icon { transform: rotate(180deg); }

  .field select::picker(select) {
    margin-top: 0.375rem;
    padding: 0.375rem;
    border: 1px solid var(--on-dark-line);
    border-radius: var(--radius-sm);
    background: #2f2f35;
    box-shadow: 0 12px 32px #00000059;
  }

  .field select option {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem 0.75rem;
    border-radius: 0.25rem;
    background: transparent;
    color: var(--paper);
  }
  .field select option:hover { background: var(--on-dark-fill); }
  .field select option:checked {
    background: var(--medical);
    color: var(--on-medical);
  }
  /* Fajka drží rozlíšenie aj bez farby, nespoliehame sa len na podfarbenie. */
  .field select option::checkmark { color: inherit; }
}

.consent {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  font-size: 0.875rem;
  color: var(--on-dark);
}
.consent input { flex: none; width: 1.125rem; height: 1.125rem; margin-top: 0.15rem; }
.consent a { text-decoration: underline; }

.form__status { font-size: 0.9375rem; }
.form__status:empty { display: none; }
.form__status[data-state="ok"]    { color: var(--accent-light); }
.form__status[data-state="error"] { color: #f0a58a; }

/* =========================================================
   Pätička
   ========================================================= */

.site-footer {
  border-top: 1px solid var(--line);
  background: var(--paper-warm);
}
.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2rem;
  padding-block: 2.5rem;
}
.site-footer__name {
  font-family: var(--font-display);
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 500;
}
.site-footer__note {
  max-width: 32rem;
  margin-top: 0.5rem;
  font-size: 0.875rem;
  color: var(--muted);
}
.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin-top: 1rem;
  font-size: 0.875rem;
  color: var(--ink-soft);
}
.site-footer__links a:hover { color: var(--medical-deep); }

/* Copyright sadá na dno stĺpca, aby sedel na linke s odkazmi vľavo. */
.site-footer__aside {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.site-footer__copy { margin-top: auto; }
.site-footer__copy a {
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 0.25em;
}
.site-footer__copy a:hover {
  color: var(--medical-deep);
  text-decoration-color: var(--medical);
}

.rating { display: flex; flex-direction: column; gap: 0.5rem; }
.rating__stars { display: flex; gap: 0.1875rem; }
.rating__stars svg {
  width: 1rem;
  height: 1rem;
  fill: var(--accent);
}
.rating__value {
  display: flex;
  align-items: baseline;
  gap: 0.4375rem;
  font-size: 0.9375rem;
  color: var(--ink-soft);
}
.rating__value strong {
  font-family: var(--font-display);
  font-size: 1.25rem;
  line-height: 1.2;
  font-weight: 500;
  color: var(--ink);
}
@media (min-width: 40rem) {
  .site-footer__aside { align-items: flex-end; text-align: right; }
  .rating { align-items: flex-end; }

  /* Posun tak, aby riadok s 99,7 % sedel na riadku s IČO a DIČ vľavo:
     výška názvu firmy plus jeho odsadenie od poznámky. Hviezdičky nad ním
     potom pripadnú na riadok s adresou. */
  .rating { margin-top: calc(1.75rem + 0.5rem); }
}

/* =========================================================
   Animácia
   ========================================================= */

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.anim-in { animation: rise 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) both; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .anim-in { animation: none; }
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}

/* =========================================================
   Breakpointy
   ========================================================= */

@media (min-width: 40rem) {
  .hero-facts { grid-template-columns: repeat(2, 1fr); }
  .services   { grid-template-columns: repeat(2, 1fr); }
  .stats      { grid-template-columns: repeat(3, 1fr); }
  .notes      { grid-template-columns: repeat(2, 1fr); }
  .pricing    { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 48rem) {
  .site-nav { display: flex; }
  .nav-toggle { display: none; }
  .mobile-nav { display: none !important; }

  .hero {
    display: grid;
    grid-template-columns: 7fr 5fr;
    column-gap: 3rem;
    row-gap: 2.5rem;
    align-items: center;
  }
  .hero__image { margin-top: 0; }
  /* Odsadenie nad linkou dáva row-gap mriežky, vlastný margin by sa pripočítal. */
  .hero-facts { grid-column: 1 / -1; grid-template-columns: repeat(4, 1fr); margin-top: 0; }

  .about        { grid-template-columns: 5fr 7fr; align-items: center; }
  .team         { grid-template-columns: repeat(2, 1fr); gap: 3rem; }
  .contact-grid { grid-template-columns: 7fr 5fr; gap: 3rem; }
  .booking      { grid-template-columns: 5fr 7fr; gap: 3rem; }
  /* Na širokej obrazovke fotka vedie stĺpec, text ide pod ňu. */
  .booking__media { order: -1; margin-top: 0; margin-bottom: 2rem; }
}

@media (min-width: 64rem) {
  .services { grid-template-columns: repeat(3, 1fr); }
}

/* =========================================================
   Právne stránky (cookies, ochrana údajov)
   ========================================================= */

.doc {
  max-width: 46rem;
  padding-block: 3.5rem 4.5rem;
}

.doc__title {
  margin-top: 0.75rem;
  font-family: var(--font-display);
  font-size: clamp(1.875rem, 4vw, 2.5rem);
  line-height: 1.2;
  font-weight: 500;
}
.doc__meta {
  margin-top: 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.doc__intro {
  margin-top: 1.5rem;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--ink-soft);
}

.doc__org {
  margin-top: 2rem;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--ink-soft);
}
.doc__org strong { color: var(--ink); font-weight: 600; }

.doc__section { margin-top: 2.75rem; }
.doc__section h2 {
  display: flex;
  gap: 0.75rem;
  font-family: var(--font-display);
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 500;
}
.doc__section h2 ::marker { content: none; }
.doc__num {
  flex: none;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.75rem;
  color: var(--accent);
}
.doc__section h3 {
  margin-top: 1.75rem;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 500;
}
.doc__section p { margin-top: 1rem; line-height: 1.7; color: var(--ink-soft); }
.doc__section > p:first-of-type { margin-top: 0.75rem; }

.doc__list { margin-top: 1rem; display: grid; gap: 0.625rem; }
.doc__list li {
  display: flex;
  gap: 0.75rem;
  align-items: baseline;
  line-height: 1.7;
  color: var(--ink-soft);
}
.doc__list li::before {
  content: "";
  flex: none;
  width: 0.3125rem; height: 0.3125rem;
  border-radius: 50%;
  background: var(--medical);
  transform: translateY(-0.2em);
}

.doc__section a,
.doc__intro a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--medical); text-underline-offset: 0.15em; }
.doc__section a:hover,
.doc__intro a:hover { color: var(--medical-deep); }

.doc__note {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--muted);
}

.doc__back {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 3rem;
  font-weight: 600;
}
.doc__back:hover { color: var(--medical-deep); }

/* =========================================================
   Investičná ponuka (/investor)
   ========================================================= */

/* Varovný panel. Terakota zámerne: tyrkysová je na tomto webe farba
   pozitívneho zvýraznenia a akcie, riziko sa ňou označovať nemá. */
.panel--warn {
  border-color: var(--accent);
  background: var(--accent-wash);
}

.offer-facts {
  display: grid;
  gap: 1.5rem;
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
}
.offer-fact__value {
  font-family: var(--font-display);
  font-size: 1.875rem;
  line-height: 2.25rem;
  font-weight: 500;
}
.offer-fact p { margin-top: 0.25rem; }

/* Tabuľka výnosov ---------------------------------------- */

.yield { margin-top: 2rem; overflow-x: auto; }
.yield table { min-width: 34rem; }
.yield thead th {
  padding: 0 0 0.75rem;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: right;
  color: var(--muted);
}
.yield thead th:first-child { text-align: left; }
.yield tbody th {
  padding: 0.875rem 1rem 0.875rem 0;
  text-align: left;
  font-weight: 500;
}
.yield tbody tr { border-bottom: 1px solid var(--line); }
.yield td {
  padding: 0.875rem 0 0.875rem 1rem;
  text-align: right;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.yield .yield__rate { color: var(--accent); font-weight: 500; }
.yield__note {
  margin-top: 1rem;
  font-size: 0.875rem;
  color: var(--muted);
}

/* Prevádzky ---------------------------------------------- */

.sites { display: grid; gap: 1.5rem; margin-top: 2rem; }
.site__title {
  margin-top: 0.5rem;
  font-family: var(--font-display);
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 500;
}
.site__facts { margin-top: 0.75rem; color: var(--ink-soft); }
.site__claim {
  margin-top: 1rem;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  line-height: 1.6;
}
.site__capital {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}
.site__capital b {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 500;
}

/* Kroky procesu ------------------------------------------ */

.steps {
  display: grid;
  gap: 1px;
  margin-top: 2rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--line);
  overflow: hidden;
}
.step { padding: 1.5rem; background: var(--paper); }
.step__num {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--accent);
}
.step__title {
  margin-top: 0.625rem;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  line-height: 1.5rem;
  font-weight: 500;
}
.step p { margin-top: 0.5rem; font-size: 0.9375rem; color: var(--ink-soft); }

/* Prístup a kontakt -------------------------------------- */

.access { display: grid; gap: 2rem; margin-top: 2rem; }
.access__deadline {
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 500;
}

.disclaimer {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  font-size: 0.8125rem;
  line-height: 1.7;
  color: var(--muted);
}

@media (min-width: 40rem) {
  .offer-facts { grid-template-columns: repeat(2, 1fr); }
  .sites  { grid-template-columns: repeat(2, 1fr); }
  .steps  { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 48rem) {
  .access { grid-template-columns: 7fr 5fr; gap: 3rem; }
}

@media (min-width: 64rem) {
  .offer-facts { grid-template-columns: repeat(4, 1fr); }
  .steps { grid-template-columns: repeat(5, 1fr); }
}

/* Podmienky a varovanie o riziku ------------------------- */

.terms { display: grid; gap: 1.5rem; margin-top: 2rem; }

.spec > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.75rem;
}
.spec > div + div { border-top: 1px solid var(--line); }
.spec dt { color: var(--ink-soft); }
.spec dd { text-align: right; font-weight: 600; }

.warn__title {
  margin-top: 1rem;
  font-family: var(--font-display);
  font-size: 1.375rem;
  line-height: 1.875rem;
  font-weight: 500;
}
.warn__text { margin-top: 1rem; color: var(--ink-soft); }
.warn__text b { color: var(--ink); font-weight: 600; }

/* Na tmavom paneli musí hover svietiť, tmavý tyrkys by tam zanikol. */
.panel--dark .detail__value a:hover { color: var(--medical); }

@media (min-width: 48rem) {
  .terms { grid-template-columns: repeat(2, 1fr); }
}

/* Podmienky stoja samostatne, bez panelu s rizikom vedľa. Užšia miera drží
   dvojice pojem/hodnota čitateľné, na plnú šírku by sa roztiahli. */
.terms-panel { max-width: 42rem; margin-top: 2rem; }

/* Kalkulačka výnosu (investičná stránka) ------------------ */

.calc__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 1.25rem;
}
.calc__label { font-weight: 600; }
.calc__readout {
  font-family: var(--font-mono);
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.calc__scale {
  display: flex;
  justify-content: space-between;
  margin-top: 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--on-dark-muted);
}

.slider {
  appearance: none;
  width: 100%;
  height: 6px;
  margin-top: 1.5rem;
  border-radius: 9999px;
  background: var(--on-dark-line);
  cursor: pointer;
}
.slider::-webkit-slider-thumb {
  appearance: none;
  width: 26px; height: 26px;
  border: 4px solid var(--ink);
  border-radius: 9999px;
  background: var(--medical);
}
.slider::-moz-range-thumb {
  width: 18px; height: 18px;
  border: 4px solid var(--ink);
  border-radius: 9999px;
  background: var(--medical);
}

.ledger {
  display: grid;
  gap: 0.875rem;
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--on-dark-line);
}
.ledger > div { display: flex; justify-content: space-between; gap: 1rem; }
.ledger dt { color: var(--on-dark); }
.ledger dd {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ledger__accent { color: var(--medical); font-weight: 500; }

.fineprint {
  margin-top: 1.5rem;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--on-dark-muted);
}

/* Prospekty na stiahnutie -------------------------------- */

.downloads { margin-top: 2.5rem; }
.downloads__list {
  display: grid;
  gap: 1px;
  margin-top: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--line);
  overflow: hidden;
}
.downloads__list a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.875rem 1.125rem;
  background: var(--paper);
  font-weight: 500;
  transition: background-color 0.15s, color 0.15s;
}
.downloads__list a:hover {
  background: var(--medical-wash);
  color: var(--medical-deep);
}
.downloads__meta {
  flex: none;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--muted);
}

/* Zoznam ostáva jednostĺpcový zámerne. Pri dvoch stĺpcoch a nepárnom počte
   jazykov zostane na konci prázdna bunka, ktorá vyzerá ako chyba. */

/* =========================================================
   Očný slovník
   ========================================================= */

.doc--wide { max-width: var(--wrap); }

/* Skok na písmeno ---------------------------------------- */

.glossary__jump {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.glossary__jump a {
  display: grid;
  place-items: center;
  min-width: 2rem;
  padding: 0.375rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--ink-soft);
}
.glossary__jump a:hover {
  border-color: var(--medical);
  background: var(--medical-wash);
  color: var(--medical-deep);
}

/* Zoznam hesiel ------------------------------------------ */

.glossary { margin-top: 3rem; }
.glossary__group + .glossary__group { margin-top: 2.5rem; }

.glossary__letter {
  padding-bottom: 0.625rem;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--accent);
}

/* Bez triku s medzerou a farebným pozadím: pri nepárnom počte hesiel by
   prázdne bunky mriežky presvitali ako sivé obdĺžniky. Oddeľuje preto linka
   pod každou položkou, čo funguje pri ľubovoľnom počte a šírke. */
.glossary__list { display: grid; column-gap: 2.5rem; }
.glossary__list a {
  display: grid;
  gap: 0.25rem;
  padding: 0.875rem 0;
  border-bottom: 1px solid var(--line);
  transition: color 0.15s;
}
.glossary__list a:hover { color: var(--medical-deep); }
.glossary__list a:hover .glossary__hint { color: var(--ink-soft); }
.glossary__list a > span:first-child {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 500;
}
.glossary__hint {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--ink-soft);
  /* Náhľad je len ochutnávka, dlhé vety sa orežú na dva riadky. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Stránka hesla ------------------------------------------ */

.term__aka {
  margin-top: 0.75rem;
  font-size: 0.9375rem;
  color: var(--muted);
}
.term__body { max-width: 42rem; margin-top: 1.75rem; }
.term__body p { line-height: 1.75; color: var(--ink-soft); }
.term__body p + p { margin-top: 1.125rem; }
.term__body strong { color: var(--ink); font-weight: 600; }
.term__body a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 0.15em;
}
.term__body a:hover { color: var(--medical-deep); text-decoration-color: var(--medical); }

/* Predchádzajúce a nasledujúce heslo ---------------------- */

.pager {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  font-size: 0.9375rem;
}
.pager a { color: var(--ink-soft); }
.pager a:hover { color: var(--medical-deep); }
.pager__next { text-align: right; }

@media (min-width: 40rem) {
  .glossary__list { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 64rem) {
  .glossary__list { grid-template-columns: repeat(3, 1fr); }
}

/* Prepínač jazykov slovníka -------------------------------- */

.langs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  padding-top: 1.25rem;
}
.langs__item {
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  color: var(--muted);
}
a.langs__item:hover {
  border-color: var(--medical);
  background: var(--medical-wash);
  color: var(--medical-deep);
}
.langs__item--active {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
}