/* ==========================================================================
   HNL STAVBY — responsive.css
   Všetky @media na jednom mieste. app.css je desktop podľa Figmy (1440);
   tu je (1) šírky stĺpcov, ktoré platia len od 992 px, (2) mobil a tablet
   (3) veľkosti písma po breakpointoch a (4) malý mobil pod 576 px.
   Figma má len desktop — mobil je návrh na schválenie (docs/ROZHODNUTIA.md).
   Breakpoint 992 px = Bootstrap lg.
   ========================================================================== */

/* 1. Len desktop (≥ 992 px) — pevné šírky stĺpcov z Figmy ---------------- */
@media (min-width: 992px) {
    .hero__lavy {
        flex: 0 0 auto;
        width: calc(30.25rem + var(--gap)); /* 484 + odsadenie stĺpca */
    }

}

/* 1b. Pod 1200 px je hero panel užší — šípky karuselu idú pod tlačidlo;
   kroky spolupráce sú dva v riadku, karta nemá pevnú výšku (nadpis a text pri sebe) */
@media (max-width: 1199.98px) {
    .hero__panel-spodok {
        padding-right: 0;
        padding-bottom: 4.5rem;
    }

    .spolupraca__krok {
        min-height: 0;
        justify-content: flex-start;
    }

    /* Fotokarty služieb sú užšie — dlhé tlačidlá („Viac o stavebných prácach…") sa zalomia,
       inak pretečú kartu a text s ikonou sa orežú */
    .fotokarta .tlacidlo {
        height: auto;
        min-height: 3.5rem;
        max-width: 100%;
        white-space: normal;
        text-align: left;
    }
}

/* 2. Mobil a tablet (< 992 px) — skladanie pod seba, menšie odsadenia ------ */
@media (max-width: 991.98px) {
    .referencia__citat,
    .referencia__vyzva,
    .referencia__uspora {
        min-height: 0;
    }

    /* Medzera pod predtitulkom je rovnaká ako v ostatných sekciách (gap) */
    .argument__predtitulok {
        margin-bottom: var(--gap);
    }

    .argument__hlava {
        margin-bottom: var(--space-10);
    }

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

    /* Dlhé tlačidlá („Viac o stavebných prácach a rekonštrukciách") sa na mobile zalomia */
    .tlacidlo {
        height: auto;
        min-height: 3.5rem;
        max-width: 100%;
        white-space: normal;
        text-align: left;
    }

    /* Boxy s fotkou v pozadí (Spolupráca, pásy Stavebných prác) idú na mobile
       od okraja po okraj a bez zaoblených rohov (Daniel, 31. 8.) */
    .spolupraca .container-fluid {
        --bs-gutter-x: 0;
    }

    .spolupraca__karta,
    .pas__karta {
        border-radius: 0;
    }

    .spolupraca__obsah {
        padding-inline: var(--space-4);
    }

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

    .referencia__cisla {
        flex-direction: column;
        gap: var(--space-4);
    }

    .referencia__cisla > div:first-child {
        padding-right: 0;
        border-right: 0;
    }

    .referencia__cisla > div + div {
        padding-left: 0;
    }

    .referencia__uspora {
        gap: var(--space-10);
    }

    .kontakt__uvod {
        position: static;
        padding-right: 0;
        padding-bottom: 0;
    }

    /* Podstránka služby: fotka pod kartou, nižšia; galéria po dvoch */
    .sluzba-uvod__karta {
        min-height: 0;
    }

    .sluzba-uvod__fotka {
        min-height: 20rem;
    }

    .sekcia-uvod {
        margin-bottom: var(--space-8);
    }

    /* Masonry galérie v dvoch stĺpcoch (počet stĺpcov s JS určuje app.js podľa tých istých šírok) */
    .galeria__mriezka {
        column-count: 2;
    }

    .formular--bez-vyzvy {
        padding-top: var(--space-6);
    }

    .sluzba-uvod__karta--sama {
        min-height: 0;
    }

    /* Stavebné práce: fotokarty nižšie, pás od kraja po kraj */
    .fotokarta {
        min-height: 20rem;
    }

    .pas .container-fluid {
        --bs-gutter-x: 0;
    }

    .pas__obsah {
        padding: var(--space-10) var(--space-4);
    }

    /* Spoločnosti: fotka riadku nižšia; Stavebné práce: hlavička mriežky na celú šírku bez horného odsadenia */
    .fotobody__foto {
        height: 20rem;
    }

    /* Trojstĺpcová sekcia: text hore na celú šírku, pod ním fotokarta a štatistika s fotkou vedľa seba */
    .tristlpce__text {
        padding-block: 0;
    }

    .tristlpce__fotokarta {
        min-height: 22rem;
    }

    .mriezka-bodov__hlava {
        padding-top: 0;
        padding-right: 0;
    }

    .faq__otazka,
    .faq__odpoved {
        padding-inline: var(--space-6);
    }

    .paticka__spodok {
        flex-direction: column;
    }

    .paticka__odkazy {
        justify-content: center;
    }

    .mapa {
        height: 22rem;
    }

    .clanok__karta {
        padding: var(--space-6);
    }

    .lightbox {
        padding: var(--space-4);
    }

    .lightbox__zavriet {
        top: var(--space-4);
        right: var(--space-4);
    }

    .lightbox__sipky {
        right: var(--space-4);
        bottom: var(--space-4);
    }

    .lightbox__foto {
        max-height: calc(100dvh - 11rem);
    }

    .kontakt__vyzva {
        padding-top: var(--space-6);
    }

    .paticka {
        padding-top: var(--space-10);
    }

    .paticka__karta {
        padding: var(--space-8) var(--space-6);
    }

    .paticka__vyzva {
        flex-direction: column;
        align-items: flex-start;
        padding: var(--space-8) var(--space-6);
    }

    .paticka__nadpis {
        font-size: var(--text-2xl);
    }

    .paticka__napis {
        margin-top: var(--space-8);
        margin-bottom: -0.75rem;
    }

    .paticka__firma {
        padding-right: 0;
    }

    .paticka__logo {
        width: 11rem;
    }

    .paticka__spodok {
        flex-direction: column;
        text-align: center;
    }

    :root {
        --section-padding: var(--space-10);
        --card-padding: var(--space-6);
        --card-padding-lg: var(--space-8);
    }

    .header__logo {
        width: 11rem;
    }

    .header__telefon,
    .header__siete {
        display: none;
    }

    .hero__karta {
        min-height: 0;
        padding-block: var(--space-10);
    }

    .hero__statistiky {
        min-height: 0;
    }

    .hero__stat {
        gap: var(--space-4);
    }

    /* Slider je vyšší, aby nad panelom ostala vidieť fotka/video; šípky sú
       zarovno s tlačidlom (panel má vpravo miesto 120 px, nie odsadenie dole) */
    .hero__fotka {
        min-height: 40rem;
    }

    .hero__panel-spodok {
        flex-direction: column;
        align-items: flex-start;
        padding-right: 7.5rem;
        padding-bottom: 0;
    }

    .menu-panel {
        --bs-offcanvas-width: 100%;
        --bs-offcanvas-padding-x: var(--space-6);
    }

    .menu-panel__nazov {
        font-size: 1.25rem;
    }

    .karta__vodoznak {
        bottom: -0.25rem;
    }
}

/* 3. Typografia — pevné stupne po breakpointoch, bez clamp. Základ (≥ 1400) je
   Figma 1440 v app.css; každý stupeň nižšie zmenší nadpisy o krok, pod 768 px aj
   základný text (16 → 15 px). Čísla štatistík v hero idú s --text-h2. */
@media (max-width: 1399.98px) {
    /* Tlačidlá v kartách: karta má overflow: hidden a jednoriadkové tlačidlo by odrezala („Pozrieť galériu
       komerčných vizualizácií a salónov", „Viac o stavebných prácach…") — pod 1400 sa zalamujú */
    .karta .tlacidlo,
    .hero__panel .tlacidlo {
        height: auto;
        min-height: 3.5rem;
        max-width: 100%;
        white-space: normal;
        text-align: left;
    }

    :root {
        --text-h1: 2.5rem;       /* 40 */
        --text-h2: 3.5rem;       /* 56 */
        --text-5xl: 2.25rem;     /* 36 */
        --text-4xl: 2rem;        /* 32 */
        --text-3xl: 2rem;        /* 32 */
        --text-2xl: 1.75rem;     /* 28 */
        --text-huge: 7rem;       /* 112 */
    }
}

@media (max-width: 1199.98px) {
    :root {
        --text-h1: 2.25rem;      /* 36 */
        --text-h2: 3rem;         /* 48 */
        --text-5xl: 2rem;        /* 32 */
        --text-4xl: 1.875rem;    /* 30 */
        --text-3xl: 1.75rem;     /* 28 */
        --text-2xl: 1.625rem;    /* 26 */
        --text-xl: 1.5rem;       /* 24 */
        --text-huge: 6rem;       /* 96 */
    }
}

@media (max-width: 991.98px) {
    :root {
        --text-h1: 2.125rem;     /* 34 */
        --text-h2: 2.5rem;       /* 40 */
        --text-5xl: 1.875rem;    /* 30 */
        --text-4xl: 1.75rem;     /* 28 */
        --text-3xl: 1.625rem;    /* 26 */
        --text-2xl: 1.5rem;      /* 24 */
        --text-xl: 1.375rem;     /* 22 */
        --text-huge: 5rem;       /* 80 */
    }
}

@media (max-width: 767.98px) {
    .tristlpce__foto {
        min-height: 14rem;
    }

    :root {
        --text-base: 0.9375rem;  /* 15 */
        --text-h1: 1.875rem;     /* 30 */
        --text-h2: 2rem;         /* 32 */
        --text-5xl: 1.625rem;    /* 26 */
        --text-4xl: 1.5rem;      /* 24 */
        --text-3xl: 1.375rem;    /* 22 */
        --text-2xl: 1.25rem;     /* 20 */
        --text-xl: 1.25rem;      /* 20 */
        --text-lg: 1.25rem;      /* 20 */
        --text-huge: 4rem;       /* 64 */
    }
}

/* 4. Malý mobil (< 576 px) ------------------------------------------------ */
@media (max-width: 575.98px) {
    /* Galéria realizácií po jednej */
    .galeria__mriezka {
        column-count: 1;
    }

    /* Hlavička pri 320–375 px: logo a tlačidlo Menu sa musia zmestiť vedľa seba */
    .header__logo {
        width: 9rem;
    }

    .header__menu-tlacidlo {
        padding-inline: var(--space-4);
    }

    /* Štatistiky pod hero pod seba — dva stĺpce mali po 116 px */
    .hero__statistiky {
        flex-direction: column;
    }

    /* Zavrieť v menu je len krúžok s X — text sa prekrýval s logom */
    .menu-panel__zavriet {
        width: 3rem;
        padding: 0;
        justify-content: center;
    }

    .menu-panel__zavriet-text {
        display: none;
    }

    /* Hero: šípky v karte sa skryjú, ukáže sa mobilný prvok pod kartou vpravo — tmavý
       (biely kruh by na svetlom pozadí nebolo vidieť); panel im nemusí nechávať miesto */
    .hero__panel-spodok {
        padding-right: 0;
        padding-bottom: 0;
    }

    .hero__sipky {
        display: none;
    }

    /* Obal nesmie mať height: 100 % — šípky pod kartou by nezväčšili sekciu
       a pretekali by do ďalšej */
    .hero__pravy {
        height: auto;
    }

    .hero__sipky--mobil {
        display: flex;
        position: static;
        justify-content: flex-start;
        margin-top: var(--space-3);
    }

    .hero__sipky--mobil .sipka-kruh img {
        filter: invert(1);
    }

    /* Bodky pod fotkou, vedľa šípok — na malej fotke by prekážali */
    .hero__bodky {
        position: static;
        margin-top: var(--space-4);
    }

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

    /* Tlačidlá sú na malom mobile nižšie a užšie (dotyková plocha ostáva nad 44 px) */
    .tlacidlo {
        gap: var(--space-2);
        min-height: 3rem;
        padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
    }

    .tlacidlo__ikona {
        width: 2rem;
        height: 2rem;
    }

    .tlacidlo__ikona img {
        width: 0.875rem;
        height: 0.875rem;
    }

    /* Dlhé texty tlačidiel služieb sa vymenia za krátky „Zistite viac" — nelámu sa na riadky */
    .tlacidlo__plny {
        display: none;
    }

    .tlacidlo__kratky {
        display: inline;
    }
}

/* 5. Mobil naležato — lightbox nechá fotke výšku, popis a šípky sa zmestia vedľa nej */
@media (max-width: 991.98px) and (orientation: landscape) {
    .lightbox__foto {
        max-height: calc(100dvh - 5rem);
    }
}