/* Manrope — hostované lokálne (bez spojenia na Google Fonts, kvôli GDPR
   a rýchlosti). Variabilný font: jeden súbor pokrýva váhy 400–700. */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/manrope-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/manrope-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;
}

/* ==========================================================================
   Stolárstvo a drevostavby Roman Michalic — hlavný štýl
   Farebná paleta vychádza z loga (odtiene dreva/hnedej).
   ========================================================================== */

:root {
  --wood-dark:    #3f2a18;
  --wood-mid:     #aa9169;
  /* Tmavší odtieň --wood-mid pre text odkazov a tlačidlá — kontrast 4,9:1
     s bielym textom / 4,6:1 na krémovom pozadí (WCAG AA = 4,5:1).
     Pôvodný #aa9169 mal len 3:1. */
  --wood-accent:  #866c4b;
  --wood-tan:     #b3814f;
  --wood-light:   #e9d9c3;
  --cream:        #faf6f0;
  --text:         #2b2117;
  --text-muted:   #6b5d4f;
  --white:        #ffffff;
  --success:      #3f6b3a;
  --error:        #a13d2b;

  --radius: 10px;
  --shadow: 0 10px 30px rgba(63, 42, 24, 0.12);
  --shadow-sm: 0 4px 14px rgba(63, 42, 24, 0.10);
  --container: 1390px;
  --header-h: 96px; /* záložná hodnota, presnú výšku (fixed header) dopočíta main.js */

  --font-heading: 'Manrope', Helvetica, Arial, Lucida, sans-serif;
  --font-body: 'Manrope', Helvetica, Arial, Lucida, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--text);
  background: var(--cream);
  line-height: 1.6;
}

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

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  color: var(--wood-dark);
  line-height: 1.25;
  margin: 0 0 0.6em;
}

h1 { font-size: clamp(1.9rem, 4vw, 2.8rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
h3 { font-size: 1.25rem; }

p { margin: 0 0 1em; }

a { color: var(--wood-accent); text-decoration: none; }
a:hover { color: var(--wood-dark); }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 20px;
}

.btn {
  display: inline-block;
  padding: 12px 26px;
  border-radius: 999px;
  font-weight: 600;
  border: 2px solid var(--wood-accent);
  background: var(--wood-accent);
  color: var(--white);
  cursor: pointer;
  transition: transform .15s ease, background .15s ease, color .15s ease;
  font-family: var(--font-body);
  font-size: 1rem;
}
.btn:hover { background: var(--wood-dark); border-color: var(--wood-dark); color: var(--white); transform: translateY(-1px); }

.btn-outline {
  background: transparent;
  color: var(--wood-accent);
}
.btn-outline:hover { background: var(--wood-accent); border-color: var(--wood-accent); color: var(--white); }

/* ---------------- Header ---------------- */

/* Hlavička je vždy "prilepená" (fixed) a v bežnom (kompaktnom, sklenenom)
   stave — to isté na každej podstránke, nech sa scrolluje hocikam, takže
   jej výška (a teda aj main { padding-top } nižšie) sa tam nikdy nemení a
   pri scrolli hore/dole nevzniká žiadny vizuálny skok.
   Výnimka je homepage (body.has-hero-overlay) — tam main { padding-top:0 },
   takže zmena výšky hlavičky nikde nič neposúva, a preto si tam môže dovoliť
   byť navyše: kým nescrollneš, je priehľadná nad hero fotkou a logo o 40 %
   väčšie (viď override nižšie). main.js domeria skutočnú výšku do
   --header-h a pridáva/uberá .is-scrolled podľa scrollu. */
/* .site-header je len priehľadný "fixed" wrapper cez celú šírku (musí byť
   celá šírka, lebo .megamenu sa naň absolútne pozicuje left:0;right:0) —
   samotné pozadie/blur/tieň/zaoblenie karty nesie .header-inner (ten je
   zároveň .container, takže má už z neho max-width a centrovanie), nech
   hlavička vyzerá ako "plávajúca" karta na šírku obsahu, nie na celú
   šírku obrazovky. */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 14px 20px 0;
  background: var(--cream);
  transition: transform .3s ease;
}
/* Homepage (body.has-hero-overlay) aj podstránky s .page-hero: hlavička
   "pláva" nad fotkou hneď na vrchu stránky, takže tento pás pozadia by ju
   zakryl pásikom krémovej — tam teda musí zostať priehľadný, presne ako
   .header-inner. Na podstránkach ostáva .header-inner (karta so sklom)
   vždy nepriehľadná — mení sa LEN pozadie okolo nej (tento pás), aby cez
   neho presvitala .page-hero fotka, nie krémová stránka za ňou. */
body.has-hero-overlay .site-header,
body:has(main > .page-hero) .site-header {
  background: transparent;
}

/* Sklenené pozadie/tieň/zaoblenie karty je na ::before, NIE priamo na
   .header-inner — dôvod: #mainNav (mobilné rozbalené menu) je jeho DOM
   potomok a potrebuje position:fixed počítané voči CELEJ obrazovke.
   Podľa CSS spec ale filter/backdrop-filter (rovnako ako transform,
   perspective, will-change:transform) na predkovi VYTVÁRA NOVÝ containing
   block aj pre position:fixed potomkov — takže backdrop-filter priamo na
   .header-inner by #mainNav namiesto voči viewportu pozicoval voči úzkej
   grid bunke .header-inner, a rozbalené menu by bolo viditeľne posunuté
   mimo stred/mimo obrazovku (presne tento bug, nahlásený a overený).
   ::before nemá vlastných DOM potomkov, takže containing block pre
   #mainNav týmto neovplyvní. */
.header-inner {
  position: relative;
  z-index: 0;
}
.header-inner::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(250, 246, 240, .78);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  box-shadow: 0 4px 24px rgba(63, 42, 24, .08);
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 999px;
  transition: background .25s ease, box-shadow .25s ease, border-color .25s ease;
}

/* Skrývanie hlavičky pri scrolli nadol, návrat pri scrolli nahor (main.js
   pridáva/uberá .is-hidden podľa smeru scrollu) — na mobile aj desktope,
   nech pri čítaní stránky neberie miesto, no je hneď poruke pri návrate. */
.site-header.is-hidden {
  transform: translateY(-100%);
}

/* Len homepage, kým sa ešte nescrollovalo: priehľadná nad hero fotkou. */
body.has-hero-overlay .site-header:not(.is-scrolled) .header-inner::before {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  border-color: transparent;
}

/* V tomto priehľadnom stave by pôvodný tmavohnedý text/ikony boli nad
   tmavou fotkou neviditeľné, tak ich prepneme na svetlé. Len čo pribudne
   .is-scrolled (sklenené pozadie), vrátia sa bežné (tmavé) pravidlá. */
body.has-hero-overlay .site-header:not(.is-scrolled) .main-nav > ul > li > a,
body.has-hero-overlay .site-header:not(.is-scrolled) .nav-toggle,
body.has-hero-overlay .site-header:not(.is-scrolled) .tool-toggle {
  color: var(--white);
  text-shadow: 0 1px 4px rgba(0, 0, 0, .45); /* čitateľné nad hocakou fotkou, nielen tmavou */
}
/* .phone-panel a / .lang-panel a NIE sú v tomto zozname zámerne — sedia
   vnútri vždy nepriehľadnej bielej karty (.tool-panel), takže potrebujú
   svoje bežné (tmavé) farby aj v priehľadnom stave hlavičky, inak by na
   bielom pozadí zmizli. */
body.has-hero-overlay .site-header:not(.is-scrolled) .main-nav > ul > li > a:hover {
  color: var(--white);
  background: rgba(0, 0, 0, .3); /* tmavé priehľadné pozadie — biely text je na ňom čitateľný bez ohľadu na to, aká svetlá/tmavá je fotka pod ním */
}
body.has-hero-overlay .site-header:not(.is-scrolled) .main-nav > ul > li > a.active {
  color: var(--white);
  background: rgba(0, 0, 0, .45);
}
body.has-hero-overlay .site-header:not(.is-scrolled) .brand img {
  filter: brightness(0) invert(1); /* logo na bielo, inak splynie s fotkou */
}

main { padding-top: var(--header-h); }

/* Podstránky s .page-hero (tmavý banner s nadpisom, napr. "Naše služby"):
   rovnaký princíp ako homepage vyššie — banner nech siaha až pod plávajúcu
   hlavičku (tá nad ním len "pláva", presvitá cez ňu jeho fotka/gradient),
   nie aby pred ním bola medzera krémového pozadia stránky. main preto
   stráca svoj padding-top (dopĺňa ho až samotný .page-hero nižšie v
   súbore — len jeho vlastný obsah, nie fotka za ním). */
main:has(> .page-hero) { padding-top: 0; }

/* Homepage: hero slider ide na celú výšku obrazovky pod hlavičku (tá nad
   ním len "pláva"), takže main tu žiadny odsadzujúci padding nepotrebuje —
   odsadenie si namiesto toho dá priamo .hero (viď nižšie), len okolo svojho
   textu, nie okolo celej fotky. */
body.has-hero-overlay main { padding-top: 0; }

.header-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr; /* rovnako široké krajné stĺpce = menu v strede naozaj presne v strede, bez ohľadu na šírku loga/nástrojov */
  align-items: center;
  padding-top: 10px;
  padding-bottom: 10px;
  gap: 20px;
}

/* Explicitné grid-column na všetkých troch — BEZ toho sa stĺpec priraďuje
   len podľa poradia v DOM-e (auto-placement), čo je krehké: na mobile je
   .main-nav zatvorené (display:none), a display:none prvok sa v CSS Grid
   auto-placemente úplne PRESKOČÍ (nedostane žiadnu bunku) — .header-tools
   sa tak "posunulo" do prostredného (2.) stĺpca namiesto tretieho
   (pravého), hamburger teda vizuálne sedel v strede hlavičky, nie pri
   pravom okraji. */
.brand { grid-column: 1; justify-self: start; min-width: 0; }
.brand img {
  height: 45px; /* predvolená (a na podstránkach jediná) veľkosť */
  width: auto;
  /* Logo súbor (od 08/2026, v2 — horizontálne, ikona + text vedľa seba) má
     pomer strán 1028×210 ≈ 4.9:1 — oveľa širšie než pôvodné 240×120 = 2:1,
     preto je aj cieľová výška nižšia (45px ~ 220px šírky, podobné ako
     pôvodných 144px pri starom užšom pomere, primerane väčšie kvôli textu
     v logu). Globálny reset `img { max-width:100%; height:auto }` (viď
     vyššie v súbore) na úzkom stĺpci hlavičky (najmä v zväčšenom
     hero-overlay stave) vedel zúžiť šírku loga (max-width:100% ho zmestí
     do stĺpca), ale výška ostala pevná — logo sa vizuálne zvisle
     "naťahovalo". aspect-ratio zaručí, že sa pri akomkoľvek zmenšení
     šírky prepočíta aj výška v rovnakom pomere (žiadna deformácia),
     object-fit je poistka navyše. */
  aspect-ratio: 1028 / 210;
  object-fit: contain;
  transition: height .25s ease;
}
/* Len homepage, kým sa ešte nescrollovalo: o 40 % väčšie (45px × 1.4). */
body.has-hero-overlay .site-header:not(.is-scrolled) .brand img { height: 63px; }

.main-nav {
  grid-column: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  justify-self: center;
  min-width: 0; /* aby sa vystredené menu vedelo v prípade potreby zúžiť */
  margin-top: 6px; /* posunuté nižšie v rámci lišty (na žiadosť) — margin, NIE transform: transform by vytvoril nový positioning kontext a rozbil by absolútne pozicované .megamenu (left:0;right:0 by sa prepočítalo voči .main-nav namiesto .site-header) */
}

.main-nav ul {
  list-style: none;
  display: flex;
  gap: 22px;
  margin: 0;
  padding: 0;
}

.main-nav a {
  display: inline-flex; /* inak je to inline prvok a vertikálny padding okolo textu (najmä s "rotujúcimi" písmenami) vyzerá nerovnomerne hore/dole */
  align-items: center;
  color: var(--text);
  font-weight: 500;
  padding: 8px 14px;
  border-radius: 999px;
  transition: background .2s ease, color .2s ease;
  white-space: nowrap; /* zabráni zalomeniu medzi inline-block písmenami */
}

.main-nav ul a {
  text-transform: uppercase;
  letter-spacing: .02em;
  font-size: 14px;
}

.main-nav a:hover {
  color: var(--wood-dark);
  background: var(--wood-light);
}
.main-nav a.active {
  color: var(--white);
  background: var(--wood-mid);
}

.letter-swap {
  display: inline-block;
  overflow: hidden;
  height: 1.2em;
  line-height: 1.2em;
  vertical-align: bottom;
}
.letter-reel {
  display: flex;
  flex-direction: column;
  transition: transform .5s cubic-bezier(.34, 1.56, .64, 1);
}
.letter-cell {
  height: 1.2em;
  line-height: 1.2em;
  text-align: center;
}
.main-nav a:hover .letter-reel {
  transform: translateY(-3.6em); /* 3 × výška bunky = posun na posledný (pôvodný) znak */
}

/* ---------------- Mega menu (Služby) ----------------
   .megamenu sa pozicuje absolútne voči .site-header (najbližší positioned
   predok), nie voči <li>, aby vedel siahať na celú šírku hlavičky bez
   ohľadu na to, kde presne "Služby" v strede menu sedí.
   left/right (45px) zámerne o niečo väčšie než horizontálny padding na
   .site-header (20px, viď vyššie) — megamenu je tak užšie než samotná
   .header-inner karta hlavičky nad ním (na želanie, "ešte užšie"), nie
   presne na jej šírku. Predtým 0/0 = celá šírka obrazovky, čo pri
   zaoblenej pilulkovej karte hlavičky vyzeralo na spoji škaredo (hranatý
   pás pod okrúhlymi rohmi). Vlastné zaoblenie len na dolných rohoch —
   hore prilieha priamo pod kartu. */
.megamenu {
  position: absolute;
  top: 100%;
  left: 45px;
  right: 45px;
  background: rgba(250, 246, 240, .96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--shadow);
  border: 1px solid rgba(255, 255, 255, .5);
  border-top: none;
  border-radius: 0 0 28px 28px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.has-megamenu:hover .megamenu,
.has-megamenu:focus-within .megamenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.megamenu-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px 24px;
  padding-top: 22px;
  padding-bottom: 22px;
}

.megamenu .megamenu-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px;
  border-radius: 999px;
  color: var(--text);
  font-weight: 500;
  font-size: .92rem;
  text-transform: none; /* .main-nav ul a je uppercase — položky mega menu nech ostanú bežné */
  letter-spacing: normal;
}
.megamenu .megamenu-item:hover { background: var(--wood-light); color: var(--wood-dark); }
.megamenu .megamenu-item:hover .megamenu-icon { border-color: var(--wood-tan); }
/* Aktuálne otvorená služba (header.php porovnáva $slug so slugom položky)
   — rovnaký princíp odlíšenia ako .main-nav a.active vyššie, len tu
   navyše zvýrazní aj kruhový rámik fotky, nech je jasne vidno, na ktorej
   podstránke z ponuky práve som. */
.megamenu .megamenu-item.active { background: var(--wood-light); color: var(--wood-dark); font-weight: 700; }
.megamenu .megamenu-item.active .megamenu-icon { border-color: var(--wood-tan); }
.megamenu-icon {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--wood-light);
  transition: border-color .2s ease;
}
.megamenu-icon img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------------- Nástroje v hlavičke (hľadanie / telefón / jazyk / Facebook) ----------------
   Každý nástroj (ikona .tool-toggle) má vlastný rozbaľovací panel
   (.tool-panel) s nadpisom a popisom hore. Panel sa už neroztiahne
   vodorovne vo vnútri riadku (to pri otvorení "naťahovalo" .header-tools
   a stláčalo logo vedľa — logo má pevnú výšku, takže img { max-width:100% }
   mu potom zužoval šírku = deformácia), ale je to samostatná karta
   (position: absolute), ktorá sa vysunie NAD ostatný obsah bez toho, aby
   menila šírku hlavičky — viď main.js. */

.header-tools {
  grid-column: 3; /* explicitné, nie len poradie v DOM-e — viď komentár pri .header-inner (bug so schovaným .main-nav na mobile) */
  display: flex;
  align-items: center;
  gap: 10px;
  justify-self: end; /* drží nástroje pri pravom okraji, aj keď .main-nav nie je vo flex toku (mobil) */
}

.tool { display: flex; align-items: center; position: relative; }

.tool-toggle {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: none;
  background: transparent;
  color: var(--wood-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .95rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.tool-toggle svg { display: block; }
.tool-toggle:hover,
.tool.is-open .tool-toggle {
  background: var(--wood-mid);
  color: var(--white);
}

.tool-panel {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  width: min(340px, calc(100vw - 40px)); /* 280px zalamovalo popis pod nadpisom škaredo */
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  z-index: 20;
}
.tool.is-open .tool-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.tool-panel-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--wood-light);
}
.tool-panel-title { font-family: var(--font-heading); color: var(--wood-dark); font-size: 1rem; }
.tool-panel-desc { margin: 0; color: var(--text-muted); font-size: .85rem; line-height: 1.5; }

.phone-panel-links { display: flex; flex-direction: column; gap: 8px; }
.phone-panel-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-radius: 999px;
  border: 2px solid var(--wood-mid);
  color: var(--wood-mid);
  font-weight: 600;
  font-size: .9rem;
  text-align: center;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.phone-panel-links a:hover { background: var(--wood-mid); color: var(--white); }
.phone-panel-links a.phone-panel-email {
  border-color: var(--wood-light);
  color: var(--text-muted);
  font-weight: 500;
  word-break: break-all; /* dlhá e-mailová adresa nech radšej zalomí, než pretečie tlačidlo */
}
.phone-panel-links a.phone-panel-email:hover { background: var(--wood-light); color: var(--wood-dark); border-color: var(--wood-light); }

/* Odkaz na Facebook v paneli "Podporte nás zdieľaním" (desktop tool-panel
   aj mobile subpanel — mobile zdieľa .phone-panel-links tlačidlový vzor,
   desktop má vlastný wrapper .share-panel s rovnakým FB-branded tlačidlom). */
.share-panel-fb,
.share-panel .share-panel-fb {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  background: #1877f2;
  color: #fff !important;
  font-weight: 600;
  font-size: .9rem;
}
.share-panel-fb:hover { background: #0f63d6; }
.mobile-share-desc { color: var(--text-muted); font-size: .85rem; line-height: 1.5; margin: 0 0 12px; }
/* Oddeľuje telefónne čísla od e-mailu — predtým vyzerali ako jedna
   nerozlíšená skupina troch odkazov, e-mail od nich odlišovala len farba. */
.phone-panel-divider {
  display: block;
  margin-top: 6px;
  padding-top: 14px;
  border-top: 1px dashed var(--wood-light);
  text-align: center;
  color: var(--text-muted);
  font-size: .78rem;
}

/* Vlajky sú z pôvodného webu (web/sites/default/files/flags), skopírované
   do assets/img/flags — kódy krajín viď $GLOBALS['jazyky'] v config.php. */
.lang-panel-links { display: flex; flex-direction: column; gap: 2px; }
.lang-panel-links a {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  font-weight: 600;
  font-size: .9rem;
  padding: 6px 8px;
  border-radius: 8px;
  transition: background .15s ease, color .15s ease;
}
.lang-panel-links a:hover { background: var(--wood-light); }
.lang-panel-links a.active { background: var(--wood-light); color: var(--wood-dark); }
.lang-flag {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 3px;
  object-fit: cover;
}

/* .search-widget = vstup + zoznam výsledkov, spolu jeden positioning
   kontext pre .search-results (position:absolute; top:100%), aby sa
   výsledky vysunuli presne pod vstup nech je .search-widget hocikde —
   v plávajúcom .tool-panel (desktop) aj vnútri mobilného menu
   (.mobile-tools, viď media query nižšie a main.js .search-widget). */
.search-widget { position: relative; }

.search-input {
  width: 100%;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--wood-light);
  outline: none;
  appearance: none;
  -webkit-appearance: none; /* Chrome/Safari vedia na input dokresliť vlastný "chrome" okraj aj cez border:none */
  font-family: var(--font-body);
  font-size: .9rem;
  background: var(--cream);
  box-shadow: none;
}
.search-input:focus { outline: none; box-shadow: none; border-color: var(--wood-tan); }
/* type="search" — bez predvoleného vzhľadu a krížika prehliadača. */
.search-input { -webkit-appearance: none; appearance: none; }
.search-input::-webkit-search-cancel-button { -webkit-appearance: none; }
/* Viditeľný fokus pri ovládaní klávesnicou (WCAG 2.4.7). */
.search-input:focus-visible { outline: 2px solid var(--wood-accent); outline-offset: 2px; }

.search-results {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  list-style: none;
  margin: 0;
  padding: 6px;
  max-height: 260px;
  overflow-y: auto;
  z-index: 10;
}
.search-results.has-results { display: block; }
.search-results li a {
  display: block;
  padding: 8px 10px;
  border-radius: 6px;
  color: var(--text);
  white-space: normal;
  font-weight: 500;
}
.search-results li a:hover { background: var(--wood-light); }
.search-results .no-results { padding: 8px 10px; color: var(--text-muted); font-size: .9rem; }

/* ---------------- Mobilné 2-úrovňové menu (ikony + Služby drill-down) ----------------
   #mainNav .mobile-menu je mobile-only (display:flex sa mu dá až v media
   query nižšie), nahrádza plávajúce ikony hľadania/telefónu/jazyka/
   Facebooku aj hover megamenu Služieb, ktoré sú mimo mobilu (.header-tools
   ikony, .megamenu) — jedno tam, druhé tu, nikdy oboje naraz.
   .mobile-menu-panel = jedna "obrazovka" v tomto menu (koreň, alebo
   podpanel hľadania/telefónu/jazyka/Služieb) — vidno vždy len .is-active,
   prepína main.js podľa data-open-panel/data-back-panel/data-panel. */
/* min-width:0 poistka — flex/grid dieťa má predvolené min-width:auto (=
   veľkosť jeho vlastného obsahu), takže akýkoľvek nezalomený/široký
   potomok vnútri (napr. bug s .mobile-menu-list opravený nižšie) by inak
   vedel vytlačiť šírku celého menu von z obrazovky namiesto toho, aby sa
   sám zalomil/orezal. */
.mobile-menu { display: none; min-width: 0; } /* display:flex sa mu dá až v media query nižšie (≤720px) */
.mobile-menu-panel { display: none; flex-direction: column; gap: 20px; min-width: 0; }
.mobile-menu-panel.is-active { display: flex; }

/* 4 dlaždice vedľa seba MUSIA sa zmestiť aj na najužšie bežné mobily
   (320px, napr. iPhone SE) — preto tesnejší gap/padding/font/ikona než pri
   bežných tlačidlách; "Facebook" (najdlhší label) sa pri 320px môže
   zalomiť na 2 riadky, čo je v poriadku (nie je to orezané/pretečené),
   len sa už nezmestí na jeden. */
.mobile-tools-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
/* .mobile-menu .mobile-tools-icon (2 triedy), nie len .mobile-tools-icon —
   inak by .main-nav a (trieda + tag = rovnaká/vyššia špecificita) prebilo
   farbu na Facebook odkaze (jediný <a> spomedzi týchto štyroch dlaždíc,
   zvyšné tri sú <button> — rovnaký "problém" rieši aj .megamenu
   .megamenu-item inde v súbore). */
.mobile-menu .mobile-tools-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 10px 2px;
  border-radius: 14px;
  border: none;
  background: var(--cream);
  color: var(--wood-mid);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .68rem;
  line-height: 1.15;
  text-align: center;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.mobile-menu .mobile-tools-icon:hover,
.mobile-menu .mobile-tools-icon:active { background: var(--wood-mid); color: var(--white); }
.mobile-tools-icon svg { flex: 0 0 auto; width: 18px; height: 18px; }

/* Nadpis podpanela (napr. "Hľadať", "Zavolajte nám") — ikona + text. */
.mobile-tools-label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--wood-dark);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: .92rem;
}
.mobile-tools-label svg { flex: 0 0 auto; color: var(--wood-mid); }

/* "Služby" v koreňovom zozname — jediná položka bez href (je to <button>,
   otvára podpanel), preto potrebuje vlastný štýl namiesto .main-nav a.
   text-transform/letter-spacing/font-size tu opakujú .main-nav ul a
   naschvál — .mobile-menu-drill je <button>, ten selektor (cieli len na
   <a>) naň nesedí, bez tohto by "Služby" ostalo jediné nie-veľkými
   písmenami v zozname vedľa DOMOV/REALIZÁCIE/... */
.mobile-menu-drill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10px 14px;
  border: none;
  border-radius: 999px;
  background: none;
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: .02em;
  text-align: left;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.mobile-menu-drill:hover,
.mobile-menu-drill:active { color: var(--wood-dark); background: var(--wood-light); }
.mobile-menu-drill svg { flex: 0 0 auto; color: var(--wood-tan); }

/* Hlavička podpanela — nadpis (ikona+text) vľavo, tlačidlo Späť vpravo,
   na tom istom riadku (predtým bolo Späť samostatne nad nadpisom). */
.mobile-menu-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
/* Tlačidlo Späť v hlavičke podpanela — vracia na koreň (main.js). */
.mobile-menu-back {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  padding: 6px 10px 6px 6px;
  border: none;
  border-radius: 999px;
  background: none;
  color: var(--wood-mid);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.mobile-menu-back:hover { background: var(--wood-light); color: var(--wood-dark); }

/* Zoznam služieb v podpaneli "Služby" — rovnaké .megamenu-item dlaždice ako
   v desktop hover megamenu, len bez toho, aby museli sedieť vnútri
   .megamenu (ten je čisto pre desktop dropdown pozicovanie/vzhľad). */
/* minmax(0,1fr) namiesto holého 1fr — bez toho grid stĺpec nedovolí
   .megamenu-item zúžiť sa pod prirodzenú šírku jeho obsahu (default
   min-width:auto), takže dlhší názov služby (napr. "Nábytok a interiér
   na mieru") vytlačil riadok širšie než 90vw panel a text sa neželane
   orezal/pretiekol namiesto zalomenia na 2 riadky. */
.mobile-sluzby-list.megamenu-inner { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 0; }
.mobile-sluzby-list .megamenu-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 10px;
  border-radius: 999px;
  min-width: 0;
  color: var(--text);
  font-weight: 500;
  font-size: 1rem;
}
.mobile-sluzby-list .megamenu-item span:not(.megamenu-icon) { min-width: 0; }
.mobile-sluzby-list .megamenu-item:hover { background: var(--wood-light); color: var(--wood-dark); }

.nav-toggle {
  display: none;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--wood-dark);
}
.nav-toggle-bars {
  position: relative; /* obsahujúci blok pre absolútne pozicované "čiarky" nižšie, kvôli animácii na "X" */
  width: 24px;
  height: 18px;
  flex: 0 0 auto;
}
/* 3 čiarky, každá absolútne umiestnená (namiesto flex+gap) — nech sa
   horná/dolná vedia plynulo presunúť na stred a pootočiť do "X" tvaru,
   keď main.js prepne #navToggle[aria-expanded="true"] (menu otvorené). */
.nav-toggle-bars span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 3px;
  border-radius: 3px;
  background: currentColor;
  transition: top .25s ease, transform .25s ease, opacity .2s ease;
}
.nav-toggle-bars span:nth-child(1) { top: 0; }
.nav-toggle-bars span:nth-child(2) { top: 50%; transform: translateY(-50%); }
.nav-toggle-bars span:nth-child(3) { top: 100%; transform: translateY(-100%); }

#navToggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(1) {
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}
#navToggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(2) { opacity: 0; }
#navToggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(3) {
  top: 50%;
  transform: translateY(-50%) rotate(-45deg);
}
.nav-toggle-text {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* ---------------- Hero ---------------- */

.hero {
  --hero-arrow-depth: clamp(50px, 7vw, 170px); /* pevných 80px bolo na širokých obrazovkách (>1600px) opticky príliš plytké — hrot skoro nebadať, vyzeralo to ako jedna šikmá čiara namiesto symetrickej šípky. Škáluje sa s šírkou, aby hrot bol vždy zreteľný. */
  position: relative;
  min-height: 100vh;
  padding: 0; /* section {padding:64px 0} by inak pridal pruh navyše nad/pod 100vh slider */
  color: var(--white);
}

/* Orezanie (clip-path) je zámerne na samostatnom vnútornom wrapperi
   .hero-photo, NIE priamo na .hero — keby bolo na .hero, orezalo by aj
   .hero-divider (čiaru) ako svojho potomka presne v tej istej spodnej
   ploche, ktorú sama vykrajuje, takže by nebola vidno takmer vôbec
   (len v tom mikroskopickom hrote v strede). Takto fotka + gradient
   dostanú tvar šípky, zatiaľ čo čiara/miniatúry/scroll-cue ostávajú
   mimo orezania a vykreslia sa nad/vedľa nej normálne. */
.hero-photo {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(63,42,24,.55), rgba(63,42,24,.75)), var(--wood-dark);
  background-size: cover;
  background-position: center;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--hero-arrow-depth)), 50% 100%, 0 calc(100% - var(--hero-arrow-depth)));
  -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--hero-arrow-depth)), 50% 100%, 0 calc(100% - var(--hero-arrow-depth)));
}

/* .hero-divider (svetlohnedá čiara popri okraji) a mäkký biely gradient
   boli skúsené a zamietnuté — zostáva len čistý plný tvar šípky vyššie,
   bez ozdôb navyše (bežný "shape divider" štýl). */

.hero-slide {
  position: absolute; /* všetky slidy prekryté cez seba, prepína sa medzi nimi len opacity — plynulý crossfade */
  inset: 0;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  opacity: 0;
  transition: opacity 1.2s ease;
  pointer-events: none;
}
.hero-slide.is-active {
  opacity: 1;
  z-index: 1;
  pointer-events: auto;
}
/* Neaktívne slidy mimo poradia klávesnice (Tab) a čítačiek – visibility
   sa prepne až po dobehnutí prechodu, crossfade ostáva plynulý. */
.hero-slide:not(.is-active) { visibility: hidden; transition: opacity 1.2s ease, visibility 0s linear 1.2s; }
.hero-pause {
  position: absolute; right: 24px; bottom: calc(var(--hero-arrow-depth) + 24px); z-index: 3;
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  border: 1px solid rgba(255,255,255,.5); border-radius: 50%; background: rgba(43,33,23,.55); color: #fff; cursor: pointer;
}
.hero-pause:hover { background: rgba(43,33,23,.8); }
.hero-thumbs .hero-pause { position: static; align-self: center; flex: 0 0 auto; }
@media (prefers-reduced-motion: reduce) {
  .hero-inner.hero-text-in { animation: none; }
  .hero-slide { transition: none; }
}
/* Tmavý gradient priamo NAD fotkou — pôvodne bol len na .hero (rodič),
   ale .hero-slide (fotka) ho ako dieťa prekryla celý, takže sa nikdy
   reálne nezobrazil a text/hlavička nad fotkou neboli čitateľné. */
.hero-slide::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(63,42,24,.85) 0%, rgba(63,42,24,.55) 45%, rgba(63,42,24,.1) 75%),
    linear-gradient(180deg, rgba(63,42,24,.55), rgba(63,42,24,.25) 45%, rgba(63,42,24,.7));
}

.hero-inner {
  position: relative; /* nad ::before overlayom */
  z-index: 1;
  max-width: 640px;
  margin: 0;
  margin-left: max(20px, calc((100% - var(--container)) / 2)); /* zarovnané na ľavú stranu, na rovnaké miesto ako ostatné sekcie (namiesto zdedeného .container margin:auto, ktoré text centrovalo) */
  padding: 60px 0;
  will-change: transform, opacity; /* posúva/stráca priehľadnosť pri scrolli — main.js */
}

/* Text sa "zjaví" zhora na svoju pozíciu — pri prvom načítaní aj pri
   každej zmene fotky v slideri (main.js pridáva/odoberá triedu, aby sa
   animácia dala spustiť znova). */
@keyframes hero-text-in {
  from { opacity: 0; transform: translateY(-32px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero-inner.hero-text-in {
  animation: hero-text-in .9s cubic-bezier(.22, 1, .36, 1) both;
}

.hero h1, .hero .hero-title { color: var(--white); }
/* 2. a 3. slide majú nadpis ako <h2> (na stránke smie byť len jeden <h1>), vizuálne ako h1. */
.hero .hero-title { font-size: clamp(1.9rem, 4vw, 2.8rem); }
.hero p.lead { font-size: 1.15rem; color: var(--wood-light); margin-bottom: 1.6em; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.hero h1, .hero .hero-title { text-shadow: 0 2px 8px rgba(0,0,0,.45); }
.hero .btn-group { display: flex; gap: 14px; flex-wrap: wrap; }

/* Sekundárne tlačidlo v hero ("Nezáväzný dopyt") — sklenený (glass)
   efekt namiesto plného bieleho obrysu: polopriehľadné biele pozadie
   s rozmazaným podkladom, jemný svetlý rámik. Číta sa dobre na hocakej
   fotke a odlišuje sa od hlavného (plného) tlačidla vedľa neho. */
.hero .btn-outline {
  background: rgba(43, 33, 23, .45);
  border-color: rgba(255, 255, 255, .6);
  color: var(--white);
  backdrop-filter: blur(10px) saturate(160%);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
}
.hero .btn-outline:hover {
  background: rgba(255, 255, 255, .26);
  border-color: rgba(255, 255, 255, .65);
  color: var(--white);
}

/* Malé náhľady "ostatných" fotiek vpravo — klik prepne na danú fotku.
   Aktuálne zobrazená fotka (.is-current) sa v pruhu neukazuje, len tie
   zvyšné (odtiaľ "ostatné" — main.js prepína triedu pri zmene slidu). */
.hero-thumbs {
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2; /* nad aktívnym .hero-slide (z-index:1) — inak ho nepriehľadná fotka slidu prekryje */
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.hero-thumb {
  width: 72px;
  height: 72px;
  padding: 0;
  border: 2px solid rgba(255, 255, 255, .7);
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .3);
  cursor: pointer;
  opacity: .85;
  transition: opacity .2s ease, transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.hero-thumb:hover { opacity: 1; transform: scale(1.05); border-color: var(--white); }
.hero-thumb.is-current {
  opacity: 1;
  border-color: var(--wood-tan);
  box-shadow: 0 0 0 2px var(--wood-tan), 0 4px 14px rgba(0, 0, 0, .3);
}

/* Ikona "scrolluj nižšie" — obrys myšky s bodkou (koliesko), ktorá
   plynulo "steká" nadol a mizne, ako klasická scroll-down animácia.
   Klik plynule odscrolluje presne na koniec heru (main.js). */
.hero-scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 28px; /* ikonka je vodorovne v strede — presne tam, kde hrot šípky siaha až po úplný spodok, takže tam fotka pod ňou je vždy celá (netreba odstup podľa hĺbky výrezu, tá sa týka len krajov) */
  transform: translateX(-50%);
  z-index: 2;
  width: 34px;
  height: 34px;
  padding: 0;
  border: none;
  background: none;
  color: var(--white);
  cursor: pointer;
  opacity: .85;
  transition: opacity .2s ease, transform .2s ease;
}
.hero-scroll-cue:hover {
  opacity: 1;
  transform: translateX(-50%) translateY(3px);
}
.hero-scroll-cue svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
}
.hero-scroll-dot {
  fill: currentColor;
  stroke: none;
  animation: hero-scroll-wheel 1.8s ease-in-out infinite;
}
@keyframes hero-scroll-wheel {
  0%   { opacity: 1; transform: translateY(0); }
  60%  { opacity: 0; transform: translateY(9px); }
  61%  { opacity: 0; transform: translateY(0); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ---------------- Hero 2 (scroll-scrubbed slider — /domov2/ návrh) ----------------
   Testovacia alternatíva k .hero vyššie: namiesto autoplay crossfade sa tu tri
   fotky menia priamo podľa pozície scrollu (ako napr. aether-architectu-60.aura.build).
   .hero2-pin je vysoký 300vh (3 × výška obrazovky) a vnútri "prilepený"
   (position:sticky) .hero2-viewport ostáva 100vh na mieste, kým sa cez neho
   prescrolluje — JS (inline v domov2/index.php) podľa toho, koľko z tých 300vh
   už ubehlo, prepína aktívnu fotku/text (0–33 % prvá, 33–66 % druhá, 66–100 %
   tretia) a plní progress pásik dole. Po prescrollovaní celých 300vh sa sekcia
   prirodzene "odlepí" a pokračuje bežný obsah stránky. */
.hero2 {
  position: relative;
  padding: 0; /* section {padding:100px 0} by inak pridal krémový pruh navyše nad pinovaným hero2-pin — presne to spôsobovalo "rozbitú" priehľadnú hlavičku (videla cez seba len holé pozadie stránky, nie fotku pod sebou) */
  color: var(--white);
}

.hero2-pin { position: relative; height: 300vh; }

.hero2-viewport {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  --hero2-arrow-depth: clamp(50px, 7vw, 170px); /* rovnaký šípkový výrez ako pri .hero */
}

.hero2-photo {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(63,42,24,.55), rgba(63,42,24,.75)), var(--wood-dark);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--hero2-arrow-depth)), 50% 100%, 0 calc(100% - var(--hero2-arrow-depth)));
  -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--hero2-arrow-depth)), 50% 100%, 0 calc(100% - var(--hero2-arrow-depth)));
}

.hero2-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1); /* priblíženie (zoom-in) sa dopočítava priebežne so scrollom priamo v JS (inline v domov2/index.php) — preto tu bez transition na transform, nech to reaguje okamžite, nie s 1.8s oneskorením */
  transition: opacity 1s ease;
  will-change: transform, opacity;
}
.hero2-slide.is-active { opacity: 1; z-index: 1; }
.hero2-slide::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(63,42,24,.85) 0%, rgba(63,42,24,.55) 45%, rgba(63,42,24,.1) 75%),
    linear-gradient(180deg, rgba(63,42,24,.55), rgba(63,42,24,.25) 45%, rgba(63,42,24,.7));
}

.hero2-text {
  position: absolute;
  inset: 0;
  max-width: 640px;
  margin: 0;
  margin-left: max(20px, calc((100% - var(--container)) / 2));
  padding: 60px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0;
  transform: translateY(18px);
  pointer-events: none;
  transition: opacity .6s ease, transform .6s ease;
}
.hero2-text.is-active { opacity: 1; transform: translateY(0); pointer-events: auto; z-index: 1; }

@keyframes hero2-text-in {
  from { opacity: 0; transform: translateY(-32px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero2-text.is-active.hero2-text-in {
  animation: hero2-text-in .9s cubic-bezier(.22, 1, .36, 1) both;
}

.hero2-text h1 { color: var(--white); }
.hero2-text p.lead { font-size: 1.15rem; color: var(--wood-light); margin-bottom: 1.6em; }
.hero2-text .btn-group { display: flex; gap: 14px; flex-wrap: wrap; }
.hero2-text .btn-outline {
  background: rgba(255, 255, 255, .14);
  border-color: rgba(255, 255, 255, .4);
  color: var(--white);
  backdrop-filter: blur(10px) saturate(160%);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
}
.hero2-text .btn-outline:hover {
  background: rgba(255, 255, 255, .26);
  border-color: rgba(255, 255, 255, .65);
  color: var(--white);
}

/* Náhľady vpravo — vizuálne rovnaké ako pri .hero, tu ale klik plynule
   odscrolluje stránku na daný úsek pinu namiesto prepnutia bez scrollu. */
.hero2-thumbs {
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.hero2-thumb {
  width: 72px;
  height: 72px;
  padding: 0;
  border: 2px solid rgba(255, 255, 255, .7);
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .3);
  cursor: pointer;
  opacity: .85;
  transition: opacity .2s ease, transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.hero2-thumb:hover { opacity: 1; transform: scale(1.05); border-color: var(--white); }
.hero2-thumb.is-current {
  opacity: 1;
  border-color: var(--wood-tan);
  box-shadow: 0 0 0 2px var(--wood-tan), 0 4px 14px rgba(0, 0, 0, .3);
}

/* Počítadlo "01 / 03" + tenký progress pásik — koľko z pinovanej časti
   (300vh) už bolo prescrollované. */
.hero2-progress {
  position: absolute;
  left: max(20px, calc((100% - var(--container)) / 2));
  bottom: calc(var(--hero2-arrow-depth) + 34px);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--wood-light);
  font-family: var(--font-heading);
}
.hero2-progress-num { font-size: .95rem; letter-spacing: .04em; display: flex; align-items: baseline; gap: 4px; }
.hero2-progress-num i { font-style: normal; opacity: .55; }
.hero2-progress-track {
  position: relative;
  width: 120px;
  height: 2px;
  background: rgba(255, 255, 255, .25);
  border-radius: 2px;
  overflow: hidden;
}
.hero2-progress-fill {
  position: absolute;
  inset: 0;
  background: var(--wood-tan);
  transform: scaleX(0);
  transform-origin: left center;
}

.hero2-scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 28px; /* v strede hrot šípkového výrezu siaha až po úplný spodok, takže tam je fotka vždy celá — rovnaké umiestnenie ako .hero-scroll-cue */
  transform: translateX(-50%);
  z-index: 2;
  width: 34px;
  height: 34px;
  padding: 0;
  border: none;
  background: none;
  color: var(--white);
  cursor: pointer;
  opacity: .85;
  transition: opacity .3s ease, transform .2s ease;
}
.hero2-scroll-cue:hover { opacity: 1; transform: translateX(-50%) translateY(3px); }
.hero2-scroll-cue svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.4; }
.hero2-scroll-dot { fill: currentColor; stroke: none; animation: hero-scroll-wheel 1.8s ease-in-out infinite; }

/* ---------------- Sections ---------------- */

section { padding: 100px 0; }
section.alt { background: var(--white); }

.section-head {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 40px;
}
.section-head p { color: var(--text-muted); }
.eyebrow {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .8rem;
  font-weight: 700;
  color: var(--wood-accent);
  margin-bottom: 10px;
}

/* Cards / services grid */

.grid {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 30px 26px;
  box-shadow: var(--shadow-sm);
  border-top: 4px solid var(--wood-tan);
}
.card .icon { display: block; margin-bottom: 12px; color: var(--wood-mid); }
.icon-svg { width: 34px; height: 34px; display: block; }
.card ul { padding-left: 1.1em; color: var(--text-muted); margin: 0.6em 0 0; }
.card ul li { margin-bottom: 4px; }

/* Karusel — spoločný pre fotodlaždice služieb aj pásik "Ukážka realizácií".
   Vodorovne scrollovateľná stopa (funguje aj bez JS — potiahnutím/kolieskom),
   šípky ju len posúvajú o kúsok a schovajú sa na začiatku/konci (main.js). */

.carousel { position: relative; }
.carousel-track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.carousel-track::-webkit-scrollbar { display: none; }
/* Karusel, ktorý sa posúva podľa vertikálneho scrollu stránky (main.js) —
   `scroll-behavior:smooth` by tam každý scroll-tick naháňal s oneskorením
   (rubber-band efekt), preto pre tento variant vypnuté; plynulosť tu
   zabezpečuje samotná častosť prepočtu (requestAnimationFrame). */
.carousel-scroll-linked .carousel-track { scroll-behavior: auto; scroll-snap-type: none; }
.carousel-track > * { flex: 0 0 auto; scroll-snap-align: start; }

.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: none;
  background: var(--white);
  color: var(--wood-dark);
  box-shadow: var(--shadow);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  line-height: 1;
  z-index: 2;
  transition: background .2s ease, color .2s ease, opacity .2s ease;
}
.carousel-btn:hover { background: var(--wood-mid); color: var(--white); }
.carousel-prev { left: -6px; }
.carousel-next { right: -6px; }
@media (max-width: 720px) {
  .carousel-btn { display: none; } /* na mobile stačí potiahnuť prstom */
}

/* Service tiles (fotodlaždice → teraz karty s okrúhlou fotkou) — homepage "Čo robíme" */

.service-tiles {
  gap: 20px;
  align-items: stretch;
}
.service-tile {
  width: min(300px, 78vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 30px 24px;
  color: var(--text);
}
.service-tile img {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--wood-light);
  margin-bottom: 18px;
  transition: transform .3s ease, border-color .3s ease;
}
.service-tile:hover img { transform: scale(1.06); border-color: var(--wood-tan); }
.service-tile-body {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.service-tile-body h3 { color: var(--wood-dark); margin: 0 0 6px; font-size: 1.1rem; }
.service-tile-body p { margin: 0; font-size: .88rem; color: var(--text-muted); }
.service-tile-items {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-top: 14px;
}
.service-tile-items span {
  font-size: .76rem;
  font-weight: 600;
  color: var(--wood-dark);
  background: var(--wood-light);
  border-radius: 999px;
  padding: 4px 11px;
}
.service-tile-arrow {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--wood-accent);
  transition: color .2s ease;
}
.service-tile:hover .service-tile-arrow { color: var(--wood-dark); }

/* Statická mriežka tých istých dlaždíc (bez carouselu/posúvania) — napr.
   kategórie na hube /realizacie/. Na rozdiel od .service-tiles v karuseli
   dlaždice nemajú pevnú šírku, riadi ich grid stĺpec. */
.service-tiles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}
.service-tiles-grid .service-tile { width: auto; }

/* Realizácie: obdĺžniková fotka cez celú šírku karty (produkty majú okrúhlu),
   aby sa hub /realizacie/ a slider „Ďalšie realizácie“ odlíšili od produktov. */
.realizacia-tile { justify-content: flex-start; padding: 0 0 22px; overflow: hidden; }
.realizacia-tile img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  border: 0;
  border-radius: 0;
  margin: 0 0 18px;
}
.realizacia-tile img { transition: filter .3s ease; }
.realizacia-tile:hover img { transform: none; filter: brightness(1.08); }
.realizacia-tile .service-tile-body { padding: 0 18px; }

/* Pásik doplnkových služieb bez vlastnej podstránky (Poradenstvo, Rozpočty…)
   na hube /produkty/. */
.extra-services-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}
.realizacia-sluzby { margin-top: 48px; text-align: center; }
.realizacia-sluzby p { margin-bottom: 14px; }
a.extra-service-pill:hover { border-color: var(--wood-accent); color: var(--wood-accent); }
.extra-service-pill {
  font-weight: 700;
  font-size: 1rem;
  color: var(--wood-dark);
  background: var(--white);
  border: 2px solid var(--wood-light);
  border-radius: 999px;
  padding: 12px 26px;
}

/* Pásik "Ukážka realizácií" na homepage — rovnaký karusel, len s malými
   fotkami namiesto dlaždíc služieb. (Statická mriežka `.gallery-grid` sa
   používa inde — napr. na celej `/realizacie/` — tú nechávame ako mriežku.) */

.gallery-carousel { gap: 16px; }
.gallery-carousel > a {
  display: block;
  width: min(260px, 68vw);
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.gallery-carousel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s ease;
}
.gallery-carousel a:hover img { transform: scale(1.06); }

/* ---------------- Photo fan/stack (scroll reveal) — /domov2/ návrh ----------------
   Náhrada karuselu "Ukážka realizácií" na /domov2/: 5 fotiek začína poukladaných
   presne na sebe (ako kôpka), pri prescrollovaní do viewportu sa "vyklopí" do
   vejára (IntersectionObserver + CSS transition), pri hoveri fotka vyskočí navrch
   a mierne sa zväčší. Čisto CSS/JS — bez knižnice na fyziku pružiny (nahradené
   cubic-bezier krivkou, ktorá mierne "prestrelí" cieľ, podobný pocit ako spring). */
.photo-fan {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  height: 420px;
  margin-bottom: 12px;
}
.photo-fan-stack { position: relative; width: 260px; height: 260px; }

.photo-fan-item {
  position: absolute;
  inset: 0;
  display: block;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--shadow);
  z-index: var(--z);
  cursor: grab;
  transform: translate(0, 0) rotate(0deg) scale(1); /* kým sa neaktivuje .is-visible, všetky fotky ležia presne na sebe (kôpka) */
  transition: transform .7s cubic-bezier(.34, 1.56, .64, 1), box-shadow .3s ease;
}
.photo-fan-item img { width: 100%; height: 100%; object-fit: cover; display: block; }

.photo-fan-stack.is-visible .photo-fan-item {
  transform: translate(var(--fx), var(--fy)) rotate(var(--fr)) scale(1);
  transition-delay: calc(var(--i) * .12s); /* postupné rozprestieranie fotka po fotke, nie naraz */
}
.photo-fan-stack.is-visible .photo-fan-item:hover,
.photo-fan-stack.is-visible .photo-fan-item:focus-visible {
  transform: translate(var(--fx), var(--fy)) rotate(0deg) scale(1.09);
  transition-delay: 0s;
  z-index: 999;
  box-shadow: 0 20px 45px rgba(63, 42, 24, .35);
}
.photo-fan-item:active { cursor: grabbing; }

@media (max-width: 860px) {
  .photo-fan { height: 300px; }
  .photo-fan-stack { width: 195px; height: 195px; }
  .photo-fan-stack.is-visible .photo-fan-item {
    transform: translate(var(--fx-md), var(--fy-md)) rotate(var(--fr)) scale(1);
  }
  .photo-fan-stack.is-visible .photo-fan-item:hover,
  .photo-fan-stack.is-visible .photo-fan-item:focus-visible {
    transform: translate(var(--fx-md), var(--fy-md)) rotate(0deg) scale(1.09);
  }
}
@media (max-width: 560px) {
  .photo-fan { height: 260px; }
  .photo-fan-stack { width: 130px; height: 130px; }
  .photo-fan-stack.is-visible .photo-fan-item {
    transform: translate(var(--fx-sm), var(--fy-sm)) rotate(var(--fr)) scale(1);
  }
  .photo-fan-stack.is-visible .photo-fan-item:hover,
  .photo-fan-stack.is-visible .photo-fan-item:focus-visible {
    transform: translate(var(--fx-sm), var(--fy-sm)) rotate(0deg) scale(1.09);
  }
}

/* ---------------- Stacking cards (scroll) — /domov2/ návrh ----------------
   Náhrada karuselu "Kompletné služby okolo dreva" na /domov2/: kartičky idú
   pri scrollovaní na seba (namiesto vodorovného potiahnutia). Čisto CSS,
   bez JS — každá .stack-card je position:sticky na takmer rovnakej pozícii
   (top sa mierne líši podľa --i, takže vznikne jemné "vejárovité" vykuknutie
   predchádzajúcej karty spod tej aktuálnej). Kartičky idúce v poradí za sebou
   v DOM-e sa prekresľujú nad predchádzajúcimi (neskorší súrodenec = vyššie),
   margin-bottom dáva každej karte "dobeh" scrollu, kým ju prekryje ďalšia.
   Služby idú v dvojiciach (.stack-card-pair, viď domov2/index.php) — na PC
   sedia dve vedľa seba v jednom rámci namiesto jednej za druhou, foto je
   kruhové (predtým 4:3 dlaždica). */
.stack-cards {
  position: relative;
  /* padding-bottom (čo i len 1px) zabráni tomu, aby sa margin-bottom
     poslednej karty (posledné dieťa, žiadny padding/border na rodičovi)
     "prepadol" von z .stack-cards (bežný CSS margin-collapse cez posledné
     dieťa) — bez toho by rodič reálne nemal vlastnú výšku pre "dobeh"
     poslednej karty a tá by sa nikdy poriadne neprilepila (hneď by sa
     uvoľnila a nabehol by scroll ďalšej sekcie). */
  padding-bottom: 1px;
}

/* Nadpis sekcie je prvé dieťa .stack-cards (nie vo vlastnom .container nad
   ňou), aby mal position:sticky dostatočne vysoký rodič na to, aby zostal
   prilepený POČAS CELÉHO rolovania kariet, nie len tesne pred nimi (viď
   komentár v domov2/index.php). z-index musí prebiť aj poslednú kartu
   (max. --i), inak by ju pri vysokom scrolli prekryla; gradient namiesto
   plnej farby pozadia, nech sa karta pod ním "vynára" mäkko, nie na ostro. */
.stack-cards-head {
  position: sticky;
  top: var(--header-h, 90px);
  z-index: 50;
  padding-top: 44px;
  background: linear-gradient(var(--cream) 70%, transparent);
}

.stack-card {
  position: sticky;
  /* --stack-head-h = skutočná (JS-odmeraná, domov2/index.php) výška
     .stack-cards-head — tá sa mení podľa toho, ako sa nadpis/popis zalomí
     na danú šírku obrazovky. Predtým tu bolo napevno len "+22px" (počítalo
     sa s tým, že nad kartou je len tenká hlavička webu) — keď sa nadpis
     sekcie stal tiež sticky (viď vyššie), karta sa pri scrolli pripla
     len 22px pod hlavičku webu, teda hlboko VNÚTRI oveľa vyššieho sticky
     nadpisu → vizuálne sa prekrývali (karta "cez" text nadpisu). */
  top: calc(var(--header-h, 90px) + var(--stack-head-h, 170px) + 32px + (var(--i, 0) * 16px));
  z-index: calc(var(--i, 0) + 1); /* neskoršia karta vždy nad predchádzajúcou, aj keby poradie v cascade rozhodlo inak */
  margin-bottom: 48vh; /* "dobeh" — kým sa prescrolluje, karta zostáva navrchu viditeľná celá; aj posledná karta ho potrebuje, inak sa nestihne poriadne "dotiahnuť" a hneď nabehne ďalšia sekcia */
}

.stack-card-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: var(--container);
  margin: 0 auto;
}

.stack-card-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
  background: var(--white);
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(63, 42, 24, .22);
  padding: 36px 28px;
  color: var(--text);
}
.stack-card-media {
  display: block;
  flex: 0 0 auto;
  width: 128px;
  height: 128px;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid var(--wood-light);
  transition: border-color .2s ease;
}
.stack-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.stack-card-inner:hover .stack-card-media { border-color: var(--wood-tan); }
.stack-card-inner:hover .stack-card-media img { transform: scale(1.08); }

.stack-card-body { display: flex; flex-direction: column; align-items: center; }
.stack-card-num {
  font-family: var(--font-heading);
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--wood-tan);
  margin-bottom: 6px;
}
.stack-card-body h3 { color: var(--wood-dark); margin: 0 0 10px; font-size: 1.25rem; }
.stack-card-body p { margin: 0; color: var(--text-muted); }
.stack-card-arrow {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 18px;
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--wood-mid);
  transition: color .2s ease, gap .2s ease;
}
.stack-card-inner:hover .stack-card-arrow { color: var(--wood-dark); gap: 10px; }

@media (max-width: 860px) {
  /* Dvojica sa na užšom páse rozpadne pod seba — jedna sticky "zastávka"
     pri scrolli tak stále ukáže obe služby naraz, len zvislo. */
  .stack-card-pair { grid-template-columns: 1fr; gap: 16px; }
  .stack-card-inner { padding: 28px 24px; }
}
@media (max-width: 720px) {
  .stack-card { margin-bottom: 30vh; }
  .stack-card-inner { border-radius: 16px; padding: 24px 20px; gap: 10px; }
  .stack-card-media { width: 100px; height: 100px; }
  .stack-card-body h3 { font-size: 1.15rem; }
  .stack-cards-head { padding-top: 24px; }
}

/* About / split section */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
.split img { border-radius: var(--radius); box-shadow: var(--shadow); }
.stat-row { display: flex; gap: 32px; margin-top: 24px; flex-wrap: wrap; }
.stat b { display: block; font-family: var(--font-heading); font-size: 1.8rem; color: var(--wood-dark); }
.stat span { color: var(--text-muted); font-size: .9rem; }

/* Domov2-špecifické doladenie "Poctivé remeslo" — viď komentár v
   domov2/index.php. Foto na širokých obrazovkách predtým naťahovalo celú
   polovicu .split mriežky (opticky príliš dominantné); tu má strop a
   sedí vycentrované vo svojom stĺpci. */
.split-remeslo img { max-width: 440px; width: 100%; margin: 0 auto; }

/* Certifikát/osvedčenie (napr. /pomoc-pri-realizacii/) — menší než bežná
   fotka v .split (je to portrétový dokument, nie realizácia), s náznakom
   klikateľnosti na zväčšenie v lightboxe (viď main.js, .certificate-link
   je pridané do rovnakého selektora ako .gallery-grid a). */
.certificate-link {
  display: block;
  max-width: 320px;
  width: 100%;
  margin: 0 auto;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  cursor: zoom-in;
  transition: transform .2s ease, box-shadow .2s ease;
}
.certificate-link:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm), 0 12px 24px rgba(0,0,0,.12); }
.certificate-link img { display: block; width: 100%; border-radius: 0; box-shadow: none; }
/* Karty s farebným ľavým okrajom (predošlá verzia) pôsobili podľa
   užívateľa lacno/zle — nahradené oveľa strízlivejším riešením: len tenká
   horná linka ako oddeľovač nad každou štatistikou, žiadne pozadie/rámik. */
.stat-row-remeslo {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.stat-row-remeslo .stat { padding-top: 14px; border-top: 2px solid var(--wood-light); }
.stat-row-remeslo .stat b { font-size: 1.5rem; }
@media (max-width: 640px) {
  .stat-row-remeslo { grid-template-columns: 1fr; }
}

/* CTA band */

.cta-band {
  background: var(--wood-dark);
  color: var(--white);
  text-align: center;
}
.cta-band h2 { color: var(--white); }
.cta-band p { color: var(--wood-light); }

/* Svetlý variant CTA pásu (napr. "Plánujete drevostavbu?" na produktových
   podstránkach) — bez tmavého pozadia/fotky, len centrovaný text a
   tlačidlo na bielom/krémovom pozadí sekcie (dedí ho z .alt alebo main).
   Vyšší padding, nech má samostatná sekcia dosť vzduchu okolo seba. */
.cta-band-light { text-align: center; padding-top: 160px; padding-bottom: 160px; }
.cta-band-light p { color: var(--text-muted); max-width: 560px; margin-left: auto; margin-right: auto; }

/* Parallax fotka na pozadí CTA pásu "Máte predstavu o vlastnom projekte?"
   — .cta-band-bg je orezávacie okno (overflow:hidden, presne veľkosť
   sekcie), samotný <img> je vyšší než okno a main.js mu podľa scrollu
   posúva translateY (pomalšie než skutočný scroll = klasický parallax).
   Bez JS (napr. pomalé pripojenie) ostáva fotka jednoducho vystredená
   a nehybná — --parallax-y má fallback 0px. */
/* Zúbkovaný (šípkový) výrez hore AJ dole — rovnaký vizuálny motív ako
   .page-hero (výrez dole, hrot dolu) a .site-footer (výrez hore, hrot
   hore) kombinovaný do jedného pásu, keďže .cta-band-parallax sedí
   uprostred stránky medzi dvoma bežnými (obdĺžnikovými) sekciami — bez
   týchto zúbkov pôsobil ako jediný "hranatý" blok uprostred inak
   šípkovaného layoutu. Vlastná (plytšia) hĺbka, nech sekcia so stredne
   dlhým textom nevyzerá príliš stlačená. */
.cta-band-parallax {
  --cta-arrow-depth: clamp(20px, 3vw, 40px);
  position: relative;
  overflow: hidden;
  background: var(--wood-dark);
  clip-path: polygon(0 var(--cta-arrow-depth), 50% 0, 100% var(--cta-arrow-depth), 100% calc(100% - var(--cta-arrow-depth)), 50% 100%, 0 calc(100% - var(--cta-arrow-depth)));
  -webkit-clip-path: polygon(0 var(--cta-arrow-depth), 50% 0, 100% var(--cta-arrow-depth), 100% calc(100% - var(--cta-arrow-depth)), 50% 100%, 0 calc(100% - var(--cta-arrow-depth)));
  padding-top: calc(var(--cta-arrow-depth) + 60px);
  padding-bottom: calc(var(--cta-arrow-depth) + 60px);
  margin: 20px 0;
}
.cta-band-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}
.cta-band-bg img {
  position: absolute;
  left: 0;
  top: -35%;
  width: 100%;
  height: 170%;
  object-fit: cover;
  transform: translateY(var(--parallax-y, 0px));
  will-change: transform;
}
/* Tmavý gradient nad fotkou, nech je biely text vždy čitateľný bez ohľadu
   na to, ktorá časť obrázku sa práve nachádza pod ním. */
.cta-band-parallax::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(63,42,24,.82), rgba(63,42,24,.88));
}
.cta-band-parallax .container { position: relative; z-index: 2; }

/* Homepage "Máte predstavu o vlastnom projekte?" — vyšší padding než
   ostatné CTA pásy (viac vzduchu okolo textu/formulára v tomto
   prominentnom, posledný-pred-footrom páse).
   margin-top záporný o presne --cta-arrow-depth: bežný .cta-band-parallax
   má margin:20px 0, čo necháva pred hrotom horného zúbku pruh viditeľného
   pozadia POD sekciou (main/body = krémová) — nevadí to pri tmavších
   susedných sekciách, ale sekcia nad týmto pásom (Recenzie zákazníkov) je
   biela, takže ten krémový pruh pôsobil ako neplánovaná medzera/chyba.
   Záporný margin "vtiahne" zúbok tesne pod bielu sekciu, nech je prechod
   plynulý. */
#dopyt.cta-band-parallax { padding-top: 160px; padding-bottom: 160px; margin-top: calc(-1 * var(--cta-arrow-depth)); margin-bottom: 20px; }

/* Variant na produktových podstránkach, kde sekcie priamo nad/pod CTA
   pásom sú biele (.alt). Rovnaký princíp ako #dopyt vyššie — clip-path
   odkrýva pozadie ZA sekciou (main/body = krémová), nie susedné sekcie,
   takže aj margin:0 by nechal vidieť krémový klin v oboch zúbkoch.
   Záporný margin z oboch strán "vtiahne" oba zúbky pod susedné biele
   sekcie, nech je prechod hore aj dole plynulý. */
.cta-band-flush.cta-band-parallax {
  padding-top: 160px;
  padding-bottom: 160px;
  margin-top: calc(-1 * var(--cta-arrow-depth));
  margin-bottom: calc(-1 * var(--cta-arrow-depth));
}

@media (prefers-reduced-motion: reduce) {
  .cta-band-bg img { transform: none !important; }
}
/* Predtým `style="background:#fff;color:var(--wood-dark);border-color:#fff;"`
   opakované ako inline štýl na .btn v ~50 súboroch (rovnaký string
   všade) — presne to "nezjednotené" tlačidlá, čo malo byť opravené.
   Teraz jedno miesto: obyčajný .btn vnútri .cta-band je automaticky biely
   (kontrastuje s tmavým pozadím pásu), bez potreby inline štýlu na
   každom odkaze. */
.cta-band .btn { background: var(--white); color: var(--wood-dark); border-color: var(--white); }
.cta-band .btn:hover { background: var(--wood-light); border-color: var(--wood-light); color: var(--wood-dark); }
.cta-band a:not(.btn) { color: var(--white); text-decoration: underline; }

/* Mini formulár na dopyt (e-mail) priamo v CTA páse */
.cta-band .form-msg { max-width: 480px; margin: 24px auto 0; text-align: left; }
.cta-form {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  max-width: 480px;
  margin: 24px auto 0;
}
.cta-form input[type="email"] { flex: 1 1 240px; }
.cta-form .btn { flex: 0 0 auto; }
.cta-form-info { margin: 12px auto 0; max-width: 560px; font-size: .85rem; opacity: .9; }
.cta-form-info a { color: inherit; text-decoration: underline; }
@media (max-width: 480px) {
  .cta-form .btn { width: 100%; }
}

/* FAQ (často kladené otázky) — <details>/<summary> accordion s plynulým
   otváraním/zatváraním (main.js). Used na /domov/ aj /domov2/ za CTA
   pásom "Máte predstavu o vlastnom projekte?".
   Natívne [open] samo osebe animáciu výšky nevie (obsah sa objaví/zmizne
   naraz), preto main.js prevezme réžiu: `open` atribút necháva nastavený
   POČAS CELEJ animácie (aj pri zatváraní) a namiesto neho animuje
   max-height na .faq-item-body — main.js pred každým prepnutím zmeria
   skutočnú výšku obsahu (scrollHeight) a animuje sa presne k/z tejto px
   hodnoty. (Predtým grid-template-rows 0fr↔1fr — vyzeralo plynulo pri
   otváraní, ale tesne pred koncom zatvárania "seklo": fr sa neinterpoluje
   lineárne k nule, posledný kúsok výšky/paddingu zmizne naraz. max-height
   s reálnym px týmto quirkom netrpí.)
   Bez JS (napr. vypnutý) sa detaily správajú úplne natívne — skokom, ale
   funkčne, vďaka [open] atribútu v HTML. */

.faq {
  max-width: 780px;
  margin: 0 auto;
}
.faq-item {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  margin-bottom: 14px;
  overflow: hidden;
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 50px 18px 22px;
  position: relative;
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--wood-dark);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--wood-tan);
  transition: transform .3s ease;
}
.faq-item[open] summary::after { transform: translateY(-50%) rotate(45deg); }

/* JS varianta: main.js pred otvorením/zatvorením zmeria skutočnú výšku
   obsahu (scrollHeight) a nastaví ju ako --faq-h — max-height sa potom
   animuje presne k/z tejto px hodnoty (0 pri zatvorení). Padding je na
   samotnom .faq-item-body (nie na <p> vnútri), nech je súčasťou meranej
   scrollHeight a neanimuje sa mimo nej. */
.faq-item-body {
  max-height: 0;
  overflow: hidden;
  padding: 0 22px;
  transition: max-height .3s ease, padding .3s ease;
}
.faq-item.is-open .faq-item-body {
  max-height: var(--faq-h, 400px);
  padding: 0 22px 20px;
}
.faq-item-body > p {
  margin: 0;
  color: var(--text-muted);
}
/* Bez JS (.js-ready sa nestihla pridať) necháva prehliadač natívne
   [open] správanie — telo je vždy plne viditeľné, keď je details otvorené. */
.faq-item p {
  margin: 0;
  padding: 0 22px 20px;
  color: var(--text-muted);
}

/* Breadcrumb / page header for inner pages */

.page-hero {
  /* Rovnaký šípkový výrez na spodku ako .hero na homepage (--hero-arrow-depth
     tam), len plytší — .page-hero je oveľa nižšia sekcia, hlboký výrez by
     jej zjedol veľkú časť výšky. Samostatná premenná (nie zdieľaná s
     .hero), nech sa dá ladiť nezávisle. */
  --page-hero-arrow-depth: clamp(24px, 3.5vw, 50px);
  /* Predvolené pozadie; konkrétna podstránka ho môže prebiť inline štýlom
     --page-hero-img: url('...') na .page-hero (napr. produktová fotka). */
  --page-hero-img: url('../img/hero/slider1.webp');
  position: relative; /* containing block pre .hero-scroll-cue (main.js ju sem dopĺňa automaticky) */
  background: linear-gradient(180deg, rgba(63,42,24,.8), rgba(63,42,24,.8)), var(--page-hero-img);
  background-size: cover;
  background-position: center;
  color: var(--white);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--page-hero-arrow-depth)), 50% 100%, 0 calc(100% - var(--page-hero-arrow-depth)));
  -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--page-hero-arrow-depth)), 50% 100%, 0 calc(100% - var(--page-hero-arrow-depth)));
  /* min-height namiesto pevnej výšky danej len paddingom — krátke
     nadpisy (napr. jednoslovné "Kontakt") predtým robili z banneru
     nízky pásik, opticky nekonzistentný s dlhšími nadpismi na iných
     podstránkach. display:flex + align-items:center vycentruje
     .container zvisle v tejto (teraz pevnej) výške. */
  min-height: 70vh;
  display: flex;
  align-items: center;
  /* padding-top navyše o výšku hlavičky (tá nad bannerom len "pláva",
     nezaberá vlastné miesto v layoute — main vyššie má preto pre stránky
     s .page-hero padding-top:0) — inak by nadpis/text v hornej časti
     bannera boli schované pod hlavičkou. Dolný padding navyše o hĺbku
     výrezu + výšku šípky (.hero-scroll-cue), nech oboje zostane nad
     hrotom, nie orezané spolu s pozadím. */
  padding: calc(var(--header-h) + 70px) 0 calc(var(--page-hero-arrow-depth) + 60px);
  text-align: center;
}
.page-hero .container { width: 100%; }
.page-hero h1 { color: var(--white); margin-bottom: .3em; }
.page-hero p { color: var(--wood-light); margin: 0; }

/* Gallery */

/* Masonry (Pinterest-štýl) mriežka — CSS viacstĺpcový layout namiesto
   grid + pevný pomer strán. Fotky si zachovávajú prirodzenú výšku (žiadne
   orezanie cez object-fit: cover), takže sa nevytvárajú medzery ako pri
   klasickej rovnomernej mriežke. `break-inside: avoid` zabráni tomu, aby sa
   jedna fotka roztrhla naprieč dvoma stĺpcami. */
.gallery-grid {
  columns: 5 190px;
  column-gap: 16px;
}
.gallery-grid a {
  display: block;
  margin-bottom: 16px;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  break-inside: avoid;
}
.gallery-grid img {
  width: 100%; height: auto; display: block;
  transition: transform .3s ease;
}
.gallery-grid a:hover img { transform: scale(1.06); }

@media (max-width: 560px) {
  .gallery-grid { columns: 2 150px; column-gap: 10px; }
  .gallery-grid a { margin-bottom: 10px; }
}

/* Jednoobrázkový slider ("Ukážky z realizácií" na produktových podstránkach)
   — vždy 1 veľká fotka, šípky prepínajú, bodky pod fotkou ukazujú pozíciu.
   Snímky preložené cez seba (position:absolute) a prepínané cez opacity,
   rovnaký crossfade princíp ako .hero-slide. Fotka zostáva klikateľná do
   lightboxu (zväčšenie na celú veľkosť), slider len mení, ktorá sa zobrazuje. */
.photo-slider {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  aspect-ratio: 4 / 3;
  background: var(--wood-light);
}
.photo-slider-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .5s ease;
  pointer-events: none;
}
.photo-slider-slide.is-active { opacity: 1; pointer-events: auto; }
.photo-slider-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-slider-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,.9);
  color: var(--wood-dark);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s ease;
}
.photo-slider-btn:hover { background: var(--white); }
.photo-slider-prev { left: 14px; }
.photo-slider-next { right: 14px; }
.photo-slider-dots {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}
.photo-slider-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: var(--wood-light);
  cursor: pointer;
}
.photo-slider-dot.is-active { background: var(--wood-tan); }
@media (max-width: 560px) {
  .photo-slider-btn { width: 38px; height: 38px; font-size: 1.15rem; }
}

.lightbox {
  position: fixed; inset: 0;
  background: rgba(20, 12, 5, 0.92);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 30px;
}
.lightbox.open { display: flex; }
.lightbox img { max-width: 100%; max-height: 85vh; border-radius: 6px; }
.lightbox-close {
  position: absolute; top: 20px; right: 26px;
  color: var(--white); font-size: 2.2rem;
  background: none; border: none; cursor: pointer; line-height: 1;
}
.lightbox-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(255,255,255,.15); color: var(--white);
  border: none; font-size: 1.8rem; width: 52px; height: 52px;
  border-radius: 50%; cursor: pointer;
}
.lightbox-prev { left: 18px; }
.lightbox-next { right: 18px; }

/* Contact */

.contact-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 40px;
  align-items: start;
}
.contact-info-card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 30px;
  box-shadow: var(--shadow-sm);
}
.contact-info-card h3 { margin-top: 1.2em; }
.contact-info-card h3:first-child { margin-top: 0; }

/* WhatsApp odkaz vedľa telefónneho čísla (pripomienka 15.9.2026: "všade
   kde je tel. číslo, by mal byť aj WhatsApp"). */
.contact-whatsapp-link {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  padding: 2px 10px;
  border-radius: 999px;
  background: #0f7a4e;
  color: #fff !important;
  font-size: .78rem;
  font-weight: 600;
  text-decoration: none;
  vertical-align: middle;
}
.contact-whatsapp-link:hover { background: #1ebe5a; }

form.contact-form { display: grid; gap: 16px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
label { font-weight: 600; font-size: .9rem; display: block; margin-bottom: 6px; }
input, textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #95826a;
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 1rem;
  background: var(--white);
}
input:focus, textarea:focus { outline: 2px solid var(--wood-tan); border-color: var(--wood-tan); }
textarea { resize: vertical; min-height: 130px; }

.form-msg { padding: 14px 16px; border-radius: 8px; margin-bottom: 16px; font-weight: 500; }
.form-msg.success { background: #e5f0e2; color: var(--success); }
.form-msg.error { background: #f6e2dd; color: var(--error); }

.map-embed {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  margin-top: 24px;
}
.map-embed iframe { width: 100%; height: 320px; border: 0; display: block; }
.map-embed:not(.is-loaded) iframe { visibility: hidden; }

.map-embed-placeholder {
  display: none;
  position: absolute;
  inset: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 20px;
  text-align: center;
  background: var(--wood-light);
}
.map-embed:not(.is-loaded) .map-embed-placeholder { display: flex; }
.map-embed-placeholder p { margin: 0; max-width: 320px; color: var(--text); font-size: .9rem; }

/* Menšia verzia mapy vo footri (na kontaktnej stránke mapa ostáva plnej
   výšky). Výška zosúladená s obsahom vedľajších stĺpcov (Kontakt/Navigácia/
   Informácie) — pri 160px pôsobila mapová karta oproti nim nízko a
   "vznášajúco sa" na veľkých monitoroch (pripomienka 15.9.2026). */
.footer-map-embed,
.footer-map-embed iframe { height: 220px; }
.footer-map-embed .map-embed-placeholder { padding: 12px; gap: 8px; }
.footer-map-embed .map-embed-placeholder p { font-size: .8rem; max-width: none; }

/* Videá na detaile realizácie (medzi popisom a galériou) */
.realizacia-blok-head { margin-top: 48px; margin-bottom: 28px; }
.realizacia-blok-head:first-child { margin-top: 0; }
.realizacia-blok-head { max-width: 780px; }
.realizacia-popis { margin: 14px 0 0; font-size: 1.05rem; line-height: 1.7; }
.realizacie-dalsie .carousel-track { padding: 4px 2px 10px; scroll-padding-inline: 2px; } /* bez scroll-padding by snap pri načítaní posunul stopu o 2 px a Chrome by prestal merať LCP */
.realizacie-spat { text-align: center; margin: 36px 0 0; }
.realizacia-videa { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 20px; margin: 0 0 40px; }
.realizacia-videa.is-single { max-width: 900px; margin-left: auto; margin-right: auto; grid-template-columns: 1fr; }
.realizacia-videa .video-file,
.video-yt { width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius); background: #1b140e; box-shadow: var(--shadow-sm); display: block; }
.video-yt {
  position: relative; overflow: hidden; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  background-size: cover; background-position: center;
}
.video-yt::before { content: ""; position: absolute; inset: 0; background: rgba(27, 20, 14, .55); transition: background .2s; }
.video-yt:hover::before { background: rgba(27, 20, 14, .4); }
.video-yt-play { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; border: 0; background: none; color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.video-yt-play svg { transition: transform .2s; filter: drop-shadow(0 4px 10px rgba(0,0,0,.35)); }
.video-yt:hover .video-yt-play svg { transform: scale(1.08); }
.video-yt small { position: relative; color: rgba(255,255,255,.8); font-size: .78rem; }
.video-yt.is-playing::before { display: none; }
.video-yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Popup „Nezáväzný dopyt“ (footer.php + main.js) */
.dopyt-modal {
  width: min(640px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  padding: 36px 36px 32px;
  border: 0;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  background: var(--white);
  color: var(--text);
  overflow: auto;
}
.dopyt-modal::backdrop { background: rgba(43, 33, 23, .6); backdrop-filter: blur(2px); }
.dopyt-modal[open] { animation: dopyt-in .2s ease-out; }
@keyframes dopyt-in { from { opacity: 0; transform: translateY(12px); } }
.dopyt-modal h2 { margin: 0 0 8px; font-size: 1.6rem; }
.dopyt-modal-intro { margin: 0 0 16px; color: var(--text-muted); }
.dopyt-modal-tema { margin: 0 0 16px; padding: 10px 14px; background: var(--wood-light); border-radius: 8px; font-size: .92rem; }
.dopyt-modal textarea { min-height: 110px; }
.dopyt-modal-close {
  position: absolute; top: 10px; right: 12px;
  width: 40px; height: 40px;
  border: 0; border-radius: 50%;
  background: transparent; color: var(--text-muted);
  font-size: 1.8rem; line-height: 1; cursor: pointer;
}
.dopyt-modal-close:hover { background: var(--wood-light); color: var(--wood-dark); }
.dopyt-modal-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.dopyt-modal-actions span { font-size: .9rem; color: var(--text-muted); }
.dopyt-modal .form-msg { margin: 0 0 16px; }
@media (max-width: 600px) {
  .dopyt-modal { padding: 28px 18px 22px; }
  .dopyt-modal .form-row { grid-template-columns: 1fr; }
  .dopyt-modal h2 { font-size: 1.35rem; padding-right: 36px; }
}

/* Honeypot field (anti-spam), hidden from real users */
.hp-field { position: absolute; left: -9999px; top: -9999px; }

/* GDPR consent checkbox v kontaktnom formulári */
.form-consent { display: flex; align-items: flex-start; gap: 10px; }
.form-consent { gap: 12px; }
.form-consent input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  margin: 0;
  padding: 0;
  flex-shrink: 0;
  border: 2px solid #c9b49a;
  border-radius: 6px;
  background: var(--white) no-repeat center / 14px 14px;
  cursor: pointer;
  transition: background-color .15s, border-color .15s, box-shadow .15s;
}
.form-consent input[type="checkbox"]:hover { border-color: var(--wood-accent); }
.form-consent input[type="checkbox"]:checked {
  border-color: var(--wood-accent);
  background-color: var(--wood-accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}
.form-consent input[type="checkbox"]:focus { outline: none; }
.form-consent input[type="checkbox"]:focus-visible { box-shadow: 0 0 0 3px rgba(179, 129, 79, .35); }
.form-consent label { cursor: pointer; padding-top: 1px; }
.form-consent label { font-weight: 400; font-size: .88rem; margin-bottom: 0; }
.form-consent label a { color: inherit; text-decoration: underline; }

/* ---------------- Footer ----------------
   Predtým: plná plochá --wood-dark farba + tvrdá 3px čiara cez celú
   šírku — pôsobilo to ploché/staro. Teraz: jemný gradient (svetlo zhora
   od loga, tmavšie ku dnu = trochu hĺbky), odsadená "vyblednutá" čiara
   namiesto čiary cez celú šírku, ikony v jemných odznakoch (kruh s
   priehľadným pozadím) a nadpisy stĺpcov s malou akcentovou čiarkou. */

.site-footer {
  /* Rovnaký šípkový výrez ako .hero/.page-hero (viď --hero-arrow-depth),
     len zrkadlovo obrátený — hrot smeruje HORE (do obsahu nad pätou),
     keďže tu je footer spodná, nie vrchná hrana sekcie. Plytší než hero,
     nech pri krátkom footeri nezje priveľa jeho výšky. */
  --footer-arrow-depth: clamp(24px, 3.5vw, 50px);
  position: relative;
  /* Fotka (rovnaká ako prvý hero snímok — zámerne, "zarámuje" stránku
     zhora aj zdola tým istým motívom) je pod hustým tmavohnedým závojom,
     nech zostane čitateľná biela typografia — je skôr cítiť ako vidieť. */
  background:
    radial-gradient(900px 360px at 10% -15%, rgba(255,255,255,.08), transparent 60%),
    linear-gradient(180deg, rgba(63,42,24,.88) 0%, rgba(63,42,24,.93) 55%, var(--wood-dark) 100%),
    url('/assets/img/hero/slider1.webp') center / cover no-repeat;
  clip-path: polygon(0 var(--footer-arrow-depth), 50% 0, 100% var(--footer-arrow-depth), 100% 100%, 0 100%);
  -webkit-clip-path: polygon(0 var(--footer-arrow-depth), 50% 0, 100% var(--footer-arrow-depth), 100% 100%, 0 100%);
  color: var(--wood-light);
  margin-top: 40px;
  /* Vrchný padding navyše o hĺbku výrezu, nech sa obsah (Kontakt/Navigácia/...)
     nikdy nedostane do vykrojenej trojuholníkovej oblasti nad ním. */
  padding-top: var(--footer-arrow-depth);
}
/* 4 stĺpce: Kontakt / Navigácia / Informácie / Mapa (mapa bola predtým
   vnorená pod kontaktné údaje v 1. stĺpci — príliš úzka, presunutá do
   vlastného 4. stĺpca na želanie užívateľa). Logo stĺpec bol úplne
   zrušený, Kontakt je teraz prvý (najviac vľavo).
   DÔLEŽITÉ: len padding-top/-bottom, NIE skrátený zápis `padding:72px 0
   40px` — ten by (rovnaká špecificita, .footer-inner má triedu "container"
   AJ "footer-inner" naraz) prebil ľavé/pravé odsadenie z .container
   (`padding:0 20px`) nulou, takže bloky sa na mobile dotýkali priamo
   okraja obrazovky namiesto 20px odsadenia. */
.footer-inner {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 40px;
  padding-top: 72px;
  padding-bottom: 40px;
}
/* Kontakt stĺpec má dlhší text (adresa, IČO/DIČ) siahajúci takmer po
   celú šírku svojho stĺpca — na veľkých monitoroch (1920px) pôsobil
   susedný stĺpec Navigácia príliš natesno vedľa neho (pripomienka
   15.9.2026, Jozef Pjontek: "o 30px doprava"). */
.footer-col-nav { margin-left: 30px; }
@media (max-width: 860px) {
  .footer-col-nav { margin-left: 0; }
}
.site-footer h3 {
  color: var(--white);
  font-size: .9rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 18px;
}
.site-footer a { color: var(--wood-light); }
.site-footer a:hover { color: var(--white); }
.site-footer p { margin: 0 0 1em; }

.footer-nav { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.footer-nav a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .82rem;
  transition: transform .15s ease, color .15s ease;
}
.footer-nav a::before {
  content: "";
  flex: 0 0 auto;
  width: 5px;
  height: 5px;
  border-top: 1.5px solid var(--wood-tan);
  border-right: 1.5px solid var(--wood-tan);
  transform: rotate(45deg);
}
.footer-nav a:hover { transform: translateX(4px); }
/* "Nastavenia cookies" sedí v tom istom zozname (.footer-nav), ale je to
   <button>, nie <a> — potrebuje vlastné pravidlo s tou istou šípkou/
   hoverom, .footer-nav a naň nesedí (selektor podľa tagu). */
.footer-nav .footer-cookie-settings {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: .82rem;
  color: var(--wood-light);
  cursor: pointer;
  transition: transform .15s ease, color .15s ease;
}
.footer-nav .footer-cookie-settings::before {
  content: "";
  flex: 0 0 auto;
  width: 5px;
  height: 5px;
  border-top: 1.5px solid var(--wood-tan);
  border-right: 1.5px solid var(--wood-tan);
  transform: rotate(45deg);
}
.footer-nav .footer-cookie-settings:hover { transform: translateX(4px); color: var(--white); }

.footer-contact-list { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 16px; }
.footer-contact-list li { display: flex; align-items: flex-start; gap: 14px; }
.footer-contact-list svg {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  padding: 9px;
  border-radius: 50%;
  background: rgba(255,255,255,.07);
  color: var(--wood-tan);
}
.footer-contact-list a { line-height: 1.5; }
.footer-contact-list li span { padding-top: 6px; } /* zarovnanie textu voči stredu väčšej ikonovej "bublinky" */
.footer-ico { display: block; margin-top: 4px; color: rgba(255,255,255,.75); font-size: .8rem; }
.footer-whatsapp-link { color: #25d366 !important; font-size: .82rem; }
.footer-whatsapp-link:hover { color: #3ddc7a !important; }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.12);
  padding: 20px 0;
  font-size: .85rem;
  color: rgba(255,255,255,.65);
}
/* Predtým flex space-between s .footer-legal-links vľavo a .footer-credit
   vpravo — tie odkazy sa presunuli vyššie do vlastného stĺpca v
   .footer-inner (viď footer.php), takže tu ostal jediný riadok
   (copyright), preto vycentrovaný namiesto pritlačeného k pravému okraju. */
.footer-bottom-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.footer-credit { color: rgba(255,255,255,.5); }
.footer-credit a { color: rgba(255,255,255,.7); }
.footer-credit a:hover { color: #fff; }

/* ---------------- Späť hore ----------------
   Kruhové tlačidlo vpravo dole, objaví sa po scrollnutí. Prstenec okolo
   šípky ukazuje, koľko zo stránky si už prešiel (naplní sa smerom k
   1 pri konci stránky) — main.js prepočítava stroke-dashoffset. */

.back-to-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 90;
  width: 52px;
  height: 52px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: var(--white);
  color: var(--wood-mid);
  box-shadow: var(--shadow);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s, background .2s ease, color .2s ease, bottom .25s ease;
}
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { background: var(--wood-mid); color: var(--white); transform: translateY(-3px); }
/* Cookie karta (nižšie) teraz sedí v ĽAVOM dolnom rohu, .back-to-top v
   pravom — už sa nemajú ako prekryť, preto tu (predtým) nie je žiadne
   "uhni sa" pravidlo pri otvorenej cookie lište. */

.back-to-top-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg); /* prstenec začína napĺňať od hora, nie od stredu */
}
.back-to-top-ring-bg { fill: none; stroke: var(--wood-light); stroke-width: 3; }
.back-to-top-ring-fg {
  fill: none;
  stroke: var(--wood-tan);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 119.4; /* 2 × π × r(19) */
  stroke-dashoffset: 119.4; /* na začiatku prázdny prstenec — main.js dopĺňa podľa scrollu */
  transition: stroke-dashoffset .1s linear;
}
.back-to-top:hover .back-to-top-ring-fg { stroke: var(--white); }

.back-to-top-percent,
.back-to-top-arrow {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity .2s ease, transform .2s ease;
}
.back-to-top-percent { font-size: 11px; font-weight: 700; letter-spacing: -.02em; }
.back-to-top-arrow { width: 20px; height: 20px; margin: auto; opacity: 0; transform: scale(.6); }
/* kým sa neprescrolluje na koniec, ukazuje sa % namiesto šípky */
.back-to-top.is-complete .back-to-top-percent { opacity: 0; transform: scale(.6); }
.back-to-top.is-complete .back-to-top-arrow { opacity: 1; transform: scale(1); }
.back-to-top:hover .back-to-top-arrow { transform: translateY(-2px) scale(1); }

/* ---------------- Cookie karta ----------------
   Predtým plná tmavá lišta cez celú šírku obrazovky (display:none↔block,
   žiadny prechod) — teraz menšia "karta" v ľavom dolnom rohu, rovnaký
   vizuálny jazyk ako .tool-panel v hlavičke (biela karta, zaoblenie,
   var(--shadow)), s plynulým nájazdom (opacity+transform). display:none
   nejde animovať, preto zostáva v layoute stále a schováva sa cez
   opacity/visibility namiesto toho. */
.cookie-banner {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 200;
  width: min(400px, calc(100vw - 40px));
  background: var(--white);
  color: var(--text);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 1px solid var(--wood-light);
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s;
}
.cookie-banner.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
.cookie-banner-inner {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px;
}
.cookie-banner-head { display: flex; align-items: center; gap: 10px; }
.cookie-banner-icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--wood-light);
  color: var(--wood-dark);
}
.cookie-banner-head strong { font-family: var(--font-heading); color: var(--wood-dark); font-size: 1rem; }
.cookie-banner-inner p { margin: 0; font-size: .86rem; line-height: 1.55; color: var(--text-muted); }
.cookie-banner-inner a { color: var(--wood-mid); text-decoration: underline; }
.cookie-banner-actions { display: flex; gap: 10px; }
.cookie-banner .btn { flex: 1; padding: 10px 16px; font-size: .9rem; }

/* ---------------- Responsive ---------------- */

@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  /* .hero-inner ruší .container padding (potrebuje vlastný, len zvislý)
     a má len margin-left — bez pravého odsadenia sa text/tlačidlá na
     mobile dotýkali presne pravého okraja obrazovky. */
  .hero-inner { margin-right: 20px; }
  .nav-toggle { display: flex; }
  .main-nav {
    /* position:fixed (nie absolute) zámerne — .site-header má odkedy je
       hlavička "plávajúca karta" vlastný horizontálny padding, takže by sa
       "left/top" počítali voči jeho ZÚŽENÉMU vnútru (padding box), nie
       voči celej obrazovke, a rozbalené menu by bolo viditeľne posunuté
       mimo stred. fixed sa počíta vždy priamo voči viewportu, imúnne
       voči akémukoľvek paddingu na .site-header.
       POZOR — CSS Grid quirk: .main-nav je aj naďalej grid item svojho
       rodiča (grid-column:2 z desktop pravidla vyššie), a spec hovorí, že
       "static position" (teda aj základ pre % v left/top) sa positioned
       grid itemu počíta z JEHO GRID BUNKY, nie z viewportu — aj keď je
       position:fixed. Preto "left:50%;transform:translateX(-50%)" tu
       reálne centrovalo voči úzkemu strednému stĺpcu .header-inner grid-u,
       nie voči celej obrazovke (viditeľne posunuté mimo stred/mimo
       obrazovku). Riešenie: vypočítať finálnu pozíciu priamo vo vw (bez
       %/transform), tie sú vždy voči viewportu bez ohľadu na grid.
       top naviazané na --header-h (skutočná výška hlavičky vrátane jej
       paddingu, domeria main.js), nie fixné 100%, aby menu vždy nadväzovalo
       presne pod ňu. */
    position: fixed;
    top: var(--header-h); left: 5vw; width: 90vw;
    border-radius: 0 0 20px 20px; /* len dolné rohy — hore prilieha priamo pod hlavičku, zaoblenie by tam nechalo trojuholníkovú medzeru */
    background: var(--white);
    flex-direction: column;
    align-items: stretch;
    /* Skutočná príčina oboch nahlásených bugov (hlavička podpanela
       schovaná/"za headerom", obsah pri pretečení vycentrovaný a orezaný
       hore): desktopové .main-nav (vyššie v súbore) má justify-content:
       center + margin-top:6px pre horizontálne centrovanie pôvodného
       vodorovného menu v strednom grid stĺpci — mobilná verzia mení
       flex-direction na column, ale predtým neprepisovala justify-content,
       takže sa center aplikovalo na (teraz zvislú) hlavnú os: celý obsah
       menu sa vertikálne vycentroval, a keď bol vyšší než dostupná výška,
       pretiekol symetricky hore AJ dole — orezaný/schovaný bol práve
       vrchný riadok (ikony, alebo hlavička podpanela). */
    justify-content: flex-start;
    margin-top: 0;
    padding: 16px 20px 24px;
    box-shadow: var(--shadow-sm);
    display: none;
    gap: 16px;
    /* Bez toho sa dlhé menu (rozbalené Služby + hľadanie/telefón/jazyk/
       Facebook dole) na nízkych mobiloch nezmestilo na výšku obrazovky a
       spodok (Kontakt, Facebook…) nešlo doscrollovať — nič pod menu totiž
       nebolo scrollovateľné, celá stránka bola pod ním "uzamknutá" na
       výšku okna.
       100vh = najväčšia MOŽNÁ výška (akoby bol adresový riadok mobilného
       prehliadača schovaný) — kým je viditeľný (bežný počiatočný stav),
       skutočná viditeľná plocha je nižšia, takže menu si "myslelo", že sa
       zmestí, hoci spodné položky boli fakticky mimo obrazovky bez šance
       doscrollovať. 100dvh (dynamic viewport height) rieši presne toto —
       prehliadače, ktoré ho nepoznajú, len ostanú pri 100vh vyššie. */
    max-height: calc(100vh - var(--header-h));
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    overflow-x: hidden; /* viď bug nižšie — bez tohto sa (spolu s overflow-y:auto) horizontálne pretečenie potichu stane scrollovateľným namiesto zalomeným/orezaným */
    -webkit-overflow-scrolling: touch;
  }
  .main-nav.open { display: flex; }
  /* Desktop zoznam (aj s hover megamenu) sa na mobile celý schová —
     nahrádza ho #mainNav .mobile-menu nižšie (2-úrovňové drill-down menu,
     viď header.php). ">" nech schová LEN tento vrchný <ul>, nie aj
     .mobile-menu-list vnútri .mobile-menu (ten je vnorený hlbšie).
     BUG (opravené): .mobile-menu-list tu predtým nemalo VLASTNÉ
     display/flex-direction — dedilo len display:flex z bežného (desktop)
     ".main-nav ul" pravidla vyššie v súbore, kde je flex-direction:row
     (predvolené). Na mobile teda hlavné odkazy (Domov/Služby/...) renderovali
     VEDĽA SEBA (nezalomené), čo vizuálne pretieklo mimo menu aj cez
     riadok ikon nad nimi. Teraz má vlastné, nezávislé pravidlo.
     OPRAVA (18.8.2026): samotné `.main-nav > ul { display: none; }`
     medzitým z tohto miesta úplne vypadlo (asi pri predošlej úprave) —
     bez neho ostal starý desktopový zoznam na mobile viditeľný NAVYŠE nad
     novým menu, takže sa "Domov/Služby/Realizácie" ukazovali dvakrát. */
  .main-nav > ul { display: none; }
  .mobile-menu-list { display: flex; flex-direction: column; gap: 4px; list-style: none; margin: 0; padding: 0; }
  .main-nav a { display: flex; padding: 10px 14px; }
  /* Väčšie písmo pre koreňové odkazy na mobile (na želanie) — samostatné
     od zdieľaného ".main-nav ul a{font-size:14px}" vyššie v súbore, ten
     ostáva nedotknutý (platí aj pre desktop nav bar). ".main-nav" navyše
     v selektore (nie len ".mobile-menu-list a") — inak má nižšiu
     špecificitu než ".main-nav ul a" a font-size by sa vôbec neuplatnil
     (presne tento bug spôsobil, že "Služby" — button, iné pravidlo —
     bolo väčšie než ostatné odkazy, ktoré ostali na starých 14px). */
  .main-nav .mobile-menu-list a { font-size: 16px; }
  /* Hľadanie / telefón / jazyk / Facebook boli tu ako plávajúce ikony vedľa
     loga — spolu s hamburgerom sa už na úzky mobil nezmestili a logo
     stláčali. Nahrádza ich #mainNav .mobile-menu — 2-úrovňové menu (ikony +
     hlavné odkazy na koreňovej obrazovke, "Služby" aj každá ikona majú
     vlastný podpanel s tlačidlom Späť, viď main.js). */
  .header-tools .tool-search,
  .header-tools .tool-phone,
  .header-tools .tool-lang,
  .header-tools .tool-share { display: none; }
  /* margin-top/padding-top predtým vytvárali priestor pre oddeľovaciu
     čiaru (medzičasom odstránená) nad riadkom ikon — teraz zbytočná
     medzera navyše, orezané na minimum (.main-nav má vlastný padding-top
     16px, to stačí). */
  .mobile-menu { display: flex; flex-direction: column; }
  /* .phone-panel-links a / .lang-panel-links a sú zdieľané triedy s
     desktop panelmi (mimo .main-nav), tu ale vnútri #mainNav súperia s
     .main-nav a rovnakej špecificity — toto ich explicitne poistí, keby sa
     .main-nav a niekedy zmenilo. :not(.phone-panel-email) — mailová
     položka má zámerne inú (tlmenú) farbu, tú nech toto pravidlo neprebije. */
  .mobile-menu .phone-panel-links a:not(.phone-panel-email) { color: var(--wood-mid); font-weight: 600; }
  .mobile-menu .lang-panel-links a { padding: 6px 8px; border-radius: 8px; font-weight: 600; }
  /* .megamenu-inner sa v podpaneli "Služby" použije bez svojho obvyklého
     .megamenu rodiča (ten je len pre desktop hover dropdown) — .mobile-
     sluzby-list preberá presne tie isté vizuály (viď nemediálne pravidlá
     .mobile-sluzby-list nižšie), len bez závislosti na tom rodičovi. */
  /* Logo na telefóne bolo v skutočnosti oveľa menšie než 52px (pripomienka
     20260915-131554-c1a36246): desktopový grid "1fr auto 1fr" dáva logu len
     POLOVICU šírky hlavičky (prostredný stĺpec je na mobile prázdny = 0,
     ale dva 20px gap-y ostávajú), takže na 384px širokom displeji malo logo
     k dispozícii ~130px a cez max-width:100% + aspect-ratio sa zmenšilo na
     ~27px výšky. Na mobile nech ľavý stĺpec dostane všetko, čo nezaberie
     hamburger vpravo; tri stĺpce ostávajú kvôli explicitným grid-column
     (viď komentár pri .brand vyššie). */
  .header-inner { grid-template-columns: minmax(0, 1fr) 0 auto; gap: 0 12px; }
  .brand img { height: 52px; }
  body.has-hero-overlay .site-header:not(.is-scrolled) .brand img { height: 73px; } /* 52px × 1.4 */
  .header-tools { gap: 6px; }
  .tool-toggle { width: 36px; height: 36px; }
  .form-row { grid-template-columns: 1fr; }
  /* Tri stĺpce (logo/Kontakt/Navigácia) padnú pod seba — samotný grid
     gap (40px) je len MEDZI riadkami mriežky, opticky to bez zjavnej
     deliacej čiary pôsobilo, že bloky na sebe "sedia" bez odsadenia.
     Padding-top + deliaca čiarka na 2. a 3. bloku to zreteľne oddelí. */
  .footer-inner { grid-template-columns: 1fr; text-align: left; gap: 8px; }
  .footer-col + .footer-col { margin-top: 28px; padding-top: 28px; border-top: 1px solid rgba(255, 255, 255, .12); }
  .footer-bottom-inner { flex-direction: column; align-items: center; text-align: center; }
  .cookie-banner-inner { flex-direction: column; align-items: stretch; text-align: center; }
  .cookie-banner-actions { justify-content: center; }
  .back-to-top { right: 16px; bottom: 16px; width: 46px; height: 46px; }
  /* Pôvodne boli náhľady zvislo vycentrované vpravo — na mobile sa tak
     prekrývali priamo s hero textom aj tlačidlami (a "Nezáväzný dopyt"
     bol navyše orezaný mimo obrazovky). Presunuté do vodorovného radu
     dole v strede, nad "scroll down" ikonu, kde už do ničoho nezasahujú. */
  .hero-thumbs {
    top: auto;
    bottom: 116px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    flex-direction: row;
    gap: 8px;
  }
  .hero-thumb { width: 46px; height: 46px; }

  /* Hero 2 (/domov2/ návrh) — rovnaké mobilné úpravy ako pri .hero vyššie. */
  .hero2-text { margin-right: 20px; }
  .hero2-thumbs {
    top: auto;
    bottom: 116px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    flex-direction: row;
    gap: 8px;
  }
  .hero2-thumb { width: 46px; height: 46px; }
  .hero2-progress { left: 20px; bottom: calc(var(--hero2-arrow-depth) + 96px); }
}

/* ---------------- Ako prebieha spolupráca (homepage) ----------------
   4 kroky v rade so spojovacou čiarou a číslom v krúžku. Na mobile sa
   rozpadnú pod seba, čiara sa otočí na zvislú (vľavo od krúžkov). */

.process-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  counter-reset: process;
}
/* Variant pre produkty s 3-krokovým procesom (napr. spracovanie dreva) —
   inak by 4. stĺpec zostal prázdny a dlaždice by neboli vystredené. */
.process-steps-3 { grid-template-columns: repeat(3, 1fr); }
.process-step { position: relative; text-align: center; padding: 0 12px; }
.process-step-icon {
  position: relative;
  z-index: 1;
  width: 56px;
  height: 56px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--wood-tan);
  color: var(--wood-tan);
  display: flex;
  align-items: center;
  justify-content: center;
}
.process-step-icon .icon-svg { width: 26px; height: 26px; }
.process-step::before {
  content: '';
  position: absolute;
  top: 28px;
  left: calc(-50% + 28px + 12px);
  width: calc(100% - 56px - 24px);
  height: 2px;
  background: var(--wood-light);
}
.process-step:first-child::before { display: none; }
.process-step h3 { color: var(--wood-dark); margin: 0 0 6px; font-size: 1.05rem; }
.process-step p { margin: 0; color: var(--text-muted); font-size: .9rem; }

@media (max-width: 780px) {
  .process-steps { grid-template-columns: 1fr; gap: 36px; }
  .process-step { padding: 0 0 0 76px; text-align: left; }
  .process-step-icon { margin: 0; position: absolute; left: 0; top: 0; }
  .process-step h3, .process-step p { margin-left: 0; }
  .process-step::before {
    top: 56px;
    left: 27px;
    width: 2px;
    height: calc(100% + 36px - 56px);
  }
}

/* ---------------- Prečo Michalic (homepage) ----------------
   4 karty "dôkazov" namiesto všeobecných marketingových fráz — každá má
   krátky vecný fakt (rok, vlastná dielňa, rozsah remesla, zákazková výroba). */

.reason-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.reason-card {
  text-align: center;
  padding: 8px 12px;
}
.reason-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--wood-light);
  color: var(--wood-tan);
}
.reason-card-icon .icon-svg { width: 28px; height: 28px; }
.reason-card h3 { color: var(--wood-dark); margin: 0 0 8px; font-size: 1.1rem; }
.reason-card p { margin: 0; color: var(--text-muted); font-size: .92rem; }

@media (max-width: 980px) {
  .reason-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .reason-grid { grid-template-columns: 1fr; }
}

/* ---------------- Vybrané realizácie — case study karty (homepage) ----------------
   Nahrádza/dopĺňa anonymnú fotogalériu konkrétnymi projektami: veľká fotka
   + názov + typ realizácie. Prvá karta väčšia (zvýraznená), zvyšné dve
   menšie vedľa seba — podobne ako pri iných "veľký + dvojica" layoutoch. */

.case-studies {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 24px;
}
.case-study-featured { grid-row: span 2; }
.case-study-pair { display: grid; grid-template-rows: 1fr 1fr; gap: 24px; }
.case-study-card {
  position: relative;
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  min-height: 260px;
  height: 100%;
  color: var(--white);
}
.case-study-featured .case-study-card { min-height: 100%; }
.case-study-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}
.case-study-card:hover img { transform: scale(1.05); }
.case-study-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(63,42,24,0) 40%, rgba(63,42,24,.85) 100%);
}
.case-study-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  padding: 24px;
}
.case-study-body span {
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: .75rem;
  font-weight: 700;
  color: var(--wood-light);
  margin-bottom: 6px;
}
.case-study-body h3 { color: var(--white); margin: 0; font-size: 1.3rem; }

@media (max-width: 780px) {
  .case-studies { grid-template-columns: 1fr; }
  .case-study-featured { grid-row: auto; }
  .case-study-pair { grid-template-columns: 1fr 1fr; }
  .case-study-card { min-height: 200px; }
}
@media (max-width: 560px) {
  .case-study-pair { grid-template-columns: 1fr; }
}

/* ---------------- Recenzie zákazníkov ----------------
   Usporiadanie podľa vzoru frezkom.sk (pripomienka 15.9.2026): 4 karty v
   rade hore, link na všetky recenzie na Google pod nimi, samostatný
   CTA/QR panel dole. Kým nie sú k dispozícii reálne Google recenzie,
   karty to priznávajú namiesto vymyslených textov (žiadne fiktívne
   recenzie) — text v kartách nahraď skutočnými recenziami (hviezdičky,
   text, meno, dátum), len čo budú k dispozícii. */

.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 24px;
}
.testimonial-card {
  padding: 24px;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--wood-light);
}
.testimonial-card-soon p { margin: 0; color: var(--text-muted); font-size: .92rem; }
.testimonial-google-link { text-align: center; margin: 0 0 40px; }
.testimonial-google-link a { font-weight: 600; }

/* CTA/QR panel — samostatná karta pod recenziami. */
.review-qr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 32px 36px;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--wood-light);
}
.review-qr-body h3 { margin: 0 0 8px; font-size: 1.1rem; color: var(--wood-dark); }
.review-qr-body p { margin: 0 0 16px; color: var(--text-muted); font-size: .92rem; max-width: 480px; }
.review-qr-aside {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.review-qr-aside img {
  width: 120px;
  height: 120px;
  border-radius: 8px;
  border: 1px solid var(--wood-light);
  padding: 6px;
  background: var(--white);
}
.review-qr-aside span { font-size: .78rem; color: var(--text-muted); }

@media (max-width: 860px) {
  .testimonial-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .testimonial-grid { grid-template-columns: 1fr; }
  .review-qr { flex-direction: column; text-align: center; }
}

/* ---------------- Ponuka — modely produktu s cenou a dopytom (ponuka-modely.php) ---------------- */
.ponuka-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 380px)); justify-content: center; gap: 28px; }
.ponuka-card { display: flex; flex-direction: column; background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; }
section.alt .ponuka-card { background: var(--cream); }
.ponuka-card-foto { display: block; position: relative; margin: 0; }
.ponuka-card-foto a[hidden] { display: none; }
.ponuka-card-foto a { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 0; }
.ponuka-card-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.ponuka-card-foto a:hover img { transform: scale(1.04); }
.ponuka-card-pocet { position: absolute; right: 12px; bottom: 12px; padding: 4px 10px; border-radius: 999px; background: rgba(43, 33, 23, .72); color: var(--white); font-size: .8rem; }
.ponuka-card-body { display: flex; flex-direction: column; flex: 1; gap: 10px; padding: 22px 24px 24px; }
.ponuka-card-body h3 { margin: 0; font-size: 1.3rem; }
.ponuka-card-body p { margin: 0; }
.ponuka-card-rozmer { color: var(--wood-accent); font-weight: 700; }
.ponuka-card-parametre { margin: 0; padding-left: 18px; color: var(--text-muted); font-size: .95rem; }
.ponuka-card-parametre li { margin: 2px 0; }
.ponuka-card-moznosti { font-size: .88rem; color: var(--text-muted); }
.ponuka-card-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--wood-light); }
.ponuka-card-cena { display: flex; flex-direction: column; }
.ponuka-card-cena strong { font-size: 1.25rem; color: var(--wood-dark); }
.ponuka-card-cena small { color: var(--text-muted); font-size: .8rem; }

.ponuka-info { display: inline-flex; align-items: center; gap: 10px; margin-top: 16px !important; padding: 10px 20px; border-radius: 999px; background: var(--wood-light); color: var(--wood-dark) !important; }
.ponuka-info svg { flex-shrink: 0; color: var(--wood-accent); }
.ponuka-card-video { position: absolute; left: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px 6px 10px; border: 0; border-radius: 999px; background: rgba(43, 33, 23, .78); color: var(--white); font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer; }
.ponuka-card-video:hover, .ponuka-card-video:focus-visible { background: var(--wood-accent); }
.ponuka-card-foto-bez { min-height: 60px; background: var(--wood-light); }
.ponuka-video-modal { padding: 0; border: 0; border-radius: var(--radius); background: #000; max-width: min(92vw, 520px); max-height: 92vh; overflow: visible; }
.ponuka-video-modal::backdrop { background: rgba(20, 14, 8, .85); }
.ponuka-video-modal video { display: block; width: 100%; max-height: 88vh; border-radius: var(--radius); background: #000; }
.ponuka-video-modal .dopyt-modal-close { top: -14px; right: -14px; background: var(--white); z-index: 1; }

/* Popup dopytu — zaškrtávacie možnosti modelu */
.dopyt-moznosti { margin: 0 0 16px; padding: 0; border: 0; }
.dopyt-moznosti legend { margin-bottom: 8px; font-weight: 700; font-size: .92rem; }
.dopyt-moznosti-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px 16px; }
.dopyt-moznosti-list .form-consent label { font-size: .92rem; }
.dopyt-lokalita { margin-bottom: 16px; }


/* ---------------- Prístupnosť (audit 9. 11. 2026) ---------------- */
.skip-link { position: absolute; left: -9999px; top: 8px; z-index: 10000; padding: 10px 16px; border-radius: 8px; background: var(--wood-dark); color: #fff; font-weight: 700; }
.skip-link:focus { left: 16px; color: #fff; }
main:focus { outline: none; }
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:not([tabindex="-1"]):focus-visible { outline: 3px solid var(--wood-accent); outline-offset: 2px; }
.cta-band a:focus-visible, .cta-band button:focus-visible, .hero a:focus-visible, .hero button:focus-visible, .site-footer a:focus-visible { outline-color: #fff; }
/* Telefón / e-mail / WhatsApp: dotykový cieľ aspoň 44 px na mobile */
@media (max-width: 760px) {
  .contact-info-card a[href^="tel:"], .contact-info-card a[href^="mailto:"], .footer-contact-list a[href^="tel:"], .footer-contact-list a[href^="mailto:"] { display: inline-flex; align-items: center; min-height: 44px; }
  .contact-whatsapp-link { min-height: 36px; padding: 6px 14px; }
  .hero-call { display: inline-flex !important; }
}
.hero-call { display: none !important; }
/* Povinné polia formulára – hviezdička pri popisku (čítačky čítajú atribút required) */
label:has(+ input:required:not([type="checkbox"]))::after, label:has(+ textarea:required)::after { content: " *"; color: #b3261e; }

/* ---------------- Tlač / "Uložiť ako PDF" z prehliadača ----------------
   .hero (min-height:100vh) a .cta-band-bg img (top:-35%, height:170%,
   škálované pomocou transform: translateY) sa spoliehajú na výšku
   viewportu, ktorá je v tlačovom/PDF layout enginu neurčitá alebo veľmi
   veľká — výsledkom bola obrovská, rozmazaná fotka naťahujúca sa cez
   celú vytlačenú stránku namiesto normálnej hero/CTA sekcie. Pri tlači
   preto nahrádzame oba mechanizmy pevnou, rozumnou výškou a vypíname
   transform/animácie, ktoré tlačový engine beztak neprehráva korektne. */
@media print {
  /* .site-header je position:fixed — v tlačovom layout enginu sa header
     prekrýval s hero textom namiesto toho, aby nad ním priehľadne plával
     (presne ako na živom webe). Riešenie: position:absolute namiesto
     fixed — header ostáva na vrchu .hero (prvý prvok v dokumente, takže
     absolute voči viewportu = presne na vrchu stránky), no už neťahá so
     sebou padding-top na main a nerozbíja tok zvyšku dokumentu. Pozadie
     necháme priehľadné, presne ako pri body.has-hero-overlay naživo. */
  .site-header {
    position: absolute;
    background: transparent !important;
  }
  main { padding-top: 0 !important; }

  /* Hamburger (mobil), rozbaľovacie megamenu a rozbaľovacie panely
     search/telefón/jazyk sa v statickom PDF nedajú otvoriť kliknutím —
     preč s nimi. Samotné ikonky v .header-tools (lupa, telefón, SK/EN/DE,
     Facebook — všetky .tool-toggle) naopak necháme VIDITEĽNÉ, len ako
     tichý vizuálny prvok hlavičky (viď a[href] nižšie, prečo nereagujú). */
  .nav-toggle, .megamenu, .tool-panel { display: none; }

  /* .hero má len JEDEN slide viditeľný v HTML zdroji naraz (ostatné majú
     opacity:0 cez .hero-slide bez .is-active) — v tlači to necháme presne
     tak, len s pevnou výškou namiesto 100vh (viď nižšie), nech sa
     nezobrazuje "priehľadný" text neaktívneho slidu navrstvený na sebe.
     Výška 700px (nie málo ako predtým 420px) — s absolútne pozicovaným
     headrom navrchu potrebuje hero dosť miesta, aby fotka pod textom aj
     šípkovým výrezom dole nepôsobila stlačene/orezane. */
  .hero {
    min-height: 0;
    height: 700px;
  }
  .hero-slide { transition: none; opacity: 0; }
  .hero-slide.is-active { opacity: 1; }
  .hero-inner { animation: none !important; opacity: 1; transform: none; }
  /* Scroll ikona a hero miniatúry (fotky vpravo) zostávajú v PDF viditeľné
     — vzhľad heru má v tlači sedieť čo najviac s tým, ako vyzerá naživo. */

  /* CTA fotka na pozadí ("Máte predstavu o vlastnom projekte?") je
     <img loading="lazy"> — pri "Uložiť ako PDF" sa lazy-loading obrázok
     často vôbec nenačíta (žiadny skutočný scroll/viewport, ktorý by ho
     spustil), takže sekcia vyjde prázdna/biela. V tlači preto fotku
     nekreslíme cez <img>, ale cez CSS background-image (vždy sa načíta),
     hodnotu nesie inline --cta-bg-print premenná priamo v index.php. */
  .cta-band-bg { display: none; }
  .cta-band-parallax {
    height: auto;
    background-image: var(--cta-bg-print);
    background-size: cover;
    background-position: center;
  }

  /* Karusely a "vejár" fotiek sa v tlači zídu ako jednoduchý zoznam —
     vodorovný scroll a hover/scroll-triggered efekty v PDF nedávajú zmysel. */
  .carousel-btn { display: none; }
  .carousel-track { overflow: visible; flex-wrap: wrap; }
  .photo-fan-stack .photo-fan-item {
    position: static;
    transform: none !important;
    display: inline-block;
    width: 140px;
    margin: 6px;
  }

  /* Odkazy v PDF nie sú klikateľné, tak nech ani tak nevyzerajú — žiadne
     podčiarknutie/zmena farby (niektoré prehliadače majú vlastný tlačový
     UA-stylesheet, ktorý odkazy podčiarkne/zmodrí bez ohľadu na naše
     bežné CSS). content:none pre istotu odstráni aj prípadné "(url)" za
     odkazom, ktoré niektoré tlačové štýly dopĺňajú automaticky. */
  a, a:visited, a:hover, a:focus {
    color: inherit;
    text-decoration: none;
  }
  a[href]::after { content: none !important; }

  /* .site-footer má clip-path so šípkovým výrezom — na hranici tlačovej
     strany sa taká sekcia vie orezať/nedokresliť podľa pôvodných rozmerov
     PRED zalomením, takže spodná časť footera (alebo jeho pokračovanie na
     ďalšej strane) sa v PDF nezobrazí vôbec. Preto výrez vypíname LEN na
     footri (je jednoducho obdĺžnik, nič sa nestratí bez ohľadu na to, na
     koľko strán sa rozdelí) — .hero výrez zámerne necháva nedotknutý,
     lebo je to prvá sekcia na prvej strane a nezalamuje sa, takže tam k
     tomuto problému nedochádza. */
  .site-footer {
    clip-path: none !important;
    -webkit-clip-path: none !important;
  }
  /* Footer nech sa nezačína tesne na konci predchádzajúcej strany len
     zopár riadkami (škaredé zalomenie) — radšej celý na novú stranu. */
  .site-footer { break-before: page; }
  /* Sekcie/karty sa nemajú deliť napoly medzi dve tlačové strany. */
  section, .case-study-card, .reason-card, .process-step, .card { break-inside: avoid; }
}