/* ==========================================================================
   HNL STAVBY — app.css
   1. Premenné  2. Reset  3. Typografia  4. Layout  5. Komponenty  6. Bloky stránok
   Hodnoty sú 1 : 1 z Figmy (HNL-1, „Landing page 001", 1440 px). Písmo Manrope
   (doplnkovo DM Sans) a odtiene šedej sú z Figmy — logomanuál uvádza Montserrat
   a #000/#545454; rozpor je zapísaný v docs/ROZHODNUTIA.md a čaká na klienta.
   Mriežka a .container sú z Bootstrapu 5.3 (CDN v partials/head) — tu sa
   neprepisujú; šírky obsahu podľa Figmy nesie .blok-wrp.
   Tu je len desktop (Figma 1440). Všetky @media sú v responsive.css.
   ========================================================================== */

/* 1. Premenné ----------------------------------------------------------- */
:root {
    /* Farby (Figma) */
    --color-black: #000000;
    --color-white: #ffffff;
    --color-dark: #2b2b2b;          /* tmavé karty, pozadie ikon v tlačidlách, logo */
    --color-title: #191919;         /* text tlačidiel na bielom (Figma: Text tittle dark) */
    --color-text: #242424;          /* text v navigácii */
    --color-label: #131313;         /* popisky formulára */
    --color-text-secondary: #575757;/* placeholder v poliach (Figma: Text Secondary Black) */
    --color-gray-light: #eeeded;    /* svetlé karty, ikona v sklenenom tlačidle */
    --color-bg: #f7f7f7;            /* pozadie stránky */
    --color-line: #d9d9d9;          /* podčiarknutia, bodky karuselu */

    --color-text-50: rgba(0, 0, 0, 0.5);
    --color-white-70: rgba(255, 255, 255, 0.7);     /* tlmený text na tmavej karte (labely, čísla) */
    --color-dark-40: rgba(43, 43, 43, 0.4);
    --color-dark-60: rgba(43, 43, 43, 0.6);
    --color-glass: rgba(255, 255, 255, 0.16);       /* sklenené tlačidlá a karty */
    --color-glass-dark: rgba(36, 36, 36, 0.5);      /* tmavé sklenené karty na fotke (0,16 → 0,5: čitateľnosť) */
    --color-glass-nav: rgba(36, 36, 36, 0.08);      /* tlačidlo Menu */
    --color-glass-hover: rgba(255, 255, 255, 0.28);  /* sklenené tlačidlo pod myšou */
    --color-glass-nav-hover: rgba(36, 36, 36, 0.14); /* tlačidlo Menu pod myšou */
    --color-overlay: rgba(0, 0, 0, 0.4);            /* stmavenie fotiek na pozadí */
    --color-overlay-light: rgba(0, 0, 0, 0.2);

    /* Akcent (feedback klienta 11. 9.: „bezpečnostná oranžová", odtieň #F7652A z podkladov klienta — Daniel 11. 9.).
       Jeden odtieň všade — tmavšie varianty pre text a hover pôsobili špinavo (Daniel 14. 9.), preto
       --color-accent-text aj --color-accent-hover ukazujú na ten istý odtieň a hover rieši priehľadnosť. */
    --color-accent: #f7652a;
    --color-accent-hover: #f7652a;
    --color-accent-text: #f7652a;
    --color-accent-soft: rgba(247, 101, 42, 0.12);

    /* Text na fotke: jeden prechod a jeden tieň pre celý web (feedback 11. 9.: čitateľnosť) */
    --overlay-gradient: linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.55) 50%, rgba(0, 0, 0, 0.75) 100%);
    --text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);

    /* Písmo */
    --font-base: 'Manrope', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
    --font-alt: 'DM Sans', var(--font-base);

    /* Veľkosti písma (px vo Figme → rem) */
    --text-xs: 0.75rem;      /* 12 — súhlas GDPR */
    --text-sm: 0.8125rem;    /* 13 — predtitulok */
    --text-md: 0.875rem;     /* 14 — pätička */
    --text-base: 1rem;       /* 16 — odseky, tlačidlá, popisky */
    --text-lg: 1.5rem;       /* 24 — meno v referencii, úvod formulára */
    --text-xl: 1.625rem;     /* 26 — nadpis kroku spolupráce */
    --text-2xl: 2rem;        /* 32 — podnadpis sekcie */
    --text-3xl: 2.1875rem;   /* 35 — citát, výrok */
    --text-4xl: 2.25rem;     /* 36 — nadpis karty, kontakt v pätičke */
    --text-5xl: 2.5rem;      /* 40 — nadpis karty v hero */
    --text-h1: 2.75rem;      /* 44 — H1 hero */
    --text-h2: 4rem;         /* 64 — H2 sekcií, čísla štatistík */
    --text-huge: 8rem;       /* 128 — „25 %" */

    --leading-tight: 1;
    --leading-snug: 1.1;
    --leading-normal: 1.5;
    --tracking-tight: -0.02em;
    --tracking-wide: 0.2em;

    /* Rozostupy */
    --space-1: 0.25rem;   /* 4 */
    --space-2: 0.5rem;    /* 8 */
    --space-3: 0.75rem;   /* 12 */
    --space-4: 1rem;      /* 16 */
    --space-5: 1.25rem;   /* 20 — medzera medzi kartami a stĺpcami */
    --space-6: 1.5rem;    /* 24 */
    --space-8: 2rem;      /* 32 — vnútro karty kroku */
    --space-10: 2.5rem;   /* 40 — vnútro karty */
    --space-12: 3rem;     /* 48 */
    --space-15: 3.75rem;  /* 60 — odsadenie sekcie, vnútro veľkej karty */
    --space-20: 5rem;     /* 80 */
    --space-25: 6.25rem;  /* 100 */
    --space-30: 7.5rem;   /* 120 */

    --gap: var(--space-5);
    --section-padding: var(--space-15);
    --card-padding: var(--space-10);
    --card-padding-lg: var(--space-15);

    /* Zaoblenia */
    --radius-sm: 0.25rem;     /* 4 — políčko súhlasu */
    --radius-md: 1rem;        /* 16 — textarea, fotokarty (bolo 24) */
    --radius-lg: 1.5rem;      /* 24 — karty (bolo 32; feedback 11. 9.: menej zaoblené) */
    --radius-ikona: 0.75rem;  /* 12 — ikona v oranžovom štvorci */
    --radius-pill: 62.5rem;   /* tlačidlá, polia, navigácia */

    /* Šírky obsahu (Figma 1440: text 1240, hero a hlavička 1408). Naše služby
       a Spolupráca idú na celú šírku obrazovky so 16 px okrajom (.blok-wrp--cela) —
       rozhodnutie Daniela 27. 8., aby na širokých monitoroch nezostával prázdny okraj. */
    --width-content: 81rem;    /* 1296 — Figma má 1240 (77.5rem); širšie na skúšku (Daniel 14. 9.: na veľkých
                                  obrazovkách sa zmestí viac a text pôsobí kratší). Viac sa nedá: Bootstrap
                                  .container má nad 1400 px max-width 1320 vrátane 2 × 12 px okraja. */
    --width-wide: 88rem;

    /* Figma „background blur 20/10" = CSS blur 10/5 px (Figma polomer je 2σ) */
    --blur: 10px;
    --blur-sm: 5px;
}

/* 2. Reset ---------------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

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

body,
h1, h2, h3, h4, h5, h6,
p, ul, ol, figure, blockquote {
    margin: 0;
}

ul, ol {
    padding: 0;
    list-style: none;
}

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

button, input, select, textarea {
    font: inherit;
    color: inherit;
}

a {
    color: inherit;
}

/* 3. Typografia ----------------------------------------------------------- */
body {
    font-family: var(--font-base);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: var(--color-black);
    background: var(--color-bg);
}

h1, h2, h3, h4 {
    font-weight: 700;
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-snug);
}

h1 {
    font-size: var(--text-h1);
    line-height: 1.0909;               /* 44/48 */
}

h2 {
    font-size: var(--text-h2);
    line-height: var(--leading-tight); /* 64/64 */
}

h3 {
    font-size: var(--text-4xl);
    font-weight: 400;
    line-height: 1.1111;               /* 36/40 */
}

h4 {
    font-size: var(--text-xl);
    font-family: var(--font-alt);
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.2692;               /* 26/33 */
}

/* Predtitulok nad nadpisom: 13/20, medzery 0.2em, verzálky (bez čiarky — Daniel 14. 9.) */
.predtitulok {
    display: inline-block;
    font-size: var(--text-sm);
    font-weight: 500;
    line-height: 1.5385;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
}

/* Podnadpis sekcie: 32/40, polopriehľadný */
.podnadpis {
    font-size: var(--text-2xl);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: var(--tracking-tight);
    color: var(--color-text-50);
}

/* Odsek s medzerou pod nadpisom */
.odsek {
    font-size: var(--text-base);
    line-height: var(--leading-normal);
}

/* 4. Layout ----------------------------------------------------------------- */
body {
    --bs-body-font-family: var(--font-base);
    --bs-body-color: var(--color-black);
    --bs-body-bg: var(--color-bg);
    --bs-gutter-x: var(--space-6);
}

/* Široké sekcie (hero, služby, spolupráca): 16 px od okraja obrazovky */
.container-fluid {
    --bs-gutter-x: var(--space-8);
}

/* Každá sekcia stránky: <section class="blok sections"> — nesie vertikálne odsadenie. */
.sections {
    padding-block: var(--section-padding);
}

.sections--bez-hora {
    padding-top: 0;
}

.sections--bez-dola {
    padding-bottom: 0;
}

/* Obsah sekcie: 1240 px (text) alebo 1408 px (široké karty) — podľa Figmy */
.blok-wrp {
    max-width: var(--width-content);
    margin-inline: auto;
}

.blok-wrp--siroky {
    max-width: var(--width-wide);
}

.blok-wrp--cela {
    max-width: none;
}

.row {
    --bs-gutter-x: var(--gap);
    --bs-gutter-y: var(--gap);
}

/* 5. Komponenty ------------------------------------------------------------- */

/* Tlačidlo: text + kruhová ikona so šípkou (56 px, pilulka) */
.tlacidlo {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    height: 3.5rem;
    padding: var(--space-3) var(--space-2) var(--space-3) var(--space-6);
    border: 1px solid var(--color-glass);
    border-radius: var(--radius-pill);
    background: var(--color-white);
    color: var(--color-title);
    font-size: var(--text-base);
    font-weight: 400;
    line-height: var(--leading-normal);
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
}

/* Dlhé texty tlačidiel (odkazy služieb) majú krátky variant — ukáže sa pod 576 px (responsive.css) */
.tlacidlo__kratky {
    display: none;
}

/* Textové odkazy: plynulý prechod stavov; odkaz bez triedy (v bežnom texte) pod myšou zjemnie.
   Komponenty (tlačidlá, menu, pätička…) majú vlastné hover pravidlá nižšie. */
a {
    transition: color 0.2s ease, opacity 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

a:not([class]):hover {
    opacity: 0.7;
}

.tlacidlo__ikona {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--color-dark);
}

.tlacidlo__ikona img {
    width: 1rem;
    height: 1rem;
    transform: rotate(90deg); /* šípka „ion:arrow-up-sharp" je vo Figme otočená o 90° → ↗ */
}

/* Tmavé tlačidlo na bielej karte (rozcestník podstránky) — biele by splynulo s kartou */
.tlacidlo--tmave {
    border-color: var(--color-dark);
    background: var(--color-dark);
    color: var(--color-white);
}

.tlacidlo--tmave .tlacidlo__ikona {
    background: var(--color-white);
}

/* Oranžové tlačidlo: výzvy na kontakt a cenovú ponuku (jedno na sekciu, nie viac).
   Biely text (Daniel 11. 9.) — kontrast 3,2 : 1, preto polotučné písmo. */
.tlacidlo--akcent {
    border-color: var(--color-accent);
    background: var(--color-accent);
    color: var(--color-white);
    font-weight: 500;
}

.tlacidlo--akcent .tlacidlo__ikona {
    background: var(--color-white);
}

/* Šípka v bielom kruhu čierna — v šablónach je biela ikona, otočí ju filter (ako pri .tlacidlo--tmave:hover) */
.tlacidlo--akcent .tlacidlo__ikona img {
    filter: invert(1);
}

/* Sklenené tlačidlo na tmavom / na fotke */
.tlacidlo--sklo {
    background: var(--color-glass);
    -webkit-backdrop-filter: blur(var(--blur));
    backdrop-filter: blur(var(--blur));
    color: var(--color-white);
    font-weight: 500;
}

.tlacidlo--sklo .tlacidlo__ikona {
    background: var(--color-gray-light);
}

/* Obrysové tlačidlo: biele s oranžovým rámikom a textom, šípka v oranžovom kruhu — odkazy na weby divízií;
   rovnaké farby ako „Zobraziť viac" (.rozbal summary). Hover: plná oranžová s bielym textom. */
.tlacidlo--obrys {
    border-color: var(--color-accent);
    color: var(--color-accent-text);
    font-weight: 500;
    transition: background-color 0.2s, color 0.2s;
}

.tlacidlo--obrys .tlacidlo__ikona {
    background: var(--color-accent);
    transition: background-color 0.2s;
}

/* Kruhová šípka karuselu (55 × 56) */
.sipka-kruh {
    display: block;
    width: 3.4375rem;
    height: 3.5rem;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.sipka-kruh--spat img {
    transform: scaleX(-1);
}

.sipka-kruh:disabled,
.sipka-kruh.is-neaktivna {
    opacity: 0.6;
    cursor: default;
}

/* Karta: zaoblený blok s vnútorným odsadením */
.karta {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg);
    padding: var(--card-padding);
}

.karta--tmava {
    background: var(--color-dark);
    color: var(--color-white);
}

.karta--svetla {
    background: var(--color-gray-light);
    color: var(--color-dark);
}

.karta--biela {
    background: var(--color-white);
    color: var(--color-dark);
}

.karta--sklo {
    border: 1px solid var(--color-glass);
    background: var(--color-glass);
    -webkit-backdrop-filter: blur(var(--blur));
    backdrop-filter: blur(var(--blur));
    color: var(--color-white);
}

.karta--sklo-tmave {
    border: 1px solid var(--color-glass);
    background: var(--color-glass-dark);
    -webkit-backdrop-filter: blur(var(--blur));
    backdrop-filter: blur(var(--blur));
    color: var(--color-white);
}

.karta--velka {
    padding: var(--card-padding-lg);
}

/* Fotka na pozadí karty so stmavením */
.karta__pozadie {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.karta__pozadie img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.karta__pozadie::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--overlay-gradient);
}

.karta__obsah {
    position: relative;
    z-index: 1;
}

/* Text nad fotkou má vždy jemný tieň — jeden spôsob pre celý web */
.karta__pozadie ~ .karta__obsah h1,
.karta__pozadie ~ .karta__obsah h2,
.karta__pozadie ~ .karta__obsah h3,
.karta__pozadie ~ .karta__obsah p,
.hero__panel {
    text-shadow: var(--text-shadow);
}

/* Šrafovanie v spodnej časti tmavej karty (Figma „Group 1") */
.karta__srafovanie {
    position: absolute;
    left: -73%;
    bottom: -12%;
    width: 200%;
    max-width: none;
    pointer-events: none;
}

.karta__srafovanie--vpravo {
    left: auto;
    right: -73%;
}

/* Vodoznak „HNL" v spodnej časti hero karty */
.karta__vodoznak {
    position: absolute;
    left: 0;
    bottom: -1.6875rem; /* Figma: 373 + 142 − 488 */
    width: 101.7%;
    max-width: none;
    pointer-events: none;
}

/* Flash správy */
.flash {
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-sm);
    margin-block: var(--space-4);
}

.flash--error {
    border-color: var(--color-black);
    font-weight: 600;
}

/* Dialóg potvrdenia (public/js/confirm.js) */
.confirm {
    border: 0;
    border-radius: var(--radius-md);
    padding: var(--space-6);
    max-width: 28rem;
    width: calc(100% - 2 * var(--space-4));
    color: var(--color-black);
    background: var(--color-white);
}

.confirm::backdrop {
    background: rgba(0, 0, 0, 0.5);
}

.confirm-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    margin-top: var(--space-4);
}

.confirm-actions button {
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--color-black);
    border-radius: var(--radius-sm);
    background: var(--color-white);
    cursor: pointer;
}

.confirm-actions [data-confirm-ok] {
    background: var(--color-black);
    color: var(--color-white);
}

.confirm__ok--danger {
    border-color: #b00020;
    background: #b00020 !important;
}

/* 6. Bloky stránok ---------------------------------------------------------- */

/* Hlavička: logo vľavo, telefón + Menu vpravo; 16 px od okrajov */
.header {
    padding: var(--space-4) 0 0;
}

.header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    max-width: var(--width-wide);
    margin-inline: auto;
}

/* Odkazy s logom sú vysoké len ako obrázok (20–27 px) — min. výška drží dotykový cieľ 44 px */
.header__logo {
    display: flex;
    align-items: center;
    width: 16.875rem;
    min-height: 2.75rem;
}

.header__logo img {
    width: 100%;
}

.header__nav {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.header__telefon {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    height: 3.5rem;
    padding: var(--space-3) var(--space-6);
    font-weight: 700;
    color: var(--color-dark);
    text-decoration: none;
    white-space: nowrap;
}

.header__telefon span {
    color: var(--color-accent-text);
    border-bottom: 1px solid var(--color-accent);
}

.header__menu {
    display: inline-flex;
    align-items: center;
    height: 3.5625rem;
    padding: 0 var(--space-2);
    border: 1px solid var(--color-glass);
    border-radius: var(--radius-pill);
    background: var(--color-glass-nav);
    -webkit-backdrop-filter: blur(var(--blur-sm));
    backdrop-filter: blur(var(--blur-sm));
}

.header__menu-tlacidlo {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    padding: var(--space-2) var(--space-6);
    border: 0;
    background: transparent;
    color: var(--color-text);
    font-weight: 700;
    cursor: pointer;
}

.header__menu-tlacidlo img {
    width: 2.125rem;
    height: 2.1875rem;
}

/* Vysúvacie menu (Bootstrap offcanvas — vo Figme nie je navrhnuté, návrh 27. 8.):
   tmavý panel sprava so šrafovaním a vodoznakom, položky s podtitulmi
   z podkladov, dole kontakt a CTA „Rýchly kontakt" (text z HLAVNA STRANKA.md). */
.menu-panel {
    --bs-offcanvas-width: 32rem;
    --bs-offcanvas-padding-x: var(--space-10);
    --bs-offcanvas-padding-y: var(--space-8);
    --bs-offcanvas-bg: var(--color-dark);
    --bs-offcanvas-color: var(--color-white);
    --bs-offcanvas-border-width: 0;
    overflow: hidden;
}

.menu-panel .offcanvas-header {
    position: relative;
    z-index: 1;
    justify-content: space-between;
    padding-bottom: var(--space-6);
}

.menu-panel .offcanvas-body {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-10);
    padding-top: var(--space-4);
}

.menu-panel__logo {
    display: flex;
    align-items: center;
    width: 12.5rem;
    min-height: 2.75rem;
}

.menu-panel__zavriet {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    height: 3rem;
    padding: 0 var(--space-4) 0 var(--space-6);
    border: 1px solid var(--color-glass);
    border-radius: var(--radius-pill);
    background: var(--color-glass);
    color: var(--color-white);
    font-weight: 700;
    margin-left: auto;
    cursor: pointer;
    transition: background 0.2s;
}

.menu-panel__zavriet:hover {
    background: rgba(255, 255, 255, 0.28);
}

.menu-panel__zavriet-ikona {
    display: grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: var(--color-white);
    color: var(--color-dark);
    font-size: 1.125rem;
    line-height: 1;
}

.menu-panel__predtitulok {
    color: rgba(255, 255, 255, 0.5);
}

.menu-panel__zoznam {
    display: flex;
    flex-direction: column;
}

/* Položky sa po otvorení vysúvajú postupne (--i z Blade) */
.menu-panel__polozka {
    opacity: 0;
    transform: translateX(1.5rem);
    transition: opacity 0.45s ease, transform 0.45s ease;
    transition-delay: 0s;
}

.offcanvas.show .menu-panel__polozka {
    opacity: 1;
    transform: none;
    transition-delay: calc(0.12s + var(--i) * 0.06s);
}

.menu-panel__odkaz {
    display: grid;
    grid-template-columns: 1fr 1.5rem;
    align-items: center;
    column-gap: var(--space-3);
    padding: var(--space-4) 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--color-white);
    text-decoration: none;
}

.menu-panel__nazov {
    display: block;
    font-size: 1.375rem;
    line-height: 1.2;
    letter-spacing: var(--tracking-tight);
    transition: transform 0.25s ease;
}

.menu-panel__podtitul {
    display: block;
    margin-top: 0.125rem;
    font-size: var(--text-md);
    color: rgba(255, 255, 255, 0.5);
    transition: transform 0.25s ease;
}

.menu-panel__sipka {
    width: 1rem;
    height: 1rem;
    opacity: 0;
    transform: translate(-0.5rem, 0.5rem) rotate(90deg);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.menu-panel__odkaz:hover .menu-panel__cislo,
.menu-panel__odkaz:focus-visible .menu-panel__odkaz:hover .menu-panel__nazov,
.menu-panel__odkaz:hover .menu-panel__podtitul,
.menu-panel__odkaz:focus-visible .menu-panel__nazov,
.menu-panel__odkaz:focus-visible .menu-panel__podtitul {
    transform: translateX(0.375rem);
}

.menu-panel__odkaz:hover .menu-panel__sipka,
.menu-panel__odkaz:focus-visible .menu-panel__sipka {
    opacity: 1;
    transform: rotate(90deg);
}

/* Menšie položky pod službami: ostatné stránky webu */
/* „Služby" nad malými položkami — bez nadpisu vyzerali ako ďalšie stránky */
.menu-panel__predtitulok--dalsie {
    margin-top: var(--space-6);
}

.menu-panel__zoznam--dalsie {
    margin-top: var(--space-6);
}

/* Aktuálna stránka v menu */
.menu-panel__odkaz[aria-current="page"] .menu-panel__nazov {
    text-decoration: underline;
    text-underline-offset: 0.3em;
    text-decoration-thickness: 2px;
    text-decoration-color: var(--color-accent);
}

.menu-panel__odkaz--maly {
    padding: var(--space-3) 0;
}

.menu-panel__odkaz--maly .menu-panel__nazov {
    font-size: var(--text-base);
}

.menu-panel__kontakt {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
    margin-top: auto;
    padding-top: var(--space-6);
}

.menu-panel__kontakt a:not(.tlacidlo) {
    position: relative;
    font-size: var(--text-lg);
    font-weight: 700;
    letter-spacing: var(--tracking-tight);
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    transition: border-color 0.2s;
}

/* Riadok textu má ~31 px — neviditeľný presah dopĺňa dotykový cieľ na 44 px
   bez posunutia podčiarknutia (padding by ho odtrhol od textu) */
.menu-panel__kontakt a:not(.tlacidlo)::after {
    content: "";
    position: absolute;
    inset: -0.4375rem 0;
}

.menu-panel__kontakt a:not(.tlacidlo):hover {
    border-color: var(--color-white);
}

.menu-panel__kontakt .tlacidlo {
    margin-top: var(--space-3);
}

.menu-panel .karta__srafovanie {
    bottom: -4%;
}

.menu-panel .karta__vodoznak {
    bottom: 3rem;
    width: 120%;
    opacity: 0.35;
}

.offcanvas-backdrop {
    --bs-backdrop-bg: #000;
    --bs-backdrop-opacity: 0.45;
    -webkit-backdrop-filter: blur(var(--blur-sm));
    backdrop-filter: blur(var(--blur-sm));
}

/* Hero: vľavo tmavá karta + štatistiky (484 px), vpravo fotka s panelom služby */
.hero {
    padding-top: var(--space-10);
}

.hero__lavy {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}


.hero__karta {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--gap);
    min-height: 30.5rem; /* 488 */
}

.hero__karta h1 {
    color: var(--color-white);
}

.hero__karta .odsek {
    color: var(--color-white);
}

.hero__tlacidla {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.625rem;
    margin-top: var(--gap);
}

.hero__statistiky {
    display: flex;
    min-height: 15.4375rem; /* 247 */
    padding: 0;
}

.hero__stat {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--space-8);
    padding: var(--card-padding);
}

.hero__stat-cislo {
    font-size: var(--text-h2);
    font-weight: 700;
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--color-accent-text);
}

/* Obal karusela: karta s fotkou + šípky mimo karty (jej overflow: hidden by ich orezal,
   keď pod 576 px stoja pod kartou — responsive.css) */
.hero__pravy {
    position: relative;
    height: 100%;
}

.hero__fotka {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 47.1875rem; /* 755 */
    height: 100%;
    padding: 0;
}

.hero__fotka > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero__panel {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    width: 100%;
    border-radius: var(--radius-lg);
}

.hero__panel-ikona {
    width: 2rem;
    height: 2rem;
}

.hero__panel-nadpis {
    max-width: 36.375rem; /* 582 */
    font-size: var(--text-5xl);
    font-weight: 700;
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
}

.hero__panel-text {
    max-width: 36.375rem;
}

.hero__panel-spodok {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap);
}

.hero__sipky {
    display: flex;
    gap: var(--space-2);
}

/* Karusel: snímky nad sebou, viditeľná je .is-aktivna. Po prvom vykreslení (.is-animovany
   z app.js) sa nová snímka rozsvieti a mierne vysunie, hero sa navyše prelína
   s odchádzajúcou (.is-odchadza). Pri „obmedziť pohyb" bez animácie. */
.karusel__snimka {
    display: none;
}

.karusel__snimka.is-aktivna {
    display: block;
}

.karusel.is-animovany .karusel__snimka.is-aktivna {
    animation: karusel-prichod 0.6s ease-out both;
}

@keyframes karusel-prichod {
    from {
        opacity: 0;
        transform: translateY(0.75rem);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes karusel-odchod {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .karusel.is-animovany .karusel__snimka.is-aktivna,
    .karusel__snimka.is-odchadza {
        animation: none;
    }
}

/* Jemné bodky: 8 px, aktívna 24 px, medzera 10 (Daniel 14. 9.: pôvodných 10/36/24 pôsobilo ťažko, 6/18/8 primálo) */
.karusel__bodky {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.karusel__bodka {
    position: relative;
    width: 0.5rem;
    height: 0.5rem;
    padding: 0;
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--color-line);
    cursor: pointer;
    transition: width 0.2s;
}

.karusel__bodka.is-aktivna {
    width: 1.5rem;
    background: var(--color-accent);
}

/* Dotyková plocha bodky 44 px, vizuál ostáva 8 px */
.karusel__bodka::before {
    content: '';
    position: absolute;
    inset: -1.125rem -0.3125rem;
}

.hero__snimka {
    position: absolute;
    inset: 0;
}

.hero__snimka.is-aktivna {
    display: flex;
    align-items: flex-end;
    z-index: 1;
}

/* Hero: fotka sa prelína (bez posunu), panel s textom sa vysúva */
.karusel.is-animovany .hero__snimka.is-aktivna {
    animation-name: karusel-prichod-hero;
    animation-timing-function: linear; /* fotky sa prelínajú rovnomerne — súčet krytia je stále 1 */
}

.karusel.is-animovany .hero__snimka.is-aktivna .hero__panel {
    animation: karusel-prichod 0.6s ease-out both;
}

.hero__snimka.is-odchadza {
    display: flex;
    align-items: flex-end;
    z-index: 0;
    pointer-events: none;
    animation: karusel-odchod 0.6s linear both;
}

@keyframes karusel-prichod-hero {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.hero__snimka > img,
.hero__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero__sipky {
    position: absolute;
    right: var(--card-padding);
    bottom: var(--card-padding);
    z-index: 2;
}

/* Mobilné šípky: samostatný prvok pod kartou — ukáže ich responsive.css pod 576 px */
.hero__sipky--mobil {
    display: none;
}

/* Indikátor snímky hero: vpravo hore na fotke (dole je panel s tlačidlom a šípkami); bodky z app.js */
.hero__bodky {
    position: absolute;
    top: var(--card-padding);
    right: var(--card-padding);
    z-index: 2;
}

.hero__bodky .karusel__bodka:not(.is-aktivna) {
    background: var(--color-white-70);
}


.hero__panel-spodok {
    padding-right: 7.5rem; /* miesto pre šípky karuselu */
}

/* Hlavný predajný argument: hore nadpis + tlačidlo, pod tým tri biele karty bodov (.bod-karta) vedľa seba
   (feedback 11. 9.: bez karuselu, všetko vidieť naraz; Daniel 14. 9.: štýl kariet podľa leslov) */
.argument__hlava {
    align-items: flex-end;
    row-gap: var(--space-8);
    margin-bottom: var(--space-15);
}

.argument__predtitulok {
    color: var(--color-black);
    margin-bottom: var(--space-6);
}

.argument__nadpis {
    color: var(--color-dark);
    margin-bottom: var(--gap);
}

.argument__akcia {
    display: flex;
    justify-content: flex-end;
    padding-bottom: var(--space-2);
}

.argument__karty {
    row-gap: var(--gap);
}

/* Naše služby: nadpis vľavo, odsek s tlačidlom vpravo, pod tým mriežka fotokariet (partials/sluzba-karta) */
.sluzby__hlava {
    align-items: flex-end;
    row-gap: var(--space-6);
    margin-bottom: var(--space-10);
}

.sluzby__hlava .predtitulok {
    margin-bottom: var(--space-6);
}

.sluzby__uvod {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-6);
    padding-bottom: var(--space-2);
}

.sluzby__mriezka {
    row-gap: var(--bs-gutter-x);
}


/* Referencia: biela karta s citátom, pod ňou svetlá výzva a tmavá úspora */
.referencia {
    padding-top: var(--space-10);
}

.referencia__citat {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--space-10);
    min-height: 33.4375rem; /* 535 */
}

.referencia__autor {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.referencia__autor img {
    width: 6.25rem;
    height: 6.1875rem;
    border-radius: 50%;
}

.referencia__autor > div {
    padding: var(--space-1) var(--space-4);
}

.referencia__meno {
    font-size: var(--text-lg);
    letter-spacing: var(--tracking-tight);
}

.referencia__rola {
    color: var(--color-text-50);
}

.referencia__vyrok {
    padding-block: var(--gap);
    border-bottom: 1px solid var(--color-gray-light);
    font-size: var(--text-3xl);
    line-height: 1.1714; /* 35/41 */
    letter-spacing: var(--tracking-tight);
    margin-bottom: var(--gap);
}

.referencia__cisla {
    display: flex;
}

.referencia__cisla > div:first-child {
    padding-right: var(--space-10);
    border-right: 1px solid var(--color-gray-light);
}

.referencia__cisla > div + div {
    padding-left: var(--space-10);
}

.referencia__cislo {
    font-size: var(--text-lg);
    letter-spacing: var(--tracking-tight);
    color: var(--color-accent-text);
}

.referencia__popis {
    color: var(--color-dark-40);
}

.referencia__vyzva,
.referencia__uspora {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--space-10);
    min-height: 30rem; /* 480 */
    height: 100%; /* oba boxy vždy rovnako vysoké — natiahnu sa na výšku riadku */
}

/* Tlačidlo je položka flex stĺpca — bez align-self by sa natiahlo na šírku karty */
.referencia__vyzva .tlacidlo {
    align-self: flex-start;
}

.referencia__vyzva-text {
    font-size: var(--text-3xl);
    font-weight: 700;
    line-height: 1.1714;
    letter-spacing: var(--tracking-tight);
}

.referencia__uspora .predtitulok {
    padding-block: var(--space-1);
    margin-bottom: var(--space-10);
}

.referencia__percento {
    font-size: var(--text-huge);
    font-weight: 300;
    line-height: 0.78125; /* 128/100 */
    letter-spacing: var(--tracking-tight);
    color: var(--color-accent);
}

/* Ako prebieha spolupráca: fotka na pozadí, 4 sklenené karty */
.spolupraca__karta {
    padding: 0;
}

.spolupraca__obsah {
    max-width: calc(var(--width-content) + 2 * var(--card-padding-lg));
    margin-inline: auto;
    padding-inline: var(--card-padding-lg); /* text nikdy nalepený na kraj fotky */
    padding-bottom: var(--space-12);
}

.spolupraca__uvod {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gap);
    max-width: 56rem; /* 896 */
    padding-block: var(--section-padding);
    color: var(--color-white);
}

.spolupraca__uvod .predtitulok {
    padding-block: 0.625rem;
}

.spolupraca__uvod h2 {
    color: var(--color-white);
}

/* Kroky ako tmavé sklenené karty (.karta--sklo-tmave) ako pôvodne z Figmy — Daniel 14. 9.: karty späť
   (riadky s linkou a číslami z etapy B pôsobili generovane). Rovnaký blok používa „Prečo HNL" na podstránkach. */
.spolupraca__obsah .row {
    row-gap: var(--gap);
}

.spolupraca__krok {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--space-6);
    min-height: 18.625rem; /* 298 */
    height: 100%;
    padding: var(--space-8);
}

/* Nadpis kroku: úroveň h3 (po h2 sekcie), vzhľad štýlu H4 z Figmy */
.spolupraca__krok-nadpis {
    font-size: var(--text-xl);
    font-family: var(--font-alt);
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.2692;               /* 26/33 */
    color: var(--color-white);
}

.spolupraca__krok p {
    color: rgba(255, 255, 255, 0.85);
}

/* Kontakt: vľavo nadpis (drží pri scrole formulára), vpravo formulár */
.kontakt__uvod {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gap);
    padding-block: var(--section-padding);
    padding-right: var(--space-15);
}

.kontakt__uvod .predtitulok {
    padding-block: var(--space-1);
    color: var(--color-black);
}

.kontakt__uvod h2 {
    color: var(--color-dark);
}

.kontakt__vyzva {
    font-size: var(--text-lg);
    font-weight: 700;
    line-height: 1.3333; /* 24/32 */
    padding-top: var(--section-padding);
    margin-bottom: var(--gap);
}

.formular {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    padding-bottom: var(--section-padding);
}

.formular__riadok {
    --bs-gutter-x: 0.875rem; /* 14 */
    --bs-gutter-y: var(--gap);
}

.formular__blok {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
}

.formular__blok > .formular__popis + .formular__pole--textarea {
    margin-top: 0;
}

.formular__popis {
    display: block;
    font-weight: 500;
    color: var(--color-label);
    letter-spacing: -0.008em;
    margin-bottom: var(--space-3);
}

.formular__blok .formular__popis {
    margin-bottom: 0;
}

.formular__pole {
    display: block;
    width: 100%;
    height: 3.5rem;
    padding: var(--space-1) 1.75rem;
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--color-white);
    color: var(--color-black);
}

.formular__pole::placeholder {
    color: var(--color-text-secondary);
    opacity: 1;
}

.formular__pole:focus {
    outline: 2px solid var(--color-accent);
    outline-offset: -2px;
}

.formular__pole--textarea {
    height: 14.1875rem; /* 227 */
    padding: var(--space-4) 1.75rem;
    border-radius: var(--radius-md);
    resize: vertical;
}

.formular__vyber {
    position: relative;
}

.formular__vyber select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 3.5rem;
    color: var(--color-text-secondary);
}

.formular__vyber select:valid {
    color: var(--color-black);
}

.formular__vyber img {
    position: absolute;
    top: 1rem;
    right: 1.375rem;
    pointer-events: none;
}

.formular__subor {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--color-text-secondary);
    cursor: pointer;
}

.formular__subor input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

/* 16 px v poli natvrdo — pod 16 px Safari na iPhone stránku priblíži a už ju nevráti */
.formular__pole {
    font-size: 1rem;
}

.formular__suhlas {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 2.75rem; /* dotykový cieľ 44 px */
    font-size: var(--text-xs);
    font-weight: 300;
    letter-spacing: 0.04em;
    color: var(--color-text-50);
    cursor: pointer;
}

.formular__suhlas input {
    appearance: none;
    -webkit-appearance: none;
    flex: 0 0 auto;
    width: 1.5625rem;
    height: 1.5625rem;
    margin: 0;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: var(--radius-sm);
    background: var(--color-white);
    cursor: pointer;
}

.formular__suhlas input:checked {
    background: var(--color-accent);
    border-color: var(--color-accent);
    /* Biela fajka (inline SVG, nech nie je závislosť na súbore ikony) */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 1rem;
}

/* Pasca pre roboty: mimo obrazovky, nie display:none (to by robot rozpoznal) */
.formular__pasca {
    position: absolute;
    left: -200vw;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
}

/* Chyba validácie pri poli (KontaktRequest → @error vo formulári) */
.formular__chyba {
    margin: var(--space-2) 0 0;
    font-size: var(--text-sm);
    color: #b00020;
}

.formular__blok .formular__chyba {
    margin-top: calc(-1 * var(--space-1));
}

.formular__pole.is-chyba {
    outline: 2px solid #b00020;
    outline-offset: -2px;
}

.formular__suhlas input.is-chyba {
    border-color: #b00020;
}

/* Plánovaný termín: pole s natívnym kalendárom; bez dátumu má farbu placeholderu */
.formular__pole--datum {
    color: var(--color-text-secondary);
}

.formular__pole--datum:in-range {
    color: var(--color-black);
}

.formular__pole--datum::-webkit-calendar-picker-indicator {
    cursor: pointer;
}

/* Vlastný rozbaľovací zoznam namiesto natívneho selectu (app.js, [data-vyber]).
   Bez JS ostáva natívny select so šípkou. */
.formular__vyber.is-vlastny select {
    display: none;
}

.formular__vyber img {
    transition: transform 0.2s ease;
}

.formular__vyber.is-otvoreny img {
    transform: rotate(180deg);
}

.formular__vyber-tlacidlo {
    text-align: left;
    padding-right: 3.5rem;
    color: var(--color-black);
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.formular__vyber-tlacidlo.is-prazdny {
    color: var(--color-text-secondary);
}

.formular__vyber-zoznam {
    position: absolute;
    top: calc(100% + 0.375rem);
    left: 0;
    right: 0;
    z-index: 30;
    margin: 0;
    padding: var(--space-2);
    list-style: none;
    background: var(--color-white);
    border-radius: var(--radius-md);
    box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.14);
    max-height: 17rem;
    overflow-y: auto;
    display: none;
}

.formular__vyber.is-otvoreny .formular__vyber-zoznam {
    display: block;
}

.formular__vyber-moznost {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.formular__vyber-moznost:hover,
.formular__vyber-moznost.is-aktivna {
    background: var(--color-gray-light);
}

.formular__vyber-moznost[aria-selected="true"] {
    font-weight: 600;
}

/* Pätička: fotka na pozadí, biela karta s kontaktmi, spodný riadok */
/* Pätička: fotka na pozadí (stmavená), výzva v strede, biela karta s logom, odkazmi na služby a divízie
   a kontaktmi, dole copyright a právne odkazy. Titulky stĺpcov a hover odkazov oranžové (Daniel 11. 9.). */
/* Pätička: čisté tmavé pozadie bez fotky (klient 11. 9.: fotka nevhodná, chce čistejšie pozadie), jemné šrafovanie
   vľavo dole a dole veľký nápis orezaný spodkom (vzor leslov). Daniel 14. 9. */
.paticka {
    position: relative;
    padding: var(--space-20) 0 0;
    overflow: hidden;
    background: var(--color-dark);
    color: var(--color-white);
}

.paticka__srafovanie {
    position: absolute;
    left: -18%;
    bottom: 4%;
    z-index: 0;
    width: 70%;
    max-width: none;
    opacity: 0.35;
    pointer-events: none;
}

/* Svetlé pozadie stránky sa do pätičky zaobľuje (pás 41 px s rádiusom kariet) */
.paticka__oblina {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1;
    height: 2.5625rem;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    background: var(--color-bg);
}

.paticka__obsah {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-10);
}

/* Výzva na ponuku: oranžová karta cez celú šírku, text vľavo, biele tlačidlo vpravo (klient: výrazná výzva na kontakt) */
.paticka__vyzva {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-10);
    width: 100%;
    padding: var(--space-10) var(--space-12);
    background: var(--color-accent);
    color: var(--color-white);
}

.paticka__vyzva-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
    max-width: 44rem;
}

.paticka__vyzva .predtitulok {
    color: rgba(255, 255, 255, 0.85);
}

.paticka__nadpis {
    font-size: var(--text-5xl);
    font-weight: 700;
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-tight);
}

.paticka__vyzva .odsek {
    color: rgba(255, 255, 255, 0.85);
}

.paticka__vyzva-tlacidlo {
    flex: 0 0 auto;
    border-color: var(--color-white);
    font-weight: 500;
}

.paticka__karta {
    position: relative;
    width: 100%;
    padding: var(--space-15) var(--space-10);
    border-radius: var(--radius-lg);
    background: var(--color-white);
    color: var(--color-black);
}

.paticka__stlpce {
    position: relative;
    row-gap: var(--space-10);
}

.paticka__firma {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-6);
    padding-right: var(--space-10);
}

.paticka__logo {
    display: block;
    width: 13.5rem;
}

.paticka__logo img {
    width: 100%;
}

.paticka__seo {
    font-size: var(--text-md);
    line-height: 1.7143; /* 14/24 */
    color: var(--color-text-secondary);
}

.paticka__titulok {
    margin-bottom: var(--space-4);
    font-size: var(--text-sm);
    font-weight: 500;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-accent-text);
}

.paticka__zoznam {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    list-style: none;
}

.paticka__zoznam a,
.paticka__kontakt a,
.paticka__adresa {
    display: inline-block;
    padding-block: var(--space-1); /* dotykový cieľ */
    color: var(--color-black);
    text-decoration: none;
}

.paticka__zoznam a:hover,
.paticka__kontakt a:hover,
.paticka__adresa:hover {
    color: var(--color-accent-text);
}

.paticka__kontakt {
    display: flex;
    flex-direction: column;
}

.paticka__kontakt a {
    font-weight: 700;
}

.paticka__adresy {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

/* Pobočky v druhom riadku karty: tri adresy vedľa seba, na užšom sa zalomia */
.paticka__adresy--riadok {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-6) var(--space-10);
}

.paticka__adresy--riadok address {
    min-width: 12rem;
}

.paticka__adresy address {
    font-style: normal;
    font-size: var(--text-base); /* ako ostatné odkazy v karte (Daniel 14. 9.) */
    line-height: 1.5;
    color: var(--color-text-secondary);
}

.paticka__adresa strong {
    color: var(--color-black);
}

/* Veľký nápis pod obsahom: vyčnieva za spodok pätičky a overflow ho oreže */
.paticka__napis {
    position: relative;
    z-index: 1;
    margin-top: var(--space-12);
    margin-bottom: -2.5rem;
    line-height: 0;
}

.paticka__napis img {
    width: 100%;
    opacity: 0.14;
}

.paticka__spodok {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--gap);
    width: 100%;
    font-family: var(--font-alt);
    font-size: var(--text-md);
    font-weight: 300;
    line-height: 1.8571; /* 14/26 */
}

/* Chybová stránka (resources/views/errors, layout guest) */
.chyba {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: var(--space-6);
}

.chyba__karta {
    width: 100%;
    max-width: 32rem;
    background: var(--color-white);
    border-radius: var(--radius-lg);
    padding: var(--card-padding);
    text-align: center;
}

.chyba__logo {
    display: inline-block;
    margin-bottom: var(--space-8);
}

.chyba__kod {
    font-size: var(--text-5xl);
    font-weight: 700;
    line-height: 1;
    letter-spacing: var(--tracking-tight);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-4);
}

.chyba__nadpis {
    font-size: var(--text-3xl);
    line-height: 1.2;
    margin-bottom: var(--space-3);
}

.chyba__text {
    color: var(--color-text-secondary);
    margin-bottom: var(--space-6);
}

.chyba__tlacidlo {
    background: var(--color-dark);
    border-color: var(--color-dark);
    color: var(--color-white);
}

.chyba__tlacidlo .tlacidlo__ikona {
    background: var(--color-white);
}

.chyba__tlacidlo:hover {
    background: var(--color-black);
    border-color: var(--color-black);
    color: var(--color-white);
}

/* 9. Interakcie: hover a focus ------------------------------------------------
   Figma stavy nemá — jemné, jednotné: 0.2 s, bez zmeny rozmerov. Klávesnica
   dostane rovnaký obrys všade (focus-visible), myš nie. */
.tlacidlo,
.tlacidlo__ikona,
.tlacidlo__ikona img,
.sipka-kruh img,
.header__menu,
.header__logo,
.menu-panel__logo,
.paticka a {
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease,
        opacity 0.2s ease, transform 0.2s ease;
}

/* Tlačidlá: pozadie o odtieň tmavšie, šípka v ikone sa posunie smerom ↗ */
.tlacidlo:hover {
    background: var(--color-gray-light);
    border-color: var(--color-line);
}

.tlacidlo:hover .tlacidlo__ikona img {
    transform: translate(0.125rem, -0.125rem) rotate(90deg);
}

/* Tmavé tlačidlo sa pod myšou obráti: biele s tmavým textom, ikona tmavá (musí byť za všeobecným .tlacidlo:hover) */
.tlacidlo--tmave:hover {
    border-color: var(--color-dark);
    background: var(--color-white);
    color: var(--color-title);
}

.tlacidlo--tmave:hover .tlacidlo__ikona {
    background: var(--color-dark);
}

.tlacidlo--tmave:hover .tlacidlo__ikona img {
    filter: invert(1);
}

.tlacidlo--sklo:hover {
    background: var(--color-glass-hover);
    border-color: var(--color-glass-hover);
}

/* Obrysové tlačidlo sa pod myšou zaplní oranžovou (musí byť za všeobecným .tlacidlo:hover) */
.tlacidlo--obrys:hover {
    border-color: var(--color-accent);
    background: var(--color-accent);
    color: var(--color-white);
}

.tlacidlo--obrys:hover .tlacidlo__ikona {
    background: var(--color-white);
}

.tlacidlo--obrys:hover .tlacidlo__ikona img {
    filter: invert(1);
}

.tlacidlo--akcent:hover {
    background: var(--color-accent-hover);
    border-color: var(--color-accent-hover);
    color: var(--color-white);
    opacity: 0.88;
}

/* Podstránka služby — úvod: vľavo tmavá karta s H1 a SEO textom, vpravo fotka služby */
.sluzba-uvod {
    padding-top: var(--space-10);
}

.sluzba-uvod__karta {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--gap);
    min-height: 34rem; /* vyššia než hero karta (488) — úvod podstránky má dýchať (Daniel, 1. 9.) */
    height: 100%;
}

.sluzba-uvod__karta h1,
.sluzba-uvod__karta .odsek {
    color: var(--color-white);
}

.sluzba-uvod__tlacidlo {
    margin-top: var(--gap);
}

.sluzba-uvod__fotka {
    min-height: 34rem;
    height: 100%;
    padding: 0;
}

/* Drobček v úvode podstránky služby: Domov (ikonka) / Služby / názov */
.drobcek {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    font-size: var(--text-md);
    color: var(--color-white-70);
}

.drobcek__odkaz {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem; /* dotykový cieľ 44 px aj pre ikonu Domov */
    min-height: 2.75rem;
    color: var(--color-white-70);
    text-decoration: none;
    transition: color 0.2s ease, opacity 0.2s ease;
}

.drobcek__odkaz img {
    opacity: 0.7;
}

/* Ikona Domov: bez minimálnej šírky, aby medzera k lomke bola rovnaká ako medzi textami (Daniel 14. 9.);
   dotykový cieľ 44 px dorobí neviditeľný presah do strán */
.drobcek__odkaz--domov {
    position: relative;
    min-width: 0;
}

.drobcek__odkaz--domov::after {
    content: '';
    position: absolute;
    inset: 0 -0.875rem;
}

.drobcek__odkaz:hover {
    color: var(--color-white);
}

.drobcek__odkaz:hover img {
    opacity: 1;
}

.drobcek__oddelovac {
    color: rgba(255, 255, 255, 0.35);
}

.drobcek__aktualna {
    color: var(--color-white);
}

.sluzba-uvod__fotka img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Nadpis sekcie na podstránke: predtitulok + H2 na svetlom pozadí */
.sekcia-uvod {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gap);
    max-width: 56rem; /* 896 ako Spolupráca */
    margin-bottom: var(--space-10);
}

.sekcia-uvod .predtitulok {
    padding-block: 0.625rem;
    color: var(--color-black);
}

.sekcia-uvod h2 {
    color: var(--color-dark);
}

/* Podkategórie služby: biele karty s fotkou hore, tri v riadku (Daniel 14. 9.: menej a prehľadnejšie),
   rovnako vysoké (feedback 11. 9.: fotky, ikony, stručné odrážky namiesto dlhého textu; plný text pod „Zobraziť viac") */
.podkategoria {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 0;
}

.podkategoria__foto {
    aspect-ratio: 16 / 10;
    max-width: 100%;
    overflow: hidden;
}

.podkategoria__foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.podkategoria:hover .podkategoria__foto img {
    transform: scale(1.04);
}

.podkategoria__obsah {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: var(--space-3);
    padding: var(--space-6);
}

/* Ikona z lucide.dev v jemnom oranžovom kruhu + malý názov vedľa (bod-obsah) */
.bod__hlava {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.ikona-kruh {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: var(--color-accent-soft);
}

.ikona-kruh img {
    width: 1.5rem;
    height: 1.5rem;
}

/* Ikona v plnom oranžovom štvorci s bielou ikonou (karty bodov; predloha leslov .ikona-box 56/12/32).
   Kópie lucide majú oranžový ťah natvrdo — filter ich prefarbí na bielo bez ďalších súborov. */
.ikona-stvorec {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: var(--radius-ikona);
    background: var(--color-accent);
}

.ikona-stvorec img {
    width: 2rem;
    height: 2rem;
    filter: brightness(0) invert(1);
}

.bod__uvod {
    color: var(--color-dark);
}

/* Odrážky s bielou fajkou v oranžovom kruhu (bod-obsah; Daniel 14. 9. namiesto bodky).
   Inline SVG, nech nie je závislosť na súbore ikony — funguje aj na tmavom podklade. */
.odrazky {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    list-style: none;
}

.odrazky li {
    position: relative;
    padding-left: 1.625rem;
    color: var(--color-dark-60);
}

.odrazky li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.2em;
    width: 1.125rem;
    height: 1.125rem;
    border-radius: 50%;
    background-color: var(--color-accent);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M4.5 8.5l2.5 2.5 4.5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 0.75rem;
}

/* Plný text pod natívnym <details>: „Zobraziť viac" / „Skryť" bez JS — biele pilulkové tlačidlo s oranžovým
   textom a okrajom, v karte podkategórie drží pri spodku (Daniel 14. 9.) */
.rozbal summary {
    display: inline-flex;
    align-items: center;
    height: 2.75rem;
    padding-inline: var(--space-5);
    border: 1px solid var(--color-accent);
    border-radius: var(--radius-pill);
    background: var(--color-white);
    list-style: none;
    cursor: pointer;
    font-weight: 500;
    color: var(--color-accent-text);
    transition: background-color 0.2s, color 0.2s;
}

.rozbal summary:hover {
    background: var(--color-accent);
    color: var(--color-white);
}

.rozbal summary:focus-visible {
    outline: 2px solid var(--color-dark);
    outline-offset: 2px;
}

.podkategoria__obsah .rozbal {
    margin-top: auto;
}

.rozbal summary::-webkit-details-marker {
    display: none;
}

.rozbal[open] .rozbal__viac,
.rozbal:not([open]) .rozbal__menej {
    display: none;
}

.rozbal > .odsek {
    margin-top: var(--space-4);
    color: var(--color-dark-60);
}

/* Na tmavom (kroky na fotke, tmavé karty): svetlý text, oranžový odkaz */
.spolupraca__krok .odrazky li,
.karta--tmava .odrazky li,
.spolupraca__krok .rozbal > .odsek,
.karta--tmava .rozbal > .odsek,
.spolupraca__krok .bod__uvod,
.karta--tmava .bod__uvod {
    color: var(--color-white-70);
}

.spolupraca__krok .rozbal summary,
.karta--tmava .rozbal summary {
    color: var(--color-accent);
}

.podkategoria__nazov {
    font-size: var(--text-sm);
    font-weight: 500;
    line-height: 1.5385;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-text-50);
}

.podkategoria h3 {
    font-size: var(--text-xl);
    font-family: var(--font-alt);
    line-height: 1.2692;               /* 26/33 — štýl H4 z Figmy, 36 px sa v troch stĺpcoch lámalo */
    color: var(--color-dark);
}

.podkategoria .odsek {
    color: var(--color-dark-60);
}

/* V užšej karte (tri v riadku) je malý názov menší, aby sa nelámal na viac riadkov (Daniel 14. 9.) */
.podkategoria .podkategoria__nazov {
    font-size: var(--text-xs);
    letter-spacing: 0.12em;
    line-height: 1.4;
}

/* Tlačidlo do galérie drží dole, šípka ukazuje nadol (vedie na kotvu na stránke) */
.podkategoria--odkaz .tlacidlo {
    margin-top: auto;
    align-self: flex-start;
}

.podkategoria__obsah .rozbal + .tlacidlo {
    margin-top: var(--space-4);
}

.tlacidlo--dole .tlacidlo__ikona img {
    transform: rotate(225deg); /* základ je otočený o 90° na ↗, ďalších 135° dá ↓ */
}

.tlacidlo--dole:hover .tlacidlo__ikona img {
    transform: translateY(0.125rem) rotate(225deg);
}

/* Každá sekcia s kotvou (#galeria, #strechy…) pristane kúsok pod horným okrajom, nie na hrane */
section[id],
.clanok__cast[id] {
    scroll-margin-top: var(--space-6);
}

.sekcia-uvod--siroky {
    max-width: var(--width-content);
}

.sekcia-uvod--siroky .odsek {
    max-width: 56rem;
    color: var(--color-dark-60);
}

.polozka {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    height: 100%;
    padding: var(--space-8);
    color: var(--color-dark);
}

.polozka__nadpis {
    font-size: var(--text-xl);
    font-family: var(--font-alt);
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.2692;
    color: var(--color-dark);
}

.polozka p:not(.polozka__nadpis) {
    color: var(--color-dark-60);
}

/* Úvod stránky bez fotky (FAQ): karta na celú šírku, nižšia */
.sluzba-uvod__karta--sama {
    min-height: 18rem;
}

.sluzba-uvod__karta--sama h1,
.sluzba-uvod__karta--sama .odsek {
    max-width: 56rem;
}

/* Naše spoločnosti: každá divízia je riadok fotka + text (blok .fotobody ako na Stavebných prácach), fotka striedavo
   vľavo/vpravo (order-lg-2 v šablóne). Číslo oranžové, úvod plynulý, „Čo zabezpečuje" a „Hlavná výhoda" s popiskom,
   výhoda v tmavom boxe, odkaz na web ako biele obrysové tlačidlo (Daniel 14. 9.: bez tmavých kariet). */
.spolocnosti__riadky {
    display: flex;
    flex-direction: column;
    gap: var(--space-15);
}

.fotobody .spolocnost__obsah {
    align-items: flex-start; /* tlačidlo sa nenaťahuje na šírku stĺpca */
    gap: var(--space-5);
}

.spolocnost__cislo {
    color: var(--color-accent-text);
}

.fotobody .spolocnost__nadpis {
    font-size: var(--text-2xl);
    line-height: 1.2;
}

/* Odsek „O spoločnosti" má rovnakú farbu ako text pod „Čo zabezpečuje" (Daniel 16. 9.: jedna farba písma) */
.spolocnost__obsah > .odsek {
    color: var(--color-dark);
}

.spolocnost__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    margin: 0;
}

.spolocnost__bod dt {
    font-size: var(--text-sm);
    font-weight: 500;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-text-50);
}

.spolocnost__bod dd {
    margin: var(--space-1) 0 0;
    color: var(--color-dark);
}

/* Hlavná výhoda: jednoduchý tmavý box, oranžový popisok, biely text (Daniel 14. 9.: oranžový prúžok pôsobil ako AI) */
.spolocnost__bod--vyhoda {
    align-self: stretch;
    padding: var(--space-5) var(--space-6);
    border-radius: var(--radius-md);
    background: var(--color-dark);
}

.spolocnost__bod--vyhoda dt {
    color: var(--color-accent);
}

.spolocnost__bod--vyhoda dd {
    color: var(--color-white);
}

.spolocnost__obsah .tlacidlo {
    margin-top: var(--space-2);
    overflow-wrap: anywhere; /* adresa webu nemá medzery */
}

/* FAQ: natívny <details>, otázka je H2 v štýle kroku, ikona plus sa otočí na krížik */
.faq__zoznam {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    max-width: 56rem;
    margin-inline: auto;
}

.faq__polozka {
    padding: 0;
}

.faq__otazka {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
    padding: var(--space-8);
    list-style: none;
    cursor: pointer;
}

.faq__otazka::-webkit-details-marker {
    display: none;
}

.faq__nadpis {
    font-size: var(--text-xl);
    font-family: var(--font-alt);
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.2692;
    color: var(--color-dark);
}

.faq__ikona {
    position: relative;
    flex: 0 0 auto;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--color-dark);
    transition: transform 0.3s ease;
}

.faq__ikona::before,
.faq__ikona::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1rem;
    height: 2px;
    background: var(--color-white);
    transform: translate(-50%, -50%);
}

.faq__ikona::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

.faq__polozka[open] .faq__ikona {
    transform: rotate(45deg);
}

.faq__odpoved {
    padding: 0 var(--space-8) var(--space-8);
    color: var(--color-dark-60);
    animation: karusel-prichod 0.4s ease-out both; /* text sa rozsvieti, výšku karty animuje app.js */
}

/* Textová stránka (Ochrana osobných údajov): biela karta s číslovanými časťami, odseky a odrážky z obsah_odseky() */
.clanok__karta {
    padding: var(--space-10);
}

.clanok__cast + .clanok__cast {
    margin-top: var(--space-8);
}

.clanok__nadpis {
    margin-bottom: var(--space-4);
    font-size: var(--text-xl);
    color: var(--color-dark);
}

.clanok__cast p,
.clanok__cast li {
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: var(--color-dark-60);
}

.clanok__cast p + p,
.clanok__cast ul + p,
.clanok__cast p + ul {
    margin-top: var(--space-4);
}

.clanok__cast ul {
    padding-left: 1.25rem;
    list-style: disc;
}

.clanok__cast li + li {
    margin-top: var(--space-2);
}

.clanok__cast strong {
    font-weight: 600;
    color: var(--color-dark);
}

.clanok__platnost {
    margin-top: var(--space-8);
    padding-top: var(--space-6);
    border-top: 1px solid var(--color-line);
    font-size: var(--text-sm);
    color: var(--color-text-50);
}

/* Odkaz na GDPR v súhlase formulára — vzhľad ako pôvodné podčiarknutie */
.formular__suhlas-odkaz {
    color: inherit;
    text-decoration: underline;
}

.formular__suhlas-odkaz:hover {
    color: var(--color-dark);
}

/* Odkazy v spodku pätičky — každý s výškou dotykového cieľa */
.paticka__odkazy {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-6);
}

.paticka__odkazy a {
    display: inline-block;
    padding-block: var(--space-2);
    color: var(--color-white-70);
}

/* Stránka Kontakt: e-mail, telefón a adresy v bielych kartách; vlastný blok karty (Daniel 14. 9.: karty
   s .podkategoria stratili odsadenie, keď podkategórie dostali vnútorný obal .podkategoria__obsah) */
.kontakt-udaje .row {
    row-gap: var(--gap);
}

.kontakt-udaje__karta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
    height: 100%;
    padding: var(--card-padding);
}

.kontakt-udaje__nazov {
    margin-bottom: var(--space-2);
    font-size: var(--text-sm);
    font-weight: 500;
    line-height: 1.5385;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-text-50);
}

.kontakt-udaje__karta .siete {
    margin-top: var(--space-3);
}

.kontakt-udaje__polozka {
    font-size: var(--text-lg);
    font-weight: 700;
    line-height: 1.3333;
    overflow-wrap: anywhere; /* dlhší e-mail z adminu sa zalomí, karta ho neoreže */
}

.kontakt-udaje__polozka a,
.kontakt-udaje__adresa a {
    color: var(--color-dark);
    text-decoration: none;
}

.kontakt-udaje__polozka a:hover,
.kontakt-udaje__adresa a:hover {
    text-decoration: underline;
}

.kontakt-udaje__adresa {
    font-style: normal;
    line-height: var(--leading-normal);
}

/* Sociálne siete (partials/siete): ikona v tmavom kruhu; na tmavom podklade (menu, pätička)
   sklenený kruh (.siete--na-tmavom). Pod myšou oranžový. Používa hlavička, menu, pätička, Kontakt. */
.siete {
    display: flex;
    gap: var(--space-3);
}

.siete__odkaz {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: var(--color-dark);
    transition: background-color 0.2s;
}

.siete--na-tmavom .siete__odkaz {
    background: var(--color-glass);
}

.siete__odkaz:hover {
    background: var(--color-accent);
}

.header__siete {
    gap: var(--space-2);
}

/* Riadky fakturačných údajov */

.kontakt-udaje__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin: 0;
}

.kontakt-udaje__body dt {
    font-size: var(--text-sm);
    font-weight: 500;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-text-50);
}

.kontakt-udaje__body dd {
    margin: var(--space-1) 0 0;
    color: var(--color-dark);
}

/* Formulár: hviezdička pri povinnom poli, legenda a nápoveda pod poľom (limit prílohy) */
.formular__povinne {
    color: var(--color-text-secondary);
}

.formular__napoveda {
    margin-top: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

.formular__napoveda--legenda {
    margin: 0 0 var(--space-4);
}

/* Mapa na stránke Kontakt: OSM podklad odfarbený do šedej, tmavé špendlíky, popup v štýle karty (public/js/mapa.js) */
.mapa {
    height: 30rem;
    margin-top: var(--gap);
    padding: 0;
    background: var(--color-gray-light);
    z-index: 0;
}

.mapa__bez-js {
    padding: var(--space-8);
    color: var(--color-text-50);
}

.mapa .leaflet-tile-pane {
    filter: grayscale(1) contrast(0.92) brightness(1.06); /* OSM dlaždice sú farebné a sýte — do šedej a mierne zosvetliť */
}

.mapa .leaflet-control-zoom {
    border: 0;
    box-shadow: none;
}

.mapa .leaflet-control-zoom a {
    width: 2.75rem;
    height: 2.75rem;
    line-height: 2.75rem;
    border: 0;
    border-radius: 50%;
    margin-bottom: var(--space-2);
    background: var(--color-dark);
    color: var(--color-white);
    font-weight: 400;
}

.mapa .leaflet-control-zoom a:hover {
    background: var(--color-black);
}

.mapa .leaflet-control-attribution {
    font-family: var(--font-base);
    font-size: 0.6875rem;
    color: var(--color-text-50);
    background: rgba(255, 255, 255, 0.7);
}

/* Špendlík: tmavý kruh s bielym bodom a stopkou; vrchol stopky je na súradnici (iconAnchor) */
.mapa__pin {
    position: relative;
    display: block;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: var(--color-dark);
    box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.25);
    transition: transform 0.2s ease;
}

.mapa__pin::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    background: var(--color-white);
    transform: translate(-50%, -50%);
}

.mapa__pin::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -0.45rem;
    width: 1rem;
    height: 1rem;
    background: var(--color-dark);
    transform: translateX(-50%) rotate(45deg);
    border-radius: 0.125rem;
    z-index: -1;
}

.mapa__pin-obal:hover .mapa__pin,
.mapa__pin-obal:focus-visible .mapa__pin {
    transform: translateY(-0.25rem);
}

.mapa .leaflet-popup-content-wrapper {
    border-radius: var(--radius-md);
    box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.15);
    font-family: var(--font-base);
    color: var(--color-dark);
}

.mapa .leaflet-popup-content {
    margin: var(--space-5) var(--space-6);
    font-size: var(--text-md);
    line-height: var(--leading-normal);
}

.mapa .leaflet-popup-tip {
    box-shadow: none;
}

.mapa .leaflet-popup-close-button {
    top: 0.25rem;
    right: 0.25rem;
    width: 2.75rem;
    height: 2.75rem;
    font-size: 1.25rem;
    line-height: 2.75rem;
    color: var(--color-text-50);
}

.mapa__popup-mesto {
    display: block;
    margin-bottom: var(--space-1);
    font-size: var(--text-base);
    font-weight: 700;
}

/* Leaflet dáva odkazom v mape modrú (.leaflet-container a) — prebiť vlastnou farbou */
.mapa a.mapa__popup-odkaz {
    display: inline-block;
    margin-top: var(--space-3);
    color: var(--color-dark);
    font-weight: 600;
}

.mapa .leaflet-control-attribution a {
    color: var(--color-text-50);
}

/* Fotokarta rozcestníka: fotka s prechodom do tmava, text dole, celá karta je odkaz na kotvu */
.fotokarta {
    display: flex;
    align-items: flex-end;
    min-height: 26rem;
    height: 100%;
    color: var(--color-white);
    text-decoration: none;
}

.fotokarta__pozadie img {
    transition: transform 0.6s ease;
}

.fotokarta__pozadie::after {
    background: var(--overlay-gradient);
}

.fotokarta:hover .fotokarta__pozadie img {
    transform: scale(1.05);
}

.fotokarta__obsah {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
}

/* Veľkosť ako h3 — na prehľade služieb je nadpis karty h2 (jediná sekcia pod H1) a nesmie narásť */
.fotokarta__nadpis {
    font-size: var(--text-4xl);
    font-weight: 400;
    line-height: 1.1111;
    color: var(--color-white);
}

.fotokarta__popis {
    max-width: 34rem;
    color: rgba(255, 255, 255, 0.8);
}

.fotokarta .tlacidlo {
    margin-top: var(--space-2);
}

.fotokarta:hover .tlacidlo {
    background: var(--color-glass-hover);
}

.fotokarta:focus-visible {
    outline: 2px solid var(--color-dark);
    outline-offset: 3px;
}

/* Tmavý pás s fotkou (sekcia 3 Stavebných prác): v ňom mriežka bodov so sklenenými kartami a bielou hlavičkou */
.pas__karta {
    padding: 0;
}

.pas__obsah {
    position: relative;
    max-width: calc(var(--width-content) + 2 * var(--card-padding-lg));
    margin-inline: auto;
    padding: var(--section-padding) var(--card-padding-lg);
}

/* Karta bodu (Stavebné práce sekcie 2–4, argument na HP; predloha leslov .sluzba / .vyhoda): ikona v štvorci,
   veľká medzera, tučný nadpis DM Sans, úvod tmavý, odrážky a text sivé — odrážky v základnej veľkosti písma
   (Daniel 14. 9.). Biela, alebo sklenená na fotke bez ikony a odrážok, len s plynulým textom. */
.bod-karta {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    height: 100%;
    padding: var(--space-8);
}

.bod-karta .bod__hlava {
    margin-bottom: var(--space-6);
}

.bod-karta h3 {
    font-size: var(--text-xl);
    font-family: var(--font-alt);
    font-weight: 700;
    line-height: 1.2308;               /* 26/32 */
    letter-spacing: var(--tracking-tight);
    color: var(--color-dark);
}

.bod-karta .bod__uvod {
    color: var(--color-dark);
}

.bod-karta .odsek {
    color: var(--color-dark-60);
    letter-spacing: var(--tracking-tight);
}

.bod-karta--sklo h3 {
    color: var(--color-white);
}

.bod-karta--sklo .bod__uvod,
.bod-karta--sklo .odrazky li {
    color: var(--color-white-70);
}

.bod-karta--sklo .odsek {
    color: rgba(255, 255, 255, 0.85); /* ako text krokov spolupráce na skle */
}

/* Sklenená karta s plynulým textom: text drží pri spodku, nadpisy rôznej dĺžky hore (Daniel 14. 9.) */
.bod-karta--sklo > .odsek {
    margin-top: auto;
}

/* Mriežka bodov: hlavička sekcie v prvej bunke, karty v ostatných (predloha leslov „Pre koho pracujeme") */
.mriezka-bodov .row {
    row-gap: var(--gap);
}

.mriezka-bodov__hlava {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gap);
    padding-top: var(--space-7);       /* text začína pod hornou hranou kariet */
    padding-right: var(--space-6);
}

.mriezka-bodov__hlava .predtitulok {
    padding-block: 0.625rem;
    color: var(--color-black);
}

.mriezka-bodov__hlava h2 {
    font-size: var(--text-5xl);        /* 40 — 64 sa v tretine lámalo na sedem riadkov */
    line-height: 1.1;
    color: var(--color-dark);
}

.mriezka-bodov__hlava .odsek {
    color: var(--color-dark-60);
}

.mriezka-bodov__hlava--biela .predtitulok,
.mriezka-bodov__hlava--biela h2 {
    color: var(--color-white);
}

.mriezka-bodov__hlava--biela .odsek {
    color: rgba(255, 255, 255, 0.8);
}

/* Fotka vľavo, hlavička a veľké body s fajkou vpravo (sekcia 1 Stavebných prác; predloha leslov „Nie je to len o love") */
.fotobody .row {
    --bs-gutter-x: var(--space-12);
    align-items: center;
    row-gap: var(--space-8);
}

.fotobody__foto {
    height: 31.25rem;                  /* 500 */
    padding: 0;
}

.fotobody__foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fotobody__obsah {
    display: flex;
    flex-direction: column;
    gap: var(--space-10);
    padding-block: var(--space-6);
}

.fotobody__obsah .sekcia-uvod {
    margin-bottom: 0;
}

.fotobody__obsah .sekcia-uvod .odsek {
    color: var(--color-dark-60);
}

.fotobody__nadpis {
    font-size: var(--text-xl);
    font-family: var(--font-alt);
    font-weight: 700;
    line-height: 1.2308;
    letter-spacing: var(--tracking-tight);
    color: var(--color-dark);
}

/* Trojstĺpcová sekcia (Stavebné práce, sekcia 1): text | fotokarta | zvýraznená karta + fotka. Fotokarta aj pravý stĺpec
   sa naťahujú na výšku ľavého textu (Daniel 16. 9., predloha agstaving.com „Prečo si vybrať nás"). */
.tristlpce .row {
    row-gap: var(--gap);
}

.tristlpce__text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-8);
    height: 100%;
    padding-block: var(--space-6);
}

.tristlpce__text .sekcia-uvod {
    margin-bottom: 0;
}

.tristlpce__text .sekcia-uvod .odsek {
    color: var(--color-dark-60);
}

.tristlpce__fotokarta {
    min-height: 30rem;
}

.tristlpce__bocny {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    height: 100%;
}

/* Zvýraznená karta: tmavý box s oranžovým popiskom a bielou vetou — ako „Hlavná výhoda" na Spoločnostiach */
.tristlpce__vyhoda {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.tristlpce__vyhoda-popisok {
    font-size: var(--text-sm);
    font-weight: 500;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-accent);
}

.tristlpce__vyhoda-text {
    font-family: var(--font-alt);
    font-size: var(--text-xl);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: var(--tracking-tight);
    color: var(--color-white);
}

.tristlpce__foto {
    flex: 1 1 0;
    min-height: 16rem;
    padding: 0;
}

.tristlpce__foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Galéria realizácií s filtrom (public/js/app.js, [data-galeria]) */
.galeria__filtre {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
    margin-bottom: var(--space-8);
}

.galeria__filter {
    min-height: 3rem;
    padding: var(--space-2) var(--space-6);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-pill);
    background: var(--color-white);
    color: var(--color-title);
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.galeria__filter:hover {
    border-color: var(--color-dark);
}

.galeria__filter.is-aktivny {
    border-color: var(--color-accent);
    background: var(--color-accent);
    color: var(--color-white);
}

/* Masonry: bez JS sú fotky v troch CSS stĺpcoch (vlastný pomer strán, bez orezu). S JS ich app.js
   rozloží do .galeria__stlpec podľa výšky (najnižší stĺpec dostane ďalšiu fotku) — mriežka je potom
   flex riadok stĺpcov. Pod 992 px dva stĺpce, pod 576 px jeden (responsive.css). */
.galeria__mriezka {
    column-count: 3;
    column-gap: var(--gap);
}

.galeria__mriezka.is-stlpce {
    display: flex;
    gap: var(--gap);
    column-count: auto;
}

.galeria__stlpec {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    gap: var(--gap);
    min-width: 0;
}

/* Položka sa po prepnutí filtra rozsvieti a vysunie (tie isté kľúčové snímky ako karusel) */
.galeria__polozka {
    position: relative;
    display: block;
    overflow: hidden;
    margin: 0 0 var(--gap);
    break-inside: avoid;
    border-radius: var(--radius-lg);
    background: var(--color-gray-light);
    animation: karusel-prichod 0.5s ease-out both;
}

.is-stlpce .galeria__polozka {
    margin-bottom: 0;
}

.galeria__polozka[hidden] {
    display: none;
}

.galeria__polozka img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform 0.4s ease;
}

.galeria__polozka:hover img {
    transform: scale(1.04);
}

.galeria__popis {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: var(--space-6);
    background: linear-gradient(to top, var(--color-overlay), transparent);
    color: var(--color-white);
    font-size: var(--text-md);
}

.galeria__prazdne {
    grid-column: 1 / -1;
    color: var(--color-text-50);
}

/* Lightbox (partials/lightbox, app.js [data-lightbox]): tmavý dialóg cez celú obrazovku, fotka v strede,
   Zavrieť ako v menu, šípky ako v karuseli. .lightbox--sama = jediná fotka, šípky a počet sú skryté. */
.galeria__odkaz {
    display: block;
    width: 100%;
    height: 100%;
    cursor: zoom-in;
}

.lightbox {
    position: fixed;
    inset: 0;
    width: 100vw;
    max-width: none;
    height: 100dvh;
    max-height: none;
    margin: 0;
    padding: var(--space-6);
    border: 0;
    background: rgba(20, 20, 20, 0.96);
    color: var(--color-white);
}

.lightbox::backdrop {
    background: transparent;
}

.lightbox__zavriet {
    position: absolute;
    top: var(--space-6);
    right: var(--space-6);
    z-index: 2;
    margin-left: 0;
}

.lightbox__telo {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    width: 100%;
    height: 100%;
    margin: 0;
}

.lightbox__foto {
    max-width: 100%;
    max-height: calc(100dvh - 9rem);
    border-radius: var(--radius-md);
    object-fit: contain;
    box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.5);
}

.lightbox__foto.is-animovany {
    animation: karusel-prichod 0.35s ease-out both;
}

.lightbox__spodok {
    display: flex;
    gap: var(--space-4);
    align-items: baseline;
    max-width: 56rem;
    font-size: var(--text-sm);
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.7);
    text-align: center;
}

.lightbox__popis:empty {
    display: none;
}

.lightbox__pocet {
    white-space: nowrap;
    font-weight: 700;
    color: var(--color-white);
}

.lightbox__sipky {
    position: absolute;
    right: var(--space-6);
    bottom: var(--space-6);
    z-index: 2;
    display: flex;
    gap: var(--space-2);
}

.lightbox--sama .lightbox__sipky {
    display: none;
}

body.is-lightbox {
    overflow: hidden;
}

/* Formulár na podstránke nemá výzvu nad sebou — odsadenie drží sám */
.formular--bez-vyzvy {
    padding-top: var(--section-padding);
}

/* Šípky karuselu: mierne zväčšenie, bodky stmavnú */
.sipka-kruh:not(:disabled):not(.is-neaktivna):hover img {
    transform: scale(1.06);
}

.sipka-kruh--spat:not(:disabled):not(.is-neaktivna):hover img {
    transform: scaleX(-1) scale(1.06);
}

.karusel__bodka:not(.is-aktivna):hover {
    background: var(--color-dark-40);
}

/* Hlavička: logo zjemnie, telefón stmavne, Menu dostane sýtejšie sklo */
.header__logo:hover,
.menu-panel__logo:hover,
.paticka__logo:hover {
    opacity: 0.75;
}

.header__telefon span {
    transition: color 0.2s ease, border-color 0.2s ease;
}

.header__telefon:hover span {
    color: var(--color-accent-hover);
    border-bottom-color: var(--color-accent-hover);
}

.header__menu:hover {
    background: var(--color-glass-nav-hover);
    border-color: var(--color-line);
}

/* Pätička: drobné odkazy v spodnom riadku zjemnejú */
.paticka__spodok a:hover {
    opacity: 0.7;
}

/* Klávesnica: jeden obrys pre všetko klikateľné */
.tlacidlo:focus-visible,
.sipka-kruh:focus-visible,
.karusel__bodka:focus-visible,
.siete__odkaz:focus-visible,
.header__logo:focus-visible,
.header__telefon:focus-visible,
.header__menu-tlacidlo:focus-visible,
.menu-panel__logo:focus-visible,
.menu-panel__zavriet:focus-visible,
.menu-panel__kontakt a:focus-visible,
.paticka a:focus-visible {
    outline: 2px solid var(--color-dark);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
}

.tlacidlo:focus-visible,
.header__menu-tlacidlo:focus-visible {
    border-radius: var(--radius-pill);
}

.menu-panel__zavriet:focus-visible,
.menu-panel__logo:focus-visible,
.menu-panel__kontakt a:focus-visible,
.paticka a:focus-visible,
.tlacidlo--sklo:focus-visible {
    outline-color: var(--color-white);
}

.paticka__karta a:focus-visible {
    outline-color: var(--color-dark);
}