/* ============================================================
   Paciga — scrollytelling homepage
   dark #0c0d0f · akcent biela #f5f5f5 (cierno-biela schema) · Archivo variable (self-hosted)
   ============================================================ */

/* ---- fonts (self-hosted, subset ranges from Google Fonts) ---- */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 62.5% 125%;
  font-display: swap;
  src: url("../assets/asset-15.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin + latin-ext v jednom súbore. Predtým to boli dva (asset-16, asset-17)
   a preloadnutý bol len latin. Slovenské ž a ň ležia v latin-ext, takže druhý
   subset dorazil neskoro, prehodil písmo a Chrome tým razil nového LCP
   kandidáta. Jeden súbor = jeden request, ktorý sa dá preloadnúť.

   Osi sú orezané na to, čo web používa: wght 400-700 (v CSS ide 400 až 700),
   wdth 100-125 (100 = bežný text bez font-variation-settings, 110 = --wide,
   125 = --xwide). Pôvodný rozsah bol wght 100-900 a wdth 62-125.
   Zdroj: Archivo 2.001 (OFL), subset cez fonttools. 172 kB -> 90 kB. */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100% 125%;
  font-display: swap;
  src: url("../assets/archivo-sk.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0100-02BA, U+02BB-02BC, U+02BD-02C5, U+02C6, U+02C7-02CC, U+02CE-02D7, U+02DA, U+02DC, U+02DD-02FF, U+0131, U+0152-0153, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2000-206F, U+2020, U+20A0-20AB, U+20AC, U+20AD-20C0, U+2113, U+2122, U+2191, U+2193, U+2212, U+2215, U+2C60-2C7F, U+A720-A7FF, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../assets/cinzel-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: 'Cinzel';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../assets/cinzel-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;
}
/* Playfair Display — editoriálny serif VÝHRADNE pre citáty (quote sekcie).
   Klasický pull-quote kontrast k Archivo; V1 z výberu 21.7.2026.

   Jeden súbor, nie dva (22. 8. 2026). Predtým to boli hotové subsety
   z Google Fonts: latin 38 kB + latin-ext 21 kB. Citát „Od prvého
   telefonátu po dôstojnú rozlúčku." má č aj ô, takže sa ťahali obidva
   a /o-nas skončila na troch súboroch písma a 150,5 kB. To padá na oboch
   pravidlách v lighthouserc.json (najviac 2 súbory, najviac 150 kB).

   Presne rovnaký postup ako pri Archivo: zdroj Playfair Display
   (OFL, variable wght 400-900), znaky orezané na strednú Európu, os
   orezaná na 400-500, čo web reálne používa (500 v .quote-mark
   a #quote-text, dedené 400 v .sluzba-citat). 59,5 kB v dvoch súboroch
   -> 34 kB v jednom. Prekresli cez fonttools, postup je v README. */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("../assets/playfair-sk.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0100-017F, U+2000-206F, U+20AC, U+2122;
}

/* ---- tokens & reset ----
   Jedna tmavá téma (prepínač deň/noc odstránený 29. 7. 2026 na žiadosť
   klienta). Všetky priehľadné odtiene textu a liniek sa derivujú z jedného
   kanála --fg-rgb. --scrim-rgb zatmavuje fotografie, nad ktorými je text
   vždy biely. --on-accent je farba textu na vyplnenom akcente (tlačidlá,
   pilulky, ::selection). --fg-strong je hover, silnejší než --text. */
:root {
  --fg-rgb: 245 245 245;
  --scrim-rgb: 12 13 15;
  --bg: #0c0d0f;
  --bg2: #0f1013;
  --panel: #16181c;
  --panel2: #191b1e;
  --line: rgb(var(--fg-rgb) / 0.08);
  --text: #f5f5f5;
  --fg-strong: #ffffff;
  --on-accent: #0c0d0f;
  --nav-bg: rgb(var(--scrim-rgb)); /* solid — menu má vždy plné pozadie */
  /* Krytie 0.68 a 0.50, nie 0.55 a 0.35 (22. 8. 2026). Zmerané na živom
     webe s reálnym pozadím pod každým textom: --dim dával kontrast 3,0,
     WCAG žiada 4,5 pre bežný text. Týkalo sa to 24 tried, spolu vyše 200
     textov: adresy, dátumy parte, otváracie hodiny, popisy rakiev, pätička,
     štítky nad číslami. Pre starších ľudí na telefóne, čo je cieľová
     skupina, je to rozdiel medzi „prečítam“ a „nevidím“.

     Prepočet: 0.50 dáva na najsvetlejšom paneli 4,6, na --bg 5,0. --muted
     išlo z 0.55 na 0.68, inak by sa s --dim takmer zliali (0.55 vs 0.50)
     a hierarchia troch odtieňov by zmizla. Rovnaké čísla sú aj v .subhero
     a .phero, ktoré tokeny deklarujú znova (dôvod je v komentári tam). */
  --muted: rgb(var(--fg-rgb) / 0.68);
  --dim: rgb(var(--fg-rgb) / 0.50);
  --gold: #f5f5f5; /* akcent: biela (cierno-biela schema) */
  --gold-soft: rgb(var(--fg-rgb) / 0.55);
  --gold-dim: rgb(var(--fg-rgb) / 0.18);
  /* Svetlo v pozadí sekcií, viď blok pod témami. V noci LEN svetlo, žiadne
     tmavnenie rohov: #0c0d0f má nad čiernou celých dvanásť úrovní, takže sa
     tam nedá stmavovať bez toho, aby gradient pásoval. Objem nesie svetlo. */
  --lit-a:
    radial-gradient(104% 82% at 4% 46%,
      rgb(245 245 245 / 0.062) 0%, rgb(245 245 245 / 0.048) 17%,
      rgb(245 245 245 / 0.034) 34%, rgb(245 245 245 / 0.022) 51%,
      rgb(245 245 245 / 0.011) 68%, rgb(245 245 245 / 0.003) 84%,
      rgb(245 245 245 / 0) 96%),
    radial-gradient(74% 116% at 38% 40%,
      rgb(245 245 245 / 0.034) 0%, rgb(245 245 245 / 0.016) 22%,
      rgb(245 245 245 / 0.010) 44%, rgb(245 245 245 / 0.004) 66%,
      rgb(245 245 245 / 0) 86%);
  --font: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --wide: 'wdth' 110;
  --xwide: 'wdth' 125;
}

/* Sekcie ležiace na fotografii si tmavé tokeny držia lokálne (text nad
   subhero a album pásmi je vždy biely a scrim tmavý). */
.subhero,
.album-band,
.fleetband {
  --fg-rgb: 245 245 245;
  --bg: #0c0d0f;
  --bg2: #111214;
  --panel: #16181c;
  --text: #f5f5f5;
  --fg-strong: #ffffff;
  --on-accent: #0c0d0f;
  --gold: #f5f5f5;
  /* Odvodené tokeny sa tu MUSIA deklarovať znova. var() vnútri deklarácie
     vlastnej vlastnosti sa dosadí na elemente, kde deklarácia stojí, teda
     na :root — nie tam, kde sa token použije. Prepis --fg-rgb v tomto bloku
     preto hodnoty z :root neprepočíta; zdedí sa už hotové rgb(12,13,15,X).
     Overené: bez týchto štyroch riadkov mal .subhero-lead v dennej téme
     rgba(12,13,15,0.55) na tmavej fotke, spolu 15 miest na piatich stránkach.
     Pravidlo: každý nový odvodený token v :root pridaj aj sem. */
  --line: rgb(var(--fg-rgb) / 0.08);
  --muted: rgb(var(--fg-rgb) / 0.68);
  --dim: rgb(var(--fg-rgb) / 0.50);
  --gold-soft: rgb(var(--fg-rgb) / 0.55);
  --gold-dim: rgb(var(--fg-rgb) / 0.18);
  /* prepis tokenu nestačí: color sa dedí z body, kde je už prepočítaný.
     Tu ho treba nastaviť znova, inak by text nad fotkou v dennej téme
     zdedil tmavú farbu a zmizol. */
  color: var(--text);
}

/* ---- prechod z fotopásu do sekcie pod ním ----
   DEFAULT pre celý web. Skladá sa z dvoch polovíc, jedna bez druhej nestačí.

   1. Fotopás doznieva do PLNÉHO scrimu. Robia to shade vrstvy nižšie
      (.subhero-shade, .album-shade, .fleetband-shade). Kým končili na 0.86
      alebo 0.9, spodný pás fotky zostal svetlejší než sekcia pod ním a hrana
      nebola prechod dvoch odtieňov, ale skok.
   2. Sekcia pod pásom nesie data-seam a scrim prevedie do svojho pozadia.
      V nočnej téme sú obe farby #0c0d0f, takže pás nevidno a hranu vyriešil
      už bod 1. Vo dni je sekcia svetlá, takže bez tohto pásu by plný scrim
      vyrobil novú, tvrdšiu hranu.

   Prečo fade tu a nie vo fotopáse: v páse stojí biely text (nadpis, popiska).
   Svetlý spodok by ho v dennej téme zabil, takže scrim tam musí ostať tmavý
   až po hranu.

   Výška pásu sa rovná hornému paddingu sekcie, aby závoj nikdy nepadol na
   obsah. Sekcia s iným paddingom si ju prepíše cez --seam.

   Selektor je section[data-seam] a nie [data-seam] zámerne: potrebuje prebiť
   border-top v .situ, .kronika a .cta-band bez ohľadu na poradie v súbore.
   Hairline presne na hrane by prechod zabila, tam už delí fotka. */
section[data-seam] {
  position: relative;
  border-top: 0;
}
section[data-seam]::before {
  content: '';
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: var(--seam, clamp(56px, 8vh, 96px));
  background: linear-gradient(180deg, rgb(var(--scrim-rgb)), rgb(var(--scrim-rgb) / 0));
  pointer-events: none;
}
/* pozicovaný ::before by inak kreslil nad statickým obsahom sekcie */
section[data-seam] > .container,
section[data-seam] > .cta-inner { position: relative; z-index: 1; }

/* ---- svetlo v pozadí sekcií ----
   Jednolitá plocha sa nerozbíja textúrou, ale svetlom. Každá sekcia je
   nasvietená z horného rohu a v protiľahlom dolnom rohu tmavne, takže má
   objem. Rohy sa striedajú, zľava a zprava, čiže scrollovanie dostane
   rytmus, akoby svetlo padalo z iných strán.

   Leží to v NÁTERE pozadia sekcie, nie ako vrstva nad obsahom. Fotografie,
   karty a text sa kreslia až nad tým, takže sa ich to nedotkne. Presne to
   bola chyba filmového zrna, ktoré sedelo ako fixná vrstva na z-index 60
   a znehodnocovalo všetko pod sebou.

   Prechody majú päť zastavení s klesajúcim krokom, nie dva. Dva by na
   tmavej palete pásovali: rozdiel je 8-bitový, takže mierny gradient drží
   jednu hodnotu cez stovky pixelov a hrany plôšok sa dajú vidieť.
   Zahustené zastavenia plôšky skrátia.

   Hodnoty sú v gradientoch napísané literálom, nie cez var(--fg-rgb).
   Odvodený token by sa dosadil na :root a v dennej téme by sa obrátil.

   Vynechané: .subhero (leží na fotografii), .cta-band (má
   vlastnú žiaru zdola), .album-band a .fleetband (nie sú section). */
/* Jedno svetlo na celý dokument, nie na každú sekciu.

   Predtým mala svetlo každá sekcia zvlášť. Aj po maskovaní okrajov bolo
   vidieť jeho tvar: eliptický nános s amplitúdou okolo 14 úrovní na palete,
   ktorá má nad čiernou dokopy dvanásť až dvadsaťpäť úrovní. Oko si ten obrys
   prečítalo ako šmuhu.

   Teraz je svetlo jediná fixná vrstva pod obsahom a sekcie sú priehľadné,
   takže cez ne presvitá spojité pole. Hranica sekcie nemá čo prerušiť.
   Fixná a nie dokumentová je zámerne: gradient tak beží cez jednu obrazovku
   a nie cez sedemtisíc pixelov, čiže je strmší a menej pásuje.

   z-index -1 ju posadí nad farbu pozadia body a pod obsah. */
.pagelight {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: var(--lit-a);
}

/* Sekcie prestali maľovať vlastnú plochu. Tie, ktoré mali --bg2, dostávajú
   priehľadný nádych namiesto nepriehľadnej farby: svetlo pod nimi ostane
   spojité a rytmus striedania sa zachová. */
main > section[class] { background-color: transparent; }
main > section.nonstop,
main > section.branches,
main > section.reviews,
main > section.firsts,
main > section.billing,
main > section.situ,
main > section.rozlucky,
main > section.kronika,
main > section.faq-section,
/* detail pohrebnej služby: striedanie tónin na dlhej stránke */
main > section.sluzba-blok.is-alt,
main > section.sluzba-citat,
main > section.katalog,
main > section.flotila,
/* 0.013 je zámerne: na tmavom to je 3 úrovne jasu, presne toľko, koľko
   mal rozdiel --bg a --bg2 predtým. Pri 0.022 to bolo 5 a hranica sa
   znovu ozvala. */
main > section.cta-band { background-color: rgb(var(--fg-rgb) / 0.013); }

/* Element resety a defaulty žijú v @layer base: Tailwind utility
   (layer utilities, definovaná v src/styles/tw.css) ich tak legálne prebijú
   kdekoľvek na webe. Nevrstvené pravidlá nižšie (classy) ostávajú silnejšie
   než utility — komponentové CSS má stále poslednú slovo. */
@layer base {
  * { margin: 0; padding: 0; box-sizing: border-box; }
  img, video { display: block; max-width: 100%; }
  a { color: inherit; text-decoration: none; }
  button { font-family: inherit; background: none; border: 0; color: inherit; cursor: pointer; }
  /* letter-spacing h1/h2: -0.01 + 0.028 z /dial bake 21.7.2026 */
  h1, h2, h3 { font-variation-settings: var(--wide); line-height: 1.08; font-weight: 640; }
  h1, h2 { letter-spacing: 0.018em; }
  h3 { letter-spacing: -0.01em; }
  h2 { font-size: clamp(30px, 4.4vw, 54px); }
  h3 { font-size: 20px; }
}

html { scroll-behavior: auto; overflow-x: clip; } /* orby a dekor nesmú vyrobiť vodorovný scroll */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 19.8px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* clip namiesto hidden: hidden robí z body scroll container a rozbíja
     position: sticky potomkov; clip len orezáva bez scrollportu */
  overflow-x: clip;
}

.container { width: min(1240px, calc(100% - 48px)); margin-inline: auto; }

::selection { background: var(--gold); color: var(--on-accent); }

/* text reveal po slovách (data-textreveal, main.js) */
.tr-w { display: inline-block; }

/* tracing beam v sekcii Čo spraviť ako prvé (kreslí ho main.js pri scrolle) */
.fs-beam { position: relative; height: 1px; background: var(--line); margin: clamp(48px, 7vh, 72px) 0 clamp(28px, 4vh, 40px); }
.fs-beam i { position: absolute; left: 0; top: 0; height: 1px; width: 0%; background: linear-gradient(90deg, rgb(var(--fg-rgb) / 0.25), var(--gold)); box-shadow: 0 0 12px rgb(var(--fg-rgb) / 0.35); }
.fs-beam-dot { position: absolute; top: -3.5px; width: 8px; height: 8px; border-radius: 50%; background: var(--bg2); border: 1px solid rgb(var(--fg-rgb) / 0.3); transition: background 0.3s ease, border-color 0.3s ease; }
.fs-beam-dot.on { background: var(--gold); border-color: var(--gold); }
@media (max-width: 860px) {
  .fs-beam { display: none; } /* vertikálny stack, horizontálna linka stráca zmysel */
}

/* obrí priehľadný otáznik v pozadí — „čo mám robiť?" nálada sekcie */
.fs-q {
  position: absolute;
  right: clamp(-30px, 3vw, 100px);
  top: 50%;
  transform: translateY(-50%);
  font-size: clamp(380px, 34vw, 620px);
  line-height: 0.9;
  font-weight: 700;
  color: var(--gold);
  opacity: 0.05;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.firststeps > .container { position: relative; z-index: 1; }
@media (max-width: 860px) {
  .fs-q { font-size: 70vw; right: -10vw; } /* na mobile len náznak pri kraji */
}

/* ---- shared atoms ---- */
.eyebrow {
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  margin-bottom: 18px;
}
.micro-label {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dim);
  font-weight: 600;
}
.gold-line {
  width: 72px;
  height: 2px;
  margin-top: 22px;
  background: linear-gradient(90deg, var(--gold), rgb(var(--fg-rgb) / 0));
  transform-origin: left center;
}
.gold-rule { width: 3px; align-self: stretch; background: var(--gold); transform-origin: top center; }

.btn-gold {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--gold);
  color: var(--on-accent);
  font-weight: 650;
  font-size: 15px;
  padding: 16px 30px;
  border-radius: 999px;
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.35s ease, background 0.35s ease;
}
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 14px 40px rgb(var(--fg-rgb) / 0.25); background: var(--fg-strong); }
/* sekundárne tlačidlo: obrysová pilulka — jasná klikateľnosť bez váhy
   plného CTA. Nahrádza tiché link-underline pri samostatných akciách. */
.btn-line {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border: 1px solid rgb(var(--fg-rgb) / 0.28);
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  color: var(--text);
  transition: border-color 0.35s ease, transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.35s ease;
}
.btn-line:hover { border-color: var(--gold); transform: translateY(-2px); box-shadow: 0 10px 30px rgb(var(--fg-rgb) / 0.12); }
.btn-line.sm { padding: 10px 18px; font-size: 14px; }
.btn-lg { font-size: 17px; padding: 20px 38px; }

.link-underline {
  font-size: 15px;
  font-weight: 550;
  color: var(--muted);
  padding-bottom: 3px;
  background: linear-gradient(currentColor, currentColor) left bottom / 0% 1px no-repeat;
  transition: background-size 0.4s cubic-bezier(0.2, 0.7, 0.2, 1), color 0.3s ease;
}
.link-underline:hover { background-size: 100% 1px; color: var(--text); }
.link-underline.gold { color: var(--gold); }
.link-underline.gold:hover { color: var(--fg-strong); }

/* jediná sémantická bodka na stránke: NON STOP dostupnosť v nav CTA */
.dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #f5f5f5;
  box-shadow: 0 0 0 0 rgb(var(--fg-rgb) / 0.5);
  animation: pulse 2.2s infinite;
  flex: 0 0 auto;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgb(var(--fg-rgb) / 0.45); }
  70% { box-shadow: 0 0 0 9px rgb(var(--fg-rgb) / 0); }
  100% { box-shadow: 0 0 0 0 rgb(var(--fg-rgb) / 0); }
}

/* ---- scroll progress ---- */
#progress {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left center;
  z-index: 120;
  pointer-events: none;
}

/* ---- nav ----
   Vždy plná farba pod menu a žiadne skrývanie pri scrolle (žiadosť klienta
   29.7.). data-solid aj .nav-hidden ostávajú v JS bez efektu — pozadie nesie
   základné pravidlo. */
#site-nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  background: var(--nav-bg);
  box-shadow: 0 1px 0 var(--line);
  transition: background 0.45s ease, box-shadow 0.45s ease;
}
.nav-inner { display: flex; align-items: center; gap: 28px; padding: 18px 0; }
.nav-logo img { height: clamp(46px, 3.6vw, 56px); width: auto; }
/* Lišta má vlastnú, širšiu mieru než zvyšok obsahu: deväť odkazov a NON STOP
   CTA sa do 1240 px nezmestia a menu sa láme na druhý riadok. Rozostup 18 px
   drží rezervu aj pri 1280 px. */
.nav-inner { width: min(1400px, calc(100% - 40px)); }
.nav-links { display: flex; align-items: center; gap: 18px; margin-left: auto; flex-wrap: wrap; }
/* Pásmo medzi burgerom (900 px) a 1365 px je na lištu tesné už bez prepínača:
   pri 1200 px a menej sa menu lámalo aj predtým. Tu rozostupy pritiahneme,
   čím sa zmestí aj 1280 aj 1200. */
@media (max-width: 1365px) {
  .nav-links { gap: 12px; }
}
.nav-link {
  font-size: 13.5px;
  font-weight: 550;
  color: var(--muted);
  letter-spacing: 0.01em;
  padding-bottom: 2px;
  background: linear-gradient(var(--gold), var(--gold)) left bottom / 0% 1.5px no-repeat;
  transition: color 0.3s ease, background-size 0.35s ease;
}
.nav-link:hover, .nav-link.is-active { color: var(--text); background-size: 100% 1.5px; }
.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  font-weight: 650;
  color: var(--gold);
  border: 1px solid rgb(var(--fg-rgb) / 0.4);
  padding: 9px 16px;
  border-radius: 999px;
  transition: background 0.3s ease, border-color 0.3s ease;
  white-space: nowrap;
}
.nav-cta:hover { background: var(--gold-dim); border-color: var(--gold); }

/* Trvalé click-to-call — objaví sa, keď je nav skrytá (desktop scroll-down)
   alebo na mobile po odscrollovaní z hero (telefón je tam inak za burgerom). */
.callpill {
  position: fixed;
  right: clamp(16px, 2.5vw, 32px);
  /* safe-area: na iPhone s gesture barom pill inak sedí v jej pásme */
  bottom: calc(clamp(16px, 3vh, 28px) + env(safe-area-inset-bottom));
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--gold);
  color: var(--on-accent);
  font-size: 13.5px;
  font-weight: 680;
  letter-spacing: 0.02em;
  padding: 13px 20px;
  border-radius: 999px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  /* visibility: hidden navyše k opacity 0 (22. 8. 2026). Samotná opacity
     prvok skryje len očiam, klávesnica naň Tabom ďalej skočí a focus
     zmizne na neviditeľnom mieste. visibility ho vyradí aj z poradia
     Tabu. Prechod na visibility je odložený o dĺžku fade, aby sa pill
     najprv stlmil a až potom zmizol; pri zobrazení naopak naskočí hneď. */
  visibility: hidden;
  transition: opacity 0.35s ease, transform 0.35s ease, visibility 0s linear 0.35s;
}
.callpill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--on-accent); animation: pulse 2.2s ease-in-out infinite; }
.callpill.on { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition-delay: 0s; }
/* Vodorovné odsadenie je 10, nie 8: prúžky majú 24 px, takže 8 dávalo
   tlačidlu 40 px šírky a to je pod 44 px minimom pre dotyk. Merané 22. 8. 2026. */
.nav-burger { display: none; flex-direction: column; gap: 5px; padding: 12px 10px; margin-left: auto; }
.nav-burger span { width: 24px; height: 2px; background: var(--text); transition: transform 0.3s ease, opacity 0.3s ease; }

/* ---- mega menu: paleta služieb pod položkou Pohrebné služby ----
   Desktop: pás na celú šírku pod lištou, otvára hover/focus (JS v main.js
   drží 180 ms odklad zavretia, aby kurzor prežil cestu z odkazu do pásu).
   Kotví na #site-nav (position: fixed), .nav-item ostáva position: static.
   Mobil: pás je vypnutý, v draweri je rozbaľovací zoznam skupín. */
.nav-item { display: flex; align-items: center; }
.nav-sub-toggle { display: none; }
.nav-sub { display: none; }
.megamenu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: rgba(12, 13, 15, 0.96);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--line), 0 30px 60px rgba(0, 0, 0, 0.45);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 0.28s ease, transform 0.32s cubic-bezier(0.2, 0.7, 0.2, 1), visibility 0s linear 0.3s;
}
#site-nav.mega-open .megamenu,
.nav-item:focus-within .megamenu {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
  transition: opacity 0.28s ease, transform 0.32s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.mega-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px 44px; padding: 30px 0 22px; }
.mega-label {
  display: block; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted); padding-bottom: 10px; margin-bottom: 6px; border-bottom: 1px solid var(--line);
  transition: color 0.25s ease;
}
.mega-label:hover { color: var(--text); }
.mega-link {
  display: flex; align-items: baseline; gap: 10px; padding: 6.5px 0;
  font-size: 14px; color: var(--muted); transition: color 0.25s ease, transform 0.3s ease;
}
.mega-link i { font-style: normal; font-size: 11px; color: rgb(var(--fg-rgb) / 0.35); font-variant-numeric: tabular-nums; }
.mega-link:hover { color: var(--text); transform: translateX(4px); }
.mega-foot { display: flex; justify-content: space-between; align-items: center; gap: 20px; border-top: 1px solid var(--line); padding: 14px 0 16px; }
.mega-all { font-size: 13px; color: var(--gold); }
.mega-all:hover { text-decoration: underline; text-underline-offset: 3px; }
.mega-note { font-size: 12px; letter-spacing: 0.06em; color: var(--muted); white-space: nowrap; }

/* ---- zámok scrollu pri otvorenom mobilnom menu ----
   Lenis má syncTouch vypnutý, takže na dotyku beží natívny scroll a
   lenis.stop() nezamkne nič — stránka pod otvoreným menu ušla. Body ide
   do position: fixed s odloženým offsetom, main.js ho pri zavretí vráti.
   Layout sa nemení, ScrollTrigger teda neprepočítava. */
html.nav-locked,
html.nav-locked body { overflow: hidden; }
html.nav-locked body {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
}

/* ---- hero ---- */
/* svh, nie vh: 100vh je na iOS najväčší viewport (lišta schovaná), takže hero
   bol pri načítaní orezaný a pri prvom scrolle poskočil. dvh sem nedávame —
   priebežná zmena výšky by prepočítavala pripnuté ScrollTriggery. */
.hero { position: relative; height: 100vh; height: 100svh; overflow: hidden; }
.hero-media { position: absolute; inset: -6% 0; will-change: transform; }
.hero-media video { width: 100%; height: 100%; object-fit: cover; }
.hero-shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(12, 13, 15, 0.88) 0%, rgba(12, 13, 15, 0.55) 42%, rgba(12, 13, 15, 0.15) 75%),
    linear-gradient(180deg, rgba(12, 13, 15, 0.55) 0%, rgba(12, 13, 15, 0) 30%, rgba(12, 13, 15, 0.1) 62%, var(--bg) 100%);
}
.hero-content { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; height: 100%; padding-top: 40px; }
.hero h1 {
  font-size: clamp(36.8px, 5.89vw, 81px);
  font-weight: 660;
  max-width: 13ch;
}
/* overflow: hidden je kvôli intro animácii (riadok sa vysúva zdola). Pri
   200 % zoome písma ale odsekával spodok riadka o 5 px, teda descendery
   v „rozlúčka“ a „okolností“. Spodný padding so záporným marginom dá
   riadku rezervu bez toho, aby sa zmenil rozostup riadkov. 22. 8. 2026. */
.hero h1 .line { display: block; overflow: hidden; padding-bottom: 0.12em; margin-bottom: -0.12em; }
.hero h1 .line > span { display: block; will-change: transform; }
.hero-lead { margin-top: 26px; max-width: 46ch; font-size: clamp(19.8px, 1.74vw, 23.6px); color: var(--muted); }
.hero-actions { display: flex; align-items: center; gap: 28px; margin-top: 38px; flex-wrap: wrap; }
/* Klasická homepage (15. 8. 2026): v hero je statická fotka, nie video. */
.hero-media img { width: 100%; height: 100%; object-fit: cover; }

/* FotoSsr.astro obaľuje obrázok do <picture> kvôli AVIF (22. 8. 2026).
   <picture> je inline prvok, takže by sa vsunul medzi kontajner a <img>
   a percentuálne výšky v pravidlách typu `.hero-media img { height: 100% }`
   by sa počítali voči nemu. display: contents obal z rozloženia odstráni,
   img sa správa ako priamy potomok kontajnera. */
picture { display: contents; }

/* ---- fotopásy homepage (limuzína, šperky) ----
   Bývalé kapitoly pinovanej jazdy ako klasická dvojica fotka + text,
   striedavo zrkadlená (.kband-flip). Výška fotky je pevná cez clamp,
   nie aspect-ratio: atribút height na <img> by aspect-ratio prebil. */
.kband { padding: clamp(72px, 10vh, 130px) 0; position: relative; }
.kband + .kband { padding-top: 0; }
.kband-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(34px, 5vw, 76px); align-items: center; }
.kband-flip .kband-grid { grid-template-columns: 1fr 1.15fr; }
.kband-flip .kband-media { order: 2; }
.kband-media { border-radius: 24px; overflow: hidden; border: 1px solid var(--line); box-shadow: 0 30px 70px -24px rgb(var(--scrim-rgb) / 0.8); }
.kband-media img { display: block; width: 100%; height: clamp(320px, 34vw, 520px); object-fit: cover; }
.kband-flip .kband-media img { height: clamp(360px, 38vw, 560px); }
.kband-body h2 { font-size: clamp(28px, 3.4vw, 46px); margin-top: 18px; }
.kband-body .badge-pill { margin-bottom: 4px; }
.kband-body p { margin-top: 16px; max-width: 44ch; color: var(--muted); font-size: clamp(16.5px, 1.4vw, 19px); line-height: 1.65; }
.kband-body .btn-line { margin-top: 26px; }
@media (max-width: 860px) {
  .kband-grid, .kband-flip .kband-grid { grid-template-columns: 1fr; }
  .kband-flip .kband-media { order: 0; }
  .kband-media img, .kband-flip .kband-media img { height: clamp(260px, 64vw, 420px); }
}

/* keyframes pre partners marquee (jediný marquee na stránke) */
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---- quote ---- */
.quote { padding: clamp(96px, 13vh, 165px) 0; background: var(--bg); }
.quote-inner { max-width: 880px; position: relative; }
/* výrok v jednom bloku s číslami na O nás */
.stats .quote-inner { margin-top: clamp(48px, 7vh, 84px); }/* V1 editoriálny serif (Playfair) — pull-quote kontrast k Archivo */
#quote-text { font-family: 'Playfair Display', Georgia, serif; font-size: clamp(30px, 3.9vw, 52px); line-height: 1.28; font-weight: 500; letter-spacing: 0.002em; }
#quote-text .w { opacity: 0.14; transition: opacity 0.3s linear; }
#quote-text .w.on { opacity: 1; }

/* ---- nonstop callout ---- */
.nonstop { background: var(--bg2); border-block: 1px solid var(--line); }
.nonstop-inner { display: flex; align-items: center; justify-content: space-between; gap: 40px; padding: 56px 0; flex-wrap: wrap; }
.nonstop-left { display: flex; gap: 24px; }
.nonstop-title { font-size: 24px; font-weight: 640; font-variation-settings: var(--wide); }
.nonstop-sub { color: var(--muted); margin-top: 8px; max-width: 52ch; }
.nonstop-right { display: flex; flex-direction: column; gap: 6px; }
.phone-primary { font-size: clamp(30px, 3.4vw, 42px); font-weight: 680; font-variation-settings: var(--wide); color: var(--gold); margin-top: 8px; transition: color 0.3s ease; }
.phone-primary:hover { color: var(--fg-strong); }
.phone-secondary { font-size: 19px; font-weight: 560; color: var(--muted); transition: color 0.3s ease; }
.phone-secondary:hover { color: var(--text); }

/* ---- services (pinned horizontal) ---- */
.services { background: var(--bg); position: relative; }
.services-pin { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; padding: 90px 0 60px; }
.services-track {
  display: flex;
  gap: 18px;
  padding-left: max(24px, calc((100vw - 1240px) / 2));
  padding-right: 24px;
  width: max-content;
  will-change: transform;
}
.svc {
  position: relative;
  width: 340px;
  min-height: 300px;
  flex: 0 0 auto;
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: 18px;
  padding: 26px 26px 62px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: border-color 0.35s ease, background 0.35s ease, transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.svc:hover { border-color: rgb(var(--fg-rgb) / 0.45); background: var(--panel2); transform: translateY(-6px); }
.svc h3 { margin-top: 84px; font-size: 21px; }
.svc p { margin-top: 10px; font-size: 18px; color: var(--muted); }
.svc:hover .svc-more { opacity: 1; transform: none; }
.svc.has-photo::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(12, 13, 15, 0.25), rgba(12, 13, 15, 0.92) 78%);
}
.svc.has-photo:hover .svc-photo { opacity: 0.55; transform: scale(1.05); }
.svc.has-photo .svc-num, .svc.has-photo h3, .svc.has-photo p, .svc.has-photo .svc-more { position: relative; z-index: 2; }
#services-bar { display: block; width: 100%; height: 100%; background: var(--gold); transform: scaleX(0); transform-origin: left center; }/* ---- fleet showcase ---- */
.badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--gold);
  border: 1px solid rgb(var(--fg-rgb) / 0.4);
  background: rgba(12, 13, 15, 0.55);
  backdrop-filter: blur(8px);
  padding: 10px 18px;
  border-radius: 999px;
}

/* ---- stats ---- */
/* ---- čísla: tichý pás v hairline mriežke ----
   Predtým tu boli tri monumentálne riadky s číslami do 104 px. Prevalcovali
   hero nad sebou aj Náš príbeh pod sebou. Teraz sú čísla v pokornej veľkosti
   v troch stĺpcoch a všetok pohyb nesú linky: vodorovná sa kreslí zľava,
   zvislé delidlá rastú zhora. Ich škálu drží --divh na kontejneri, aby sa
   dala animovať jedným tweenom (na ::before z GSAP nedosiahneš). */
/* padding sa rovná default výške seam pásu, viď section[data-seam] */
/* Horný padding je tu menší než u ostatných sekcií. Nad číslami stojí fotopás,
   ktorý dole doznieva do plného scrimu, takže spodných pár desiatok pixelov
   fotky je už len tma. K nej sa pripočítaval plný horný padding a medzi
   koncom fotky a prvým číslom bolo 108 px prázdna. --seam ide s ním, inak by
   závoj prepadol na obsah (viď section[data-seam]). */
.stats {
  background: var(--bg);
  --seam: clamp(30px, 3.8vh, 46px);
  padding: clamp(30px, 3.8vh, 46px) 0 clamp(56px, 8vh, 96px);
}
.stat-strip {
  --stat-gap: clamp(24px, 4vw, 64px);
  --divh: 1;
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--stat-gap);
  padding-top: clamp(18px, 2.2vh, 26px);
}
.stat-rule {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--line);
  transform-origin: left center;
}
.stat { position: relative; }
.stat + .stat::before {
  content: '';
  position: absolute;
  left: calc(var(--stat-gap) / -2);
  top: 4px;
  bottom: 4px;
  width: 1px;
  background: var(--line);
  transform: scaleY(var(--divh));
  transform-origin: top center;
}
.stat-num {
  display: block;
  font-size: clamp(28px, 3.2vw, 42px);
  font-weight: 600;
  font-variation-settings: var(--wide);
  line-height: 1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  /* počítadlo dobieha s doznievajúcim rozostrením — pohyb, nie preblik */
  will-change: filter;
}
.stat-word {
  display: block;
  margin-top: 12px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}
.stat-note {
  margin-top: 14px;
  max-width: 30ch;
  /* --muted, nie --dim: pri 14,5 px by 0.35 alfa spadla pod čitateľný kontrast */
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.65;
}

/* ---- tím ----
   Portrét vypĺňa celú kartu, dole cez ňu prechádza závoj a v ňom sedí meno
   s rolou. Karta pod kurzorom ostane ostrá, ostatné dve klesnú na 0.42 a
   rozostria sa o 1.5 px. Je to tá istá mechanika a ten istý radius 24 px
   ako kapitoly služieb na homepage, takže O nás a domovská stránka znejú
   rovnako a web nedostal nový cudzí tvar.

   Text v karte je vždy svetlý: leží na fotografii so scrimom, rovnako ako
   fotopásy. Preto tu stoja literálne hodnoty a nie tokeny témy.

   Na dotykových zariadeniach sa netlmí nič, hover tam neexistuje a karty
   sú pod sebou rovnocenné. */
.team { background: var(--bg); padding: clamp(84px, 11vh, 150px) 0; }
/* nadpis s maskou: obal reže, slovo v ňom vystúpi zdola.
   padding-bottom drží dĺžne a háčiky (í, ť), inak by ich hrana orezala;
   rovnaká hodnota ide späť ako záporný margin, aby sa výška nezmenila. */
.mr-mask {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
}
.mr-word { display: inline-block; will-change: transform; }
.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.4vw, 34px);
  margin-top: clamp(24px, 3.4vh, 40px);
}
.team-card {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  min-height: clamp(360px, 46vh, 520px);
  transition: opacity 0.4s ease, filter 0.4s ease;
}
.team-shot { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 0; margin: 0; }
.team-card img { width: 100%; height: 100%; object-fit: cover; }
.team-veil {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 62%;
  background: linear-gradient(180deg, rgb(var(--scrim-rgb) / 0), rgb(var(--scrim-rgb) / 0.86));
}
.team-body { position: absolute; left: 26px; right: 26px; bottom: 24px; }
.team-name { font-size: clamp(20px, 1.8vw, 26px); font-weight: 650; color: #f5f5f5; }
.team-role {
  display: block;
  margin-top: 8px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: rgb(245 245 245 / 0.62);
}
@media (hover: hover) {
  .team-grid:hover .team-card { opacity: 0.42; filter: blur(1.5px); }
  .team-grid .team-card:hover { opacity: 1; filter: none; }
}
@media (max-width: 860px) {
  .team-grid { grid-template-columns: 1fr; }
}

/* ---- celý tím (nosiči) ----
   Pás desiatich miniatúr pod hlavnými kartami, skrytý do kliknutia na
   „Zobraziť celý tím". Miniatúra je nemá: len silueta na paneli. Desať
   mien vedľa seba by sa nedalo čítať, preto meno a rolu nesie až väčšia
   karta, ktorá vystúpi nad miniatúrou pod kurzorom. Väčšia karta preberá
   panel, linku a radius tímovej sekcie, žiadny nový cudzí tvar.
   Krajné dve miniatúry kotvia kartu k hrane pásu, inak by vytiekla z
   kontajnera. Na dotyku hover neexistuje, karta sa tam nezobrazuje. */
.team-more { margin-top: clamp(28px, 4vh, 44px); text-align: center; }
.team-full { opacity: 0; transform: translateY(12px); transition: opacity 0.45s ease, transform 0.45s ease; }
.team-full.is-open { opacity: 1; transform: none; }
.team-mini-grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: clamp(8px, 1vw, 14px);
  margin-top: clamp(24px, 3.4vh, 36px);
}
.team-mini {
  position: relative;
  aspect-ratio: 3 / 4;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
  cursor: pointer;
  transition: border-color 0.35s ease, transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.team-mini:hover, .team-mini:focus-visible { border-color: rgb(var(--fg-rgb) / 0.4); transform: translateY(-4px); outline: none; }
.team-mini-photo {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  color: rgb(var(--fg-rgb) / 0.26);
}
.team-mini-photo svg { width: 72%; height: auto; transform: translateY(9%); }
.team-mini-pop {
  --tx: -50%;
  position: absolute;
  left: 50%;
  bottom: calc(100% + 14px);
  transform: translate(var(--tx), 8px);
  width: clamp(200px, 21vw, 250px);
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--panel2);
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  z-index: 6;
  box-shadow: 0 18px 50px rgb(var(--scrim-rgb) / 0.55);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.team-mini:hover .team-mini-pop, .team-mini:focus-visible .team-mini-pop { opacity: 1; transform: translate(var(--tx), 0); }
.team-mini:nth-child(-n+2) .team-mini-pop { left: 0; --tx: 0; }
.team-mini:nth-last-child(-n+2) .team-mini-pop { left: auto; right: 0; --tx: 0; }
.team-pop-photo {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 150px;
  overflow: hidden;
  background: var(--bg2);
  color: rgb(var(--fg-rgb) / 0.3);
}
.team-pop-photo svg { width: 44%; height: auto; transform: translateY(8%); }
.team-pop-body { padding: 16px 18px 18px; }
.team-pop-name { font-size: 17px; font-weight: 650; color: var(--text); }
.team-pop-role {
  display: block;
  margin-top: 6px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--muted);
}
@media (max-width: 860px) {
  .team-mini-grid { grid-template-columns: repeat(5, 1fr); }
}
@media (hover: none) {
  .team-mini-pop { display: none; }
}

/* ---- branches ---- */
.branches { background: var(--bg2); border-block: 1px solid var(--line); padding: clamp(84px, 11vh, 150px) 0; }
.section-head { margin-bottom: 60px; }
.branch-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.branch-card {
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--panel);
  overflow: hidden;
  transition: border-color 0.35s ease, transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.branch-card:hover { border-color: rgb(var(--fg-rgb) / 0.4); transform: translateY(-6px); }
.branch-photo { height: 210px; overflow: hidden; position: relative; }
.branch-photo span {
  position: absolute; inset: -14% 0;
  display: block;
  filter: saturate(0.5) brightness(0.72);
  transition: filter 0.5s ease;
  will-change: transform;
}
.branch-photo span video { width: 100%; height: 100%; object-fit: cover; }
.branch-card:hover .branch-photo span { filter: saturate(0.85) brightness(0.85); }
.branch-body { padding: 26px 26px 30px; }
.branch-body h3 { font-size: 24px; }
.branch-addr { margin-top: 12px; color: var(--muted); font-size: 18.6px; }
.branch-tel { display: inline-block; margin-top: 14px; font-size: 22px; font-weight: 660; font-variation-settings: var(--wide); color: var(--gold); transition: color 0.3s ease; }
.branch-tel:hover { color: var(--fg-strong); }
.branch-hours { margin-top: 6px; margin-bottom: 18px; font-size: 16.1px; color: var(--dim); letter-spacing: 0.04em; }
.branch-mail { margin-top: 4px; font-size: 16.1px; }
.branch-mail a { color: var(--muted); transition: color 0.3s ease; }
.branch-mail a:hover { color: var(--fg-strong); }
/* Číslo prevádzky v riadku hodín. Veľké .branch-tel drží NON STOP linku,
   toto je druhé číslo, takže musí byť klikateľné, ale tichšie. */
.branch-tel-sm { color: var(--muted); border-bottom: 1px solid rgb(var(--fg-rgb) / 0.22); transition: color 0.3s ease, border-color 0.3s ease; }
.branch-tel-sm:hover { color: var(--fg-strong); border-bottom-color: var(--gold); }

/* ---- interiér pobočiek (kontakt) ---- */
.interier { padding: clamp(70px, 10vh, 130px) 0; }
.interier-lead { max-width: 52ch; margin-bottom: 40px; color: var(--muted); font-size: clamp(16.5px, 1.5vw, 19px); line-height: 1.7; }
.interier-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.interier-item figcaption { margin-top: 12px; font-size: 14px; letter-spacing: 0.08em; color: var(--dim); }
/* reálne fotky interiéru — height: auto ako pri kronike (<Image> píše atribút
   height, ktorý by bez neho platil namiesto aspect-ratio) */
.interier-photo { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; }
/* video prehliadka: 16:9 zdroj orezaný do širokého pásu, na mobile plný pomer */
.interier-video-real { margin-top: 22px; width: 100%; height: auto; aspect-ratio: 16 / 6; object-fit: cover; border-radius: 12px; display: block; }
@media (max-width: 860px) {
  .interier-grid { grid-template-columns: 1fr; }
  .interier-video-real { aspect-ratio: 16 / 9; }
}

/* ---- memoriam ---- */
.memoriam { background: var(--bg); padding: clamp(84px, 11vh, 150px) 0; }
.memoriam-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin-bottom: 60px; flex-wrap: wrap; }
.memoriam-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.memoriam-card {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--panel);
  padding: 30px 26px;
  text-align: center;
  transition: border-color 0.35s ease, transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.memoriam-card:hover { border-color: rgb(var(--fg-rgb) / 0.35); transform: translateY(-5px); }
.memoriam-photo {
  width: 84px; height: 84px;
  margin: 0 auto 20px;
  border-radius: 50%;
  border: 1px solid rgb(var(--fg-rgb) / 0.35);
  background: radial-gradient(circle at 35% 30%, #22242a, #131418);
  display: grid;
  place-items: center;
  font-weight: 650;
  font-size: 20px;
  color: var(--gold-soft);
  letter-spacing: 0.06em;
}
.memoriam-card h3 { font-size: 18.5px; }
.memoriam-date { margin-top: 8px; font-size: 13.5px; color: var(--dim); letter-spacing: 0.08em; }
/* akcie musia ostať nad plošným odkazom karty (viď .memoriam-link::after) */
.memoriam-links { position: relative; z-index: 2; display: flex; justify-content: center; gap: 18px; margin-top: 20px; }
.gold-link { font-size: 13.5px; font-weight: 600; color: var(--gold); transition: color 0.3s ease; }
.gold-link:hover { color: var(--fg-strong); }
.soft-link { font-size: 13.5px; color: var(--muted); transition: color 0.3s ease; }
.soft-link:hover { color: var(--text); }

/* ---- partners marquee ---- */
.partners { background: var(--bg); border-top: 1px solid var(--line); padding: 90px 0; }

/* ---- CTA band ---- */
/* Žiara mala stred 30 % pod pásom, takže na jeho spodnej hrane bola
   najsilnejšia a hranica na ďalšiu sekciu skákala o 11 úrovní. Teraz sedí
   stred v 72 % výšky, čiže za textom, a maska ju na oboch hranách dotiahne
   do nuly. */
.cta-band { position: relative; background: var(--bg2); }
.cta-band::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(82% 92% at 50% 72%, rgb(var(--fg-rgb) / 0.13), transparent 62%);
  -webkit-mask-image: linear-gradient(180deg, rgb(0 0 0 / 0) 0%, #000 14%, #000 86%, rgb(0 0 0 / 0) 100%);
  mask-image: linear-gradient(180deg, rgb(0 0 0 / 0) 0%, #000 14%, #000 86%, rgb(0 0 0 / 0) 100%);
}
.cta-band > * { position: relative; z-index: 1; }
.cta-band {
  border-top: 1px solid var(--line);
  padding: clamp(96px, 13vh, 175px) 36px;
  text-align: center;
}
.cta-inner h2 { font-size: clamp(32px, 4.6vw, 58px); max-width: 20ch; margin-inline: auto; }
.cta-inner p { margin-top: 18px; color: var(--muted); max-width: 52ch; margin-inline: auto; }
.cta-inner .btn-gold { margin-top: 42px; }

/* ---- footer ---- */
.site-footer { background: var(--bg); border-top: 1px solid var(--line); }
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1.1fr 1fr;
  gap: 44px;
  padding: 80px 0 60px;
}
.footer-brand img { height: 44px; width: auto; margin-bottom: 20px; }
.footer-brand p { color: var(--muted); font-size: 18px; max-width: 34ch; }
.footer-social { display: flex; gap: 18px; margin-top: 22px; }
.footer-social a { font-size: 13.5px; font-weight: 600; color: var(--dim); transition: color 0.3s ease; }
.footer-social a:hover { color: var(--gold); }
.footer-title { font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--dim); font-weight: 650; margin-bottom: 20px; }
.footer-col { display: flex; flex-direction: column; gap: 10px; }
.footer-col a { color: var(--muted); font-size: 14.5px; transition: color 0.3s ease; width: fit-content; }
.footer-col a:hover { color: var(--text); }
.footer-phone { font-size: 21px !important; font-weight: 660; font-variation-settings: var(--wide); color: var(--text) !important; }
.footer-phone:hover { color: var(--fg-strong) !important; }
.footer-dim { color: var(--dim); font-size: 13px; }
.footer-map { font-size: 13px !important; color: var(--dim) !important; }
.footer-map:hover { color: var(--gold) !important; }
.addresses span { color: var(--muted); font-size: 14px; line-height: 1.55; }
.footer-bottom { border-top: 1px solid var(--line); padding: 22px 0; }
.footer-bottom .container { font-size: 16.1px; color: var(--dim); }
.footer-bottom-inner { display: flex; justify-content: space-between; align-items: baseline; gap: 14px 28px; flex-wrap: wrap; }
.footer-legal { display: flex; gap: 22px; flex-wrap: wrap; }
.footer-legal a { color: var(--dim); transition: color 0.3s ease; }
.footer-legal a:hover { color: var(--text); }

/* ---- typografický monument: obrí nápis useknutý spodnou hranou ---- */
.footer-monument {
  overflow: hidden;
  height: clamp(40px, 10.5vw, 168px);
  display: flex;
  justify-content: center;
  margin-top: clamp(28px, 5vh, 56px);
}
.footer-monument span {
  /* spodná hranica clampu drží celé slovo v šírke mobilu */
  font-size: clamp(64px, 18vw, 288px);
  font-weight: 680;
  font-variation-settings: var(--xwide);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1;
  white-space: nowrap;
  color: rgb(var(--fg-rgb) / 0.06);
  user-select: none;
  transform: translateY(4%);
}

/* ---- responsive ---- */
@media (max-width: 1100px) {
  .memoriam-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

/* Burger do 1200 px, nie do 900 (22. 8. 2026). Zmerané: deväť odkazov má
   spolu 865 px, plus logo a NON STOP tlačidlo. Lišta sa preto lámala na
   dva riadky až do 1366 px, teda aj na bežnom notebooku 1280 a na každom
   tablete naležato. Hlavička mala 112 px namiesto 82 a tlačila hero dole.
   Do 1200 px ide drawer, od 1201 je miesta dosť aj s rezervou.
   Rovnakú hranicu drží main.js (mega menu hover, GSAP matchMedia). */
@media (max-width: 1200px) {
  .nav-links {
    position: fixed;
    inset: 0;
    background: var(--bg);
    backdrop-filter: blur(18px);
    flex-direction: column;
    justify-content: flex-start;
    /* nowrap prebíja flex-wrap: wrap zo základu lišty. So zalamovaním sa
       položky pri pretečení skladali do druhého stĺpca mimo obrazovky
       namiesto toho, aby sa dal drawer odscrollovať. */
    flex-wrap: nowrap;
    gap: 8px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
    z-index: 90;
    /* Deväť položiek a CTA sa na nízkom displeji (alebo pri zväčšenom
       systémovom písme) nezmestia. Drawer je preto vlastný scroll port.
       overscroll-behavior drží gesto vnútri: bez neho sa scroll reťazí na
       dokument a stránka uteká pod otvoreným menu. */
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: calc(82px + env(safe-area-inset-top)) 24px calc(32px + env(safe-area-inset-bottom));
  }
  /* margin: auto namiesto justify-content: center — vycentruje, kým je miesto,
     a pri pretečení nechá dosiahnuť aj prvú a poslednú položku. */
  .nav-links > :first-child { margin-top: auto; }
  .nav-links > :last-child { margin-bottom: auto; }
  #site-nav.nav-open .nav-links { opacity: 1; pointer-events: auto; }
  /* Náznak, že sa drawer dá posunúť (22. 8. 2026). Na 360 px s rozbalenými
     službami končí okno uprostred položky „Kontakt“ a NON STOP tlačidlo je
     celé pod hranou, ale nič nehovorí, že tam niečo je. Pevný prechod do
     pozadia na spodnej hrane to povie. Je to samostatný prvok pod drawerom,
     nie pseudo-prvok drawera: ten scrolluje s obsahom a nedrží sa hrany.
     Zmizne, keď je drawer zavretý. */
  #site-nav::after {
    content: '';
    position: fixed;
    left: 0; right: 0;
    bottom: 0;
    height: 96px;
    background: linear-gradient(to bottom, rgb(var(--scrim-rgb) / 0), rgb(var(--scrim-rgb) / 0.92));
    pointer-events: none;
    z-index: 91;
    opacity: 0;
    transition: opacity 0.35s ease;
  }
  #site-nav.nav-open::after { opacity: 1; }
  /* 44 px dotyková plocha aj pri 19 px písme. Podčiarknutie aktívnej položky
     drží pri texte, inak by odskočilo na hranu paddingu. */
  /* min-width kvôli krátkym názvom: „O nás“ a „Šperky“ mali v draweri
     37 a 43 px šírky, hoci výšku 44 px spĺňali. Merané 22. 8. 2026. */
  .nav-link { font-size: 19px; padding: 11px 12px; min-width: 44px; text-align: center; background-position: left calc(100% - 11px); }
  .nav-links .nav-cta { margin-top: 18px; padding: 13px 20px; }
  .nav-burger { display: flex; position: relative; z-index: 95; }
  /* logo ostáva nad drawerom — cesta domov z otvoreného menu */
  .nav-logo { position: relative; z-index: 95; }
  #site-nav.nav-open .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  #site-nav.nav-open .nav-burger span:nth-child(2) { opacity: 0; }
  #site-nav.nav-open .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* mega menu v draweri: pás vypnutý, namiesto neho rozbaľovací zoznam skupín */
  .megamenu { display: none; }
  .nav-item { flex-wrap: wrap; justify-content: center; }
  .nav-sub-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; margin-left: 2px;
  }
  .nav-sub-toggle span {
    width: 9px; height: 9px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted);
    transform: rotate(45deg) translate(-1px, -1px); transition: transform 0.3s ease;
  }
  .nav-item.sub-open .nav-sub-toggle span { transform: rotate(225deg) translate(-2px, -2px); }
  .nav-sub { width: 100%; flex-direction: column; align-items: center; gap: 0; padding: 2px 0 8px; }
  .nav-item.sub-open .nav-sub { display: flex; }
  .nav-sub-link {
    display: inline-flex; align-items: center; min-height: 44px; padding: 4px 12px;
    font-size: 15.5px; color: var(--muted); transition: color 0.25s ease;
  }
  .nav-sub-link:hover { color: var(--text); }
}

@media (max-width: 900px) {
  .branch-grid { grid-template-columns: 1fr; }
  /* čísla na mobile: pod sebou, riadky delí hairline namiesto zvislých liniek */
  .stat-strip { grid-template-columns: 1fr; gap: 0; padding-top: 0; }
  .stat-rule { display: none; }
  .stat { padding: 18px 0; border-top: 1px solid var(--line); }
  .stat + .stat::before { display: none; }
  .stat-num { font-size: 34px; }
  .stat-note { max-width: none; }

  /* services: no pin on mobile — native horizontal swipe */
  .services-pin { min-height: 0; padding: 90px 0; }
  .services-track {
    width: auto;
    overflow-x: auto;
    padding-left: 24px;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .services-track::-webkit-scrollbar { display: none; }
  .svc { width: 300px; scroll-snap-align: start; }
}

@media (max-width: 560px) {
  .memoriam-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 36px; }
  .hero-actions { gap: 18px; }
}

/* ============================================================
   MotionSites luxury layer — glow, glass
   ============================================================ */

/* ---- ambientné glow orby ---- */
.orb {
  position: absolute;
  width: 46vw;
  height: 46vw;
  max-width: 720px;
  max-height: 720px;
  border-radius: 50%;
  pointer-events: none;
  /* bez filter: blur — radial-gradient je mäkký sám o sebe a blur(60px)
     nad celou plochou stál GPU nepretržitý výkon */
  opacity: 0.5;
  background: radial-gradient(circle, rgb(var(--fg-rgb) / 0.16), rgb(var(--fg-rgb) / 0.05) 45%, transparent 70%);
  animation: orbDrift 26s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes orbDrift {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(9vw, -6vh) scale(1.18); }
}
section { position: relative; }
section > .container, .services-pin > .container, .services-track, .services-progress, .cta-inner { position: relative; z-index: 1; }
/* orby musia zostať absolútne — nesmú vstúpiť do flex layoutu */
.orb, section .orb, .services-pin .orb { position: absolute; z-index: 0; }

/* ---- glassmorphism karty (prekrýva základné panely) ---- */
.svc, .branch-card, .memoriam-card {
  background: rgb(var(--fg-rgb) / 0.035);
  /* nižší blur = o polovicu lacnejší backdrop-filter pri horizontálnom pine */
  backdrop-filter: blur(8px) saturate(1.12);
  -webkit-backdrop-filter: blur(8px) saturate(1.12);
  border-color: rgb(var(--fg-rgb) / 0.09);
}
.svc:hover, .branch-card:hover, .memoriam-card:hover {
  background: rgb(var(--fg-rgb) / 0.055);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgb(var(--fg-rgb) / 0.08);
}
.nonstop-inner, .quote-inner { position: relative; z-index: 1; }

/* ---- shimmer na NON STOP telefóne (motív: upriamiť na kľúčovú akciu) ---- */
.phone-primary {
  background: linear-gradient(100deg, var(--gold) 40%, var(--fg-strong) 50%, var(--gold) 60%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 5.5s ease-in-out infinite;
}
@keyframes shimmer { 0%, 72% { background-position: 110% 0; } 88%, 100% { background-position: -60% 0; } }

/* ---- fallback bez priehľadnosti (a11y) ---- */
@media (prefers-reduced-transparency: reduce) {
  .svc, .branch-card, .memoriam-card {
    background: var(--panel);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* ---- 3D tilt kariet ---- */
.branch-grid, .memoriam-grid, .services-track { perspective: 1100px; }
.svc, .branch-card, .memoriam-card { transform-style: preserve-3d; }

/* ---- hero title chars ---- */
.hero h1 .word { display: inline-block; white-space: nowrap; }
.hero h1 .ch { display: inline-block; will-change: transform; }/* ============================================================
   Homepage — kniha, recenzie a ďalšie sekcie
   (pohyb robí kód nad statickými fotkami — žiadne video)
   ============================================================ */
/* ---- quote: Google badge ---- *//* ---- služby: kapitolové predely ---- */
@media (max-width: 900px) {
  /* mobil: vertikálny zoznam po kapitolách namiesto pásu */
  .services-track {
    flex-direction: column;
    width: auto;
    overflow: visible;
    padding-right: 24px;
    scroll-snap-type: none;
  }
  .svc { width: 100%; min-height: 0; padding: 22px 22px 52px; }
  .svc h3 { margin-top: 42px; }
}

/* ---- opustili nás: sviečka ----
   V2 „Svetlo sviečky" (výber z 21st variantov 20.7.2026): plamienok dýcha
   halo svetlom a púšťa iskierky tepla. Horí na kartách, kde sviečku zapálil
   ktokoľvek (.warm zo servera podľa počtu) alebo návštevník sám (.lit).
   Intenzita: heat2 = 3+ sviečok, heat3 = 10+. */
.memoriam-candle { height: 26px; display: grid; place-items: center; margin-top: 14px; position: relative; }
.memoriam-candle::before {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 44px; height: 44px;
  margin: -22px 0 0 -22px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245, 240, 225, 0.22), transparent 70%);
  opacity: 0;
  transition: opacity 0.8s ease;
}
.memoriam-card.lit .memoriam-candle::before,
.memoriam-card.warm .memoriam-candle::before { opacity: 1; animation: candleBreathe 4.4s ease-in-out infinite; }
.memoriam-card.heat2 .memoriam-candle::before { background: radial-gradient(circle, rgba(245, 240, 225, 0.34), transparent 70%); }
.memoriam-card.heat3 .memoriam-candle::before { background: radial-gradient(circle, rgba(245, 240, 225, 0.5), transparent 72%); width: 54px; height: 54px; margin: -27px 0 0 -27px; }
@keyframes candleBreathe {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.12); }
}
.memoriam-candle .spark {
  position: absolute;
  left: 50%; bottom: 6px;
  width: 2px; height: 2px;
  border-radius: 50%;
  background: rgba(245, 240, 225, 0.7);
  opacity: 0;
}
.memoriam-card.lit .memoriam-candle .spark,
.memoriam-card.warm .memoriam-candle .spark { animation: sparkRise 5.2s linear infinite; }
.memoriam-candle .spark:nth-child(2) { animation-delay: 1.7s; margin-left: -3px; }
.memoriam-candle .spark:nth-child(3) { animation-delay: 3.4s; margin-left: 3px; }
@keyframes sparkRise {
  0% { transform: translateY(0); opacity: 0; }
  12% { opacity: 0.8; }
  70% { opacity: 0.25; }
  100% { transform: translateY(-26px); opacity: 0; }
}
.memoriam-candle .flame {
  display: block;
  width: 7px; height: 12px;
  border-radius: 50% 50% 44% 44%;
  background: radial-gradient(circle at 50% 78%, var(--fg-strong) 0%, #cfcfcf 55%, rgba(207, 207, 207, 0) 100%);
  box-shadow: 0 0 12px 3px rgb(var(--fg-rgb) / 0.5);
  opacity: 0;
  transform: scaleY(0.4);
  transform-origin: 50% 100%;
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.memoriam-card.lit .flame,
.memoriam-card.warm .flame { opacity: 1; transform: scaleY(1); animation: flameFlicker 1.6s ease-in-out infinite alternate; }
.candle-btn { background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit; }
.memoriam-card.lit .candle-btn { color: var(--dim); cursor: default; }
@keyframes flameFlicker {
  0% { transform: scaleY(1) translateX(0); }
  55% { transform: scaleY(0.86) translateX(0.4px); }
  100% { transform: scaleY(1.04) translateX(-0.4px); }
}

/* ---- recenzie (tmavá sekcia, Page Theme Lock: celá stránka dark) ---- */
.reviews { background: var(--bg2); border-block: 1px solid var(--line); color: var(--text); padding: clamp(84px, 11vh, 150px) 0; }

/* ---- recenzie ako tri posúvajúce sa stĺpce (21st.dev testimonials-columns-1) ----
   Prevzaté z predlohy: hlavička max 540 px so štítkom v ráme, tri stĺpce
   s medzerou 24 px, trvanie 15 / 19 / 17 s, maska fade 25 % a 75 %,
   strop 740 px, karta 40 px vnútra a rádius 24 px.
   Obsah stĺpca je zdvojený a posúva sa o -50 %, čo je presne jedna sada
   vrátane koncovej medzery — preto padding-bottom rovný gapu. */
.rev-head {
  max-width: 540px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.rev-badge {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 5px 16px;
  font-size: 13.5px;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.rev-head h2 { margin-top: 20px; font-size: clamp(28px, 3.6vw, 46px); }
.rev-head p { margin-top: 20px; color: var(--muted); font-size: 18px; }

/* agregátne hodnotenie z Google (hviezdy = akcent, mono schéma) */
.rev-rating {
  margin-top: 18px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
}
.rev-stars { position: relative; font-size: 20px; letter-spacing: 3px; line-height: 1; }
.rev-stars-bg { color: var(--line); }
.rev-stars-fg {
  position: absolute;
  inset: 0;
  width: var(--fill, 100%);
  overflow: hidden;
  white-space: nowrap;
  color: var(--gold);
}
.rev-rating b { font-size: 16.5px; font-weight: 650; }
.rev-rating i { font-style: normal; color: var(--muted); font-size: 16.5px; }
.rev-rating:hover i { color: var(--gold); }

.rev-cols {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-top: 40px;
  max-height: 740px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 25%, #000 75%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 25%, #000 75%, transparent);
}
.rev-col > div {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-bottom: 24px;
  animation: revScroll var(--rev-dur, 15s) linear infinite;
}
.rev-col:nth-child(2) > div { --rev-dur: 19s; }
.rev-col:nth-child(3) > div { --rev-dur: 17s; }
.rev-cols:hover .rev-col > div { animation-play-state: paused; }
@keyframes revScroll { to { transform: translateY(-50%); } }

/* pozor: .rev-card je obsadené komponentom Review.astro nižšie v tomto
   súbore, preto .revcol-card */
.revcol-card {
  width: 100%;
  max-width: 320px;
  padding: 40px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--panel);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}
.revcol-card p { font-size: 17px; line-height: 1.62; }
.revcol-card footer { display: flex; align-items: center; gap: 8px; margin-top: 20px; }
.rev-g { width: 40px; height: 40px; flex-shrink: 0; }
.revcol-card footer span { display: flex; flex-direction: column; }
.revcol-card footer b { font-weight: 640; line-height: 1.25; }
.revcol-card footer i { font-style: normal; line-height: 1.3; color: var(--muted); font-size: 15px; }

/* predloha skrýva druhý stĺpec pod md a tretí pod lg */
@media (max-width: 1024px) { .rev-col:nth-child(3) { display: none; } }
@media (max-width: 860px) { .rev-col:nth-child(2) { display: none; } }
/* Nekonečné animácie mimo okna stoja (22. 8. 2026). Triedu .anim-off
   nasadzuje main.js cez IntersectionObserver, keď je prvok ďalej než
   200 px od okna. Pravidlo chytá prvok aj jeho potomkov, lebo pri rail
   recenzií beží animácia na .rev-col > div, nie na .rev-col. Pri návrate
   do okna sa animácia rozbehne tam, kde stála, takže skok nevidno. */
.anim-off, .anim-off * { animation-play-state: paused !important; }

@media (prefers-reduced-motion: reduce) {
  .rev-cols { max-height: none; overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .rev-col > div { animation: none; }
  /* bez posunu netreba duplikát sady */
  .rev-col > div > .revcol-card[aria-hidden='true'] { display: none; }
}


/* ============================================================
   Podstránky — subhero, príbeh, prvenstvá, foto pás
   ============================================================ */
.subhero { position: relative; min-height: 72vh; display: flex; align-items: flex-end; overflow: hidden; }/* Fotka doznieva do PLNÉHO scrimu, nie do 0.86. Pri 0.86 zostal spodný pás
   fotky svetlejší než sekcia pod ňou a na hrane bol ostrý sek. Stopy medzi
   42 % a koncom sú tri, nie jedna: jeden lineárny úsek na tej dĺžke pásikuje. */
.subhero h1 { font-size: clamp(35px, 5.15vw, 69.9px); line-height: 1.05; font-weight: 680; font-variation-settings: var(--wide); letter-spacing: 0.018em; }

.story { background: var(--bg); padding: clamp(84px, 11vh, 150px) 0; }
.story-text .gold-line { margin: 22px 0 26px; }

.firsts { background: var(--bg2); border-block: 1px solid var(--line); padding: clamp(84px, 11vh, 150px) 0; }
.firsts-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.first-card { border: 1px solid var(--line); border-radius: 18px; background: var(--panel); padding: 28px 26px; }
.first-card h3 { font-size: 19px; }
.first-card p { margin-top: 10px; color: var(--muted); font-size: 17.4px; line-height: 1.6; }
.firsts-note { margin-top: 40px; color: var(--dim); font-size: 17.4px; max-width: 60ch; }

.fleetband { position: relative; min-height: 56vh; display: flex; align-items: center; overflow: hidden; }
.fleetband-media { position: absolute; inset: 0; }
/* rezerva na parallax, rovnako ako album pásy vyššie na stránke */
.fleetband-media > span { position: absolute; inset: -9% 0; display: block; }
.fleetband-media img { width: 100%; height: 100%; object-fit: cover; }
/* Scrim bol len vodorovný, takže spodná hrana ukazovala fotku na 0.2 až 0.78
   a narážala do sekcie pod ňou. Zvislá vrstva navrchu ju dovedie do plného
   scrimu. Obsah je vertikálne centrovaný (align-items: center), takže rampa
   od 64 % mu nesiaha do textu. */
.fleetband-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgb(var(--scrim-rgb) / 0) 64%,
      rgb(var(--scrim-rgb) / 0.5) 85%,
      rgb(var(--scrim-rgb) / 0.85) 95%,
      rgb(var(--scrim-rgb)) 100%),
    linear-gradient(90deg, rgb(var(--scrim-rgb) / 0.78), rgb(var(--scrim-rgb) / 0.2) 65%);
}
.fleetband-content { position: relative; z-index: 1; }
.fleetband-content h2 { font-size: clamp(28px, 3.6vw, 48px); max-width: 14ch; }
.fleetband-content p { margin-top: 16px; color: rgb(var(--fg-rgb) / 0.8); max-width: 46ch; font-size: 19.2px; }

@media (max-width: 900px) {
  .firsts-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .firsts-grid { grid-template-columns: 1fr; }
}

/* ---- podstránky: typografická hlavička (Kontakt, Opustili nás, Aktuality) ---- */
.page-head { background: var(--bg); padding: clamp(225px, 30vh, 330px) 0 clamp(75px, 10.5vh, 120px); }
.page-head h1 { font-size: clamp(35px, 4.78vw, 66.2px); line-height: 1.05; font-weight: 680; font-variation-settings: var(--wide); letter-spacing: 0.018em; }
.page-head-lead { margin-top: 18px; max-width: 56ch; color: var(--muted); font-size: clamp(18.6px, 1.74vw, 22.3px); line-height: 1.7; }

/* ---- podstránky: skupiny služieb ---- */
.svcgroups { background: var(--bg); padding: clamp(68px, 9vh, 115px) 0 clamp(84px, 11vh, 150px); }
.svcgroup + .svcgroup { margin-top: clamp(70px, 9vh, 110px); }
.svcgroup-head { margin-bottom: 36px; }
.svcgroup-head h2 { font-size: clamp(24px, 2.8vw, 36px); }
.svcgroup-head .gold-line { margin-top: 18px; }
.svcgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.svcgrid .first-card h3 { font-size: 20px; }

/* ---- podstránky: sprievodca pre pozostalých ---- */
.guide { background: var(--bg); padding: clamp(135px, 18vh, 225px) 0; }
.guide + .guide { padding-top: 0; }
/* Tretí stĺpec je ikona. Telo dostáva minmax(0, 74ch), aby sa text držal
   svojej miery a ikona sadla hneď za neho, nie na pravý okraj obrazovky.
   Bez minmax(0, ...) by 1fr odmietlo zmenšiť telo pod jeho obsah a ikona
   by na užšom okne vytlačila mriežku z kontajnera. */
.step { display: grid; grid-template-columns: clamp(70px, 9vw, 120px) minmax(0, 74ch) 1fr; gap: clamp(20px, 4vw, 56px); padding: clamp(40px, 6vh, 64px) 0; border-top: 1px solid var(--line); scroll-margin-top: 90px; align-items: center; }

/* Ikona kroku: vlasová linka, sotva viditeľná. Sprevádza text, nekričí.
   currentColor dedí farbu textu, takže sedí do tmavej tóniny sama od seba. */
.step-ikona {
  width: clamp(96px, 11vw, 150px);
  height: auto;
  justify-self: center;
  color: var(--text);
  /* 0.085 bolo pri prvom pokuse tak málo, že ikona na bežnom monitore
     zanikla. 0.18 ju nechá vidieť ako tichý vodoznak a text ju stále
     prehlušuje. */
  opacity: 0.18;
  overflow: visible;
}
/* Odhalenie so scrollom: ikona dobehne o chlp neskôr než text kroku,
   aby sa oko najprv chytilo nadpisu. */
.step[data-reveal] .step-ikona { transition: opacity 0.9s ease 0.15s; }

/* Na užšom okne ikona nemá kam ísť: buď by stlačila text pod jeho mieru,
   alebo by visela nad ním ako nepochopiteľná dekorácia. Preto mizne
   a mriežka sa vracia na dva stĺpce.
   Pravidlo musí stáť PRED blokom @media (max-width: 560px), ktorý dáva
   .step jeden stĺpec — inak by ho pri rovnakej špecificite prebilo. */
@media (max-width: 900px) {
  .step { grid-template-columns: clamp(70px, 9vw, 120px) minmax(0, 1fr); align-items: start; }
  .step-ikona { display: none; }
}
.step:last-child { border-bottom: 1px solid var(--line); }
.step-num { font-size: clamp(40px, 5vw, 68px); font-weight: 680; font-variation-settings: var(--wide); color: var(--dim); line-height: 1; }
.step-body h3 { font-size: clamp(22px, 2.4vw, 30px); }
.step-body p { margin-top: 14px; color: var(--muted); font-size: 20.5px; line-height: 1.75; max-width: 66ch; }
.step-body ul { margin-top: 14px; padding: 0; list-style: none; }
.step-body li { position: relative; padding: 9px 0 9px 26px; color: var(--muted); font-size: 19.8px; line-height: 1.6; max-width: 64ch; }
.step-body li::before { content: ''; position: absolute; left: 2px; top: 17px; width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--gold); }
.step-note { margin-top: 16px; color: var(--dim); font-size: 17.4px; font-style: italic; max-width: 62ch; }
.step-tel { display: inline-block; margin-top: 16px; font-size: clamp(22px, 2.4vw, 30px); font-weight: 660; font-variation-settings: var(--wide); color: var(--gold); }
.step-tel:hover { color: var(--fg-strong); }

/* ---- podstránky: kontakt ---- */
.contact-phones { display: flex; flex-wrap: wrap; gap: clamp(30px, 6vw, 90px); margin-top: clamp(36px, 6vh, 60px); }
.cp-label { font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--dim); }
.cp-num { display: block; margin-top: 10px; font-size: clamp(34px, 4.4vw, 62px); font-weight: 680; font-variation-settings: var(--wide); color: var(--gold); letter-spacing: -0.01em; transition: color 0.3s ease; }
.cp-num:hover { color: var(--fg-strong); }
.contact-mail { display: inline-block; margin-top: clamp(28px, 5vh, 44px); font-size: clamp(17px, 1.8vw, 22px); color: var(--muted); border-bottom: 1px solid var(--line); padding-bottom: 4px; transition: color 0.3s ease; }
.contact-mail:hover { color: var(--gold); }
/* ---- kontakt: prvé dve sekcie vedľa seba ----
   Telefóny a formulár stáli pod sebou a mali spolu 2072 px, čiže formulár
   nikto neuvidel bez scrollovania. Teraz sú to dva stĺpce jedného bloku,
   ktorý sa zmestí na prvú obrazovku. Pobočky a fakturačné údaje ostávajú
   samostatné sekcie pod tým, tie sa doscrollujú.

   Horný padding drží odstup od fixnej navigácie (77 px), ale je menší než
   .page-head na ostatných podstránkach; tam nadpis dýcha, tu má na tú istú
   obrazovku sadnúť aj formulár. */
.contact-top { background: var(--bg); padding: clamp(98px, 11.5vh, 142px) 0 clamp(30px, 4vh, 52px); }
.ct-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(34px, 5vw, 84px);
  align-items: start;
}
.ct-left h1 { font-size: clamp(32px, 3.4vw, 52px); line-height: 1.05; font-weight: 680; font-variation-settings: var(--wide); letter-spacing: 0.018em; }
.ct-lead { margin-top: 16px; max-width: 46ch; color: var(--muted); font-size: clamp(17px, 1.4vw, 19.5px); line-height: 1.65; }
/* v polovičnom stĺpci by pôvodných až 62 px telefón zalomilo */
.contact-top .contact-phones { gap: clamp(24px, 3vw, 48px); margin-top: clamp(22px, 3vh, 36px); }
.contact-top .cp-num { font-size: clamp(28px, 2.7vw, 44px); margin-top: 8px; }
.contact-top .contact-mail { margin-top: clamp(16px, 2vh, 26px); }

.ct-form-panel {
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--panel);
  padding: clamp(22px, 2.4vw, 34px);
}
.ct-form-title { font-size: clamp(21px, 1.9vw, 27px); }
.ct-form-lead { margin-top: 8px; color: var(--muted); font-size: 16px; line-height: 1.6; }
.ct-form-panel .contact-form { margin-top: clamp(18px, 2.2vh, 26px); }

/* Nízke notebooky: pri 768 px výšky vh clampy narazia na svoje spodné hranice
   a blok presiahol prvú obrazovku o 35 px. Uberá sa tam, kde to nevidno:
   odstup od navigácie a vnútro panela formulára. */
@media (min-width: 901px) and (max-height: 800px) {
  .contact-top { padding-top: 86px; padding-bottom: 22px; }
  .ct-form-panel { padding: 24px; }
  .ct-form-panel .contact-form { margin-top: 16px; }
}

@media (max-width: 900px) {
  .ct-grid { grid-template-columns: 1fr; gap: clamp(28px, 4.5vh, 44px); }
}

.billing { background: var(--bg2); border-block: 1px solid var(--line); padding: clamp(105px, 13.5vh, 165px) 0; }
.billing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.bill-item .label { font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--dim); margin-bottom: 10px; }
.bill-item p { color: var(--muted); font-size: 19.2px; line-height: 1.7; }

/* ---- newsroom band (zdieľaná hlavička: aktuality, opustili nás) ---- */
/* Tmavý band so zaobleným spodkom (pattern podľa Jeton): tvar oddeľuje
   hlavičku od obsahu, plochu nesie jemný nános dokumentového svetla
   (rovnaká miera ako sekcie s --bg2) orámovaný hairline linkou. */
.news-hero { border: 1px solid var(--line); border-top: 0; border-radius: 0 0 32px 32px; padding: clamp(150px, 18vh, 200px) 0 clamp(48px, 7vh, 76px); }
/* jednotná výška bandu na všetkých stránkach: min-height podľa najvyššieho
   obsahu (4-riadkový titulok), obsah kotví dole. Na mobile tečie prirodzene. */
@media (min-width: 761px) {
  .news-hero { display: flex; flex-direction: column; justify-content: flex-end; }
  /* vysoku jednotnu vysku drzia fotkove bandy (fotka priestor vyuzije),
     textove bandy (aktuality, opustili nas) su kratsie s vlastnou
     jednotnou vyskou, nech nad textom nestoji prazdna plocha */
  .news-hero.has-photo { min-height: clamp(650px, 56vw, 664px); }
  .news-hero:not(.has-photo) { min-height: clamp(424px, 31.5vw, 440px); padding-top: clamp(120px, 15vh, 150px); }
  .news-hero > .container { width: min(1240px, calc(100% - 48px)); }
}
/* chipový rad sekcie zakomponovaný do bandu (situ pattern) */
.news-hero-chips { margin-top: 24px; position: relative; z-index: 1; }
/* ciele kotiev z bandu potrebujú odstup od fixného menu */
/* #sluzby chýbalo: pri priamom vstupe s hashom (bez JS, alebo z výsledku
   vyhľadávania) skok skončil pod 82 px lištou. */
#pribeh, #tim, #pobocky, #vozidla, #limuzina, #sluzby { scroll-margin-top: 90px; }
/* pravidlo "main > section[class]" maľuje sekcie transparentne — band si
   svoj nános svetla musí vybojovať špecificitou */
main > section.news-hero { background-color: rgb(var(--fg-rgb) / 0.03); }
/* jednotná veľkosť titulku na všetkých bandoch: 68 px strop drží dlhé
   titulky v dvoch riadkoch a s chipmi neprerastá jednotnú výšku */
.news-hero h1 { font-size: clamp(40px, 4.9vw, 68px); font-weight: 680; line-height: 1.06; letter-spacing: -0.01em; font-variation-settings: var(--wide); }
.news-hero-inner { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 40px; }
/* fotkový band nesie len eyebrow + titulok, lead je preč (text na fotke
   sa nedal spoľahlivo udržať čitateľný pri každom obrázku) */
.news-hero.has-photo .news-hero-inner { grid-template-columns: 1fr; }
.news-hero-lead { max-width: 32ch; font-size: clamp(15.5px, 1.3vw, 18px); line-height: 1.65; color: var(--muted); padding-bottom: 8px; }
/* fotková verzia bandu: hero fotka stránky pod tmavým scrimom, tvar a rám
   bandu ostávajú. Text je vždy biely nad scrimom (--scrim-rgb). */
/* Fotkovy band bez ramu. Makky tien pod bandom stlmi dokumentove svetlo
   (pagelight) pri spodnej hrane: nepriehladna fotka svetlo zakryva a bez
   tiena sa pod hranou objavovalo naraz — pri lavom rohu ako sivy flek. */
.news-hero.has-photo { position: relative; overflow: visible; border: 0; box-shadow: 0 8px 18px -4px rgb(var(--scrim-rgb) / 0.7), 0 34px 70px -12px rgb(var(--scrim-rgb) / 0.65); }
.news-hero.has-photo .nh-media { border-radius: 0 0 32px 32px; overflow: hidden; }
.news-hero.has-photo .nh-media { position: absolute; inset: 0; z-index: 0; }
.news-hero.has-photo .nh-media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.5) brightness(0.62); }
/* Zaoblený roh kreslí svetlá linka po spodnej hrane: v rohoch sa zatočí
   a skončí, takže tvar je čitateľný aj na tmavej fotke a po bokoch
   nevzniká zvislý sivý chvost ako pri plnom ráme. */
.news-hero.has-photo .nh-media::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 -1px 0 rgb(var(--fg-rgb) / 0.22); background:
  linear-gradient(90deg, rgb(var(--scrim-rgb) / 0.85) 0%, rgb(var(--scrim-rgb) / 0.5) 55%, rgb(var(--scrim-rgb) / 0.3) 100%),
  linear-gradient(0deg, rgb(var(--scrim-rgb) / 0.5) 0%, rgb(var(--scrim-rgb) / 0) 40%); }
.news-hero.has-photo .news-hero-inner { position: relative; z-index: 1; }

.news { background: var(--bg); padding: 0 0 clamp(84px, 11vh, 150px); }
.news-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding: clamp(48px, 7vh, 76px) 0 38px; }
.news-head h2 { font-size: clamp(24px, 2.8vw, 36px); font-weight: 650; font-variation-settings: var(--wide); letter-spacing: -0.01em; }

/* karty bez rámu: fotka so zaobleniami a tagom na sebe, text pod ňou */
.news-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px 24px; }
.news-card { display: flex; flex-direction: column; }
.news-card.hidden { display: none; }
.news-photo { position: relative; height: 180px; flex: none; border-radius: 16px; overflow: hidden; background-size: cover; background-position: center; filter: saturate(0.5) brightness(0.72); transition: filter 0.5s ease, transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1); }
/* Fotka karty je teraz <img> z astro:assets, nie CSS pozadie — mobil tak
   dostane vlastnú veľkosť cez srcset namiesto desktopovej. */
.news-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.news-card:hover .news-photo { filter: saturate(0.85) brightness(0.85); transform: translateY(-4px); }
.news-photo .news-tag { position: absolute; top: 12px; right: 12px; margin: 0; background: var(--gold); color: var(--on-accent); border: 0; filter: none; }
.news-card-body { display: flex; flex-direction: column; flex: 1; padding: 16px 2px 0; }
.news-card h3 { font-size: 18px; font-variation-settings: var(--wide); line-height: 1.32; }
.news-date { margin-top: 8px; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); }
.news-card p { margin-top: 10px; color: var(--muted); font-size: 14.5px; line-height: 1.6; flex: 1; }
.news-card .news-go { margin-top: 12px; }
/* karta s vlastným článkom je klikateľná celá (stretched link) */
.news-card.has-detail { position: relative; }
.news-card-link { color: inherit; }
.news-card-link::after { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: 16px; }
.news-card.has-detail:hover h3 { color: var(--fg-strong); }
.news-card.has-detail:hover .news-go { color: var(--fg-strong); }

/* ---- zdieľanie (variant C, 30. 7. 2026): parte aj články ----
   Ikony sú monochrómne hairline, žiadne firemné farby platforiem. */
.zdielanie { padding: 30px 28px; background: var(--panel); border: 1px solid var(--line); border-radius: 20px; }
.zd-label { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--dim); font-weight: 600; margin-bottom: 8px; }
.zdielanie h2 { font-size: 22px; font-weight: 650; font-variation-settings: var(--wide); }
.zd-sub { margin-top: 8px; color: var(--muted); font-size: 15px; max-width: 48ch; }
.zd-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.zd-btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 18px; font: inherit; font-size: 14px;
  color: var(--muted); background: none;
  border: 1px solid var(--line); border-radius: 999px;
  cursor: pointer; transition: border-color 0.3s ease, color 0.3s ease;
}
.zd-btn:hover { border-color: rgb(var(--fg-rgb) / 0.4); color: var(--text); }
.zd-btn svg { width: 16px; height: 16px; flex: none; }
.zd-btn[hidden] { display: none; }
.zd-primary { background: var(--gold); color: var(--on-accent); border-color: var(--gold); font-weight: 650; }
.zd-primary:hover { background: var(--fg-strong); border-color: var(--fg-strong); color: var(--on-accent); }
.zd-copy.is-done { border-color: rgb(var(--fg-rgb) / 0.4); color: var(--text); }
.clanok .zdielanie { margin-top: 44px; }

/* verzia priamo na fotke (spodok fixného panela parte): bez karty,
   kompaktnejšia, text stojí na zosilnenom scrime fotky */
.zd-na-fotke { position: absolute; left: 0; right: 0; bottom: clamp(26px, 4vh, 44px); z-index: 2; padding: 0 clamp(20px, 2.4vw, 34px); background: none; border: 0; text-align: center; }
.zd-na-fotke .zd-label { margin-bottom: 6px; }
.zd-na-fotke h2 { font-size: 17px; }
.zd-na-fotke .zd-sub { margin: 6px auto 0; font-size: 13.5px; max-width: 40ch; }
.zd-na-fotke .zd-row { justify-content: center; gap: 8px; margin-top: 14px; }
.zd-na-fotke .zd-btn { padding: 9px 15px; font-size: 13px; background: rgb(var(--scrim-rgb) / 0.4); backdrop-filter: blur(6px); }
.zd-na-fotke .zd-btn svg { width: 15px; height: 15px; }
.zd-na-fotke .zd-primary { background: var(--gold); }

/* ---- detail článku (variant V3, 30. 7. 2026) ---- */
.clanok-back { display: inline-block; margin-bottom: 18px; font-size: 13.5px; letter-spacing: 0.06em; color: var(--dim); transition: color 0.3s ease; }
.clanok-back:hover { color: var(--gold); }
.news-hero .clanok-meta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 22px; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); }
.news-hero .clanok-meta .news-tag { margin: 0; }
.clanok { width: min(720px, calc(100% - 48px)); margin: 0 auto; padding: clamp(50px, 7vh, 80px) 0 0; }
.clanok-lead { font-size: clamp(19px, 1.7vw, 22px); line-height: 1.65; color: var(--text); margin-bottom: 32px; }
.clanok p { font-size: 17.5px; line-height: 1.85; margin-bottom: 22px; color: rgb(var(--fg-rgb) / 0.84); }
.clanok h2 { font-size: clamp(21px, 2vw, 28px); font-weight: 650; font-variation-settings: var(--wide); margin: 42px 0 14px; }
.clanok-zoznam { margin: 0 0 22px; padding-left: 22px; }
.clanok-zoznam li { font-size: 17.5px; line-height: 1.8; margin-bottom: 10px; color: rgb(var(--fg-rgb) / 0.84); }
.clanok-zoznam li::marker { color: var(--dim); }
.clanok-cta { margin: 44px 0 0; padding: 30px 28px; background: var(--panel); border: 1px solid var(--line); border-radius: 20px; }
.clanok-cta h2 { margin: 0; font-size: 22px; }
.clanok-cta p { margin-top: 8px; color: var(--muted); font-size: 15.5px; }
.clanok-cta .btn-gold { margin-top: 18px; }
.clanok-dalsie { padding: clamp(56px, 8vh, 90px) 0 clamp(80px, 12vh, 140px); }
.clanok-dalsie h2 { font-size: clamp(22px, 2.2vw, 30px); font-weight: 650; font-variation-settings: var(--wide); margin-bottom: 26px; }
.clanok-dalsie .news-card h3 a { color: inherit; }
.clanok-dalsie .news-card:hover h3 a { color: var(--fg-strong); }
@media (max-width: 1100px) { .news-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) { .news-hero-inner { grid-template-columns: 1fr; } .news-hero-lead { padding-bottom: 0; } }

/* ---- podstránky: opustili nás ---- */
.memorial-note { margin-top: 44px; color: var(--dim); font-size: 17.4px; max-width: 62ch; }
/* Klikateľná je celá karta: odkaz sa cez ::after roztiahne na jej plochu
   (stretched-link pattern). Tlačidlo sviečky a druhý odkaz sedia nad ním
   vďaka z-index na .memoriam-links, takže ostávajú funkčné. */
.memoriam-link { display: block; color: inherit; }
.memoriam-link::after { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.memoriam-link:hover h3, .memoriam-card:hover .memoriam-link h3 { color: var(--fg-strong); }

/* ---- parte detail: fixná fotka + tichá svieca (B3, 29. 7. 2026) ----
   Ľavý panel je position:fixed — fotka so sviecou sa nikdy nescrolluje,
   scrolluje len pravý stĺpec s informáciami. Panel leží na fotografii,
   preto drží tmavé tokeny v oboch témach (rovnaký princíp ako .subhero).
   Kontrakt pre candles.js sa nemení: .phero[data-slug], #phero-light,
   .phero-count a trieda .lit. */
.phero {
  position: fixed; inset: 0 auto 0 0; width: 44%;
  height: 100vh; height: 100dvh; z-index: 5;
  --fg-rgb: 245 245 245;
  --bg: #0c0d0f; --bg2: #111214;
  --text: #f5f5f5; --fg-strong: #ffffff; --gold: #f5f5f5;
  --line: rgb(var(--fg-rgb) / 0.08);
  --muted: rgb(var(--fg-rgb) / 0.68); --dim: rgb(var(--fg-rgb) / 0.50);
  --gold-soft: rgb(var(--fg-rgb) / 0.55);
  background: var(--bg2);
}
.phero-media { position: relative; height: 100%; overflow: hidden; border-right: 1px solid var(--line); }
.phero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; filter: grayscale(1) brightness(0.86) contrast(1.03); }
/* bez fotky: iniciály na radiálnom gradiente (memoriam pattern vo veľkom) */
.phero-initials { height: 100%; display: grid; place-items: center; background: radial-gradient(circle at 50% 38%, #22242a, #131418 70%); font-size: clamp(120px, 15vw, 220px); font-weight: 680; font-variation-settings: var(--wide); color: rgb(var(--fg-rgb) / 0.14); user-select: none; }
/* scrim: hore pre nav a šípku späť, dole pre sviecu — vždy tmavý (--scrim-rgb) */
/* spodný scrim je zosilnený a siaha vyššie: nesie sviecu aj blok zdieľania */
.phero-media::after { content: ''; position: absolute; inset: 0; pointer-events: none; background:
  linear-gradient(270deg, rgb(var(--scrim-rgb) / 0.5) 0%, rgb(var(--scrim-rgb) / 0.1) 18%, rgb(var(--scrim-rgb) / 0) 42%),
  linear-gradient(180deg, rgb(var(--scrim-rgb) / 0.55) 0%, rgb(var(--scrim-rgb) / 0) 22%),
  linear-gradient(0deg, rgb(var(--scrim-rgb) / 0.94) 0%, rgb(var(--scrim-rgb) / 0.82) 22%, rgb(var(--scrim-rgb) / 0.45) 42%, rgb(var(--scrim-rgb) / 0) 62%); }
.parte-back { position: absolute; z-index: 3; top: 104px; left: clamp(24px, 4vw, 64px); font-size: 13.5px; letter-spacing: 0.06em; color: var(--dim); transition: color 0.3s ease; }
.parte-back:hover { color: var(--gold); }

/* tichá svieca (V2 z výberu 29. 7. 2026). Od 30. 7. sedí tesne nad blokom
   zdieľania: --zd-top je vzdialenosť vrchu bloku od spodku panela, počíta
   ju skript v Zdielanie.astro. Fallback drží rozumnú polohu aj bez JS. */
.phero-candle { position: absolute; left: 50%; bottom: calc(var(--zd-top, 170px) + clamp(18px, 2.6vh, 30px)); transform: translateX(-50%); z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit; color: var(--muted); }
.phero-halo { position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); width: 160px; height: 160px; border-radius: 50%; background: radial-gradient(circle, rgb(var(--fg-rgb) / 0.22) 0%, rgb(var(--fg-rgb) / 0.07) 42%, transparent 70%); opacity: 0; transition: opacity 0.6s ease; pointer-events: none; }
.phero-flame { display: block; width: 11px; height: 17px; margin-bottom: 2px; background: radial-gradient(50% 65% at 50% 70%, var(--fg-strong) 0%, rgb(var(--fg-rgb) / 0.85) 40%, transparent 75%); border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%; animation: pheroFlick 2.2s ease-in-out infinite alternate; opacity: 0.3; transition: opacity 0.4s ease, filter 0.4s ease; }
@keyframes pheroFlick { from { transform: scale(1); } to { transform: scale(1.14); } }
.phero-wick { display: block; width: 1.5px; height: 7px; background: rgb(var(--fg-rgb) / 0.5); }
.phero-body { display: block; width: 9px; height: 34px; border-radius: 4px 4px 2px 2px; background: linear-gradient(180deg, #f5f5f5 0%, rgb(245 245 245 / 0.75) 100%); box-shadow: 0 1px 6px rgb(var(--scrim-rgb) / 0.5); }
.phero-label { display: block; margin-top: 14px; font-size: 11.5px; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 600; transition: color 0.3s ease; }
.phero-candle:hover .phero-label { color: var(--text); }
.phero.lit .phero-candle { cursor: default; }
.phero-label .on { display: none; }
.phero.lit .phero-label .off { display: none; }
.phero.lit .phero-label .on { display: inline; }
.phero.lit .phero-halo { opacity: 1; }
.phero.lit .phero-flame { opacity: 1; filter: drop-shadow(0 0 10px rgb(var(--fg-rgb) / 0.6)); }
.phero .phero-sviecky { margin-top: 5px; min-height: 18px; }
.phero .phero-count { font-size: 12.5px; letter-spacing: 0.04em; }

/* pravý scrollovací stĺpec */
.parte-content { margin-left: 44%; max-width: calc(44% + 820px); padding: 150px clamp(28px, 6vw, 96px) 60px; }
.parte-content .eyebrow { margin-bottom: 22px; }
.parte-content h1 { font-size: clamp(38px, 4.6vw, 68px); line-height: 1.08; font-weight: 640; font-variation-settings: var(--wide); letter-spacing: -0.01em; margin-bottom: 34px; }
.parte-rows { border-top: 1px solid var(--line); margin-bottom: 44px; }
.parte-row { display: grid; grid-template-columns: 150px 1fr; gap: 18px; padding: 15px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.parte-row .label { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--dim); }
.parte-row .value { font-size: 16.5px; }
.parte-verse { max-width: 46ch; margin-bottom: 52px; }
.parte-verse p { font-size: 17.5px; line-height: 1.65; color: var(--muted); }
.parte-verse-author { margin-top: 10px; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--dim); }

/* karty: rozlúčka, kondolencia */
.parte-card { background: var(--panel); border: 1px solid var(--line); border-radius: 20px; padding: 30px 28px; margin-bottom: 22px; transition: border-color 0.3s ease; }
.parte-card:hover { border-color: rgb(var(--fg-rgb) / 0.4); }
.parte-card-label { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 600; color: var(--dim); margin-bottom: 18px; }
.parte-konala { color: var(--muted); font-size: 17px; margin-bottom: 6px; }
.parte-when { font-size: clamp(22px, 2.4vw, 30px); font-weight: 640; font-variation-settings: var(--wide); line-height: 1.2; }
.parte-card-rows { margin-top: 22px; border-top: 1px solid var(--line); }
.parte-card-row { display: grid; grid-template-columns: 96px 1fr; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.parte-card-row:last-child { border-bottom: 0; }
.parte-card-row .k { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--dim); }
.parte-card-row .v { font-size: 16px; }
.parte-card-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 20px; }
.parte-pill { display: inline-block; border: 1px solid var(--line); border-radius: 999px; padding: 11px 20px; font-size: 13.5px; color: var(--muted); background: none; cursor: pointer; font-family: inherit; text-decoration: none; transition: border-color 0.3s ease, color 0.3s ease; }
.parte-pill:hover { border-color: rgb(var(--fg-rgb) / 0.4); color: var(--text); }
.parte-kond-list { margin: 64px 0 22px; }
.parte-kond-list h2 { font-size: clamp(24px, 3vw, 32px); font-weight: 650; font-variation-settings: var(--wide); margin-bottom: 28px; }
.pcond-note { margin-top: 22px; color: var(--dim); font-size: 15px; max-width: 56ch; }

/* footer beží v plnej šírke: pri doscrollovaní sa nasunie ponad fixný
   panel s fotkou (z-index nad panelom, nepriehľadné pozadie má vlastné) */
#parte-main .site-footer { position: relative; z-index: 6; }

/* nav leží nad tmavým fixným panelom — podklad potrebuje hneď, nie až po
   scrolle (rovnaký princíp ako .page-light #site-nav na šperkoch)

   POZOR: sem nepatrí backdrop-filter. Bol tu blur(14px) a rozbíjal mobilné
   menu práve a len na parte stránkach. backdrop-filter robí z prvku
   containing block pre position: fixed potomkov, takže drawer .nav-links
   (fixed, inset: 0) sa neroztiahol na viewport, ale na box lišty: 114 px
   namiesto 844. Bolo vidno prvú položku a zvyšok menu ostal pod fotkou.
   Navyše bol neviditeľný, --nav-bg je nepriehľadné. To isté platí pre
   transform, filter, perspective, contain a will-change. */
body:has(#parte-main) #site-nav { background: var(--nav-bg); box-shadow: 0 1px 0 var(--line); }

@media (max-width: 900px) {
  /* na mobile je fotka hore v normálnom toku, svieca je jej súčasťou */
  .phero { position: relative; inset: auto; width: 100%; height: auto; }
  .phero-media { height: 62vh; border-right: 0; border-bottom: 1px solid var(--line); }
  .phero-initials { font-size: clamp(96px, 30vw, 160px); }
  /* na mobile ostáva na fotke len svieca, zdieľanie klesne pod ňu ako karta:
     inak by blok prekryl tvár na portréte */
  .phero-candle { bottom: 22px; }
  .zd-na-fotke {
    position: static; padding: 26px 24px; margin: 24px clamp(20px, 5vw, 28px) 0;
    background: var(--panel); border: 1px solid var(--line); border-radius: 20px; text-align: left;
  }
  .zd-na-fotke h2 { font-size: 20px; }
  .zd-na-fotke .zd-sub { margin-left: 0; margin-right: 0; font-size: 14.5px; }
  .zd-na-fotke .zd-row { justify-content: flex-start; }
  .zd-na-fotke .zd-btn { background: none; backdrop-filter: none; }
  .zd-na-fotke .zd-primary { background: var(--gold); color: var(--on-accent); }
  .parte-back { top: 92px; }
  .parte-content { margin-left: 0; max-width: none; padding-top: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  .phero-flame { animation: none; }
}

@media (max-width: 900px) {
  .svcgrid { grid-template-columns: repeat(2, 1fr); }
  .billing-grid { grid-template-columns: 1fr; }
  .news-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .svcgrid { grid-template-columns: 1fr; }
  .step { grid-template-columns: 1fr; gap: 14px; }
  .contact-phones { flex-direction: column; }
  .news-grid { grid-template-columns: 1fr; }
}

/* ---- Pohrebné služby: foto karty, odkazové karty, kotvy ---- */
.svcgroup, .first-card { scroll-margin-top: 90px; }
a.first-card { display: block; transition: border-color 0.35s ease, transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1); }
a.first-card:hover { border-color: rgb(var(--fg-rgb) / 0.4); transform: translateY(-5px); }
.fc-go {
  display: inline-block;
  margin-top: 14px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--gold);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
a.first-card:hover .fc-go { opacity: 1; transform: none; }
.first-card.has-photo { position: relative; overflow: hidden; min-height: 220px; display: flex; flex-direction: column; justify-content: flex-end; }/* Fotka už nie je CSS pozadie, ale <img> z astro:assets — inak by mobil
   sťahoval desktopovú veľkosť bez srcset. Vypĺňa rovnakú plochu. */
.first-card.has-photo::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(12, 13, 15, 0.2), rgba(12, 13, 15, 0.9) 75%);
}
.first-card.has-photo h3, .first-card.has-photo p, .first-card.has-photo .fc-go { position: relative; z-index: 2; }
.first-card.has-photo:hover .fc-photo { opacity: 0.5; transform: scale(1.05); }

/* ---- Opustili nás: mesiace + rozlúčka na karte ---- */
.memoriam-month { margin: 56px 0 26px; font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--dim); font-weight: 600; }
.memoriam-month:first-child { margin-top: 0; }
.memoriam-rozlucka { margin-top: 10px; font-size: 12.5px; line-height: 1.55; color: var(--dim); }/* ---- Aktuality: tagy a odkazy ---- */
.news-go { display: inline-block; margin-top: 14px; font-size: 13.5px; font-weight: 600; color: var(--gold); transition: color 0.3s ease; }
.news-go:hover { color: var(--fg-strong); }

/* ---- Informácie pre pozostalých: situačný rozcestník + NON STOP lišta ---- */
.situ { background: var(--bg2); border-block: 1px solid var(--line); padding: 45px 0 51px; }
/* Priamo pod subhero fotkou je 45 px na rampu málo: v dennej téme by čierna
   prechádzala do parchmentu na 45 pixloch a čítalo by sa to ako tmavý pás,
   nie ako prechod. Pod fotkou teda dostane priestor, inde ostáva 45 px. */
.subhero + .situ { padding-top: clamp(64px, 8vh, 96px); }
/* 0.35 alfa bola pri 12 px verzálkach na fotke pod hranicou čitateľnosti;
   label je otázka, na ktorú čipy odpovedajú, takže musí byť vidieť */
.situ-label { font-size: 12.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text); font-weight: 650; margin-bottom: 16px; }
/* nad fotkou hero bandu ešte mäkký tieň — fotka má aj svetlé plochy */
.news-hero .situ-label { text-shadow: 0 1px 3px rgba(12, 13, 15, 0.7), 0 6px 24px rgba(12, 13, 15, 0.6); }
.situ-row { display: flex; gap: 12px; flex-wrap: wrap; }
/* rozcestnikove cipy: akcentova vypln ako btn-gold (v tmavej teme biele),
   nie siva — klient chce jasne viditelne tlacidla */
.situ-chip {
  display: inline-flex;
  align-items: center;
  border: 1px solid transparent;
  background: var(--gold);
  border-radius: 999px;
  padding: 15px 26px;
  font-size: 15.5px;
  font-weight: 650;
  color: var(--on-accent);
  transition: background 0.35s ease, box-shadow 0.35s ease, transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.situ-chip:hover { background: var(--fg-strong); transform: translateY(-2px); box-shadow: 0 10px 30px rgb(var(--fg-rgb) / 0.2); }

.callbar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 90;
  background: rgba(12, 13, 15, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
  transform: translateY(110%);
  transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
  padding-bottom: env(safe-area-inset-bottom);
}
.callbar.on { transform: none; }
.callbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 12px 0; }
.callbar-label { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--dim); font-weight: 600; }
.callbar-tel { display: inline-flex; align-items: center; gap: 10px; font-size: clamp(18px, 2vw, 22px); font-weight: 680; font-variation-settings: var(--wide); color: var(--gold); transition: color 0.3s ease; }
.callbar-tel:hover { color: var(--fg-strong); }
@media (max-width: 560px) {
  .callbar-label { display: none; }
  .callbar-inner { justify-content: center; }
}/* ---- podstránka O nás: míľniky, ľudia, recenzie ---- */

/* Mŕtve CSS odstránené: .team, .team-grid, .team-card, .team-photo,
   .team-role a .team-note z pôvodnej migrácie. Žiadna stránka tie triedy
   nepoužívala a keďže blok stál v súbore nižšie, prepisoval nový tím
   (grid namiesto flexu, rola 12 px namiesto 10). */

/* dvojstĺpcová mriežka kariet platí len v quote sekcii (O nás) —
   globálny selektor predtým prepisoval trojstĺpcovú mriežku homepage */
.quote .reviews-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin-top: clamp(50px, 7vh, 70px); }

@media (max-width: 900px) {
  .team-grid { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; }
  .quote .reviews-grid { grid-template-columns: 1fr; }
}
/* ============================================================
   Podstránka Šperky — svetlý režim
   Apple-galéria vzory (edge-to-edge dlaždice, striedanie plátien,
   fotografia ako jediný nositeľ) na Paciga tokenoch a Archivo type.
   ============================================================ */
.page-light .site-footer { background: var(--bg); color: var(--text); }
.page-light .link-underline { color: var(--lmuted); }
.page-light .link-underline:hover { color: var(--link-ink); }
.page-light .tile-dark .link-underline { color: var(--muted); }
.page-light .tile-dark .link-underline:hover { color: var(--text); }
.tile-contact .phone-big { display: inline-block; font-size: clamp(28px, 3.2vw, 40px); font-weight: 680; font-variation-settings: var(--wide); color: var(--text); transition: color 0.3s ease; }
.tile-contact .phone-big:hover { color: var(--fg-strong); }



/* ============================================================
   Časté otázky — akordeón
   Natívne <details>, hairline rámy, znamienko + / − vpravo.
   Otvára sa aj bez JavaScriptu.
   ============================================================ */
.faq-section {
  background: var(--bg2);
  padding: clamp(76px, 10vh, 125px) 0;
  border-top: 1px solid var(--line);
}
.faq { max-width: 820px; margin-inline: auto; text-align: left; }
.faq .section-head { margin-bottom: 44px; }

.faq-list { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item > summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 2px;
  cursor: pointer;
  list-style: none;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary:focus-visible {
  outline: 2px solid var(--gold-soft);
  outline-offset: 3px;
  border-radius: 4px;
}
.faq-q {
  font-size: clamp(16.5px, 1.6vw, 19px);
  font-weight: 620;
  line-height: 1.45;
  color: var(--text);
  transition: color 0.3s ease;
}
.faq-item > summary:hover .faq-q { color: var(--fg-strong); }

/* znamienko: vodorovná čiara zostáva, zvislá pri otvorení zmizne */
.faq-mark { position: relative; flex: 0 0 16px; height: 16px; margin-top: 5px; }
.faq-mark::before,
.faq-mark::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  background: var(--gold-soft);
  transform: translate(-50%, -50%);
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.3s ease;
}
.faq-mark::before { width: 16px; height: 1px; }
.faq-mark::after { width: 1px; height: 16px; }
.faq-item[open] .faq-mark::after { transform: translate(-50%, -50%) scaleY(0); opacity: 0; }

.faq-a { padding: 0 42px 26px 2px; }
.faq-a p { font-size: 19.8px; line-height: 1.75; color: var(--muted); }
.faq-note { margin-top: 34px; font-size: 17.4px; color: var(--dim); line-height: 1.7; }

/* plynulé rozbalenie tam, kde to prehliadač vie; inde sa otvorí naraz */
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  .faq-item::details-content {
    block-size: 0;
    overflow: hidden;
    transition: block-size 0.4s cubic-bezier(0.2, 0.7, 0.2, 1),
                content-visibility 0.4s allow-discrete;
  }
  .faq-item[open]::details-content { block-size: auto; }
}/* FAQ vnorené do dlaždice (Šperky) drží zarovnanie vľavo */
.tile .faq { text-align: left; }
.tile .faq h2 { max-width: none; margin-inline: 0; }
.tile .faq .faq-note { text-align: left; }

@media (max-width: 600px) {
  .faq-item > summary { gap: 16px; padding: 20px 2px; }
  .faq-a { padding-right: 0; }
}

/* ============================================================
   Najbližšie rozlúčky — pás nad zoznamom spomienok
   Zobrazí sa len ak nejaká rozlúčka ešte len príde.
   ============================================================ */
.rozlucky { background: var(--bg2); border-block: 1px solid var(--line); padding: clamp(36px, 5vh, 56px) 0; }
.rozlucky .micro-label { display: block; margin-bottom: 18px; color: var(--gold-soft); }
.roz-row {
  display: grid;
  grid-template-columns: 52px 88px 150px 1fr minmax(170px, 230px) 22px;
  gap: 8px 26px;
  align-items: center;
  padding: 12px 2px;
  border-top: 1px solid var(--line);
}
.roz-row:last-child { border-bottom: 1px solid var(--line); }
/* fotka zosnulého v riadku (30. 8. 2026): rovnaký kruh ako na kartách, menší */
.roz-foto {
  width: 52px; height: 52px; border-radius: 50%; overflow: hidden;
  border: 1px solid rgb(var(--fg-rgb) / 0.35);
  background: radial-gradient(circle at 35% 30%, #22242a, #131418);
  display: grid; place-items: center;
  font-size: 14px; font-weight: 650; letter-spacing: 0.04em; color: rgb(var(--fg-rgb) / 0.6);
}
.roz-foto img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; display: block; }
.roz-den { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 650; color: var(--gold-soft); }
.roz-kedy { font-weight: 650; font-variation-settings: var(--wide); color: var(--text); transition: color 0.3s ease; }
.roz-kde { color: var(--muted); font-size: 14.5px; line-height: 1.5; }
.roz-meno { color: var(--text); font-weight: 620; justify-self: end; text-align: right; }
.roz-go { color: var(--dim); justify-self: end; transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), color 0.3s ease; }
.roz-row:hover .roz-kedy { color: var(--fg-strong); }
.roz-row:hover .roz-go { transform: translateX(5px); color: var(--gold); }

/* riadok rozlúčky na karte sa už zobrazuje len pre nadchádzajúce — jemné zvýraznenie */
.memoriam-rozlucka { color: var(--gold-soft); }

@media (max-width: 800px) {
  .roz-row { grid-template-columns: 48px 76px 1fr 22px; gap: 6px 14px; align-items: baseline; }
  .roz-foto { width: 48px; height: 48px; grid-row: 1 / 4; align-self: start; }
  .roz-kde { grid-column: 3; }
  .roz-meno { grid-column: 3; justify-self: start; text-align: left; }
  .roz-go { grid-row: 1; grid-column: 4; }
}

/* ============================================================
   Vyhľadávanie v spomienkach (Opustili nás)
   Progresívne vylepšenie: bez JS sa pole vôbec nezobrazí
   a zoznam ostáva kompletný.
   ============================================================ */
.parte-search[hidden] { display: none; }
/* pole žije v newsroom bande pod leadom, zoznam parte začína hneď pod hlavičkou */
.parte-search { margin: 22px 0 0; }
.parte-search-field { position: relative; max-width: 520px; }
.parte-search input[type="search"] {
  width: 100%;
  padding: 15px 46px 15px 18px;
  font: inherit;
  font-size: 16px;
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 999px;
  transition: border-color 0.3s ease;
  -webkit-appearance: none;
  appearance: none;
}
.parte-search input[type="search"]::-webkit-search-cancel-button { display: none; }
.parte-search input[type="search"]::placeholder { color: var(--dim); }
.parte-search input[type="search"]:focus { outline: none; border-color: var(--gold-soft); }

.ps-clear {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  line-height: 1;
  color: var(--dim);
  background: none;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: color 0.3s ease;
}
.ps-clear:hover { color: var(--text); }
.parte-search.has-query .ps-clear { display: flex; }

.parte-count {
  margin-top: 12px;
  min-height: 20px;
  font-size: 12.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--dim);
}
.parte-empty {
  margin: 56px 0 20px;
  max-width: 60ch;
  font-size: 19.8px;
  line-height: 1.75;
  color: var(--muted);
  border-left: 1px solid var(--gold-dim);
  padding-left: 26px;
}
.parte-empty[hidden] { display: none; }
.parte-empty strong { color: var(--text); font-weight: 620; }
.memoriam-month[hidden],
.memoriam-grid[hidden],
.memoriam-card[hidden] { display: none; }/* ============================================================
   O nás — album prestavba
   Fotografia nesie stránku: celoplošné pásy s popisom,
   kronika rokov na zvislej osi, prvenstvá ako hairline zoznam.
   Parallax pásov ide cez data-parallax v main.js.
   ============================================================ */
/* dvojice text + fotografia idú cez celú šírku, obmedzený je len text */
.about-intro .section-head { max-width: 780px; margin-bottom: clamp(18px, 2.6vh, 30px); }
.about-intro .gold-line { margin: 18px 0 0; }

/* ---- celoplošný fotopás ---- */
.album-band { position: relative; overflow: hidden; height: clamp(460px, 76vh, 740px); }
.album-band > span { position: absolute; inset: -9% 0; display: block; }
.album-band img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.5) brightness(0.78);
}
/* variant: ohnisko vpravo — na úzkom displeji nechá v zábere ľudí, nie kapotu */
.album-band-right img { object-position: 68% center; }
/* Spodok doznieva do plného scrimu, nie do 0.9, aby pás nadviazal na sekciu
   pod ním bez seku. Popiska sedí 38 až 68 px od spodku, čiže v pásme kde je
   scrim už takmer plný; na čiernom je čitateľnejšia než predtým. */
.album-shade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgb(var(--scrim-rgb) / 0.4),
    rgb(var(--scrim-rgb) / 0) 32%,
    rgb(var(--scrim-rgb) / 0) 52%,
    rgb(var(--scrim-rgb) / 0.66) 82%,
    rgb(var(--scrim-rgb) / 0.92) 93%,
    rgb(var(--scrim-rgb)) 100%);
}
.album-caption {
  position: absolute; inset-inline: 0;
  bottom: clamp(38px, 6vh, 68px);
  /* fotky majú aj svetlé plochy — text drží mäkký tieň */
  text-shadow: 0 1px 3px rgba(12, 13, 15, 0.65), 0 6px 28px rgba(12, 13, 15, 0.75);
}
.album-caption h2 { font-size: clamp(26px, 3.4vw, 44px); max-width: 16ch; }
.album-caption p:not(.album-line) { margin-top: 14px; color: rgb(var(--fg-rgb) / 0.85); max-width: 54ch; font-size: 19.2px; line-height: 1.65; }
.album-caption .micro-label { display: block; margin-bottom: 14px; color: var(--gold-soft); }

/* ---- kronika: striedavé dvojice okolo zvislej osi (vzor Slash) ----
   Os sa plní so scrollom rovnako ako tracing beam v „Čo spraviť ako prvé"
   a dráha jazdy; uzly sa rozsvietia, keď ich plniaca sa os prejde. */
.kronika { background: var(--bg2); border-block: 1px solid var(--line); padding: clamp(84px, 11vh, 150px) 0; }
.kron { position: relative; }
.kron-rail {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--line);
  transform: translateX(-0.5px);
  overflow: hidden;
}
#kron-fill {
  display: block;
  width: 100%;
  height: 0%;
  background: linear-gradient(180deg, rgb(var(--fg-rgb) / 0.25), var(--gold));
  box-shadow: 0 0 12px rgb(var(--fg-rgb) / 0.3);
}
.kron-item {
  position: relative;
  display: grid;
  grid-template-columns: 1fr clamp(48px, 7vw, 110px) 1fr;
  align-items: center;
  padding: clamp(30px, 4.6vh, 60px) 0;
}
/* text a fotka si vymieňajú strany; v DOM ide text vždy prvý */
.kron-body { grid-column: 1; text-align: right; }
.kron-body p { margin-left: auto; }
.kron-item .photo-slot { grid-column: 3; }
/* reálne fotky kroniky — rovnaké miesto v mriežke ako photo-slot */
/* height: auto je nutné — <Image> píše atribút height a ten by ako
   prezentačný hint platil namiesto aspect-ratio (box by mal výšku
   zdrojovej fotky v px, nie 4:3) */
.kron-item .kron-photo { grid-column: 3; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; }
.kron-flip .kron-photo { grid-column: 1; }
.kron-flip .kron-body { grid-column: 3; text-align: left; }
.kron-flip .kron-body p { margin-left: 0; margin-right: auto; }
.kron-flip .photo-slot { grid-column: 1; }
/* uzol na osi */
.kron-dot {
  grid-column: 2;
  justify-self: center;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--bg2);
  border: 1px solid rgb(var(--fg-rgb) / 0.3);
  transition: background 0.4s ease, border-color 0.4s ease;
}
.kron-dot.on { background: var(--gold); border-color: var(--gold); }
/* „Dnes" žije: uzol pulzuje rovnako ako NON STOP bodka */
.kron-now .kron-dot.on { animation: pulse 2.2s infinite; }
.kron-year {
  font-size: clamp(40px, 5.4vw, 74px);
  font-weight: 680;
  font-variation-settings: var(--xwide);
  line-height: 1;
  letter-spacing: -0.01em;
  margin-bottom: 14px;
}
.kron-body h3 { font-size: 20px; margin-bottom: 8px; }
.kron-body p { color: var(--muted); line-height: 1.7; max-width: 44ch; }/* ---- editoriálne dvojice: text a fotografia vedľa seba, strany sa striedajú ----
   Tvrdenie a jeho vizuálny dôkaz v jednom riadku, aby text nestál sám. */

/* ---- placeholder fotografie ----
   Rám s popisom, ČO na zábere má byť; slúži aj ako shot list pri fotení.
   Nájdeš ich všetky cez [data-photo-slot]. */
.photo-slot {
  background: var(--panel);
  border: 1px solid var(--line);
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 10px;
  text-align: center;
  padding: 20px;
}
.photo-slot span { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--dim); }
.photo-slot em { font-style: normal; font-size: 13.5px; line-height: 1.5; color: var(--muted); max-width: 32ch; }
.ps-32 { aspect-ratio: 3 / 2; }

@media (max-width: 860px) {/* dvojice sa skladajú pod seba; text vždy prvý, aj v prehodených riadkoch */
}

@media (max-width: 860px) {
  /* kronika na mobile: os vľavo, text a fotka pod sebou v jednom stĺpci */
  .kron-rail { left: 4px; }
  .kron-item { grid-template-columns: 1fr; gap: 18px; padding-left: clamp(26px, 8vw, 44px); }
  .kron-body,
  .kron-flip .kron-body,
  .kron-item .photo-slot,
  .kron-flip .photo-slot,
  .kron-item .kron-photo,
  .kron-flip .kron-photo { grid-column: 1; text-align: left; }
  .kron-body p { margin-left: 0; margin-right: 0; }
  /* grid-column: auto je nutné — absolútne pozicovaná položka mriežky si
     inak berie za obalový blok svoju bunku (stĺpec 2), nie celý riadok,
     a uzol by odletel k pravému okraju */
  .kron-dot { grid-column: auto; position: absolute; left: 4px; top: 50%; transform: translate(-50%, -50%); }
}

@media (max-width: 760px) {
  .album-band { height: clamp(400px, 64vh, 560px); }
}

/* ============================================================
   Služby (homepage) — 21st.dev bankkroll/commerce-hero
   Štruktúra a UI prevzaté 1:1: zaoblený panel s nadpisom vnútri,
   zapustená karta s eyebrow v ľavom hornom rohu panela, pod panelom
   mriežka kariet s názvom navrchu, médiom v strede a vyrezaným rohom
   vpravo dole, v ktorom sedí kruhové tlačidlo so šípkou.
   Farby preložené do brand tokenov (dark #0c0d0f, čierno-biela).
   Rádiusy sú zámerne prevzaté z predlohy — inde na webe sú hrany ostré.
   Bez React hydratácie, nábeh rieši data-reveal cez GSAP.
   ============================================================ */
.register { background: var(--bg); padding: clamp(84px, 11vh, 150px) 0; position: relative; overflow: hidden; }

/* Hlavička sekcie služieb (30. 7. 2026). Predtým tu stál orámovaný panel
   so zapusteným jazykom, ktorý na homepage nikde inde nie je. Teraz drží
   ten istý vzor ako ostatné sekcie: eyebrow, nadpis, gold-line. */
/* dvojstĺpec: nadpis vľavo, hashtagy služieb vedľa neho vpravo */
/* Jeden stĺpec, nie dva. Pôvodná mriežka dávala nadpis vľavo a pätnásť
   hashtagov vpravo, teda „split header“ (veľký nadpis + drobný text vedľa),
   ktorý taste-skill zakazuje. Hashtagy sú preč (22. 8. 2026), ostala jedna
   veta a tá patrí pod nadpis, ako pri každom inom nadpise na webe. */
.svc-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 0;
  margin-bottom: clamp(30px, 4.5vh, 52px);
}
.svc-head .svc-lead { margin-left: 0; margin-right: 0; }
.svc-eyebrow { margin-bottom: 16px; font-size: 14px; letter-spacing: 0.2em; }
.svc-title {
  font-size: clamp(30px, 4.4vw, 54px);
  line-height: 1.08;
  font-weight: 640;
  font-variation-settings: var(--wide);
  letter-spacing: -0.01em;
}
@media (max-width: 900px) {
  .svc-head { grid-template-columns: 1fr; gap: 22px; }
}
/* dvojtónový nadpis ako v predlohe, len bez farby: biela do polopriehľadnej */
.svc-title-grad {
  background: linear-gradient(90deg, var(--text), rgb(var(--fg-rgb) / 0.62));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.svc-lead {
  margin: 22px auto 0;
  max-width: 52ch;
  color: var(--muted);
  font-size: clamp(17px, 1.5vw, 19.5px);
  line-height: 1.65;
}
/* ---- mriežka kariet (grid gap-6 mt-12 v predlohe) ---- */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 1.7vw, 24px);
  margin-top: clamp(28px, 4vh, 48px);
}
/* Karta služby = fotka (vzor YLLW services, Mobbin; vybrané 30. 7. 2026).
   Fotka vypĺňa celú kartu, názov leží na nej hore, odkaz dole. Predtým
   bola fotka malý štvorec nalepený doprostred, čo pôsobilo ako výplň. */
.svc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  min-height: 400px;
  padding: 0;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 22px;
  transition: border-color 0.4s ease;
}
.svc-card:hover, .svc-card:focus-visible { border-color: rgb(var(--fg-rgb) / 0.28); }
.svc-card-title {
  position: relative;
  z-index: 2;
  margin: 0;
  padding: clamp(20px, 2vw, 26px) clamp(20px, 2vw, 26px) 0;
  text-align: left;
  font-size: clamp(21px, 2.3vw, 30px);
  line-height: 1.1;
  font-weight: 680;
  font-variation-settings: var(--wide);
}
/* médium vypĺňa kartu, scrim drží titulok aj odkaz čitateľné */
.svc-card-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  padding: 0;
  min-height: 0;
}
.svc-card-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgb(var(--scrim-rgb) / 0.72) 0%, rgb(var(--scrim-rgb) / 0.25) 38%,
    rgb(var(--scrim-rgb) / 0.15) 62%, rgb(var(--scrim-rgb) / 0.8) 100%);
}
/* POZOR: nazov .svc-photo je obsadeny starou sekciou sluzieb (absolute layer),
   preto svc-card-photo. */
.svc-card-media img.svc-card-photo {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  border-radius: 0;
  opacity: 1;
  filter: saturate(0.45) brightness(0.6);
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1), filter 0.5s ease;
}
.svc-card:hover .svc-card-media img.svc-card-photo,
.svc-card:focus-visible .svc-card-media img.svc-card-photo {
  transform: scale(1.06);
  filter: saturate(0.75) brightness(0.72);
}
.svc-card-media img {
  width: min(58%, 200px);
  height: auto;
  object-fit: contain;
  opacity: 0.9;
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.5s ease;
}
.svc-card:hover .svc-card-media img { transform: scale(1.1); opacity: 1; }
/* odkaz z karty — 21st.dev ruixen.ui/animated-link (vybrany V1 z /lab-karty):
   podčiarknutie nabieha zľava, šípka sa zdvihne do rohu. Nahrádza
   vyrezaný roh so šípkou (svc-notch), ktorý klientovi nesadol. */
.svc-link {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: auto clamp(20px, 2vw, 26px) clamp(18px, 1.8vw, 24px);
  padding-bottom: 4px;
  font-size: 15px;
  color: var(--muted);
  transition: color 0.3s ease;
}
.svc-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s cubic-bezier(0.19, 1, 0.22, 1);
}
.svc-link svg {
  width: 14px;
  height: 14px;
  opacity: 0;
  transform: translate(-4px, 4px);
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.19, 1, 0.22, 1);
}
.svc-card:hover .svc-link, .svc-card:focus-visible .svc-link { color: var(--gold); }
.svc-card:hover .svc-link::after, .svc-card:focus-visible .svc-link::after { transform: scaleX(1); }
.svc-card:hover .svc-link svg, .svc-card:focus-visible .svc-link svg { opacity: 1; transform: translate(0, 0); }
/* Vizuálny audit 22. 8. 2026: tlačidlo malo nad sebou 30 až 48 px, ale pod
   sebou spodné odsadenie sekcie, 84 až 150 px. Na desktope preto viselo
   v strede medzi kartami a pobočkami a pôsobilo ako začiatok ďalšej sekcie.
   Menšia medzera hore ho pritiahne ku kartám, ku ktorým patrí. */
.svc-all { display: table; margin: clamp(22px, 3vh, 32px) auto 0; }

@media (max-width: 980px) {
  .svc-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  .svc-grid { grid-template-columns: 1fr; }
  .svc-card { min-height: 320px; }
}

/* ============================================================
   Svetelný oblúk na okraji karty — 21st.dev aceternity/glowing-effect
   Prevzatá mechanika: uhol od stredu karty ku kurzoru sa animuje do
   --glow-start, --glow-active rozsvieti oblúk len keď je kurzor pri
   okrajoch karty (inactiveZone) a v jej okolí (proximity).
   Štvorfarebný gradient predlohy (ružová, zlatá, zelená, modrá) je
   nahradený bielym — brand nemá farebné akcenty.
   Prstenec kreslíme DOVNÚTRA hrany, nie von ako predloha: karty majú
   overflow: hidden a vonkajší prstenec by sa odstrihol.
   Element pridáva main.js a len na zariadeniach s kurzorom.
   ============================================================ */
.has-glow { position: relative; }
.glow-ring {
  position: absolute;
  inset: 0;
  z-index: 4;
  border-radius: inherit;
  pointer-events: none;
  padding: 2px;
  background: conic-gradient(
    from calc((var(--glow-start, 0) - var(--glow-spread, 34)) * 1deg),
    transparent 0deg,
    rgb(var(--fg-rgb) / 1) calc(var(--glow-spread, 34) * 1deg),
    transparent calc(var(--glow-spread, 34) * 2deg)
  );
  opacity: var(--glow-active, 0);
  transition: opacity 0.35s ease;
  /* prstenec = celá plocha mínus vnútro */
  -webkit-mask: linear-gradient(#fff, #fff) content-box, linear-gradient(#fff, #fff);
  mask: linear-gradient(#fff, #fff) content-box, linear-gradient(#fff, #fff);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  /* bloom: drop-shadow sa počíta z už maskovaných pixelov, takže žiara
     kopíruje tvar oblúka. Predloha to rieši blur propom. */
  filter: drop-shadow(0 0 5px rgb(var(--fg-rgb) / 0.6)) drop-shadow(0 0 14px rgb(var(--fg-rgb) / 0.3));
}
@media (prefers-reduced-motion: reduce) {
  .glow-ring { display: none; }
}/* ============================================================
   Recenzie — jednotný komponent (Review.astro)
   card: blockquote s hairline ľavým okrajom (štýl kondolencií)
   line: jednoriadková vsuvka pod formulárom
   ============================================================ */
.rev-card { border-left: 1px solid var(--gold-dim); padding: 6px 0 6px 26px; max-width: 720px; }
.rev-card blockquote p { font-size: 21.1px; line-height: 1.75; color: var(--text); }
.rev-card figcaption { margin-top: 12px; font-size: 13.5px; color: var(--muted); font-weight: 600; }
.rev-card .rev-google { display: inline-block; margin-top: 18px; font-size: 14px; }
.rev-line { font-size: 18.6px; color: var(--muted); line-height: 1.7; max-width: 62ch; }
.rev-line-meta { display: block; margin-top: 6px; font-size: 13px; color: var(--dim); font-weight: 600; }
.reviews-more { text-align: center; margin-top: 44px; }

/* ---- reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .faq-item::details-content { transition: none !important; }
  .faq-mark::before, .faq-mark::after { transition: none !important; }
  .partners-track, .dot, .orb, .phone-primary, .kron-now::before { animation: none !important; }
  html { scroll-behavior: auto; }
  .memoriam-card.lit .flame, .memoriam-card.warm .flame { animation: none !important; }
  .memoriam-card .memoriam-candle::before { animation: none !important; }
  .memoriam-candle .spark { animation: none !important; opacity: 0 !important; }
  .phero-flame { animation: none !important; }
}


/* ============================================================
   KAMENÁRSTVO (/kamenarstvo)
   Interaktívna žulová stéla (Cinzel len ako písmo produktu na kameni),
   vzorník žuly renderovaný SVG šumom, 4-krokový postup.
   ============================================================ */

#prace, #navrh, #postup { scroll-margin-top: 80px; }

/* ---- 3D návrh: dvojstĺpec so stélou ---- */
.kam-viz { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 80px); align-items: center; }
.kam-viz-copy h2 { font-size: clamp(28px, 3.4vw, 44px); }
.kam-viz-copy .gold-line { margin: 22px 0 26px; }
.kam-viz-lead { color: var(--muted); font-size: clamp(15px, 1.4vw, 18px); margin-bottom: 30px; }
.kam-fact { display: flex; gap: 16px; padding: 18px 0; border-top: 1px solid var(--line); }
.kam-fact:last-child { border-bottom: 1px solid var(--line); }
.kam-fact-k { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--dim); min-width: 104px; padding-top: 4px; font-weight: 600; }
.kam-fact-v { color: var(--muted); font-size: 15.5px; }
.kam-fact-v strong { color: var(--text); font-weight: 640; }

/* ---- stéla ---- */
.kam-stage { perspective: 1000px; }
.kam-stele-wrap { display: flex; flex-direction: column; align-items: center; transform-style: preserve-3d; transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1); will-change: transform; }
.kam-stele {
  width: min(340px, 82%);
  aspect-ratio: 3 / 4;
  border-radius: 170px 170px 14px 14px;
  border: 1px solid var(--line);
  position: relative;
  background-color: #131417;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' seed='11'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.10 0 0 0 0 0.104 0 0 0 0 0.112 1 1 1 0 -1.35'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23g)' opacity='0.9'/%3E%3C/svg%3E");
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgb(var(--fg-rgb) / 0.07);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 22px; padding: 40px 28px;
}
.kam-plinth {
  width: min(420px, 96%); height: 34px; margin-top: 10px;
  border-radius: 8px; border: 1px solid var(--line);
  background-color: #101114;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' seed='4'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.085 0 0 0 0 0.088 0 0 0 0 0.095 1 1 1 0 -1.38'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23g)' opacity='0.9'/%3E%3C/svg%3E");
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgb(var(--fg-rgb) / 0.06);
}
/* striebrené písmo v kameni: svetlá výplň + tmavý horný tieň (gravír) */
.kam-carved {
  font-family: 'Cinzel', 'Times New Roman', serif;
  text-align: center;
  color: rgba(206, 209, 214, 0.88);
  text-shadow: 0 -1px 0 rgba(9, 10, 12, 0.9), 0 1px 1px rgba(9, 10, 12, 0.55);
  letter-spacing: 0.14em;
}
.kam-carved-main { font-size: clamp(19px, 2vw, 24px); font-weight: 600; line-height: 1.5; text-transform: uppercase; overflow-wrap: anywhere; }
.kam-carved-rule { width: 64px; height: 1px; background: rgba(206, 209, 214, 0.55); box-shadow: 0 -1px 0 rgba(9, 10, 12, 0.8); }
.kam-carved-sub { font-size: 13px; font-weight: 500; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(206, 209, 214, 0.6); font-family: 'Cinzel', 'Times New Roman', serif; text-shadow: 0 -1px 0 rgba(9, 10, 12, 0.9); }
.kam-stele-note { margin-top: 26px; font-size: 13px; color: var(--dim); letter-spacing: 0.05em; text-align: center; }

/* ---- vlastný nápis ---- */
.kam-inscribe { margin-top: 32px; }
.kam-inscribe label { display: block; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--dim); margin-bottom: 12px; font-weight: 600; }
.kam-inscribe input {
  width: 100%; background: var(--panel); border: 1px solid var(--line); border-radius: 999px;
  color: var(--text); font-family: inherit; font-size: 16px; padding: 14px 22px;
  transition: border-color 0.3s ease;
}
.kam-inscribe input::placeholder { color: var(--dim); }
.kam-inscribe input:hover { border-color: rgb(var(--fg-rgb) / 0.2); }
.kam-inscribe input:focus { outline: none; border-color: rgb(var(--fg-rgb) / 0.4); }

/* ---- postup: 4 kroky s linkou ---- */
.kam-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; position: relative; }
.kam-steps::before { content: ""; position: absolute; top: 27px; left: 0; right: 0; height: 1px; background: var(--line); }
.kam-step { position: relative; padding-top: 56px; }
.kam-step-n {
  position: absolute; top: 0; left: 0;
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--bg2); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  font-weight: 680; font-variation-settings: var(--xwide); font-size: 18px;
}
.kam-step h3 { font-size: 19px; font-weight: 640; font-variation-settings: var(--wide); margin-bottom: 8px; }
.kam-step p { color: var(--muted); font-size: 18.6px; }

/* ---- responsive ---- */
@media (max-width: 960px) {
  .kam-viz { grid-template-columns: 1fr; gap: 60px; }
  .kam-steps { grid-template-columns: 1fr; gap: 34px; }
  .kam-steps::before { top: 0; bottom: 0; left: 27px; right: auto; width: 1px; height: 100%; }
  .kam-step { padding-top: 0; padding-left: 76px; }
}

/* ============================================================
   MOBIL: dotykové plochy a čitateľnosť
   ------------------------------------------------------------
   Meranie 30. 7. 2026 pri 390×844 našlo desiatky odkazov nižších
   ako 44 px a text pod 14 px. Publikum tejto stránky je z väčšej
   časti staršie a často ju otvára v strese, takže presné trafenie
   malého odkazu je reálna prekážka.

   Zásah je zámerne úzky: mení sa len to, čo sa číta alebo klikne.
   Verzálkové štítky (eyebrow, footer-title, stat-word, news-tag)
   ostávajú malé, lebo nesú hierarchiu, nie obsah — len tie pod
   12 px sa dvíhajú na 12. Desktop sa nemení.
   ============================================================ */
@media (max-width: 900px) {
  /* ---- pätička: stĺpce odkazov ---- */
  .footer-col a,
  .footer-social a,
  .footer-legal a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    /* min-width doplnené 22. 8. 2026: výšku 44 px mali od 30. 7., ale krátke
       položky menu v pätičke („O nás“, „Šperky“) boli široké 37 a 43 px.
       Odkaz je široký len ako jeho text, takže sa musí povedať aj to. */
    min-width: 44px;
  }
  .footer-col { gap: 0; }
  .footer-social { gap: 20px; }
  /* !important v základnom pravidle (riadok 998) inak prebije mobilnú veľkosť */
  .footer-map { font-size: 14.5px !important; }
  .footer-social a { font-size: 14.5px; }
  .footer-dim { font-size: 14px; }
  /* adresy nie sú odkazy, len text — mapový odkaz pod nimi si berie výšku sám */
  .footer-col.addresses span { padding-bottom: 4px; }

  /* ---- odkazy pri parte a spomienkach ---- */
  .gold-link,
  .soft-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: 14.5px;
  }
  .memoriam-date { font-size: 14.5px; }

  /* ---- e-maily v kartách pobočiek ----
     Merané 22. 8. 2026: odkaz mal 21 px výšky. Je to inline text v odstavci,
     takže výšku nesie riadok. inline-flex z neho spraví vlastný blok, ktorý
     si 44 px vypýta. Odstavec okolo tým narastie, to je v poriadku. */
  .branch-mail a,
  .footer-mail,
  .footer-phone {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* ---- telefónne čísla: najdôležitejší klik na stránke ---- */
  .branch-tel,
  .branch-tel-sm,
  .step-tel,
  .callbar-tel,
  .phone-secondary,
  .contact-mail,
  .phone-big {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .nav-links .nav-cta { font-size: 14.5px; }
  .callpill { font-size: 14px; }

  /* ---- ovládacie prvky ---- */
  .nav-burger { padding: 14px 10px; }
  .v3-opt { min-height: 44px; }
  .sh-cta { display: inline-flex; align-items: center; min-height: 44px; }
  .rev-rating { display: inline-flex; align-items: center; min-height: 44px; }

  /* ---- rozcestníkové čipy v hlavičke ----
     Desktopové hodnoty (padding 15px 26px, 15,5 px písmo) dávali na mobile
     čip vysoký 57 px. Sú biele, takže na tmavej stránke sú to najjasnejšie
     plochy na obrazovke, a keďže sa nezmestili do riadka, zalamovali sa.
     Na /kamenarstvo z toho boli tri riadky a 194 px, teda 36 % hlavičky.

     Teraz presne 44 px, čo je spodná hranica pre dotyk, ďalej sa zmenšovať
     nesmú. Užšie odsadenie ušetrí asi 16 px na čipe, takže trojica sa
     zmestí do jedného riadka. Písmo 15 px ostáva nad 14 px minimom.

     Odsadenie 16 px, nie 18: pri 18 px chýbalo trojici na /o-nas presne
     6 px do riadka a zalomila sa kvôli tomu na dva. 16 px jej dá 18 px
     rezervy. Stránky s piatimi čipmi (/kamenarstvo) sa zalomia tak či tak,
     tam ide len o to, aby riadky boli nižšie. Merané 22. 8. 2026. */
  .situ-row { gap: 8px; }
  .situ-chip { min-height: 44px; padding: 0 16px; font-size: 15px; }

  /* Odkaz späť nad článkom mal 22 px výšky a 13,5 px písmo. Je to
     samostatný navigačný odkaz, nie odkaz vo vete, takže výnimka pre
     veľkosť cieľa naň neplatí. Merané 22. 8. 2026. */
  .clanok-back { display: inline-flex; align-items: center; min-height: 44px; font-size: 14.5px; }

  /* ---- čítaný text pod 14 px ---- */
  .kam-stele-note { font-size: 14px; }
  .news-date { font-size: 13.5px; }
  .news-go { font-size: 14.5px; }
  .fc-go { font-size: 14.5px; }
  .situ-label { font-size: 13.5px; }
  label { font-size: 13.5px; }

  /* ---- štítky, ktoré boli pod 12 px ---- */
  .team-pop-role { font-size: 12px; }
  .stat-word { font-size: 13px; }
}

/* ============================================================
   Detail pohrebnej služby — /pohrebne-sluzby/<slug>
   Dvanásť stránok z jednej šablóny ([slug].astro). Bloky sa striedajú
   v dvoch tóninách, aby dlhá stránka nebola jedna plocha.
   ============================================================ */
.drobceky {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dim);
  text-shadow: 0 1px 3px rgb(var(--scrim-rgb) / 0.7);
}
.drobceky a { color: var(--muted); border-bottom: 1px solid transparent; transition: color 0.2s, border-color 0.2s; }
.drobceky a:hover { color: var(--text); border-bottom-color: rgb(var(--fg-rgb) / 0.3); }
.drobceky [aria-current] { color: var(--text); }

.news-hero .sluzba-lead {
  margin-top: 22px;
  max-width: 56ch;
  font-size: clamp(16.5px, 1.5vw, 20px);
  line-height: 1.65;
  color: var(--text);
  text-shadow: 0 1px 3px rgb(var(--scrim-rgb) / 0.7), 0 6px 24px rgb(var(--scrim-rgb) / 0.6);
}

.sluzba-blok { padding: clamp(64px, 8.5vh, 110px) 0; }
.sluzba-blok.is-alt { border-block: 1px solid var(--line); }
.sluzba-blok .svcgroup-head { margin-bottom: 36px; }
.sluzba-blok .svcgroup-head h2 { font-size: clamp(24px, 2.8vw, 36px); }

/* .sluzba-text = starý jednostĺpcový úvod. Šablóna služby ho už nekreslí
   (nahradil ho .sluzba-textblok nižšie), pravidlo drží iba lab stránku
   /lab-sluzba-uvod, kde slúži ako „stav pred". */
.sluzba-text { max-width: 66ch; }
.sluzba-text p { color: var(--muted); font-size: 18.6px; line-height: 1.75; }
.sluzba-text p + p { margin-top: 18px; }

/* ---- textový blok na detaile služby: editoriálny rozpad ----
   Vzor 21st.dev „Editorial Hero" (felipemenezes098/hero-05), výber
   klienta 22. 8. 2026. Vľavo úzka kotva (linka + štítok, prípadne nadpis
   bloku), vpravo text. Prázdne miesto vľavo tým prestáva byť dierou
   a číta sa ako odsadenie.

   Miera riadku: text drží stĺpec mriežky (8 z 11 dielov ≈ 75 znakov pri
   18,6 px), nie max-width. Strop v znakoch by vpravo od textu otvoril
   druhú dieru, presne tú, ktorú tento blok rieši. */
.sluzba-textblok { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 8fr); gap: clamp(28px, 5vw, 84px); }
.sluzba-textblok-bok { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding-top: 10px; }
.sluzba-textblok-linka { display: block; width: 40px; height: 1px; background: var(--gold); transform-origin: left center; }
.sluzba-textblok-label { font-size: 12.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim); }
.sluzba-textblok-bok h2 { font-size: clamp(23px, 2.5vw, 32px); line-height: 1.2; }
.sluzba-textblok-telo p { color: var(--muted); font-size: 18.6px; line-height: 1.75; }
.sluzba-textblok-telo p + p { margin-top: 20px; }
/* lead: odlíši úvod od bežného textu bez toho, aby pribudol nadpis */
.sluzba-textblok-telo p.je-lead { font-size: clamp(20px, 1.95vw, 25px); line-height: 1.6; color: var(--text); }
@media (max-width: 860px) {
  .sluzba-textblok { grid-template-columns: 1fr; gap: 20px; }
  /* na mobile ide kotva nad text ako riadok, zvislý stĺpec by tu bol len prázdny pás */
  .sluzba-textblok-bok { flex-direction: row; align-items: center; flex-wrap: wrap; padding-top: 0; gap: 12px; }
  .sluzba-textblok-bok h2 { flex-basis: 100%; }
}
.sluzba-uvod { max-width: 62ch; margin-bottom: 32px; color: var(--muted); font-size: 18px; line-height: 1.7; }
/* Kľúč má pevnú šírku, nie min-width: pri dlhých názvoch (napr.
   „Chladiaca kazeta MT 10") by inak každý riadok odsadil hodnotu inak
   a stĺpec by sa rozstrapkal. Kľúč sa radšej zalomí. */
.sluzba-fakty { max-width: 880px; }
.sluzba-fakty .kam-fact { gap: 24px; }
.sluzba-fakty .kam-fact-k { flex: 0 0 180px; min-width: 0; }
.sluzba-fakty .kam-fact-v { flex: 1 1 auto; }

/* citát cez celú šírku — Playfair, rovnaká tónina ako inde na webe */
.sluzba-citat { border-block: 1px solid var(--line); padding: clamp(70px, 9vh, 120px) 0; }
/* Šírka je v px, nie v ch: jednotka ch sa počíta z písma blockquote
   (Archivo), nie z Playfairu na odseku, a citát tak vychádzal ako úzky
   sedemriadkový stĺpec. */
.sluzba-citat blockquote { max-width: 880px; margin-inline: auto; text-align: center; }
.sluzba-citat blockquote p {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(24px, 3.4vw, 42px);
  line-height: 1.32;
  color: var(--text);
}
.sluzba-citat cite {
  display: block;
  margin-top: 26px;
  font-style: normal;
  font-size: 12.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dim);
}

/* súvisiace služby: karty sú odkazy, preto potrebujú šípku dole */
.suvisiace { padding: clamp(64px, 8.5vh, 110px) 0; }
.suvisiace .first-card { display: flex; flex-direction: column; justify-content: space-between; gap: 20px; min-height: 128px; }
.suvisiace .first-card h3 { font-size: 20px; }
.suvisiace .katalog-nota { margin-top: 34px; }

/* ============================================================
   Katalógy — rakvy a kvety
   Filtruje sa cez data-filter na mriežke, takže bez JS ostane
   viditeľné všetko. Karta je figure, popis je figcaption.
   ============================================================ */
.katalog { border-block: 1px solid var(--line); padding: clamp(70px, 9vh, 120px) 0; }
.katalog .svcgroup-head { margin-bottom: 30px; }
.katalog .svcgroup-head h2 { font-size: clamp(24px, 2.8vw, 36px); }
.katalog-uvod { margin-top: 22px; max-width: 62ch; color: var(--muted); font-size: 17.4px; line-height: 1.7; }

.katalog-filter { display: flex; align-items: baseline; gap: 20px; flex-wrap: wrap; margin-bottom: 30px; }
.katalog-filter-label { font-size: 12.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--dim); font-weight: 650; }
.katalog-chips { display: flex; gap: 10px; flex-wrap: wrap; }
.katalog-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--muted);
  font-size: 14.5px;
  font-weight: 560;
  transition: color 0.2s, border-color 0.2s, background 0.2s, transform 0.2s;
}
.katalog-chip:hover { color: var(--text); border-color: rgb(var(--fg-rgb) / 0.28); transform: translateY(-2px); }
.katalog-chip.is-on { background: var(--fg-strong); border-color: transparent; color: var(--on-accent); }
.katalog-pocet { font-size: 12px; opacity: 0.62; font-variant-numeric: tabular-nums; }
.katalog-chip.is-on .katalog-pocet { opacity: 0.7; }

.katalog-grid { display: grid; gap: 18px; }
.katalog-grid-rakvy { grid-template-columns: repeat(4, 1fr); }
.katalog-grid-kvety { grid-template-columns: repeat(4, 1fr); }

.katalog-karta {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  background: var(--panel);
  transition: border-color 0.25s, transform 0.25s;
}
.katalog-karta:hover { border-color: rgb(var(--fg-rgb) / 0.24); transform: translateY(-3px); }
.katalog-foto { display: block; position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: rgb(var(--scrim-rgb) / 0.6); }
.katalog-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.katalog-karta:hover .katalog-foto img { transform: scale(1.04); }
.katalog-popis { display: flex; flex-direction: column; gap: 5px; padding: 14px 16px 16px; }
.katalog-kod { font-size: 14.5px; font-weight: 640; color: var(--text); font-variation-settings: var(--wide); }
.katalog-meta { font-size: 13px; color: var(--dim); }

/* filtre: mriežka nesie data-filter, karta svoju skupinu */
.katalog-grid[data-filter="svetly"] .katalog-karta:not([data-odtien="svetly"]),
.katalog-grid[data-filter="medovy"] .katalog-karta:not([data-odtien="medovy"]),
.katalog-grid[data-filter="mahagon"] .katalog-karta:not([data-odtien="mahagon"]),
.katalog-grid[data-filter="zive-kytice"] .katalog-karta:not([data-skupina="zive-kytice"]),
.katalog-grid[data-filter="zive-vence"] .katalog-karta:not([data-skupina="zive-vence"]),
.katalog-grid[data-filter="umele-vence"] .katalog-karta:not([data-skupina="umele-vence"]) {
  display: none;
}

/* orezanie dlhého katalógu — skript ho zapína cez data-limit */
.katalog-karta.je-skryta { display: none; }
.katalog-viac { display: flex; justify-content: center; margin-top: 30px; }

.katalog-nota { margin-top: 30px; max-width: 62ch; color: var(--dim); font-size: 15.5px; line-height: 1.65; }

/* cenník umelých vencov */
.katalog-cennik { margin-top: 52px; max-width: 620px; }
.katalog-cennik h3 { font-size: 20px; font-variation-settings: var(--wide); }
.katalog-cennik-uvod { margin-top: 12px; color: var(--muted); font-size: 16px; line-height: 1.65; }
.katalog-cennik-tabulka { margin-top: 24px; border-top: 1px solid var(--line); }
.katalog-cennik-hlavicka,
.katalog-cennik-riadok {
  display: grid;
  grid-template-columns: 1fr auto 72px;
  gap: 18px;
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.katalog-cennik-hlavicka { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--dim); font-weight: 650; }
.katalog-cennik-riadok { font-size: 16px; color: var(--muted); }
.katalog-cennik-cena { color: var(--text); font-weight: 640; font-variant-numeric: tabular-nums; }
.katalog-cennik-pocet { text-align: right; color: var(--dim); font-variant-numeric: tabular-nums; }

/* ============================================================
   Flotila — dve limuzíny
   ============================================================ */
.flotila { border-block: 1px solid var(--line); padding: clamp(70px, 9vh, 120px) 0; }
.flotila-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }
.flotila-karta { border: 1px solid var(--line); border-radius: 20px; overflow: hidden; background: var(--panel); }
.flotila-foto { margin: 0; aspect-ratio: 3 / 2; overflow: hidden; }
.flotila-foto img { width: 100%; height: 100%; object-fit: cover; }
.flotila-telo { padding: 26px 26px 30px; }
.flotila-odznak {
  display: inline-block;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
  font-weight: 650;
}
.flotila-telo h3 { margin-top: 16px; font-size: 24px; font-variation-settings: var(--wide); }
.flotila-telo p { margin-top: 12px; color: var(--muted); font-size: 17.4px; line-height: 1.65; }
.flotila-detaily { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); list-style: none; }
.flotila-detaily li { position: relative; padding-left: 20px; color: var(--dim); font-size: 15.5px; }
.flotila-detaily li + li { margin-top: 9px; }
.flotila-detaily li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 8px; height: 1px; background: rgb(var(--fg-rgb) / 0.4); }

/* ============================================================
   Krajiny medzinárodného prevozu
   ============================================================ */
.krajiny { padding: clamp(64px, 8.5vh, 110px) 0; }
.krajiny-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; list-style: none; max-width: 780px; }
.krajina {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
}
.krajina-kod {
  font-size: 12px;
  letter-spacing: 0.16em;
  font-weight: 700;
  color: var(--dim);
  min-width: 26px;
}
.krajina-nazov { font-size: 17px; color: var(--text); font-variation-settings: var(--wide); }

/* ---- responzívne ---- */
@media (max-width: 1000px) {
  .katalog-grid-rakvy,
  .katalog-grid-kvety { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .flotila-grid { grid-template-columns: 1fr; }
  .krajiny-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .katalog-grid-rakvy,
  .katalog-grid-kvety { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .katalog-popis { padding: 12px 13px 14px; }
  .katalog-filter { gap: 12px; }
  .krajiny-grid { grid-template-columns: 1fr; }
  .katalog-cennik-hlavicka,
  .katalog-cennik-riadok { grid-template-columns: 1fr auto 52px; gap: 12px; }
}

/* mobil: čítaný text a klikacie plochy podľa štandardu webu
   (dotyk min. 44 px, čítaný text min. 14 px, verzálkové štítky 12 px) */
@media (max-width: 900px) {
  .katalog-chip { min-height: 44px; font-size: 14.5px; }
  .katalog-filter-label { font-size: 13.5px; }
  /* 14, nie 13,5: pri rakvách je to popis tovaru („Mahagónový odtieň“),
     teda čítaný obsah, nie štítok. Pravidlo hovorí najmenej 14 px.
     Ušlo to, lebo pôvodný audit meral len hlavných deväť stránok
     a detaily služieb medzi nimi neboli. Merané 22. 8. 2026. */
  .katalog-meta { font-size: 14px; }
  .katalog-kod { font-size: 14.5px; }
  .katalog-nota { font-size: 15px; }
  .katalog-cennik-riadok { min-height: 44px; align-items: center; }
  .katalog-cennik-hlavicka { font-size: 12px; }
  .drobceky { font-size: 12.5px; }
  .drobceky a { display: inline-flex; align-items: center; min-height: 44px; }
  .flotila-odznak { font-size: 12px; }
  .flotila-detaily li { font-size: 15px; }
  .krajina-kod { font-size: 12px; }
  .suvisiace .first-card { min-height: 0; }

  /* Kľúč a hodnota pod seba. Vedľa seba by na 390 px ostalo hodnote
     ~190 px a text by padal po dvoch slovách na riadok. */
  .sluzba-fakty .kam-fact { flex-direction: column; gap: 8px; }
  .sluzba-fakty .kam-fact-k { flex: none; padding-top: 0; }
  .sluzba-fakty .kam-fact-v { font-size: 16px; }
}

/* ============================================================
   Mobil: jednotný zvislý rytmus sekcií (22. 8. 2026)

   Klient poslal snímku z telefónu: medzi blokmi sú veľké prázdne pásy.
   Zmerané na 8 stránkach, 45 medzier medzi susednými sekciami: medián
   187 px, 34 zo 45 nad 150 px, maximum 766. Na displeji vysokom 844 px
   je to polovica obrazovky bez obsahu.

   Príčina: každá sekcia má desktopový padding clamp(84px, 11vh, 150px)
   alebo podobný, na vyše 20 miestach v CSS a v Tailwind triedach py-[...]
   v .astro, a na mobil ide bez zmeny. Dva paddingy za sebou dajú 170 až
   240 px. Vnútorné rozostupy (svcgroup + svcgroup, section-head) to
   ešte zdvihnú.

   Riešenie je jedno pravidlo, nie dvadsať opráv: každá sekcia v <main>
   dostane na mobile 52 px hore aj dole. Dve sekcie za sebou = 104 px,
   čo je na telefóne zreteľný predel bez prázdneho pásu. !important je
   tu zámerne: bez neho by prebili Tailwind utility py-[clamp(...)]
   (vyššia špecificita arbitrárnej hodnoty) aj spojené selektory typu
   .branches s border-block.

   Výnimky: hero sekcie, ktoré začínajú pod fixnou hlavičkou a vrchný
   padding im drží miesto pre ňu (.hero, .news-hero, .contact-top,
   .sperk-hero, .pravna). Tým sa mení len spodok. .guide + .guide má
   vlastné pravidlo padding-top: 0 a to ostáva, lebo je to jeden blok
   rozdelený do dvoch sekcií.
   ============================================================ */
@media (max-width: 900px) {
  main > section,
  main > div > section {
    padding-top: 52px !important;
    padding-bottom: 52px !important;
  }
  /* Hero sekcie: vrchný odstup drží miesto pre fixnú hlavičku, preto sa
     tu opakujú ich pôvodné hodnoty. POZOR: predtým tu bolo
     `padding-top: revert !important` a to bola chyba — revert nevracia
     hodnotu z tohto štýlu, ale hodnotu prehliadača, teda nulu. Nadpisy
     na stránkach s .news-hero, /kontakt a právnej stránke tak na mobile
     vyliezli pod čiernu lištu. Nahlásil klient z telefónu, 22. 8. 2026.
     (.hero má výšku 100svh a .sperk-hero nesie odstup na dieťati .sh-left,
     tie nulový padding sekcie neboli problém.) */
  main > section.hero { padding-top: 0 !important; padding-bottom: 0 !important; }
  main > section.news-hero { padding-top: clamp(150px, 18vh, 200px) !important; padding-bottom: 40px !important; }
  main > section.contact-top { padding-top: clamp(98px, 11.5vh, 142px) !important; }
  main > section.sperk-hero { padding-top: 0 !important; }
  main > section.pravna { padding-top: clamp(120px, 16vh, 190px) !important; }
  /* dve guide sekcie za sebou sú jeden blok */
  main > section.guide + section.guide { padding-top: 0 !important; }
  /* vnútorné rozostupy skupín, ktoré by inak pribudli k paddingu */
  .svcgroup + .svcgroup { margin-top: 48px; }
  .section-head { margin-bottom: 36px; }
  .memoriam-head { margin-bottom: 36px; }
  .nonstop-inner { padding: 36px 0; }
  .partners { padding: 52px 0 !important; }
}

/* Fotopásy s textom dole (22. 8. 2026). .subhero má min-height 72vh,
   .fleetband 56vh, .album-band až 76vh. Na desktope sú to širokouhlé pásy,
   na telefóne z toho bolo 500 až 600 px fotky a text až na spodku: pri
   scrolle to pôsobilo ako prázdna diera medzi sekciami (zmerané 540 px
   na /o-nas medzi kronikou a tímom). Na mobile stačí 52vh, fotka ostane
   výrazná a text príde skôr. */
@media (max-width: 900px) {
  .subhero { min-height: 52vh; }
  .fleetband { min-height: 46vh; }
  .album-band { height: clamp(360px, 52vh, 480px); }
}

/* Desktop: strop medzier medzi sekciami (22. 8. 2026)

   Po mobilnej oprave je medzera medzi sekciami na telefóne 104 px.
   Na desktope 1920x1080 ostali 260 až 400 px: .guide mala padding až
   225 px, takže medzi „04 Úmrtie v zahraničí“ a „Čo si pripraviť“ bolo
   406 px, 37 % obrazovky. Na notebooku s výškou 768 je to polovica.

   Desktop znesie väčší vzduch než mobil, preto tu nie je jedno tvrdé
   pravidlo ako na mobile: sekcie majú zámerne rôzne rytmy. Strop je ale
   spoločný: 120 px na stranu. Mení sa len päť miest, ktoré ho prekračovali. */
@media (min-width: 901px) {
  /* Strop 100 px na stranu, nie 120: aj pri 120 boli medzery 280 až 340 px,
     lebo k paddingu pribúdajú vnútorné okraje. 100 dá medzery okolo 240,
     čo je pri výške 1080 asi 22 %. Jedno pravidlo pre všetky sekcie v <main>, rovnako ako na mobile.
     Špecificita: `main > section` má (0,0,2) a prehrá s každou triedou
     typu .guide (0,1,0), hoci stojí v súbore neskôr. Preto :where() na
     obale a [class] na sekcii: `main section[class]` dáva (0,1,1), čo
     je viac než jedna trieda a menej než dve, takže výnimky nižšie
     (main > section.hero = 0,1,2) stále vyhrajú. Prvý pokus menil päť
     tried ručne a minul svcgroups, faq-section a Tailwind py-[...]. */
  main section[class],
  main section[id] { padding-top: clamp(72px, 9vh, 100px); padding-bottom: clamp(72px, 9vh, 100px); }
  /* hero sekcie držia vlastný vrch (miesto pre fixnú hlavičku) */
  main > section.hero { padding: 0; }
  main > section.news-hero { padding-top: clamp(150px, 18vh, 200px); padding-bottom: clamp(48px, 7vh, 76px); }
  main > section.contact-top { padding-top: clamp(98px, 11.5vh, 142px); padding-bottom: clamp(30px, 4vh, 52px); }
  main > section.sperk-hero { padding: 0; }
  main > section.pravna { padding-top: clamp(120px, 16vh, 190px); }
  /* Parte: fixná hlavička pláva nad obsahom, 150 px drží miesto pre ňu
     aj drobčeky. Bez výnimky mu spoločné pravidlo stiahlo vrch na ~100 px
     a štítok SMÚTOČNÉ OZNÁMENIE vyliezol 12 px pod lištu. */
  main > section.parte-content { padding-top: 150px; }
  main > section.guide + section.guide { padding-top: 0; }
  main > section.nonstop { padding: 0; }
  /* Zdieľanie je <section> vnútri <main>, takže strop vyššie ho chytil tiež:
     karta v článku dostala 97 px hore aj dole namiesto 30 a blok na fotke
     parte tiež 97 px namiesto 0. Svieca, ktorá sedí tesne nad ním, tak
     vyliezla o 100 px vyššie, na ústa portrétu. Nahlásil Tomáš 30. 8. 2026. */
  main section.zdielanie { padding-top: 30px; padding-bottom: 30px; }
  main section.zd-na-fotke { padding-top: 0; padding-bottom: 0; }
  main > section.cta-band { padding: clamp(72px, 9vh, 100px) 36px; }
  main > section.partners { padding: clamp(64px, 8vh, 90px) 0; }
}

/* Kamenárstvo, desktop (22. 8. 2026, audit 1920x1080) */
@media (min-width: 901px) {
  /* Päť kariet v troch stĺpcoch nechávalo v druhom riadku prázdne tretie
     miesto. Mriežka so šiestimi dráhami: prvý riadok 3 karty po dvoch
     dráhach, druhý riadok 2 karty po troch. Riadky sú plné, karty v druhom
     o polovicu širšie, čo pri dvoch kusoch obsahu neprekáža. */
  #prace .svcgrid { grid-template-columns: repeat(6, 1fr); }
  #prace .svcgrid .first-card { grid-column: span 2; }
  #prace .svcgrid .first-card:nth-child(4),
  #prace .svcgrid .first-card:nth-child(5) { grid-column: span 3; }

  /* Poznámka pod vzorkami žuly mala 177 znakov na riadok cez celý
     kontajner. Strop 70 znakov, ako majú ostatné poznámky. */
}

/* Pole na vlastný nápis bolo skoro neviditeľné: panel na panel, rámik
   8 % biela. Teraz tmavšie dno (bg) a rámik 22 %, takže je jasné, že sa
   dá písať. Platí na všetkých šírkach. */
.kam-inscribe input { background: var(--bg); border-color: rgb(var(--fg-rgb) / 0.22); }
.kam-inscribe input:hover { border-color: rgb(var(--fg-rgb) / 0.4); }
.kam-inscribe input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgb(var(--fg-rgb) / 0.18); }