/* ==========================================================================
   epozvanka.sk — základ: tokeny, reset, typografia, tlačidlá
   Jeden vizuálny svet: tlačený pop-art plagát (modrá + ružová).
   Zámerne jednotémový — atrament a papier SÚ ten dizajn, preto sa
   v light aj dark režime vykresľuje rovnako a nikdy sa neinvertuje.
   ========================================================================== */

/* Trieda s vlastným display prebíja [hidden] z prehliadača — tlačidlo označené
   ako skryté potom zostane vidieť. Toto to zamkne raz a pre celý web. */
[hidden] { display: none !important; }

:root {
  color-scheme: only light;

  --ink: #0b0b14;
  --blue: #1b2cc1;
  --blue-deep: #0a1152;
  --blue-lit: #3d5bff;
  --pink: #ff3d9a;
  /* Ružová POD TEXTOM, nie ružová značky.

     Biela na --pink dáva 3,29 : 1. To je pod normou 4,5 : 1 a týka sa to
     všetkého bieleho, čo na ružovej ploche stojí — nadpisov výzvy, drobného
     textu pod tlačidlami aj samotných tlačidiel.

     Toto je najmenšie stmavenie, ktoré normu splní: 4,53 : 1. Skúšané aj
     svetlejšie odtiene (#e8266f dá 4,25 : 1, to nestačí) — červený kanál
     na plnej hodnote sám osebe prekročí strop jasu, takže sa stmaviť MUSÍ.
     --pink ostáva nedotknutá pre bodky, rámy, tiene a akcenty, kde na nej
     nestojí text. */
  --pink-plocha: #e01f78;
  --pink-soft: #ffa8d3;
  --cream: #fff1dc;
  --cream-2: #f2ddba;
  --yellow: #ffd400;

  --font-display: "Arial Black", "Archivo Black", Impact, Haettenschweiler, "Franklin Gothic Heavy", sans-serif;
  --font-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --wrap: 1180px;
  --gut: clamp(20px, 5vw, 56px);
  --rule: 5px;
  --pop: 7px;
}

:root[data-theme="dark"],
:root[data-theme="light"] { color-scheme: only light; }

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

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

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--blue-deep);
  color: var(--ink);
  font-family: var(--font-body);
  /* rem, nie px.

     Kým tu stálo clamp(16px, 1.05vw, 18px), nastavenie „väčšie písmo"
     v prehliadači nerobilo na titulke, v editore, na svadobnom webe ani na
     platbe VÔBEC NIČ — pri vynútenom html{font-size:200%} ostalo telo na
     16 px. Kto zle vidí a zväčší si písmo v systéme, dostal presne to isté,
     čo predtým. Podmienky a svadobná ukážka to mali správne, lebo px
     nepoužívajú.

     Stredná hodnota ostáva vo vw — na širokých monitoroch má text ešte
     narásť; dolná aj horná hranica sa už ale odvíjajú od nastavenia
     človeka, nie od pevného čísla. */
  font-size: clamp(1rem, 1.05vw, 1.125rem);
  line-height: 1.6;
}

img, canvas, video, svg { display: block; max-width: 100%; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; }

:focus-visible {
  /* Prstenec bol vždy žltý. Na modrej meria 6,7 : 1, ale na kréme 1,3 : 1,
     na ružovej 2,3 : 1 a na žltom páse presne 1,0 : 1 — čiže vôbec. Kto ide
     stránkou klávesnicou, nevidel na väčšine pásov, kde stojí — vrátane
     celého cenníka.

     Jedna farba, ktorá by prešla všade, neexistuje: atrament padá na modrej,
     biela na kréme. Preto tmavý predvolene a žltý len tam, kde je pozadie
     tmavé. Outline, nie box-shadow — ten tlačidlá používajú na plagátový
     tieň a fokus by ho zmazal. */
  outline: 4px solid var(--ink);
  outline-offset: 3px;
  border-radius: 2px;
}

.hero :focus-visible,
.band--blue :focus-visible,
.scrub :focus-visible,
.pata :focus-visible,
.plan--hi :focus-visible,
/* Modré hlavičky editora, podmienok a platby. Atrament na --blue meria
   2,03 : 1, norma pre prstenec je 3 : 1 — kto išiel stránkou klávesnicou,
   v hlavičke nevidel, kde stojí. */
.top :focus-visible,
.pod__top :focus-visible,
.hdr:not([data-state="stuck"]) :focus-visible {
  outline-color: var(--yellow);
}

/* Drobná pätička pracovných stránok (editor, prehľad).

   Každé pravidlo má pred sebou `.patka` z toho istého dôvodu ako pri veľkej
   pätičke: bez druhej triedy ho prebijú štýly stránky nad ňou. */
.patka {
  padding: 22px clamp(14px, 4vw, 30px) calc(22px + env(safe-area-inset-bottom, 0px));
  border-top: 3px solid var(--ink);
  background: var(--cream);
  color: var(--ink);
}
.patka p {
  max-width: 60rem; margin: 0 auto;
  font-size: 0.8rem; line-height: 1.6; text-align: center;
}
.patka a {
  color: var(--ink); text-underline-offset: 3px;
  /* Dotykový terč — v drobnej pätičke mali odkazy 15 px na výšku. */
  display: inline-block; padding-block: 6px;
}
.patka a:hover { text-decoration-thickness: 2px; }

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

.skip {
  position: fixed; top: 10px; left: 50%; z-index: 100;
  transform: translate(-50%, -220%);
  padding: 12px 20px;
  background: var(--yellow); color: var(--ink);
  border: 3px solid var(--ink);
  font-weight: 800; text-decoration: none;
}
.skip:focus-visible { transform: translate(-50%, 0); }

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

/* ── typografia ─────────────────────────────────────────────────────────── */

.giant, .big, .eyebrow, .logo, .btn, .step__n, .plan__price, .plan__name {
  font-family: var(--font-display);
  text-transform: uppercase;
}

.giant {
  margin: 0;
  color: #fff;
  /* Nadpis sa tiahne cez celú šírku, tak nech to aj tak vyzerá — je to
     plagát, nie odstavec. Horná hranica je spočítaná z najdlhšieho slova:
     „NEPREHLIADNE" je 12 znakov, v Arial Black to je asi 7,9 em, a obsah
     má najviac 1180 px mínus okraje. Osem rem sa zmestí s rezervou.
     Dolná hranica musí to isté slovo udržať v stĺpci na úzkom mobile,
     inak min-content roztlačí mriežku a text sa oreže. */
  font-size: clamp(1.95rem, 9.2vw, 8rem);
  line-height: 0.86;
  letter-spacing: -0.02em;
  text-wrap: balance;
  /* Zalomiť slovo LEN keď sa inak nezmestí. Dolná hranica clamp je
     spočítaná zo slova „NEPREHLIADNE" pri bežnom písme; kto si v prehliadači
     zapne dvojnásobné, dostane 62 px a to slovo má 477 px v okne so 390 —
     stránka sa potom dala posúvať do strán. break-word do bežného stavu
     nezasahuje, lomí až v takomto prípade. */
  overflow-wrap: break-word;
  text-shadow: 0.045em 0.05em 0 var(--ink);
}

.giant__hit {
  position: relative;
  display: inline-block;
  text-shadow: 0.045em 0.05em 0 var(--ink), 0.09em 0.1em 0 var(--pink);
  /* `anywhere`, nie `break-word`.

     Toto je inline-block, takže si šírku určuje sám podľa najdlhšieho slova.
     `break-word` lomí až pri pretečení, ale najmenšiu vlastnú šírku prvku
     nezmenší — takže by sa nadpis „neprehliadne" pri dvojnásobnom písme
     roztiahol na 477 px v okne so 390 aj tak. `anywhere` zmenší aj tú. */
  overflow-wrap: anywhere;
}

/* Na desktope má nadpis miesta dosť — „NEPREHLIADNE" (~7,9 em) sa do 1180 px
   vojde celé, tak sa NESMIE lámať v strede slova ako „NEPREHLIADN / E"
   (to robila kombinácia text-wrap:balance + overflow-wrap:anywhere na
   .giant__hit). Lámanie slova ostáva len pod 700 px, kde je stĺpec úzky
   alebo má človek zapnuté dvojnásobné písmo. */
@media (min-width: 700px) {
  .giant, .giant__hit { overflow-wrap: normal; }
}

.big {
  margin: 0;
  color: #fff;
  font-size: clamp(1.8rem, 5.4vw, 3.6rem);
  line-height: 0.9;
  letter-spacing: -0.015em;
  text-wrap: balance;
  overflow-wrap: break-word;
  text-shadow: 0.05em 0.055em 0 var(--ink);
}
.big--ink { color: var(--ink); text-shadow: 0.05em 0.055em 0 var(--pink); }

/* Veľký nadpis je biely, lebo býva na tmavom páse. Na krémovom je to biela
   na krémovej — kontrast 1,1 : 1, čiže nadpis tam síce je, ale nie je ho
   vidieť. Presne to sa stalo sekcii Časté otázky.

   Namiesto opravy jedného nadpisu to riešime na úrovni pásu — aby to isté
   nezopakoval ďalší nadpis, ktorý tam niekto pridá. Ružový tieň je rovnaký
   ako pri .big--ink, nech oba veľké nadpisy na kréme vyzerajú ako sada. */
.band--cream .giant {
  color: var(--ink);
  text-shadow: 0.045em 0.05em 0 var(--pink);
}

.eyebrow {
  margin: 0 0 18px;
  color: var(--yellow);
  /* Spodok bol 0,72rem = 11,52 px. Nadočné popisky sú rozstrkané
     (letter-spacing 0,16em) a pod 12 px sa rozpadnú na písmenká. */
  font-size: clamp(0.78rem, 1.5vw, 0.86rem);
  letter-spacing: 0.16em;
}
.eyebrow--ink { color: var(--ink); }

.lede {
  max-width: 52ch;
  margin: 22px 0 0;
  color: #fff;
  font-size: clamp(1.02rem, 1.6vw, 1.2rem);
}

@media (max-width: 700px) {
  /* na mobile treba dĺžňom a mäkčeňom viac vzduchu, inak sa dotýkajú riadku nad */
  .giant { line-height: 0.94; }
  .big { line-height: 0.96; }
}

/* ── logo (spoločné pre landing aj editor) ──────────────────────────────── */

.logo {
  display: flex; align-items: center; gap: 10px;
  color: #fff; font-size: clamp(1.05rem, 2vw, 1.3rem);
  letter-spacing: -0.01em; text-decoration: none;
  /* Na stránkach, kde je zo loga vidieť len značku „e" (editor, úzke
     displeje), mal terč 23 × 23 px — teda pod hranicou 24 px z WCAG 2.2.
     Je to odkaz domov a človek naň mieri palcom. */
  min-height: 44px;
  min-width: 44px;
}
.logo__mark {
  display: grid; place-items: center;
  width: 1.9em; height: 1.9em;
  background: var(--yellow); color: var(--ink);
  border: 3px solid var(--ink);
  border-radius: 50%;
  box-shadow: 3px 3px 0 var(--ink);
  font-size: 0.72em;
}
.logo__tld { color: var(--yellow); }

/* ── kotvy pod prilepenou hlavičkou ─────────────────────────────────────
   Odkaz „Preskočiť na obsah" skáče na #obsah, ktorý je na samom vrchu —
   a tam je hlavička ešte vysunutá, takže prvých 74 px obsahu zakryla.
   Stránky s vlastnou vyššou hlavičkou si hodnotu prepíšu (svadobny-web,
   editor). */
:root { scroll-padding-top: calc(var(--hdr-h, 74px) + 14px); }

/* ── tlačidlá ───────────────────────────────────────────────────────────── */

.btn {
  display: inline-block;
  padding: 16px 28px;
  border: 3px solid var(--ink);
  background: var(--yellow);
  color: var(--ink);
  font-size: clamp(0.9rem, 1.4vw, 1.02rem);
  letter-spacing: 0.02em;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  box-shadow: var(--pop) var(--pop) 0 var(--ink);
  transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease;
}
.btn:hover { transform: translate(-3px, -3px); box-shadow: calc(var(--pop) + 3px) calc(var(--pop) + 3px) 0 var(--ink); }
.btn:active { transform: translate(4px, 4px); box-shadow: 2px 2px 0 var(--ink); }
.btn[disabled] { opacity: 0.45; pointer-events: none; }

/* 11 px odsadenia dávalo tlačidlu 42,9 px výšky — tesne pod 44 px,
   ktoré palec potrebuje. Týka sa to aj hlavného tlačidla v hlavičke. */
.btn--sm { padding: 13px 18px; box-shadow: 4px 4px 0 var(--ink); }
.btn--pink { background: var(--pink-plocha); color: #fff; }
.btn--blue { background: var(--blue); color: #fff; }
.btn--ghost { background: transparent; color: #fff; box-shadow: var(--pop) var(--pop) 0 var(--pink); border-color: #fff; }
.btn--ghost:hover { background: #fff; color: var(--ink); }
.btn--ghost-ink { background: #fff; color: var(--ink); }

/* ── odhalenie pri scrolle ──────────────────────────────────────────────── */

.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.5s ease, transform 0.5s ease; }
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .btn { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Pás so zavádzacou cenou

   Odpočet naozaj riadi cenu — po termíne server účtuje cenníkových 29 €.
   Preto smie byť takto hlasný: nič nesľubuje nepravdivo.
   ══════════════════════════════════════════════════════════════════════════ */

.akcia {
  position: sticky; top: 0; z-index: 90;
  background: var(--yellow);
  border-bottom: 4px solid var(--ink);
  overflow: hidden;
}
/* jemný pohyb, aby to oko zachytilo — nie diskotéka */
.akcia::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 35%, rgba(255,255,255,0.75) 50%, transparent 65%);
  transform: translateX(-100%);
  animation: akciaLesk 4.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes akciaLesk { 0%, 55% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }

.akcia__in {
  position: relative;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  max-width: 1180px; margin-inline: auto;
  padding: 9px clamp(12px, 3vw, 24px);
}

.akcia__stitok {
  padding: 4px 10px;
  background: var(--ink); color: var(--yellow);
  font-size: 0.68rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  white-space: nowrap;
}

.akcia__ceny { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.akcia__ceny s { font-size: 0.9rem; font-weight: 700; opacity: 0.55; text-decoration-thickness: 2px; }
.akcia__ceny b { font-family: var(--font-display); font-size: 1.35rem; line-height: 1; }
.akcia__ceny em {
  padding: 3px 8px; background: var(--pink-plocha); color: #fff;
  font-style: normal; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.03em;
}

.akcia__odpocet {
  display: flex; align-items: center; gap: 3px;
  margin-left: auto;
  font-size: 0.78rem; font-weight: 800; letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
.akcia__odpocet i {
  display: inline-block; min-width: 2ch; padding: 3px 5px;
  background: var(--ink); color: #fff;
  font-style: normal; font-size: 0.86rem; text-align: center;
}

.akcia__cta {
  padding: 9px 16px;
  background: var(--blue); color: #fff;
  border: 3px solid var(--ink);
  font-size: 0.78rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap;
}
.akcia__cta:hover { background: var(--pink-plocha); }

.akcia__zavri {
  /* Odmerané na 390 px: 29×25 px. WCAG 2.2 žiada 44×44 a toto je krížik,
     ktorý sa trafí palcom na okraji obrazovky — teda presne ten prípad,
     kde malý terč vadí najviac. Rozšíri sa PLOCHOU, nie písmom: väčšie ×
     by v úzkom páse tlačilo cenu a odpočet do seba. */
  display: inline-grid; place-items: center;
  min-width: 44px; min-height: 44px;
  padding: 0; background: none; border: 0; cursor: pointer;
  /* Stlmenie NIE JE priehľadnosťou. `opacity: .5` zrazila krížik na
     3,41 : 1 — a je to jediný ovládací prvok toho pásu. Tlmí sa farbou,
     ktorá normu drží. */
  font-size: 1.3rem; line-height: 1; color: color-mix(in srgb, var(--ink) 72%, var(--pink-plocha, #fff));
}
.akcia__zavri:hover { color: var(--ink); }

.akcia[data-stav="koniec"] { background: #eceaf2; }
.akcia[data-stav="koniec"]::before { display: none; }

/* hlavičky stránok sú tiež sticky — pás ich musí presunúť nižšie */
body.ma-akciu .hdr, body.ma-akciu .top { top: var(--akcia-h, 0px); }

@media (max-width: 720px) {
  .akcia__in { gap: 8px; padding: 8px 12px; }
  /* 0,6rem vychádzalo na 9,6 px. To už nie je drobné písmo, to je nečitateľné
     — a je to slovo, ktorým sa oznamuje zľava, teda údaj, ktorý musí byť
     preukázateľne zrozumiteľný. Spodok je 12 px. */
  .akcia__stitok { font-size: 0.75rem; padding: 3px 7px; }
  .akcia__ceny b { font-size: 1.15rem; }
  .akcia__ceny em { display: none; }
  .akcia__cta { display: none; }
  .akcia__odpocet { font-size: 0.7rem; }
  .akcia__odpocet i { font-size: 0.76rem; padding: 2px 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .akcia::before { animation: none; }
}

/* ── bezpečná zóna iPhonu ───────────────────────────────────────────────
   Safari kreslí spodnú lištu NAD obsah stránky. Posledný riadok textu tak
   pôsobí odrezaný, hoci s layoutom nie je nič zle — presne to nás stálo
   pol noci hľadania.

   env(safe-area-inset-bottom) je výška tej lišty. Na počítači je nula,
   takže sa nič nezmení. */
body {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* Prilepené lišty musia mať odsadenie vnútri, nie zvonku — inak by sa
   odlepili od spodku obrazovky. */
.krokbar {
  padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
}

/* ── spoločná pätička ───────────────────────────────────────────────────
   Jedna pätička pre celý web, a preto je tu v base.css a nie v landing.css:
   podmienky ani platba landing.css nenačítavajú a každá z nich mala vlastnú.
   Rozchádzali sa — na titulke boli údaje firmy, na „Pre firmy" nie, na
   svadobnom webe len e-mail. Kto hľadal, kto službu prevádzkuje, našiel to
   na každej stránke inak alebo vôbec.

   Údaje firmy tu nie sú kozmetika. § 3a Obchodného zákonníka žiada na
   webovom sídle obchodné meno, sídlo, IČO aj označenie registra a číslo
   zápisu. Keď sa niektorý zmení, mení sa na DVOCH miestach: v pätičkách
   piatich stránok a v podmienkach v sekcii „1. Kto sme".

   POZOR NA SELEKTORY. Každé pravidlo tu má pred sebou `.pata`, aj keď by
   samo o sebe stačilo. Nie je to zdobenie — pätička sadá do stránok, ktoré
   si prepisujú vlastné odkazy a odstavce. Podmienky majú `.pod a { color:
   var(--blue) }` a `.pod p { margin: 0 0 1.05em }`; bez druhej triedy tu
   vyhrá stránka a pätička je na podmienkach modrá na tmavomodrej —
   nečitateľná — a o 70 px vyššia než inde. Presne ten rozchod, ktorý sme
   týmto zjednotením odstránili. */

.pata {
  background: var(--blue-deep);
  color: #fff;
  /* Riadkovanie napísané tu, nie zdedené. Podmienky si dvíhajú
     `body.pod { line-height: 1.75 }` kvôli právnemu textu a pätička
     tam bola o 15 px vyššia než na ostatných stránkach. */
  line-height: 1.6;
}

/* Páska na hornej hrane.

   Zvyšok webu oddeľuje pásy čiernym rámom (--rule). Na tmavomodrej pätičke
   by čierna na modrej nebola vidieť a pätička by splynula so sekciou nad
   sebou. Žlto-ružová páska je to isté oddelenie, len vo farbe, ktorá na
   tmavom pozadí drží. */
.pata::before {
  content: "";
  display: block;
  height: 10px;
  background: repeating-linear-gradient(90deg,
    var(--yellow) 0 28px, var(--pink) 28px 56px);
}

.pata .pata__in {
  display: grid;
  gap: clamp(26px, 4vw, 48px);
  padding-block: clamp(38px, 6vw, 64px) clamp(26px, 4vw, 38px);
}
/* Prvky mriežky sa musia vedieť zmenšiť.

   Predvolené `min-width: auto` nedovolí stĺpcu byť užší, než je najdlhšie
   nezalomiteľné slovo v ňom — a e-mail ani adresa sa lámať nedajú. Pri
   zväčšenom písme (200 %) tým pätička narástla na 449 px v okne širokom
   390 a celá stránka sa dala posúvať do strán. */
.pata .pata__in > * { min-width: 0; }
.pata .pata__mail,
.pata .pata__firma p { overflow-wrap: anywhere; }

/* Tri stĺpce až od tabletu. Adresa a IČO sú riadky, ktoré sa nemajú lámať
   uprostred — pod 760 px na to nie je šírka, tak idú pod seba. */
@media (min-width: 760px) {
  .pata .pata__in { grid-template-columns: 1.5fr 1fr 1.15fr; }
}

.pata .pata__logo {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1;
  text-transform: uppercase;
}
.pata .pata__logo span { color: var(--yellow); }

.pata .pata__claim {
  margin: 0 0 16px;
  max-width: 34ch;
  font-size: 0.9rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.78);
}

.pata .pata__mail {
  font-weight: 800;
  color: var(--yellow);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.pata .pata__mail:hover { border-bottom-color: var(--yellow); }

.pata .pata__nadpis {
  margin: 0 0 14px;
  /* 0,7rem = 11,2 px, kým sesterský „Prevádzkovateľ" mal 13,76 px. */
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pink-soft);
}

.pata .pata__zoznam {
  display: grid;
  /* menšia medzera, lebo odkazy si samy pridali zvislé odsadenie */
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pata .pata__zoznam li { margin: 0; }

.pata .pata__zoznam a,
.pata .pata__odkazy a,
.pata .pata__mail {
  /* Dotykový terč aspoň 32 px na výšku.

     Odkazy v pätičke mali 19 až 21 px — pod hranicou 24 px, ktorú žiada
     WCAG 2.2 (kritérium 2.5.8 Target Size), a hlboko pod tým, čo palec na
     telefóne trafí. Namerané pri 320 aj 390 px. Odsadenie je zvislé, takže
     sadzba pätičky sa nepohne, len sa okolo textu urobí miesto. */
  display: inline-block;
  /* 7 px dávalo odkazu 40,1 px výšky. Odkazy v spodnom riadku pätičky
     majú menšie písmo, takže na 44 px potrebujú 12 px. */
  padding-block: 12px;
}

.pata .pata__zoznam a,
.pata .pata__odkazy a {
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.pata .pata__zoznam a { font-size: 0.94rem; }
.pata .pata__zoznam a:hover,
.pata .pata__odkazy a:hover { border-bottom-color: var(--yellow); }

.pata .pata__firma p {
  margin: 0 0 10px;
  font-size: 0.86rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.78);
}
.pata .pata__firma p:last-child { margin-bottom: 0; }

/* Spodný riadok: čo musí byť dostupné, ale nemá kričať. Biela na 55 % dáva
   na tejto modrej kontrast 5,8 : 1 — nižšie nechoď, drobné písmo prestane
   byť čitateľné ako prvé. */
.pata .pata__spodok {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px 24px;
  padding-block: 18px clamp(24px, 3vw, 34px);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.pata .pata__spodok p { margin: 0; }

.pata .pata__zapis {
  max-width: 62ch;
  font-size: 0.76rem;
  color: rgba(255, 255, 255, 0.55);
}

.pata .pata__odkazy {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  font-size: 0.8rem;
}