/* ==========================================================================
   HNL STAVBY — web-responsive.css (nový dizajn, mobil a tablet)
   Všetky @media k web.css. Predloha docs/zadanie/hnl_new má jeden zlom na 980 px —
   tu sa používa Bootstrap lg (991.98), aby sedel s col-lg-*; drobnosti pod 576 px.
   ========================================================================== */

/* Úzky desktop (lg, 992–1199 px): predloha má jediný zlom na 980 px, tu sa päť položiek menu, telefón
   a tlačidlo nezmestia vedľa seba — menšie medzery a bez telefónu (je v pätičke aj v mobilnom menu) */
@media (max-width: 1199.98px) {
    /* Spodok formulára pod sebou: na úzkom desktope má stĺpec formulára ~440 px a súhlas vedľa tlačidla
       sa stlačil do 3–4 riadkov */
    .formular__spodok {
        flex-direction: column;
        align-items: flex-start;
    }

    .suhlas {
        max-width: none;
    }

    /* Dvojriadkový popisok (Meno a priezvisko / názov subjektu *) nesmie posunúť pole voči susedovi */
    .formular__riadok {
        align-items: flex-end;
    }

    .hlavicka__vnutro {
        gap: 1.5rem;
    }

    .hlavicka__menu {
        gap: 1.25rem;
    }

    .hlavicka__telefon {
        display: none;
    }

    /* Úvod podstránky a nadpisy sekcií podstránok: menšie na úzkom desktope */
    .uvod-stranky__nadpis {
        font-size: 2.875rem;
    }

    .podstranka .nadpis {
        font-size: 2.25rem;
    }

    .podstranka .sekcia__hlava--stlpec {
        --nadpis-riadok: calc(2.25rem * 1.08);
    }

    .sluzby-ram__nadpis {
        font-size: 1.625rem;
    }

    .uvod-stranky__nadpis--dlhy {
        font-size: 2.5rem;
    }

    /* Stavebné práce: karty striech po dvoch */
    .ram-karty {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Zoznam služieb v hlavičke sa pri myši otvára aj nabehnutím (na dotyku len šípkou, hover by „zamrzol") */
@media (hover: hover) {
    .hlavicka__rozbal:hover .menu-sluzby {
        opacity: 1;
        visibility: visible;
        transform: translate(-50%, 0);
        transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
    }

    .hlavicka__rozbal:hover .hlavicka__rozbal-tlacidlo svg {
        transform: rotate(180deg);
    }

    .hlavicka__rozbal:hover .menu-sluzby__zoznam li {
        opacity: 1;
        transform: none;
        transition-duration: 0.3s;
        transition-delay: calc(40ms + var(--i) * 25ms);
    }
}

/* Tablet a mobil (pod lg) ------------------------------------------------ */
@media (max-width: 991.98px) {
    :root {
        --nav-h: 4.5rem;
        --kontajner: 720px;   /* max-width .container (Bootstrap md) — mobilné menu a mapa mimo kontajnera s ním lícujú */
    }

    .mobilne-menu {
        padding-inline: max(1.375rem, calc((100% - var(--kontajner)) / 2 + 1.375rem));
    }

    .container {
        --bs-gutter-x: 2.75rem;   /* 22 px okraj ako v predlohe */
    }

    .len-mobil {
        display: inline;
    }

    .len-desktop {
        display: none;
    }

    /* Hlavička: logo vľavo, tlačidlo menu vpravo; menu, telefón a ponuka sú v mobilnom menu */
    .hlavicka {
        height: calc(var(--nav-h) + env(safe-area-inset-top));
        padding-top: env(safe-area-inset-top);
    }

    .hlavicka__vnutro {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
    }

    .hlavicka__vnutro > nav,
    .hlavicka__telefon,
    .hlavicka__akcie .tlacidlo {
        display: none;
    }

    .hlavicka__logo {
        flex: none;
    }

    .hlavicka__logo img {
        height: 1.1875rem;
    }

    .hlavicka__akcie {
        flex: none;
        margin-left: auto;
        gap: 0;
    }

    .menu-tlacidlo {
        display: grid;
    }

    /* Úvod */
    .hero {
        min-height: 100svh;
    }

    .hero__pozadie video,
    .hero__zaloha {
        object-position: 58% 50%;
    }

    .hero__vnutro {
        padding-top: calc(var(--nav-h) + env(safe-area-inset-top) + 0.5rem);
        padding-bottom: 0.5rem;
    }

    .hero__obsah {
        gap: 1.25rem;
        max-width: none;
    }

    .hero__nadpis {
        min-height: 0;
        font-size: clamp(2.125rem, 9.4vw, 2.875rem);
    }

    .hero__nadpis .hero__riadok {
        white-space: normal;
    }

    .hero__odsek {
        font-size: 1rem;
        line-height: 1.5;
    }

    /* Výhody: všetky tri v jednom riadku, bez deliacich čiar (Daniel 25. 9.); text sa smie zalomiť */
    .vyhody {
        align-items: flex-start;
        gap: 1rem;
        flex-wrap: nowrap;
    }

    .vyhody__polozka {
        flex: 1 1 0;
        min-width: 0;
        gap: 0.5rem;
        white-space: normal;
    }

    .vyhody__ikona svg {
        width: 1.125rem;
        height: 1.125rem;
    }

    .vyhody__text b {
        font-size: 0.78125rem;
        line-height: 1.15;
    }

    .vyhody__text small {
        font-size: 0.6875rem;
        line-height: 1.25;
    }

    .hero__akcie {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.875rem;
    }

    .hero__akcie .tlacidlo {
        height: 3.375rem;
    }

    .hero__bodky {
        justify-content: flex-start;
    }

    /* Spodný pás: len dva kľúčové údaje vedľa seba */
    .hero__statistiky {
        height: auto;
        padding: 1rem 0 1.125rem;
    }

    .hero__statistiky > :nth-child(2),
    .hero__statistiky > :nth-child(3) {
        display: none;
    }

    /* Dva údaje v polovicách riadku, bez deliacej čiary (Daniel 25. 9.) */
    .row.hero__statistiky > * {
        flex: 0 0 auto;
        width: 50%;
    }

    .hero__statistiky > * + *::before {
        display: none;
    }

    .hero__stat {
        white-space: normal;
    }

    .hero__stat b {
        font-size: 1.5rem;
    }

    .hero__stat small {
        font-size: 0.75rem;
    }

    /* Sekcie */
    .sections {
        padding: 4rem 0;
    }

    .nadpis {
        font-size: clamp(1.875rem, 8vw, 2.5rem);
    }

    .sekcia__hlava {
        margin-bottom: 2.125rem;
        --bs-gutter-y: 2rem;
    }

    /* stĺpec s popiskom: predtitulok nad nadpisom ako v ostatných hlavách */
    .sekcia__hlava--stlpec {
        --bs-gutter-y: 0;
    }

    .sekcia__hlava--stlpec .predtitulok {
        margin: 0 0 1.25rem;
    }

    .sekcia__hlava-text {
        margin-top: 1.25rem;
    }

    .argument__mriezka {
        --bs-gutter-y: 1.875rem;
    }

    .argument__bod {
        grid-template-columns: 3.375rem 1fr;
        gap: 0.875rem;
        padding: 1.375rem 0;
    }

    .argument__bod h3 {
        font-size: 1.125rem;
    }

    .argument__bod p {
        font-size: 0.90625rem;
    }

    /* Karty služieb */
    .sluzby__mriezka {
        --bs-gutter-x: 0.75rem;
        --bs-gutter-y: 0.75rem;
    }

    .sluzba-karta,
    .sluzba-karta--vysoka {
        min-height: 18.75rem;
    }

    /* Na mobile sú všetky karty nízke — všetky dostanú tmavší gradient nízkej karty */
    .sluzba-karta--foto.sluzba-karta--vysoka::after {
        background: linear-gradient(0deg, rgba(15, 15, 15, 0.95) 10%, rgba(15, 15, 15, 0.78) 55%, rgba(15, 15, 15, 0.3) 100%);
    }

    .sluzba-karta__telo {
        padding: 1.375rem;
    }

    .sluzba-karta__telo h3,
    .sluzba-karta--vysoka .sluzba-karta__telo h3 {
        font-size: 1.3125rem;
    }

    .sluzba-karta__telo p {
        font-size: 0.875rem;
    }

    /* Úspora */
    .uspora__mriezka {
        --bs-gutter-x: 0.75rem;
        --bs-gutter-y: 0.75rem;
    }

    .citat,
    .uspora-karta {
        padding: 1.75rem 1.5rem;
        border-radius: 1.375rem;
    }

    .citat__text {
        font-size: 1.1875rem;
    }

    .citat__statistiky b {
        font-size: 1.75rem;
    }

    .uspora-karta__cislo {
        font-size: 4.25rem;
    }

    .uspora-karta h3 {
        font-size: 1.3125rem;
    }

    /* Proces ako zvislá os s bodkami */
    .kroky {
        border-top: 0;
    }

    .krok,
    .kroky > :first-child .krok {
        padding: 0 0 1.875rem 1.375rem;
        border-left: 1px solid rgba(255, 255, 255, 0.16);
    }

    .kroky > :last-child .krok {
        padding-bottom: 0;
    }

    .krok::before {
        display: none;
    }

    .krok::after {
        content: "";
        position: absolute;
        left: -5px;
        top: 4px;
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: var(--accent);
        box-shadow: 0 0 0 4px rgba(255, 106, 26, 0.18);
    }

    .krok__cislo {
        margin-bottom: 0.5rem;
    }

    .krok h3 {
        font-size: 1.09375rem;
    }

    /* Kontakt */
    .kontakt__mriezka {
        --bs-gutter-y: 1.75rem;
    }

    .kontakt__uvod {
        position: static;
    }

    .formular {
        padding: 1.375rem;
        border-radius: 1.375rem;
    }

    /* Pätička */
    .paticka {
        padding: 3.5rem 0 calc(2rem + env(safe-area-inset-bottom));
    }

    .paticka__vrch {
        padding-bottom: 2.125rem;
        --bs-gutter-y: 2rem;
    }

    .paticka__spodok {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.625rem;
    }

    .paticka__spodok a {
        margin: 0 1.125rem 0 0;
    }

    /* Podstránky: úvod stránky */
    .uvod-stranky {
        min-height: 0;
        padding: calc(var(--nav-h) + env(safe-area-inset-top) + 2.25rem) 0 2.5rem;
    }

    .uvod-stranky__obsah {
        gap: 1rem;
    }

    .uvod-stranky__nadpis {
        font-size: 2.25rem;
    }

    .uvod-stranky__nadpis--dlhy {
        font-size: 2.125rem;
    }

    .uvod-stranky__text {
        font-size: 0.9375rem;
    }

    .podstranka .nadpis {
        font-size: 1.875rem;
    }

    .podstranka .uvod,
    .sluzby-ram__popis {
        font-size: 0.9375rem;
    }

    .sluzby-ram__nadpis {
        font-size: 1.5rem;
    }

    /* Rozcestník „Na tejto stránke" na mobile nie je — sekcie nasledujú hneď pod úvodom */
    .uvod-stranky .smernik {
        display: none;
    }

    /* Tlačidlo ostáva v šírke obsahu (nie cez celý riadok), odkaz vedľa neho alebo pod ním */
    .uvod-stranky__akcie {
        flex-wrap: wrap;
        gap: 0.875rem 1.5rem;
    }

    /* Prehľad služieb 768–991 px: fotka vľavo vedľa textu, bez striedania (pod sebou by mala karta ~800 px) */
    .odrazky--dva {
        grid-template-columns: 1fr;
    }

    .sluzby-ram__karta,
    .sluzby-ram__karta--otocena {
        grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
        gap: 1.5rem;
        padding: 0.625rem 1.5rem 0.625rem 0.625rem;
    }

    .sluzby-ram__karta--otocena .sluzby-ram__foto {
        order: 0;
    }

    .sluzby-ram__foto {
        min-height: 13.75rem;
    }

    .sluzby-ram__telo {
        padding: 1rem 0;
    }

    /* Detail služby: rozbaľovací zoznam a mozaika */
    /* Riadky rastú so šírkou a fotka cez celú šírku má dva riadky — inak z nej na tablete ostal pás ~4,5 : 1 */
    .gz-mozaika {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: clamp(9rem, 22vw, 13rem);
        gap: 0.5rem;
    }

    .gz-polozka--polovica {
        grid-column: span 1;
    }

    .gz-polozka--polovica-prva {
        grid-row: span 2;
    }

    .pk-akordeon__hlava {
        grid-template-columns: 2rem minmax(0, 1fr) 2.25rem;
        gap: 0.75rem;
        padding: 1rem;
    }

    .pk-akordeon__znak {
        width: 2.25rem;
        height: 2.25rem;
    }

    .pk-akordeon__telo {
        grid-template-columns: 1fr;
        gap: 1.25rem;
        padding: 0 1rem 1.25rem;
    }

    .pk-akordeon__foto {
        aspect-ratio: 16 / 9;   /* na šírku celej karty nižšia, nech text nie je až pod obrazovkou */
    }

    /* Často kladené otázky: hlava nad otázkami, bez lepenia */
    .faq__mriezka {
        --bs-gutter-y: 2.5rem;
    }

    .faq__bok {
        position: static;
    }

    .faq-pomoc {
        margin-top: 2rem;
        padding: 1.75rem 1.5rem;
        border-radius: 1.375rem;
    }

    .faq-pomoc__nadpis {
        font-size: 1.3125rem;
    }

    .faq-pomoc__akcie {
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
    }

    .faq-polozka {
        padding: 0 1.125rem;
        border-radius: 1.125rem;
    }

    .faq-polozka__hlava {
        gap: 1rem;
        padding: 1.125rem 0;
    }

    .faq-polozka__cislo {
        width: auto;
        font-size: 1rem;
    }

    .faq-polozka__otazka {
        font-size: 1.0625rem;
    }

    .faq-polozka__znak {
        width: 2.5rem;
        height: 2.5rem;
    }

    .faq-polozka__telo {
        padding: 0 0 1.25rem;
    }

    .faq-polozka__odpoved {
        font-size: 1rem;
    }

    /* Naše spoločnosti: karty spoločností */
    .firma-karta {
        border-radius: 1.375rem;
    }

    .mapa {
        min-height: 22rem;
        border-radius: 1.375rem;
    }

    /* Kontakt: tmavá karta, mapa pod zoznamom pobočiek, tabuľka ako karty */
    .kontakt-karta {
        padding: 1.75rem 1.5rem;
        border-radius: 1.375rem;
    }

    .pobocky--pozadie::after {
        display: none;
    }

    .pobocky--pozadie > .container {
        pointer-events: auto;
    }

    .mapa--pozadie {
        position: relative;
        inset: auto;
        width: calc(min(100%, var(--kontajner)) - 2.75rem);
        height: 22rem;
        margin: 2.5rem auto 0;
        border-radius: 1.375rem;
    }

    .pobocky-panel__zoznam {
        margin-top: 1.75rem;
    }

    /* Tabuľka: riadok = karta, popisok pred každou hodnotou */
    .fakturacia-tabulka {
        padding: 0.5rem 1.375rem;
        border-radius: 1.375rem;
    }

    .fakturacia-tabulka thead {
        display: none;
    }

    .fakturacia-tabulka tr,
    .fakturacia-tabulka th,
    .fakturacia-tabulka td {
        display: block;
    }

    .fakturacia-tabulka tbody tr {
        padding: 1.25rem 0;
    }

    .fakturacia-tabulka tbody tr:first-child {
        border-top: 0;
    }

    .fakturacia-tabulka th,
    .fakturacia-tabulka td {
        padding: 0.25rem 0;
    }

    .fakturacia-tabulka tbody th {
        margin-bottom: 0.5rem;
        white-space: normal;
    }

    .fakturacia-tabulka td {
        display: grid;
        grid-template-columns: 4.5rem minmax(0, 1fr);
        align-items: center;
    }

    .fakturacia-tabulka td::before {
        content: attr(data-popisok);
        font-family: var(--font-alt);
        font-weight: 500;
        font-size: 0.8125rem;
        color: var(--muted);
    }

    .vyzva {
        padding: 3.5rem 0;
    }

    .vyzva__mriezka {
        --bs-gutter-y: 1.75rem;
    }

    .vyzva__akcie {
        align-items: flex-start;
    }

    /* Galéria Referencií: dva stĺpce — veľká, cela a prvá z trojice cez celú šírku, ostatné po jednej;
       skupiny ostávajú celé, takže koniec je rovný aj tu */
    .galeria__mriezka {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: clamp(10rem, 22vw, 13rem);
        gap: 0.5rem;
    }

    .galeria__polozka,
    .galeria__polozka--tretina,
    .galeria__polozka--siroka,
    .galeria__polozka--uzka {
        grid-column: span 1;
    }

    .galeria__polozka--velka,
    .galeria__polozka--cela {
        grid-column: span 2;
        grid-row: span 2;
    }

    .galeria__polozka--tretina-prva {
        grid-column: span 2;
        grid-row: span 2;
    }

    .galeria__odkaz {
        border-radius: 0.75rem;
    }

    .galeria__lupa,
    .galeria__popis {
        display: none;
    }

    .lightbox__zavriet {
        right: 0.75rem;
        top: calc(0.75rem + env(safe-area-inset-top));
    }

    .lightbox__foto {
        max-width: 92vw;
        max-height: 70vh;
        border-radius: 0.5rem;
    }

    .lightbox__sipka {
        top: auto;
        bottom: calc(1.25rem + env(safe-area-inset-bottom));
        transform: none;
    }

    .lightbox__sipka--spat {
        left: 1.25rem;
    }

    .lightbox__sipka--dalej {
        right: 1.25rem;
    }

    /* Stavebné práce: 3D model pod textom, užší; mriežka pozadia sa stráca od stredu dole */
    .viz__telo {
        --bs-gutter-y: 2.5rem;
    }

    .viz__model {
        max-width: 30rem;
        margin-inline: auto;
    }

    .viz::before {
        -webkit-mask-image: radial-gradient(ellipse 90% 60% at 50% 80%, #000 20%, transparent 80%);
        mask-image: radial-gradient(ellipse 90% 60% at 50% 80%, #000 20%, transparent 80%);
    }

    .viz::after {
        right: -30%;
        width: 100%;
    }

    .lepkava-foto {
        position: static;
        aspect-ratio: 4 / 3;
        border-radius: 1.375rem;
    }

    .kroky-foto__mriezka {
        --bs-gutter-y: 2.5rem;
    }

    /* Rekonštrukcie na mobile pod sebou ako karty, bez čiar a bodiek */
    .kroky--riadky {
        --bs-gutter-y: 0.75rem;
    }

    .kroky--riadky .krok,
    .kroky--riadky > :first-child .krok {
        padding: 1.375rem 1.375rem 1.5rem;
        border: 0;
    }

    .ram-karta {
        padding: 1.5rem;
        border-radius: 1.375rem;
    }

    .sekcia__hlava-bok--koniec {
        align-items: flex-start;
    }

    /* Modál ako spodný panel */
    .dopyt {
        padding: 0;
        place-items: end center;
    }

    .dopyt__karta {
        width: 100%;
        max-height: 92svh;
        padding: 1.625rem 1.25rem calc(1.125rem + env(safe-area-inset-bottom));
        border-radius: 1.5rem 1.5rem 0 0;
        transform: translateY(100%);
    }

    .dopyt.is-otvorene .dopyt__karta {
        transform: none;
    }

    .dopyt__karta::before {
        content: "";
        position: absolute;
        left: 50%;
        top: 9px;
        width: 2.625rem;
        height: 4px;
        border-radius: 4px;
        background: var(--line);
        transform: translateX(-50%);
    }

    .dopyt__hlava {
        padding-top: 0.625rem;
    }

    .dopyt__hlava h3 {
        font-size: 1.375rem;
    }

    .dopyt__spodok .tlacidlo {
        flex: 1;
        justify-content: center;
    }

    .cip span {
        padding: 0.5625rem 0.8125rem;
        font-size: 0.8125rem;
    }

    /* Oblasť ako rozbaľovací zoznam, „Kto ste" sa na mobile nepýta */
    .dopyt__pole--klient {
        display: none;
    }

    .dopyt__pole--sluzba .cipy {
        display: none;
    }

    .vyber {
        display: block;
        position: relative;
    }

    .vyber__tlacidlo {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        width: 100%;
        margin: 0;
        padding: 0.9375rem 1rem;
        border: 1.5px solid var(--line);
        border-radius: var(--r-pole);
        background: #fff;
        font-family: var(--font-alt);
        font-weight: 500;
        font-size: 0.96875rem;
        line-height: 1.25;
        text-align: left;
        color: var(--ink);
        cursor: pointer;
        transition: border-color 0.18s ease, box-shadow 0.18s ease;
        -webkit-tap-highlight-color: transparent;
    }

    .vyber__tlacidlo > span {
        flex: 1;
        min-width: 0;
    }

    .vyber__sipka {
        flex: none;
        width: 1.125rem;
        height: 1.125rem;
        color: var(--accent);
        transition: transform 0.22s ease;
    }

    .vyber.is-otvoreny .vyber__tlacidlo {
        border-color: var(--accent);
        box-shadow: 0 0 0 3px rgba(255, 106, 26, 0.13);
    }

    .vyber.is-otvoreny .vyber__sipka {
        transform: rotate(180deg);
    }

    .vyber__panel {
        position: absolute;
        left: 0;
        right: 0;
        top: calc(100% + 0.5rem);
        z-index: 30;
        max-height: 16.5rem;
        padding: 0.375rem;
        border: 1px solid rgba(25, 25, 25, 0.08);
        border-radius: 1rem;
        background: #fff;
        box-shadow: 0 18px 44px rgba(15, 15, 15, 0.18);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        animation: vyber-objav 0.18s ease;
    }

    @keyframes vyber-objav {
        from { opacity: 0; transform: translateY(-6px); }
        to { opacity: 1; transform: none; }
    }

    .vyber__moznost {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.625rem;
        width: 100%;
        margin: 0;
        padding: 0.8125rem 0.75rem;
        border: 0;
        border-radius: 0.6875rem;
        background: transparent;
        font-family: var(--font-alt);
        font-weight: 500;
        font-size: 0.9375rem;
        line-height: 1.3;
        text-align: left;
        color: var(--ink-2);
        cursor: pointer;
        transition: background-color 0.15s ease, color 0.15s ease;
        -webkit-tap-highlight-color: transparent;
    }

    .vyber__moznost:active {
        background: rgba(25, 25, 25, 0.05);
    }

    .vyber__moznost.is-vybrana {
        background: rgba(255, 106, 26, 0.08);
        font-weight: 600;
        color: var(--ink);
    }

    .vyber__fajka {
        flex: none;
        width: 1.0625rem;
        height: 1.0625rem;
        color: var(--accent);
        opacity: 0;
        transition: opacity 0.15s ease;
    }

    .vyber__moznost.is-vybrana .vyber__fajka {
        opacity: 1;
    }
}

/* Bootstrap sm: kontajner 540 px ---------------------------------------------- */
@media (max-width: 767.98px) {
    :root {
        --kontajner: 540px;
    }

    /* Prehľad služieb: fotka nad textom (vedľa textu by v 540 px kontajneri bola úzky zvislý pás); výška podľa
       obsahu — rovnaká výška by kratším kartám pridala prázdne miesto pod tlačidlom */
    .sluzby-ram {
        grid-auto-rows: auto;
    }

    .sluzby-ram__karta,
    .sluzby-ram__karta--otocena {
        grid-template-columns: 1fr;
        gap: 0;
        padding: 0.625rem;
    }

    .sluzby-ram__foto {
        min-height: 0;
        aspect-ratio: 16 / 9;
    }

    .sluzby-ram__telo {
        padding: 1.375rem 0.75rem 0.875rem;
    }
}

/* Telefón ------------------------------------------------------------------- */
@media (max-width: 575.98px) {
    :root {
        --kontajner: 100%;
    }

    /* Pri 320–375 px sa „Odoslať nezáväznú požiadavku“ nezmestí na riadok a orezalo ikonu aj šípku */
    .formular__spodok .tlacidlo {
        white-space: normal;
        line-height: 1.2;
        text-align: center;
    }

    .hero__stat small {
        line-height: 1.3;
    }

    /* Tri výhody vedľa seba: ikona nad textom, inak sa pri 320–375 px text lámal do 3–4 riadkov */
    .vyhody {
        gap: 0.75rem;
    }

    .vyhody__polozka {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.375rem;
    }

    .mobilne-menu__nazov {
        font-size: 1.5rem;
    }

    .uvod-stranky__nadpis {
        font-size: 1.875rem;
    }

    .uvod-stranky__nadpis--dlhy {
        font-size: 1.75rem;
    }

    .podstranka .nadpis {
        font-size: 1.625rem;
    }

    .sluzby-ram__nadpis {
        font-size: 1.375rem;
    }

    /* Karta podkategórie: číslo a znak v prvom riadku, názvy pod nimi na celú šírku — v troch stĺpcoch
       ostalo na názov ~150 px a nadpis mal 4–5 riadkov */
    .pk-akordeon__hlava {
        grid-template-columns: minmax(0, 1fr) 2.25rem;
        grid-template-areas: "cislo znak" "nazvy nazvy";
        align-items: center;
        gap: 0.5rem 0.75rem;
    }

    .pk-akordeon__cislo {
        grid-area: cislo;
        font-size: 1rem;
    }

    .pk-akordeon__nazvy {
        grid-area: nazvy;
    }

    .pk-akordeon__znak {
        grid-area: znak;
    }

    .pk-nadpis {
        font-size: 1.25rem;
        overflow-wrap: break-word;
    }

    /* popis podkategórie je súvislý odsek z podkladov (3–4 vety) — na telefóne o stupeň menší */
    .pk-uvod {
        font-size: 0.9375rem;
    }

    /* drobček: dlhé názvy služieb sa na telefóne lámali na viac riadkov */
    .drobcek {
        font-size: 0.625rem;
        letter-spacing: 0.12em;
    }

    .drobcek__odkaz--domov svg {
        width: 0.75rem;
        height: 0.75rem;
    }

    .sluzby-ram__foto {
        aspect-ratio: 4 / 3;
    }

    .firma-karta__telo,
    .firma-karta__web {
        padding-inline: 1.25rem;
    }

    .viz__bod {
        margin-top: 2rem;
    }

    .viz__bod h3 {
        font-size: 1.25rem;
    }

    .viz__bod > p {
        font-size: 1rem;
    }


    .ram-karty {
        grid-template-columns: 1fr;
    }

    .zvisly-krok {
        grid-template-columns: 2.5rem minmax(0, 1fr);
        gap: 1rem;
        padding-bottom: 2.25rem;
    }

    .zvisly-krok__cislo {
        width: 2.5rem;
        height: 2.5rem;
    }

    .zvisly-krok:not(:last-child)::before {
        left: 1.25rem;
        top: 3rem;
    }

    .zvisly-krok__telo {
        padding-top: 0.375rem;
    }
}

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

    .viz-model [pathLength] {
        stroke-dashoffset: 0;
    }

    .viz__model.is-viditelne [pathLength] {
        animation: none;
    }

    .viz-model [pathLength],
    .viz-model__mriezka,
    .viz-model__tien,
    .viz-model .kota,
    .viz-model .kota__bod,
    .viz-model .kota__text {
        transition: none;
    }
}