/* =========================================================================
   LANDING SZAMBA BETONOWE — warstwa poprawek z audytu UX/UI
   =========================================================================
   Plik ładowany WYŁĄCZNIE na podstronie z szablonem page-szamba-landing.php
   (patrz wpdocs_theme_name_scripts() w functions.php).

   Wszystkie reguły są scope'owane klasą .szamba_landing (wnętrze <main>) albo
   body.szamba-landing (header, sticky CTA, stopka). Dzięki temu zatwierdzony
   landing deszczówek, który współdzieli komponenty .deszczowka_* i
   .kompleksowa_*, zostaje bez żadnych zmian wizualnych.

   Identyfikacja wizualna bez zmian — te same tokeny co reszta serwisu:
     czerwień #E30613, tekst #111111, tekst pomocniczy #5A5A5A,
     panel #F6F6F6, obramowanie #E4E4E4.
   Uwaga: dla tekstów pomocniczych używamy #5A5A5A zamiast #7E7E7E — audyt
   wymaga kontrastu min. 4.5:1, a #7E7E7E na bieli daje 4.0:1.

   Mobile-first. Breakpointy: 769px (tablet/desktop), 1024px, 1280px.
   ========================================================================= */

.szamba_landing {
    --szamba-red: #E30613;
    --szamba-ink: #111111;
    --szamba-muted: #5A5A5A;
    --szamba-panel: #F6F6F6;
    --szamba-border: #E4E4E4;
    --szamba-radius: 0;   /* zaakceptowany system uzywa ostrych rogow */
}

/* -------------------------------------------------------------------------
   1. POWŁOKA STRONY
   GeneratePress domyślnie ogranicza szerokość .grid-container. Landing ma być
   pełnoekranowy — wcześniej robiły to reguły na page-id, my używamy klasy body,
   żeby nie trzeba było dopisywać ID po migracji na produkcję.
   ------------------------------------------------------------------------- */

body.szamba-landing .grid-container {
    max-width: 100%;
}

body.szamba-landing .grid-container .site-content {
    display: block;
}

/* Sticky CTA nie może zasłaniać ostatniej sekcji — miejsce rezerwuje JS
   (--szamba-sticky-space), tu zostaje bezpieczna wartość startowa. */
body.szamba-landing {
    padding-bottom: var(--szamba-sticky-space, 0px);
}

/* Audyt, punkt 25: overflow leczymy u źródła (grid + min-width: 0),
   a nie globalnym overflow-x: hidden. */
.szamba_landing,
.szamba_landing * {
    min-width: 0;
}

.szamba_landing img,
.szamba_landing video {
    max-width: 100%;
}

/* -------------------------------------------------------------------------
   2. DOSTĘPNOŚĆ — focus, skip link, klasa pomocnicza
   ------------------------------------------------------------------------- */

.landing_skip_link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 1000;
    padding: 12px 20px;
    background-color: #111111;
    color: #fff;
    font-weight: 700;
}

.landing_skip_link:focus {
    left: 0;
}

/* Widoczny focus dla KAŻDEGO elementu interaktywnego. Nie usuwamy outline'u —
   dokładamy własny, dobrze widoczny na jasnym i ciemnym tle. */
body.szamba-landing a:focus-visible,
body.szamba-landing button:focus-visible,
body.szamba-landing select:focus-visible,
body.szamba-landing summary:focus-visible,
body.szamba-landing video:focus-visible {
    outline: 3px solid #E30613;
    outline-offset: 3px;
    border-radius: 4px;
}

/* Na ciemnym tle czerwony outline ginie — tam biały. */
.szamba_hero a:focus-visible,
.szamba_hero button:focus-visible,
.szamba_bar a:focus-visible,
.landing_header a:focus-visible,
.landing_footer a:focus-visible,
.szamba_sticky a:focus-visible {
    outline-color: #ffffff;
}

.szamba_visually_hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Minimalna powierzchnia dotyku na urządzeniach dotykowych. */
@media (pointer: coarse) {
    body.szamba-landing a,
    body.szamba-landing button,
    body.szamba-landing summary {
        min-height: 44px;
    }
}

/* -------------------------------------------------------------------------
   3. HEADER LANDINGU (audyt, punkty 2 i 6)
   Bez menu serwisu i bez linków WooCommerce. Mobile: 64px wysokości.
   Sticky włączamy dopiero od 769px — na telefonie sticky jest dolny pasek CTA
   i dwa przyklejone elementy naraz zabierałyby zbyt dużo ekranu.
   ------------------------------------------------------------------------- */

.landing_header {
    background-color: #111111;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.landing_header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    column-gap: 12px;
    min-height: 64px;
    padding: 8px 0;
}

.landing_header__logo img,
.landing_header__logo .custom-logo {
    display: block;
    width: auto;
    max-height: 40px;
}

.landing_header__brand {
    color: #fff;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: .01em;
}

.landing_header__actions {
    display: flex;
    align-items: center;
    column-gap: 10px;
}

.landing_header__phone {
    display: inline-flex;
    align-items: center;
    column-gap: 8px;
    color: #fff;
    font-size: 17px;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap; /* numer telefonu nigdy się nie łamie */
}

.landing_header__phone:hover .landing_header__number {
    text-decoration: underline;
}

.landing_header__cta {
    display: none; /* na telefonie wystarczy sam numer — mniej ścisku */
    padding: 11px 20px;
    background-color: #E30613;
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .02em;
    text-decoration: none;
    border-radius: 0;
}

.landing_header__cta:hover {
    background-color: #c10510;
    color: #fff;
}

@media (min-width: 769px) {
    .landing_header {
        position: sticky;
        top: 0;
        z-index: 998;
    }

    .landing_header__inner {
        min-height: 72px;
    }

    .landing_header__logo img,
    .landing_header__logo .custom-logo {
        max-height: 48px;
    }

    .landing_header__phone {
        font-size: 20px;
    }

    .landing_header__cta {
        display: inline-flex;
    }
}

/* -------------------------------------------------------------------------
   4. HERO (audyt, punkt 7)
   Dwie kolumny na desktopie: treść + zdjęcie. Tekst NIE leży na zdjęciu,
   więc kontrast nagłówka nie zależy od wgranej fotografii.
   Hero i pasek CTA #1 tworzą jeden ciemny blok startowy.
   ------------------------------------------------------------------------- */

.szamba_hero_block {
    background-color: #111111;
}

.szamba_landing.kompleksowa .szamba_hero {
    padding: 0;
    background-image: none;
    background-color: #111111;
}

.szamba_landing .szamba_hero__inner {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 28px;
    padding: 36px 0 28px;
}

.szamba_landing .szamba_hero__title {
    /* Audyt: bez agresywnych podziałów wiersza i bez zmniejszania tekstu
       tylko po to, żeby zmieścić hero w jednym ekranie. */
    font-size: clamp(30px, 7.4vw, 44px);
    line-height: 1.12;
    margin: 0 0 20px;
    text-wrap: balance;
}

.szamba_landing .szamba_hero__list {
    row-gap: 12px;
}

.szamba_landing .szamba_hero__list .kompleksowa_check_list__item {
    color: #F2F2F2;
    font-size: 15px;
    line-height: 1.45;
    align-items: flex-start;
}

.szamba_landing .szamba_hero__list .kompleksowa_check_icon {
    flex: 0 0 auto; /* ikona o stałej szerokości — tekst wielowierszowy równo */
    margin-top: 2px;
}

.szamba_hero__media {
    position: relative;
}

.szamba_hero__img,
.szamba_hero__ph {
    display: block;
    width: 100%;
    height: 220px;
    object-fit: contain;
    border-radius: var(--szamba-radius);
}

.szamba_hero__ph {
    background: linear-gradient(135deg, #2a2a2a 0%, #161616 100%);
    border: 1px dashed rgba(255, 255, 255, .25);
}

@media (min-width: 769px) {
    .szamba_landing .szamba_hero__inner {
        grid-template-columns: 1.05fr .95fr;
        column-gap: 48px;
        align-items: center;
        padding: 64px 0 48px;
    }

    .szamba_landing .szamba_hero__title {
        font-size: clamp(40px, 4vw, 56px);
    }

    .szamba_landing .szamba_hero__list .kompleksowa_check_list__item {
        font-size: 16px;
    }

    .szamba_hero__img,
    .szamba_hero__ph {
        height: 420px;
    }
}

/* -------------------------------------------------------------------------
   5. PASKI CTA TELEFONICZNE (audyt, punkty 7 i 18)
   Pasek #1 domyka hero. Pasek #2 pod galerią jest osobną, kontrastową sekcją
   z wyraźnym odstępem — numer i tekst CTA nie zlewają się w jeden ciąg.
   ------------------------------------------------------------------------- */

.szamba_landing .szamba_bar {
    background-color: transparent;
}

.szamba_landing .szamba_bar .deszczowka_bar__inner {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 12px;
    padding: 0 0 32px;
}

.szamba_landing .szamba_bar__cta,
.szamba_landing .szamba_bar .deszczowka_bar__cta {
    width: 100%;
    justify-content: center;
    text-align: center;
    padding: 16px 20px;
    font-size: 15px;
    line-height: 1.25;
}

.szamba_landing .szamba_bar .deszczowka_bar__phone {
    justify-content: center;
}

.szamba_landing .szamba_bar .deszczowka_bar__number {
    white-space: nowrap;
    font-size: clamp(30px, 8vw, 40px);
}

/* Pasek #2 — samodzielna sekcja pomiędzy galerią a FAQ. */
.szamba_landing .szamba_bar--2 {
    background-color: #111111;
    margin: 8px 0;
}

.szamba_landing .szamba_bar--2 .deszczowka_bar__inner {
    padding: 36px 0;
}

@media (min-width: 769px) {
    .szamba_landing .szamba_bar .deszczowka_bar__inner {
        grid-template-columns: auto auto;
        justify-content: center;
        align-items: center;
        column-gap: 28px;
        padding: 0 0 48px;
    }

    .szamba_landing .szamba_bar__cta,
    .szamba_landing .szamba_bar .deszczowka_bar__cta {
        width: auto;
    }

    .szamba_landing .szamba_bar--2 .deszczowka_bar__inner {
        padding: 44px 0;
    }
}

/* -------------------------------------------------------------------------
   6. MAPA I KALKULATOR (audyt, punkty 3 i 9)
   ------------------------------------------------------------------------- */

.szamba_landing .szamba_calc {
    background-color: var(--szamba-panel);
    border: 1px solid var(--szamba-border);
    border-radius: var(--szamba-radius);
    padding: 20px 16px;
}

.szamba_landing .szamba_calc__layout {
    row-gap: 24px;
}

.szamba_landing .szamba_calc__map {
    position: relative;
    background-color: #fff;
    border: 1px solid var(--szamba-border);
    border-radius: var(--szamba-radius);
    overflow: hidden;
}

.szamba_landing .szamba_calc__map_img {
    display: block;
    width: 100%;
    height: auto;
}

/* Audyt: powiększenie mapy to jawny przycisk (działa myszką, dotykiem
   i klawiaturą), a nie sam komunikat „Dotknij mapy”. */
.szamba_calc__zoom {
    position: absolute;
    right: 10px;
    bottom: 10px;
    display: inline-flex;
    align-items: center;
    column-gap: 8px;
    padding: 10px 14px;
    background-color: #111111;
    color: #fff;
    border: none;
    border-radius: 0;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.szamba_calc__zoom:hover {
    background-color: #E30613;
}

.szamba_calc__map_fallback {
    display: inline-block;
    margin-top: 10px;
    font-weight: 700;
    color: #E30613;
}

.szamba_landing .szamba_calc__legend {
    margin-top: 14px;
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 8px;
}

.szamba_landing .szamba_calc__legend_item {
    display: flex;
    align-items: center;
    column-gap: 10px;
    font-size: 15px;
    color: var(--szamba-ink);
}

.szamba_landing .szamba_calc__panel {
    background-color: #fff;
    border: 1px solid var(--szamba-border);
    border-radius: var(--szamba-radius);
    padding: 18px 16px;
}

/* Trzy czytelne etapy kalkulatora. */
.szamba_calc__step + .szamba_calc__step {
    margin-top: 18px;
}

.szamba_calc__step_label {
    display: flex;
    align-items: center;
    column-gap: 10px;
    margin: 0 0 8px;
    font-size: 15px;
    font-weight: 800;
    color: var(--szamba-ink);
}

.szamba_calc__step_num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background-color: #E30613;
    color: #fff;
    font-size: 14px;
    font-weight: 800;
}

.szamba_landing .szamba_calc__result {
    margin: 0;
}

/* Kwota „Łącznie” — wizualnie najważniejszy element kalkulatora. */
.szamba_landing .szamba_calc__total {
    margin-top: 12px;
    padding: 14px 16px;
    background-color: #111111;
    border-radius: 0;
}

.szamba_landing .szamba_calc__total dt {
    color: #fff;
    font-size: 15px;
    font-weight: 700;
}

.szamba_landing .szamba_calc__total dd {
    color: #fff;
    font-size: 26px;
    font-weight: 800;
    font-variant-numeric: tabular-nums; /* kwoty o stabilnej szerokości */
}

.szamba_landing .szamba_calc__total dd.is-hint {
    font-size: 15px;
    font-weight: 600;
    color: #D8D8D8;
}

/* Tryb bez cennika — zamiast pól, które nie policzą wyniku. */
.szamba_calc__phone_only_title {
    margin: 0 0 12px;
    font-size: 19px;
    font-weight: 800;
    color: var(--szamba-ink);
}

.szamba_calc__steps_list {
    margin: 0 0 18px;
    padding-left: 20px;
    display: grid;
    row-gap: 8px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--szamba-ink);
}

.szamba_landing .szamba_calc__cta {
    width: 100%;
    justify-content: center;
    margin-top: 16px;
    padding: 16px 18px;
    font-size: 16px;
}

.szamba_landing .szamba_calc__note {
    margin-top: 12px;
    text-align: center;
}

.szamba_landing .szamba_calc__note .deszczowka_calc__note_text {
    color: var(--szamba-muted);
}

@media (min-width: 769px) {
    .szamba_landing .szamba_calc {
        padding: 28px;
    }

    /* Dwie kolumny o zbliżonej wysokości we wspólnym kontenerze sekcji. */
    .szamba_landing .szamba_calc__layout {
        grid-template-columns: 1fr 1fr;
        column-gap: 28px;
        align-items: stretch;
    }

    .szamba_landing .szamba_calc__map_col,
    .szamba_landing .szamba_calc__panel {
        display: flex;
        flex-direction: column;
    }

    .szamba_landing .szamba_calc__panel {
        padding: 26px;
        justify-content: center;
    }

    .szamba_landing .szamba_calc__legend {
        grid-template-columns: 1fr 1fr;
        column-gap: 16px;
    }
}

/* -------------------------------------------------------------------------
   7. FILTR RODZAJU KOMORY
   Wyglad przejety z komponentu zakladek zaakceptowanego systemu
   (.piwnice_models__tab): biale tlo, cienkie obramowanie #E4E4E4, ostre rogi;
   stan aktywny = czerwone tlo + czerwone obramowanie + bialy tekst.
   Obramowanie ma te sama grubosc w obu stanach, wiec aktywacja nie zmienia
   wymiarow przycisku i nic sie nie przesuwa.
   ------------------------------------------------------------------------- */

.szamba_filter {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 36px;
}

.szamba_filter__chip {
    flex: 0 0 auto;
    padding: 13px 26px;
    min-height: 46px;
    background-color: #fff;
    border: 1px solid var(--szamba-border);
    font-size: 15px;
    font-weight: 700;
    color: var(--szamba-ink);
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.szamba_filter__chip:hover {
    border-color: var(--szamba-red);
    color: var(--szamba-red);
}

.szamba_filter__chip.is-active {
    background-color: var(--szamba-red);
    border-color: var(--szamba-red);
    color: #fff;
}

.szamba_filter__chip.is-active:hover {
    color: #fff;
}

@media (max-width: 768px) {
    /* Na telefonie chipy przewijaja sie poziomo w obrebie wlasnego kontenera —
       nie lamia tekstu i nie wypychaja strony poza ekran. */
    .szamba_filter {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin-bottom: 24px;
        padding-bottom: 6px;
    }

    .szamba_filter__chip {
        padding: 12px 20px;
    }
}

/* -------------------------------------------------------------------------
   8. KATALOG MODELI — siatka kart
   Karta zbudowana na komponencie .piwnice_model z zaakceptowanego systemu:
   biale tlo, obramowanie 1px #E4E4E4, ostre rogi, flexowa kolumna, przycisk
   drugorzedny z czerwonym konturem. Czerwien wystepuje wylacznie jako akcent.
   ------------------------------------------------------------------------- */

.szamba_catalog__title {
    margin: 0 0 20px;
}

.szamba_models_grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

.szamba_model {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    border: 1px solid var(--szamba-border);
    padding: 24px;
}

.szamba_model:hover {
    border-color: #C9C9C9;
}

/* display: flex powyzej wygrywa z domyslnym [hidden] - filtr komory musi miec
   wlasna regule, zeby karta bez pasujacego bloku ceny naprawde znikala. */
.szamba_model[hidden] {
    display: none;
}

/* --- Naglowek karty --- */

.szamba_model__head {
    margin-bottom: 18px;
}

.szamba_model__title {
    /* Najwiekszy tekst w karcie. */
    margin: 0 0 6px;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.25;
    color: var(--szamba-ink);
}

.szamba_model__capacity {
    margin: 0;
    font-size: 14px;
    color: var(--szamba-muted);
}

.szamba_model__capacity strong {
    color: var(--szamba-ink);
    font-weight: 700;
}

/* --- Bloki cenowe (rodzaj komory) --- */

.szamba_model__prices {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 18px;
}

.szamba_pricebox {
    padding: 14px 16px;
    background-color: var(--szamba-panel);
    border: 1px solid var(--szamba-border);
}

.szamba_pricebox[hidden] {
    display: none;
}

/* Etykieta typu zbiornika — czerwony badge wersalikami, jak .piwnice_model__tag. */
.szamba_model__badge {
    display: inline-block;
    margin: 0 0 10px;
    padding: 6px 11px;
    background-color: var(--szamba-red);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    line-height: 1.2;
}

/* Cena — wyrazna, ale to tekst, nie drugi przycisk. */
.szamba_pricebox__total {
    margin: 0 0 10px;
    font-size: 24px;
    font-weight: 800;
    line-height: 1.15;
    color: var(--szamba-ink);
    font-variant-numeric: tabular-nums;
}

.szamba_pricebox__total.is-hint {
    font-size: 17px;
    font-weight: 700;
    color: var(--szamba-muted);
}

.szamba_pricebox__rows {
    margin: 0;
    display: grid;
    row-gap: 5px;
}

.szamba_pricebox__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    column-gap: 14px;
    font-size: 14px;
    text-align: left;
}

.szamba_pricebox__row dt {
    color: var(--szamba-muted);
    font-weight: 600;
}

.szamba_pricebox__row dd {
    margin: 0;
    font-weight: 700;
    color: var(--szamba-ink);
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.szamba_pricebox__row dd.is-hint {
    font-weight: 600;
    color: var(--szamba-muted);
}

/* --- Parametry techniczne: zawsze do lewej, etykieta nad wartoscia --- */

.szamba_model__specs {
    margin: 0 0 20px;
    display: grid;
    row-gap: 12px;
    text-align: left;
}

.szamba_model__spec {
    padding-bottom: 12px;
    border-bottom: 1px solid var(--szamba-border);
}

.szamba_model__spec:last-child {
    padding-bottom: 0;
    border-bottom: none;
}

.szamba_model__spec dt {
    margin-bottom: 3px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--szamba-muted);
}

.szamba_model__spec dd {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--szamba-ink);
}

/* Ciag wymiaru nie lamie sie w srodku. */
.szamba_dim {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* Drugi wymiar (korpus 6 m3 wysoki jest w wersji dwukomorowej wyzszy).
   Osobny wiersz pod wymiarem podstawowym, wyraznie podpisany - dwie liczby
   obok siebie bez opisu czytaloby sie jak blad. */
.szamba_model__spec_alt {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    font-weight: 600;
    color: var(--szamba-muted);
}

/* Brakujaca dana — jednoznacznie oznaczona, nigdy jako samotna kreska. */
.szamba_pending {
    display: inline-block;
    padding: 4px 10px;
    background-color: #FFF3F4;
    border: 1px solid #F3C9CC;
    font-size: 13px;
    font-weight: 700;
    color: #A3121C;
}

/* --- Akcje: przycisk drugorzedny + tekst pomocniczy + CTA telefoniczne --- */

.szamba_model__actions {
    /* margin-top: auto dosuwa blok akcji do dolu, wiec przyciski wszystkich
       kart w wierszu koncza sie na wspolnej linii. */
    margin-top: auto;
    display: flex;
    flex-direction: column;
}

.szamba_model__project {
    display: block;
    padding: 13px 18px;
    background-color: #fff;
    border: 1px solid var(--szamba-red);
    color: var(--szamba-red);
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    transition: background-color .2s ease, color .2s ease;
}

a.szamba_model__project:hover {
    background-color: var(--szamba-red);
    color: #fff;
}

.szamba_model__project--empty {
    border-color: var(--szamba-border);
    color: var(--szamba-muted);
    cursor: not-allowed;
}

/* Tekst pomocniczy jest osobnym wierszem POD przyciskiem. */
.szamba_model__hint {
    margin: 8px 0 0;
    font-size: 12px;
    line-height: 1.45;
    color: var(--szamba-muted);
    text-align: center;
}

.szamba_model__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 8px;
    margin-top: 14px;
    padding: 14px 18px;
    background-color: var(--szamba-red);
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .2s ease;
}

.szamba_model__cta:hover {
    background-color: #B9050F;
    color: #fff;
}

@media (min-width: 600px) {
    .szamba_models_grid {
        grid-template-columns: repeat(2, 1fr); /* tablet / mniejszy desktop */
        gap: 24px;
    }
}

@media (min-width: 1024px) {
    .szamba_models_grid {
        grid-template-columns: repeat(3, 1fr); /* szeroki desktop */
        gap: 28px;
    }

    .szamba_model {
        padding: 28px;
    }
}

/* -------------------------------------------------------------------------
   9. KOMUNIKATY, CENNIK TRANSPORTU I DODATKI (audyt, punkty 12 i 24)
   ------------------------------------------------------------------------- */

.szamba_notice {
    margin: 0 0 20px;
    padding: 16px 18px;
    background-color: #FFF7F7;
    border-left: 4px solid #E30613;
    border-radius: 0;
    font-size: 15px;
    line-height: 1.55;
    color: var(--szamba-ink);
}

.szamba_notice a {
    color: #E30613;
    font-weight: 800;
    white-space: nowrap;
}

.szamba_notice--pricing {
    margin-bottom: 18px;
}

.szamba_zonelist {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    row-gap: 8px;
}

.szamba_zonelist__item {
    display: flex;
    align-items: center;
    column-gap: 10px;
    padding: 10px 12px;
    background-color: #fff;
    border: 1px solid var(--szamba-border);
    border-radius: 0;
    font-size: 15px;
}

.szamba_zonelist__name {
    font-weight: 700;
    color: var(--szamba-ink);
}

/* Lista cenowa: nazwa po lewej, cena po prawej, wartości wyrównane.
   Bez poziomego przewijania na telefonie. */
.szamba_landing .szamba_pricelist__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    column-gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid var(--szamba-border);
}

.szamba_landing .szamba_pricelist__row .deszczowka_pricing__row_name {
    font-size: 15px;
    color: var(--szamba-ink);
}

.szamba_landing .szamba_pricelist__row .deszczowka_pricing__row_price {
    flex: 0 0 auto;
    font-size: 16px;
    font-weight: 800;
    color: var(--szamba-ink);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Audyt: informacja o cenach netto nie może być drobnym, jasnoszarym tekstem. */
.szamba_netto_note {
    margin: 14px 0 0;
    padding: 10px 14px;
    background-color: var(--szamba-panel);
    border: 1px solid var(--szamba-border);
    border-radius: 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--szamba-ink);
}

.szamba_landing .szamba_pricing__table {
    background-color: #fff;
    border: 1px solid var(--szamba-border);
    border-radius: var(--szamba-radius);
    padding: 20px 18px;
}

@media (min-width: 769px) {
    .szamba_landing .szamba_pricing__tables {
        grid-template-columns: 1fr 1fr;
        gap: 24px;
    }

    .szamba_landing .szamba_pricing__table {
        padding: 26px;
    }
}

/* -------------------------------------------------------------------------
   10. TABELA WYMIARÓW (audyt, punkt 13)
   Desktop: tabela. Mobile: karty (transformacja jest już w style.css) —
   tutaj tylko czytelność wartości i stan przycisku rozwijania.
   ------------------------------------------------------------------------- */

.szamba_landing .deszczowka_table__format {
    color: var(--szamba-muted);
}

.szamba_landing .deszczowka_table__pending {
    padding: 14px 16px;
    background-color: #FFF7F7;
    border-left: 4px solid #E30613;
    border-radius: 0;
    color: var(--szamba-ink);
    font-size: 15px;
}

.szamba_landing .deszczowka_table__pending a {
    color: #E30613;
    font-weight: 800;
    white-space: nowrap;
}

/* Wymiar wersji dwukomorowej w tej samej komorce co podstawowy. */
.szamba_landing .szamba_table__alt {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    font-weight: 600;
    color: var(--szamba-muted);
}

.szamba_landing .deszczowka_table__more {
    min-height: 48px;
    font-weight: 800;
}

/* Wyraźny stan rozwinięcia (audyt: „powinien mieć wyraźny stan rozwinięcia”). */
.szamba_landing .deszczowka_table__more[aria-expanded="true"] {
    background-color: #111111;
    color: #fff;
    border-color: #111111;
}

@media (max-width: 768px) {
    /* Bazowa reguła ze style.css układa etykietę i wartość w jednym wierszu
       (flex, etykieta 45% szerokości). Przy wartości „350 × 240 × 220 cm”
       albo „Podamy przez telefon” zostaje na wartość ok. 150 px przy ekranie
       360 px — tekst wychodziłby poza kartę. Dlatego w tej kolumnie układamy
       etykietę NAD wartością: wartość dostaje pełną szerokość, a podpis nadal
       jest widoczny (audyt: wartość nie może zależeć wyłącznie od pozycji
       w kolumnie). */
    .szamba_landing .deszczowka_table__table td.deszczowka_table__val {
        display: block;
        font-size: 16px;
    }

    .szamba_landing .deszczowka_table__table td.deszczowka_table__val::before {
        display: block;
        flex: none;
        margin-bottom: 4px;
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .04em;
        color: var(--szamba-muted);
    }

    /* Ostatnia deska ratunku dla bardzo wąskich ekranów: chip może się zawinąć,
       zamiast rozpychać kartę. */
    .szamba_landing .deszczowka_table__table td.deszczowka_table__val .szamba_pending {
        white-space: normal;
    }
}

/* -------------------------------------------------------------------------
   11. CO ZAWIERA OFERTA (audyt, punkt 14)
   ------------------------------------------------------------------------- */

.szamba_landing .deszczowka_offer__panel {
    border-radius: var(--szamba-radius);
    padding: 28px 20px;
}

.szamba_landing .deszczowka_offer__list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px 32px;
    text-align: left;
}

.szamba_landing .deszczowka_offer__list .kompleksowa_check_list__item {
    align-items: flex-start;
    font-size: 15px;
    line-height: 1.5;
}

/* Ikona o stałej szerokości — najdłuższy punkt nie rozjeżdża układu. */
.szamba_landing .kompleksowa_check_list__item .kompleksowa_check_icon {
    flex: 0 0 auto;
    margin-top: 2px;
}

@media (min-width: 769px) {
    .szamba_landing .deszczowka_offer__panel {
        padding: 44px;
    }

    .szamba_landing .deszczowka_offer__list {
        grid-template-columns: 1fr 1fr;
        align-items: start;
    }
}

/* -------------------------------------------------------------------------
   12. SOLIDNE WYKONANIE + PEŁNA DOKUMENTACJA (audyt, punkt 15)
   Dwie sąsiadujące karty na desktopie, jedna pod drugą na mobile.
   ------------------------------------------------------------------------- */

.szamba_trust {
    display: grid;
    grid-template-columns: 1fr;
}

.szamba_landing .szamba_quality .kompleksowa_quality__inner {
    grid-template-columns: 1fr;
    row-gap: 24px;
    padding: 44px 0 24px;
}

.szamba_landing .szamba_docs .kompleksowa_docs__inner {
    padding-bottom: 44px;
}

.szamba_landing .szamba_docs .kompleksowa_docs__panel {
    border-radius: var(--szamba-radius);
    padding: 28px 20px;
}

/* Zdanie o odbiorze budynku i dotacji jest argumentem sprzedażowym. */
.szamba_docs__note {
    margin: 18px 0 0;
    padding: 14px 16px;
    background-color: #fff;
    border-left: 4px solid #E30613;
    border-radius: 0;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.5;
    color: var(--szamba-ink);
}

@media (min-width: 769px) {
    .szamba_trust {
        grid-template-columns: 1fr 1fr;
        column-gap: 32px;
        align-items: stretch;
        max-width: 1296px;
        width: 96%;
        margin: 0 auto;
        padding: 60px 0;
    }

    /* Wewnętrzne kontenery sekcji nie mogą już centrować się drugi raz. */
    .szamba_trust .landing_container {
        width: 100%;
        max-width: 100%;
    }

    .szamba_trust .szamba_quality,
    .szamba_trust .szamba_docs {
        display: flex;
    }

    .szamba_landing .szamba_trust .szamba_quality .kompleksowa_quality__inner {
        padding: 0;
        row-gap: 20px;
        align-content: start;
    }

    .szamba_landing .szamba_trust .szamba_docs .kompleksowa_docs__inner {
        padding: 0;
        width: 100%;
    }

    .szamba_landing .szamba_trust .szamba_docs .kompleksowa_docs__panel {
        height: 100%;
        padding: 36px;
    }
}

/* -------------------------------------------------------------------------
   13. JAK WYGLĄDA REALIZACJA (audyt, punkt 16)
   Mobile: pionowa oś procesu z połączeniem etapów.
   Desktop: trzy równe kafelki tej samej wysokości.
   ------------------------------------------------------------------------- */

.szamba_landing .szamba_process .kompleksowa_process__steps {
    grid-template-columns: 1fr;
    gap: 0;
}

.szamba_landing .szamba_process .kompleksowa_process__step {
    position: relative;
    padding: 0 0 26px 56px;
}

/* Linia łącząca etapy — pionowa oś procesu. */
.szamba_landing .szamba_process .kompleksowa_process__step::before {
    content: "";
    position: absolute;
    left: 19px;
    top: 42px;
    bottom: 0;
    width: 2px;
    background-color: var(--szamba-border);
}

.szamba_landing .szamba_process .kompleksowa_process__step:last-child {
    padding-bottom: 0;
}

.szamba_landing .szamba_process .kompleksowa_process__step:last-child::before {
    display: none;
}

.szamba_landing .szamba_process .kompleksowa_process__num {
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #E30613;
    color: #fff;
    font-size: 15px;
    font-weight: 800;
}

.szamba_landing .szamba_process .kompleksowa_process__title {
    margin: 8px 0 6px;
    font-size: 18px;
    font-weight: 800;
}

.szamba_landing .szamba_process .kompleksowa_process__desc {
    margin: 0;
    font-size: 15px;
    line-height: 1.55;
    color: var(--szamba-muted);
}

/* Podsumowanie pod całym procesem — nie może wyglądać jak część 3. kafelka. */
.szamba_landing .szamba_process .deszczowka_process__note {
    margin: 28px 0 0;
    padding: 16px 20px;
    background-color: #111111;
    border-radius: var(--szamba-radius);
    color: #fff;
    font-size: 17px;
    font-weight: 800;
    text-align: center;
}

@media (min-width: 769px) {
    .szamba_landing .szamba_process .kompleksowa_process__steps {
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
        align-items: stretch;
    }

    .szamba_landing .szamba_process .kompleksowa_process__step {
        display: flex;
        flex-direction: column;
        padding: 28px 24px;
        background-color: #fff;
        border: 1px solid var(--szamba-border);
        border-radius: var(--szamba-radius);
    }

    /* Poziome połączenie etapów. */
    .szamba_landing .szamba_process .kompleksowa_process__step::before {
        left: auto;
        right: -25px;
        top: 50px;
        bottom: auto;
        width: 26px;
        height: 2px;
    }

    .szamba_landing .szamba_process .kompleksowa_process__num {
        position: static;
        margin-bottom: 14px;
        width: 48px;
        height: 48px;
        font-size: 17px;
    }

    .szamba_landing .szamba_process .kompleksowa_process__title {
        margin-top: 0;
        min-height: 52px; /* nagłówki i opisy wyrównane w tej samej linii */
    }
}

/* -------------------------------------------------------------------------
   14. GALERIA REALIZACJI I FILMY (audyt, punkty 5 i 17)
   ------------------------------------------------------------------------- */

.szamba_gallery__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 36px;
}

.szamba_gallery__item {
    margin: 0;
    background-color: #fff;
    border: 1px solid var(--szamba-border);
    border-radius: var(--szamba-radius);
    overflow: hidden;
}

.szamba_gallery__zoom {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    background: none;
    border: none;
    cursor: zoom-in;
}

/* Ten sam format kadru dla wszystkich miniatur — bez rozciągania zdjęć. */
.szamba_gallery__zoom img,
.szamba_gallery__ph {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.szamba_gallery__ph {
    background: repeating-linear-gradient(45deg, #F0F0F0, #F0F0F0 12px, #E7E7E7 12px, #E7E7E7 24px);
}

.szamba_gallery__zoom_icon {
    position: absolute;
    right: 10px;
    bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background-color: rgba(17, 17, 17, .82);
    color: #fff;
    border-radius: 50%;
}

.szamba_gallery__zoom:hover .szamba_gallery__zoom_icon {
    background-color: #E30613;
}

/* Podpisy zawsze widoczne — nie chowamy ich pod hover. */
.szamba_gallery__caption {
    padding: 12px 14px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--szamba-ink);
}

.szamba_videos {
    margin-top: 8px;
}

.szamba_videos__title {
    margin: 0 0 16px;
    font-size: 20px;
    font-weight: 800;
    color: var(--szamba-ink);
}

.szamba_videos__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

.szamba_video {
    margin: 0;
    background-color: #fff;
    border: 1px solid var(--szamba-border);
    border-radius: var(--szamba-radius);
    overflow: hidden;
}

/* Proporcja 16:9 i zaokrąglenie spójne z pozostałymi kartami. */
.szamba_video__player,
.szamba_video__facade,
.szamba_video__ph {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    background-color: #111111;
}

.szamba_video__player {
    object-fit: cover;
}

.szamba_video__facade {
    position: relative;
    border: none;
    padding: 0;
}

.szamba_video__facade img,
.szamba_video__facade iframe {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 0;
}

.szamba_video__play {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 66px;
    height: 66px;
    padding-left: 5px;
    background-color: #E30613;
    color: #fff;
    border: none;
    border-radius: 50%;
    cursor: pointer;
}

.szamba_video__ph {
    display: flex;
    align-items: center;
    justify-content: center;
    background: repeating-linear-gradient(45deg, #1c1c1c, #1c1c1c 12px, #161616 12px, #161616 24px);
}

.szamba_video__ph_text {
    padding: 8px 16px;
    border: 1px dashed rgba(255, 255, 255, .4);
    border-radius: 0;
    color: #E4E4E4;
    font-size: 14px;
    font-weight: 700;
}

.szamba_video__caption {
    padding: 12px 14px;
    font-size: 14px;
    font-weight: 700;
    color: var(--szamba-ink);
}

@media (min-width: 600px) {
    .szamba_gallery__grid {
        grid-template-columns: 1fr 1fr; /* tablet: dwie kolumny */
    }

    .szamba_videos__grid {
        grid-template-columns: 1fr 1fr; /* dwa filmy obok siebie */
    }
}

@media (min-width: 1024px) {
    .szamba_gallery__grid {
        grid-template-columns: repeat(3, 1fr); /* desktop: trzy kolumny */
        gap: 24px;
    }
}

/* --- Lightbox --- */

.szamba_lightbox {
    width: min(94vw, 1100px);
    max-width: 94vw;
    max-height: 92vh;
    padding: 0;
    border: none;
    border-radius: var(--szamba-radius);
    background-color: #111111;
}

.szamba_lightbox::backdrop {
    background-color: rgba(0, 0, 0, .78);
}

.szamba_lightbox__inner {
    position: relative;
    padding: 12px;
}

.szamba_lightbox__img {
    display: block;
    width: 100%;
    max-height: 76vh;
    object-fit: contain;
    border-radius: 0;
}

.szamba_lightbox__caption {
    margin: 10px 0 2px;
    color: #F2F2F2;
    font-size: 15px;
    font-weight: 700;
    text-align: center;
}

.szamba_lightbox__close {
    position: absolute;
    right: 16px;
    top: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: rgba(17, 17, 17, .85);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 50%;
    cursor: pointer;
}

.szamba_lightbox__close:hover {
    background-color: #E30613;
}

/* -------------------------------------------------------------------------
   15. TWOJE OBOWIĄZKI PRZED MONTAŻEM (audyt, punkty 20 i 21)
   ------------------------------------------------------------------------- */

.szamba_oblig__lead {
    max-width: 70ch; /* długi tekst techniczny nie rozciąga się na całą szerokość */
    color: var(--szamba-ink);
}

.szamba_oblig__groups {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 12px;
    margin-top: 24px;
}

.szamba_oblig__group {
    background-color: #fff;
    border: 1px solid var(--szamba-border);
    border-radius: var(--szamba-radius);
    overflow: hidden;
}

.szamba_oblig__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    column-gap: 12px;
    padding: 16px 18px;
    cursor: pointer;
    list-style: none;
}

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

.szamba_oblig__title {
    margin: 0;
    font-size: 17px;
    font-weight: 800;
    color: var(--szamba-ink);
}

.szamba_oblig__icon {
    position: relative;
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
}

.szamba_oblig__icon::before,
.szamba_oblig__icon::after {
    content: "";
    position: absolute;
    background-color: #E30613;
    border-radius: 2px;
}

.szamba_oblig__icon::before {
    top: 9px;
    left: 0;
    width: 20px;
    height: 2px;
}

.szamba_oblig__icon::after {
    top: 0;
    left: 9px;
    width: 2px;
    height: 20px;
}

.szamba_oblig__group[open] .szamba_oblig__icon::after {
    display: none;
}

.szamba_oblig__body {
    padding: 0 18px 18px;
}

.szamba_oblig__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    row-gap: 12px;
}

.szamba_oblig__item {
    display: flex;
    align-items: flex-start;
    column-gap: 12px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--szamba-ink);
}

.szamba_oblig__item .kompleksowa_check_icon {
    flex: 0 0 auto;
    margin-top: 3px;
}

.szamba_oblig__media {
    margin: 18px 0 0;
}

.szamba_oblig__media_zoom {
    display: block;
    width: 100%;
    padding: 0;
    background: none;
    border: 1px solid var(--szamba-border);
    border-radius: 0;
    overflow: hidden;
    cursor: zoom-in;
}

.szamba_oblig__media_zoom img {
    display: block;
    width: 100%;
    height: auto; /* schemat HDS zachowuje proporcje — nie deformujemy rysunku */
}

.szamba_oblig__media_ph {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4 / 3;
    background: repeating-linear-gradient(45deg, #F0F0F0, #F0F0F0 12px, #E7E7E7 12px, #E7E7E7 24px);
    border: 1px dashed var(--szamba-border);
    border-radius: 0;
    color: var(--szamba-muted);
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    padding: 12px;
}

.szamba_oblig__caption {
    margin-top: 8px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--szamba-muted);
}

.szamba_oblig__box + .szamba_oblig__box {
    margin-top: 16px;
}

.szamba_oblig__box_title {
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 800;
    color: var(--szamba-ink);
}

.szamba_oblig__box_text {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--szamba-ink);
}

/* Tabela płyt: desktop — tabela, mobile — trzy osobne karty. */
.szamba_plates {
    width: 100%;
    border-collapse: collapse;
}

.szamba_plates th,
.szamba_plates td {
    padding: 14px 16px;
    text-align: left;
    border: 1px solid var(--szamba-border);
    font-size: 15px;
    line-height: 1.55;
}

.szamba_plates thead th {
    background-color: #111111;
    color: #fff;
    font-weight: 700;
    border-color: #111111;
}

@media (max-width: 768px) {
    .szamba_plates thead {
        display: none;
    }

    .szamba_plates,
    .szamba_plates tbody,
    .szamba_plates tr,
    .szamba_plates td {
        display: block;
        width: 100%;
    }

    .szamba_plates tr {
        margin-bottom: 12px;
        border: 1px solid var(--szamba-border);
        border-radius: 0;
        overflow: hidden;
    }

    .szamba_plates td {
        border: none;
        padding: 12px 14px;
    }

    .szamba_plates td:first-child {
        background-color: var(--szamba-panel);
        font-weight: 800;
    }

    /* Podpis kolumny widoczny w karcie — wartość nie zależy od pozycji. */
    .szamba_plates td:last-child::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 4px;
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .04em;
        color: var(--szamba-muted);
    }
}

@media (min-width: 769px) {
    .szamba_oblig__summary {
        padding: 20px 24px;
    }

    .szamba_oblig__title {
        font-size: 19px;
    }

    .szamba_oblig__body {
        padding: 0 24px 24px;
    }

    .szamba_oblig__body--media {
        display: grid;
        grid-template-columns: 1.15fr .85fr;
        column-gap: 32px;
        align-items: start;
    }

    .szamba_oblig__media {
        margin-top: 0;
    }

    .szamba_oblig__body--boxes {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 32px;
        align-items: start;
    }

    .szamba_oblig__box + .szamba_oblig__box {
        margin-top: 0;
    }

    .szamba_oblig__item {
        max-width: 68ch;
    }
}

/* -------------------------------------------------------------------------
   16. STICKY CTA NA MOBILE (audyt, punkt 8)
   ------------------------------------------------------------------------- */

.szamba_sticky {
    /* Bezpieczna strefa na iPhonie — przycisk nie chowa się pod paskiem systemu. */
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background-color: #E30613;
}

.szamba_sticky .kompleksowa_sticky__phone {
    background-color: #E30613;
    min-height: 56px;
    font-size: 18px;
}

.szamba_sticky .kompleksowa_sticky__phone span {
    white-space: nowrap;
}

@media (min-width: 993px) {
    /* Na desktopie sticky jest header — dolny pasek znika (style.css). */
    body.szamba-landing {
        padding-bottom: 0;
    }
}

/* -------------------------------------------------------------------------
   17. STOPKA LANDINGU
   ------------------------------------------------------------------------- */

.landing_footer {
    background-color: #111111;
    color: #E4E4E4;
    padding: 36px 0 28px;
}

.landing_footer__inner {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 26px;
}

.landing_footer__brand img,
.landing_footer__brand .custom-logo {
    display: block;
    width: auto;
    max-height: 44px;
    margin-bottom: 10px;
}

.landing_footer__name {
    display: block;
    margin-bottom: 10px;
    color: #fff;
    font-size: 18px;
    font-weight: 800;
}

.landing_footer__copy {
    margin: 0;
    font-size: 14px;
    color: #B5B5B5;
}

.landing_footer__label {
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #B5B5B5;
}

.landing_footer__phone {
    display: block;
    color: #fff;
    font-size: 24px;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
}

.landing_footer__mail {
    display: inline-block;
    margin-top: 6px;
    color: #E4E4E4;
    font-size: 15px;
}

.landing_footer__phone:hover,
.landing_footer__mail:hover {
    color: #fff;
    text-decoration: underline;
}

.landing_footer__legal_list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    row-gap: 8px;
}

.landing_footer__legal_list a {
    color: #E4E4E4;
    font-size: 15px;
}

.landing_footer__legal_list a:hover {
    color: #fff;
    text-decoration: underline;
}

@media (min-width: 769px) {
    .landing_footer {
        padding: 48px 0 36px;
    }

    .landing_footer__inner {
        grid-template-columns: 1.4fr 1fr 1fr;
        column-gap: 40px;
        align-items: start;
    }
}

/* -------------------------------------------------------------------------
   18. TYPOGRAFIA I KONTRAST (audyt, punkt 24)
   ------------------------------------------------------------------------- */

.szamba_landing {
    font-size: 16px;
    line-height: 1.6;
}

/* Tekst pomocniczy: #7E7E7E ma na bieli tylko 4.0:1 — podnosimy do 4.5:1+. */
.szamba_landing .kompleksowa_note,
.szamba_landing .deszczowka_pricing__lead,
.szamba_landing .deszczowka_calc__lead {
    color: var(--szamba-muted);
}

.szamba_landing .kompleksowa_note {
    font-size: 14px;
}

/* Długie akapity techniczne: ograniczona miara, wyrównanie do lewej. */
.szamba_landing .deszczowka_pricing__lead,
.szamba_landing .deszczowka_calc__lead {
    max-width: 72ch;
}

.szamba_landing .kompleksowa_section_head--center .section_title {
    text-wrap: balance;
}

@media (min-width: 769px) {
    .szamba_landing .deszczowka_pricing__lead {
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }
}

/* -------------------------------------------------------------------------
   19. RESPONSYWNOŚĆ — kontrola najwęższych ekranów (audyt, punkt 25)
   ------------------------------------------------------------------------- */

@media (max-width: 768px) {
    .szamba_landing .landing_container,
    body.szamba-landing .landing_header__inner,
    body.szamba-landing .landing_footer__inner {
        width: 100%;
        max-width: 100%;
        padding-left: 16px;
        padding-right: 16px;
    }
}

@media (max-width: 400px) {
    .szamba_landing .szamba_model {
        padding: 18px 16px;
    }

    .szamba_landing .szamba_model__title {
        font-size: 19px;
    }

    .szamba_landing .szamba_pricebox__total {
        font-size: 22px;
    }

    .szamba_landing .szamba_bar .deszczowka_bar__number {
        font-size: 28px;
    }

    .landing_header__phone .landing_header__number {
        font-size: 16px;
    }

    /* Etykieta i wartość w wierszu ceny mogą się rozjechać na 360px —
       pozwalamy im zawinąć zamiast wypychać kartę poza ekran. */
    .szamba_landing .szamba_pricelist__row {
        flex-wrap: wrap;
        row-gap: 2px;
    }
}

/* -------------------------------------------------------------------------
   20. PREFERS-REDUCED-MOTION (audyt, punkt 27)
   ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    body.szamba-landing *,
    body.szamba-landing *::before,
    body.szamba-landing *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}