/* ERA barber — betón / mikrocement, monochróm, ostré hrany. Mobile-first.
   Žiadny farebný akcent: hierarchiu robí veľkosť písma, tenké čiary a inverzia. */

:root {
  /* Dizajn „Nočný betón" — vybral ho brat (majiteľ) 2026-10-10. Ostatné dizajny sú
     v archiv/dizajny/ (návod na vrátenie v README tam). */
  --pozadie: #0e0f10;
  --text: #f3eee3; /* Old Ivory z brand manuálu (HEX F3EEE3, RGB 243,238,227, CMYK 4,4,10,0) — hlavné písmo */
  --tlmene: #85827d; /* teplá sivá — štítky a popisy */
  --siva: #85827d; /* sivá pre stavy „nevybrané / nedostupné“ — ostáva aj po zosvetlení popiskov (2026-10-23) */
  --ciara: rgba(243, 238, 227, 0.1);
  --ciara-silna: rgba(243, 238, 227, 0.36);
  --serif: 'Bodoni Moda', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', Arial, Helvetica, sans-serif;
  --okraj: 20px;
  --max: 1080px;
  --sekcia: clamp(72px, 14vw, 160px);
  /* Povrch: jedno svetlo zhora ako v galérii, stmavnuté okraje, jemné zrno a škvrny betónu. */
  --textura:
    radial-gradient(80% 50% at 50% -8%, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0) 70%),
    radial-gradient(140% 100% at 50% 40%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.5) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='176' height='176'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' seed='0' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='896' height='896'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.006' numOctaves='4' seed='26' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 2.2 -0.85'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.03'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --velkost: auto, auto, 176px, 896px;
  color-scheme: dark;
}

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

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

body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--pozadie);
  /* Svetlejšia „škvrna" hore ako svetlo na betónovej stene + jemné zrno mikrocementu. */
  background-image: var(--textura);
  background-size: var(--velkost);
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}

:focus-visible {
  outline: 1px solid var(--text);
  outline-offset: 4px;
}

/* Kontrola kvality (2026-10-11): rýchlejšia odozva na dotyk bez zväčšovania dvojťukom
   a jemné zvýraznenie ťuknutia v farbe webu namiesto modrého štvorca. */
html {
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(243, 238, 227, 0.12);
}

::selection {
  background: var(--text);
  color: var(--pozadie);
}

.preskocit {
  position: absolute;
  left: -9999px;
}
.preskocit:focus {
  left: var(--okraj);
  top: 12px;
  z-index: 10;
  background: var(--text);
  color: var(--pozadie);
  padding: 8px 12px;
}

/* Logo a hviezdička ako maska — farba sa berie z --text, takže sedia na tmavom
   aj svetlom betóne. Tvar je z pôvodného SVG, nemení sa. */
.logo,
.znak,
.monogram {
  display: block;
  background-color: var(--text);
  -webkit-mask: var(--maska) center / contain no-repeat;
  mask: var(--maska) center / contain no-repeat;
}
.logo {
  --maska: url(/era-logo.svg);
  aspect-ratio: 454.34 / 162.04;
}
.znak {
  --maska: url(/star.svg);
  aspect-ratio: 1;
}
/* Monogram „E" s hviezdou v hlavičke (pripomienka užívateľa 2026-10-13, namiesto nápisu ERA).
   Maska z obrázka od majiteľa (archiv/logo/era-monogram-zdroj.jpg) — farbu berie z webu. */
.monogram {
  --maska: url(/era-monogram.png);
  aspect-ratio: 245 / 320;
}

/* ─── Hlavička ─────────────────────────────────────────────── */

.hlavicka {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: var(--max);
  margin: 0 auto;
  padding: 22px var(--okraj);
  border-bottom: 1px solid var(--ciara);
}

.hlavicka__logo .monogram {
  height: 30px;
}

/* Celý test webu (2026-10-13): logo v hlavičke a „zmeniť“ v súhrne rezervácie mali na mobile
   len ~22 px na výšku — pod odporúčaným minimom pre prst. Väčšia plocha na ťuknutie,
   vzhľad a rozloženie sa nemenia (záporný okraj vyrovná výplň). */
.hlavicka__logo,
.suhrn__zmenit {
  padding-block: 10px;
  margin-block: -10px;
}

.hlavicka__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px 16px;
}

.hlavicka__nav a,
.stitok,
.tlacidlo,
.kroky,
.suhrn dt,
.pole label,
.kalendar__den-tyzdna {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.hlavicka__nav a {
  letter-spacing: 0.14em; /* na úzkom mobile menej riedko, nech sa zmestí na jeden riadok */
  text-decoration: none;
  color: var(--siva);
  padding: 6px 0;
  transition: color 0.2s;
}
.hlavicka__nav a:hover,
.hlavicka__nav a[aria-current='page'] {
  color: var(--text);
}
.hlavicka__nav .hlavicka__cta {
  color: var(--text);
  border-bottom: 1px solid var(--ciara-silna);
}

/* Prepínač jazyka SK / EN vedľa Rezervovať (rozhodnutie majiteľa 2026-10-10, 1a):
   aktívny jazyk biely, druhý sivý odkaz. Rovnaké písmo ako menu. Na úzkom mobile sa
   zmestí až do druhého riadku (zarovnaný vpravo pod Rezervovať). */
.hlavicka__jazyk {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--tlmene);
  white-space: nowrap;
}
.hlavicka__jazyk .is-aktivny {
  color: var(--text);
}
.hlavicka__nav .hlavicka__jazyk a {
  padding: 6px 2px;
}

/* Úzky mobil: menu o niečo hustejšie, nech sa zmestí na jeden riadok. */
@media (max-width: 719px) {
  .hlavicka__nav {
    gap: 6px 12px;
  }
  .hlavicka__nav a {
    letter-spacing: 0.1em;
  }
}

/* ─── Typografia ───────────────────────────────────────────── */

.stitok {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 20px;
  color: var(--tlmene);
}
.stitok::before {
  content: '';
  width: 28px;
  height: 1px;
  background: var(--ciara-silna);
}
/* Oznam na úvode (pripomienka brata 2026-10-10): okno vysunuté zdola, nezakryje logo ani menu.
   Na počítači vpravo dole, na mobile cez šírku obrazovky. Zatvára ✕ / „Rozumiem" / Esc. */
.oznam {
  position: fixed;
  z-index: 50;
  right: 16px;
  bottom: 16px;
  left: 16px;
  max-width: 440px;
  margin-left: auto;
  padding: 24px 24px 22px;
  background: #16171a;
  border: 1px solid var(--ciara-silna);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
  /* Pomalé „rozsvietenie" (fade-in, pripomienka brata 2026-10-11): okno sa zjaví z tmy, rozostrené
     sa zaostrí a jemne vyplává; potom rámik raz slabo zažiari farbou Old Ivory. Trvá 1,6 s ako
     rozsvietenie stránky; začína po 1,1 s, keď stránka dosvecuje (brat: o 1 s skôr ako po 2,1 s). */
  animation:
    oznam-rozsvietenie 1.6s cubic-bezier(0.22, 0.61, 0.36, 1) both 1.1s,
    oznam-ziara 2s ease-in-out 2.7s both;
  transition: opacity 0.5s, transform 0.5s;
}
.oznam.is-zatvoreny {
  opacity: 0;
  transform: translateY(16px);
}
@keyframes oznam-rozsvietenie {
  from {
    opacity: 0;
    filter: blur(8px) brightness(0.4);
    transform: translateY(14px);
  }
  60% {
    filter: blur(0) brightness(1.08);
  }
  to {
    opacity: 1;
    filter: none;
    transform: none;
  }
}
@keyframes oznam-ziara {
  0%,
  100% {
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
  }
  45% {
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55), 0 0 28px rgba(243, 238, 227, 0.14);
  }
}
@media (prefers-reduced-motion: reduce) {
  .oznam {
    animation: none;
  }
}
.oznam .stitok {
  margin-bottom: 12px;
}
.oznam__nadpis {
  margin: 0 0 8px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.2;
  padding-right: 32px;
}
.oznam__text {
  margin: 0 0 12px;
  color: var(--text);
}
.oznam .tlacidlo {
  margin-top: 8px;
}
.oznam__zavriet {
  position: absolute;
  top: 6px;
  right: 6px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  color: var(--tlmene);
  text-decoration: none;
  font-size: 16px;
}
.oznam__zavriet:hover {
  color: var(--text);
}
/* Mobil: okno v strede obrazovky (vodorovne) a obsah zarovnaný na stred (pripomienka brata). */
@media (max-width: 719px) {
  .oznam {
    margin: 0 auto;
    text-align: center;
  }
  .oznam .stitok {
    justify-content: center;
  }
  .oznam .stitok::after {
    content: '';
    width: 28px;
    height: 1px;
    background: var(--ciara-silna);
  }
  .oznam__nadpis {
    padding: 0 32px;
  }
}

/* ─── POKUS 2026-10-10: všetky texty webu písmom Cormorant Garamond (pripomienka brata) ───
   Vrátiť späť = zmazať tento blok. Admin (body.admin) ostáva v pôvodných písmach.
   Cormorant má drobnejšie písmená ako Inter — font-size-adjust ich zväčší na podobnú čitateľnosť.
   Logo, „Studio · Trnava" a slogan sú hotové a nemenia sa (majú vlastné písmo, bez úpravy veľkosti). */
body:not(.admin) {
  /* Väčší kontrast popiskov (brat 2026-10-23): sivú nahrádza Old Ivory s krytím ~76 % — Studio · Trnava,
     popisy služieb, dni v hodinách, deň pri voľných termínoch, štítky. Admin ostáva so sivou. */
  --tlmene: rgba(243, 238, 227, 0.76);
  --serif: 'Cormorant Garamond Text', Georgia, 'Times New Roman', serif;
  --sans: 'Cormorant Garamond Text', Georgia, 'Times New Roman', serif;
  font-size-adjust: 0.46;
  /* Cormorant má predvolene „starodávne" číslice (poskakujú hore-dole) — v kalendári, časoch
     a cenách rovné číslice ako v Inter. */
  font-feature-settings: 'lnum' 1; /* cez feature, aby ho neprebilo tabular-nums v kalendári */
}
body:not(.admin) .hero__claim,
body:not(.admin) .stitok--hero {
  font-size-adjust: none;
}

/* „Studio · Trnava" nad logom rovnakým písmom ako slogan (pripomienka brata 2026-10-10).
   Cormorant je drobnejší ako Inter, preto väčšie písmo, aby bol štítok rovnako čitateľný. */
.stitok--hero {
  font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  font-weight: 300;
  font-size: 15px;
}

.nadpis {
  text-wrap: balance;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2rem, 7vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 0 0 40px;
  font-variation-settings: 'opsz' 96;
}
/* Veľké nadpisy stránok (Služby a cenník, Príďte sa ostrihať, Pripravujeme…) — brat ich 2026-10-11
   dvakrát zmenšil o 1/4: pôvodne clamp(2.6rem, 10vw, 5.2rem) → 1,95/7,5/3,9 → teraz ×0,75 znova. */
.nadpis--velky {
  font-size: clamp(1.46rem, 5.6vw, 2.92rem);
}

.podnadpis {
  text-wrap: balance;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.5rem;
  margin: 56px 0 20px;
}

.uvodny-text {
  max-width: 34em;
  color: var(--tlmene);
  margin: 0 0 40px;
}
.uvodny-text a {
  color: var(--text);
}

.tlmene {
  color: var(--tlmene);
}

.drobne {
  font-size: 13px;
  color: var(--tlmene);
  max-width: 36em;
}

.hlaska {
  border-left: 1px solid var(--text);
  padding: 4px 0 4px 16px;
  margin: 0 0 24px;
}

/* ─── Tlačidlá a odkazy ───────────────────────────────────── */

.tlacidlo {
  display: inline-block;
  padding: 18px 30px;
  border: 1px solid var(--text);
  background: transparent;
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
  border-radius: 0;
  transition: background-color 0.25s, color 0.25s;
}
.tlacidlo:hover,
.tlacidlo--plne {
  background: var(--text);
  color: var(--pozadie);
}
.tlacidlo--plne:hover {
  background: transparent;
  color: var(--text);
}

.odkaz {
  display: inline-flex;
  gap: 8px;
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid var(--ciara-silna);
  padding-bottom: 4px;
  transition: border-color 0.2s;
}
.odkaz:hover {
  border-color: var(--text);
}

/* ─── Sekcie ───────────────────────────────────────────────── */

main {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--okraj);
}

.sekcia {
  padding: var(--sekcia) 0;
  border-bottom: 1px solid var(--ciara);
}
.sekcia:last-child {
  border-bottom: 0;
}
.sekcia--prva {
  padding-top: clamp(48px, 10vw, 112px);
}

.sekcia--dve {
  display: grid;
  gap: 56px;
  margin-bottom: 48px;
}

/* ─── Úvod (hero) ─────────────────────────────────────────── */

.hero {
  min-height: calc(100svh - 67px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 56px 0 72px;
  border-bottom: 1px solid var(--ciara);
  position: relative;
  isolation: isolate; /* video so z-index -1 ostane za textom, ale nad pozadím stránky */
}

/* Video štúdia v pozadí (brat 2026-11-01): cez celú šírku okna, hoci obsah je užší (--max).
   Video má biele steny — silné stmavenie, vľavo (kde je logo a text) viac, aby logo ostalo
   čitateľné; dole sa stratí do pozadia stránky. */
.hero__video {
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent);
  mask-image: linear-gradient(to bottom, #000 70%, transparent);
}
.hero__video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero__video::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(14, 15, 16, 0.86), rgba(14, 15, 16, 0.62));
}
/* Ikona hudby vpravo hore v úvode (brat 2026-11-01: „minimalistická, vpravo hore" — predtým
   krúžok vpravo dole). Len tenký reproduktor bez rámika; plocha na ťuknutie ostáva 44 px.
   Prečiarknutý reproduktor = potichu, s vlnami = hrá. */
.hero__zvuk {
  position: absolute;
  top: 12px;
  right: -12px; /* ikona lícuje s pravým okrajom obsahu, plocha na ťuknutie presahuje do okraja */
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: none;
  color: var(--tlmene);
  cursor: pointer;
  transition: color 0.2s;
}
.hero__zvuk:hover,
.hero__zvuk[aria-pressed='true'] {
  color: var(--text);
}
.hero__zvuk[hidden] {
  display: none;
}
.hero__zvuk[aria-pressed='true'] .hero__zvuk-krizik,
.hero__zvuk[aria-pressed='false'] .hero__zvuk-vlny {
  display: none;
}
/* 100vw je na počítači širšie o posuvník — bez orezania by stránka išla posúvať do strany. */
body {
  overflow-x: clip;
}

.hero__logo {
  margin: 0 0 36px;
}
.hero__logo .logo {
  width: min(100%, 560px);
}

/* Slogan pod logom (pripomienka brata 2026-10-10): celý vo farbe Old Ivory, písmo Cormorant Garamond
   Light (tenké, zadarmo, SIL OFL, uložené na našom webe). Skúšali sme aj Helvetica Neue (platená)
   a Libre Baskerville (tenšie ako 400 nemá) — súbory Baskerville ostali v assets/fonts na návrat. */
.hero__claim {
  font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  font-weight: 300;
  color: var(--text);
  font-size: clamp(1.5rem, 6vw, 2.5rem); /* Cormorant má menšie písmená ako Baskerville — o niečo väčšie */
  line-height: 1.2;
  letter-spacing: 0.01em;
  margin: 0 0 48px;
  max-width: 18em;
  text-wrap: balance; /* na mobile dva rovnako dlhé riadky, nie osamotené „rituals" */
}
/* Na počítači celý slogan v jednom riadku (pripomienka brata 2026-10-10). */
@media (min-width: 720px) {
  .hero__claim {
    max-width: none;
    white-space: nowrap;
  }
}

.hero__akcie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px 36px;
}

.kalendar-akcie {
  margin: 8px 0 40px;
}

/* ─── Služby ───────────────────────────────────────────────── */

.sluzby {
  list-style: none;
  margin: 0 0 40px;
  padding: 0;
  border-top: 1px solid var(--ciara);
}

.sluzby__riadok {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px 16px;
  padding: 26px 0;
  border-bottom: 1px solid var(--ciara);
}

.sluzby__nazov {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 1.2;
  margin: 0;
}

.sluzby__popis {
  color: var(--tlmene);
  margin: 6px 0 0;
  font-size: 15px;
}

/* Zoznam služieb a jeho nadpis písmom Gilda Display (pripomienka brata 2026-10-16, vybral č. 16
   z 20 návrhov; predtým v ten istý deň skúšané Urbanist a štýl menu). Celá sekcia jedným písmom,
   bežné malé písmená. Gilda má len hrúbku 400 — font-synthesis vypnuté, nech prehliadač nefalšuje tučné. */
body:not(.admin) .pismo-ponuka,
body:not(.admin) .sluzby,
body:not(.admin) .sluzby__nazov,
body:not(.admin) .sluzby__meta,
body:not(.admin) .volba__nazov,
body:not(.admin) .volba__meta {
  font-family: 'Gilda Display', 'Cormorant Garamond Text', Georgia, serif;
  font-weight: 400;
  font-synthesis: none;
  /* Bez font-size-adjust z body: inak sa znak € (z Cormorantu) zväčší viac ako Gildine číslice
     (brat 2026-10-16: „€ je väčší ako číslice"). Gilda má x-výšku ~0,46, jej veľkosť sa nemení. */
  font-size-adjust: none;
}
/* „Jemne tenšie" (brat 2026-10-16): Gilda nemá tenší rez, tak ťahy väčšieho textu opticky stenšíme
   obrysom vo farbe pozadia. Malý text (popis, „Rezervovať") nie — tam by sa písmená rozpadali. */
body:not(.admin) .pismo-ponuka,
body:not(.admin) .sluzby__nazov,
body:not(.admin) .sluzby__meta,
body:not(.admin) .volba__nazov,
body:not(.admin) .volba__meta {
  -webkit-text-stroke: 0.25px var(--pozadie);
}
body:not(.admin) .sluzby__popis {
  font-size: 15px;
}

/* Minúty a cena tým istým písmom ako názov služby (pripomienka brata 2026-10-16). */
.sluzby__meta {
  display: flex;
  align-items: baseline;
  gap: 18px;
  margin: 8px 0 0;
  font-family: var(--serif);
  font-size: 1.25rem;
  line-height: 1.2;
  color: var(--text); /* minúty bielo ako cena — pripomienka brata 2026-10-16 */
}
.sluzby__cena {
  color: var(--text);
}

.sluzby__odkaz {
  justify-self: start;
  margin-top: 12px;
  font-size: 14px;
  text-decoration: none;
  border-bottom: 1px solid var(--ciara-silna);
}

/* ─── Najbližšie voľné termíny (úvod, požiadavka užívateľa 2026-10-16) ─────
   Brat: „celé menšie, minimalistickejšie" — menší nadpis, nižšia sekcia, termíny v jednom
   riadku ako tenké štítky namiesto veľkých kariet. */

.najblizsie {
  padding: calc(var(--sekcia) * 0.55) 0;
}
.najblizsie .nadpis {
  font-size: clamp(1.15rem, 3.6vw, 1.6rem);
  margin-bottom: 18px;
}
.terminy {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* mobil 2 × 2, nie 3 + 1 */
  gap: 8px;
  max-width: 300px;
}
@media (min-width: 600px) {
  .terminy {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    max-width: 480px;
  }
}
.termin {
  display: flex; /* vyplní celý stĺpec mriežky — všetky rámčeky rovnako široké */
  flex-direction: column; /* deň nad časom, nie vedľa seba (brat 2026-10-16) */
  align-items: flex-start;
  gap: 2px;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--ciara-silna); /* výraznejší rámik — jasné, že sa dá ťuknúť (brat 2026-10-23) */
  text-decoration: none;
  color: var(--text);
  font-family: 'Gilda Display', 'Cormorant Garamond Text', Georgia, serif;
  font-size-adjust: none;
  font-size: 15px;
  line-height: 1.2;
  transition: border-color 0.2s, background-color 0.2s;
}
.termin:hover,
.termin:focus-visible {
  border-color: var(--text);
  background: rgba(243, 238, 227, 0.07);
}
.termin__den {
  color: var(--tlmene);
}
.termin__cas {
  font-size: 17px;
}
@media (prefers-reduced-motion: reduce) {
  .termin {
    transition: none;
  }
}

/* ─── Hodiny a adresa ─────────────────────────────────────── */

.hodiny {
  margin: 0;
  border-top: 1px solid var(--ciara);
}
.hodiny__riadok {
  display: flex;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--ciara);
}
.hodiny dt {
  color: var(--tlmene);
}
.hodiny dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.adresa {
  font-style: normal;
}
.adresa p {
  margin: 0 0 8px;
}
.adresa p:last-child {
  margin-top: 20px;
}
.adresa a:not(.odkaz) {
  text-decoration: none;
}
/* Kontakt (2026-10-13): štítok → údaj, medzi skupinami vzdušná medzera; všade rovnaké odstupy. */
.kontakt-udaje .stitok {
  margin: 44px 0 16px;
}
.kontakt-udaje .stitok:first-child {
  margin-top: 0;
}
.kontakt-udaje p:not(.stitok) {
  margin: 0;
}
.kontakt-udaje p:not(.stitok) + p:not(.stitok) {
  margin-top: 14px;
}

/* ─── Rezervácia ──────────────────────────────────────────── */

.kroky {
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 16px;
  padding: 0 0 20px;
  border-bottom: 1px solid var(--ciara);
  color: var(--siva);
  letter-spacing: 0.1em;
}
.kroky__krok {
  white-space: nowrap;
}
.kroky__krok.is-aktivny {
  color: var(--text);
}
.volby {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--ciara);
}
.volba {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 4px 16px;
  padding: 26px 0;
  text-decoration: none;
  border-bottom: 1px solid var(--ciara);
  transition: padding 0.25s;
}
.volba:hover {
  padding-left: 12px;
}
.volba__nazov {
  font-family: var(--serif);
  font-size: 1.6rem;
}
.volba__meta {
  display: inline-flex;
  gap: 18px; /* rovnaká medzera ako v Službách (.sluzby__meta) */
  color: var(--text); /* minúty a cena bielo, rovnako ako v ponuke (brat 2026-10-16) */
  font-size: 1.25rem; /* rovnako veľké ako v Službách (brat 2026-10-16) */
  line-height: 1.2;
}

.suhrn {
  margin: 32px 0 0;
  border-top: 1px solid var(--ciara);
}
.suhrn__riadok {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--ciara);
}
.suhrn dt {
  color: var(--tlmene);
  grid-column: 1;
}
.suhrn dd {
  grid-column: 1;
  margin: 0;
  font-family: var(--serif);
  font-size: 1.25rem;
}
.suhrn + .uvodny-text,
.suhrn + form {
  margin-top: 32px;
}
.suhrn__zmenit {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  font-size: 13px;
  color: var(--tlmene);
}

.kalendare {
  display: grid;
  gap: 40px;
}
.kalendar__mesiac {
  font-family: var(--serif);
  font-weight: 400;
  font-style: italic;
  font-size: 1.15rem;
  margin: 0 0 12px;
}
.kalendar__mesiac::first-letter {
  text-transform: uppercase;
}
.kalendar__mriezka {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.kalendar__den-tyzdna {
  text-align: center;
  color: var(--tlmene);
  padding-bottom: 6px;
  letter-spacing: 0.1em;
}
.kalendar__den {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  min-height: 40px;
  border: 1px solid var(--ciara-silna);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  transition: background-color 0.2s, color 0.2s;
}
a.kalendar__den:hover {
  background: var(--text);
  color: var(--pozadie);
}
.kalendar__den.is-vybrany {
  background: var(--text);
  color: var(--pozadie);
  border-color: var(--text);
}
.kalendar__den.is-nedostupny {
  border-color: transparent;
  color: var(--siva);
  opacity: 0.4;
}

.casy {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
}
.casy__cas {
  display: block;
  text-align: center;
  padding: 16px 0;
  border: 1px solid var(--ciara-silna);
  text-decoration: none;
  font-family: var(--serif);
  font-size: 1.2rem;
  font-variant-numeric: tabular-nums;
  transition: background-color 0.2s, color 0.2s;
}
.casy__cas:hover {
  background: var(--text);
  color: var(--pozadie);
}

.formular {
  display: grid;
  gap: 28px;
  max-width: 560px;
}
.pole {
  display: grid;
  gap: 8px;
}
.pole label {
  color: var(--tlmene);
}
.pole input,
.pole textarea {
  width: 100%;
  background: transparent;
  color: var(--text);
  border: 0;
  border-bottom: 1px solid var(--ciara-silna);
  border-radius: 0;
  padding: 10px 0;
  font: inherit;
  font-size: 18px; /* ≥ 16 px, aby iPhone pri ťuknutí nezoomoval */
}
.pole textarea {
  resize: vertical;
}
/* Aktívne pole: čiara pod ním zhrubne a zosvetlie — viditeľná náhrada za obrys. */
.pole input:focus,
.pole textarea:focus {
  outline: none;
  border-bottom-color: var(--text);
  box-shadow: 0 1px 0 var(--text);
}
.pole.is-chyba input,
.pole.is-chyba textarea {
  border-bottom: 2px solid var(--text);
}
.pole__chyba {
  margin: 0;
  font-size: 14px;
}
.pole__chyba::before {
  content: '— ';
}

.suhlas {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 12px;
  align-items: start;
  font-size: 15px;
  cursor: pointer;
}
.suhlas input {
  width: 22px;
  height: 22px;
  margin: 1px 0 0;
  accent-color: var(--text);
}

.pasca {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.formular .tlacidlo {
  justify-self: start;
}

.hviezda {
  width: 22px;
  margin-bottom: 28px;
}

/* ─── Právny text (ochrana údajov) ────────────────────────── */

.pravny-text {
  max-width: 44em;
}
.pravny-text h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.4rem;
  margin: 48px 0 12px;
}
.pravny-text p,
.pravny-text li {
  color: var(--tlmene);
}
.pravny-text strong {
  color: var(--text);
  font-weight: 500;
}
.pravny-text ul {
  padding-left: 1.1em;
}
.pravny-text li {
  margin-bottom: 10px;
}

/* ─── Päta ─────────────────────────────────────────────────── */

.pata {
  max-width: var(--max);
  margin: 0 auto;
  padding: 56px var(--okraj) 48px;
  border-top: 1px solid var(--ciara);
  color: var(--tlmene);
  font-size: 14px;
}
.pata p {
  margin: 0 0 4px;
}
.pata a {
  text-decoration: none;
}
.pata__hviezda {
  width: 14px;
  background-color: var(--tlmene);
  margin-bottom: 20px;
  opacity: 0.7;
}
.pata__copy {
  margin-top: 20px !important;
  font-size: 12px;
}

/* ─── Pohyb: jedno pokojné odhalenie pri načítaní ─────────── */

/* Stránka sa „rozsvieti" rovnakým tempom a efektom ako oznam (pripomienka brata 2026-10-11):
   1,6 s z tmy a rozmazania, prvky po sebe s odstupom 120 ms. Oznam príde až po nej. */
.odhal {
  animation: oznam-rozsvietenie 1.6s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  animation-delay: calc(var(--i, 0) * 120ms);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .odhal {
    animation: none;
  }
  * {
    transition: none !important;
  }
}

/* ─── Väčšie obrazovky ─────────────────────────────────────── */

@media (min-width: 720px) {
  :root {
    --okraj: 40px;
  }
  .hlavicka__logo .monogram {
    height: 36px;
  }
  .hlavicka__nav {
    gap: 6px 28px;
  }
  .hlavicka__nav a {
    letter-spacing: 0.22em;
  }
  .kroky {
    justify-content: flex-start;
    gap: 28px;
    letter-spacing: 0.22em;
  }
  .sekcia--dve {
    grid-template-columns: 1fr 1fr;
    gap: 80px;
  }
  .sluzby__riadok {
    grid-template-columns: 1fr auto;
    align-items: baseline;
  }
  .sluzby__meta {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
  }
  .sluzby__odkaz {
    grid-column: 2;
    justify-self: end;
  }
  .kalendare {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }
}

/* Dlhé e-maily a adresy sa na úzkom mobile zalomia, nevytečú zo stránky. */
.adresa,
.suhrn dd {
  overflow-wrap: anywhere;
}

/* Jemné objavenie sekcií pri posúvaní (brat 2026-10-23, „nič výrazné ani rýchle"). Rieši ho priamo
   prehliadač (animácia viazaná na posúvanie) — kto ju nepozná, ukáže sekcie normálne; obsah sa nikdy
   neskryje. Verzia s JavaScriptom (IntersectionObserver) zamietnutá: v teste nechala sekcie neviditeľné. */
@keyframes odhal-pri-posune {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .sekcia:not(.sekcia--prva) {
      animation: odhal-pri-posune linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 55%;
    }
  }
}

/* Úzky mobil (do 380 px, napr. 360): menu v hlavičke sa zmestí do jedného riadku, SK / EN sa nezalomí. */
@media (max-width: 380px) {
  .hlavicka__nav {
    gap: 6px 8px;
  }
  .hlavicka__nav a {
    letter-spacing: 0.03em;
  }
}