/* ============================================================
   responsive.css — WSZYSTKIE media queries motywu DEJW.
   Kolejność: min-width (desktop-up) → max-width malejąco.
   Style bazowe komponentów: main.css / page.css. Tu tylko breakpointy.
   ============================================================ */

/* Blokada scrolla tła przy otwartym panelu mobilnym */
body.nav-open {
    overflow: hidden;
}

/* ============================================================
   DESKTOP-UP (min-width: 1201px) — panel mobilny twardo ukryty
   ============================================================ */
@media (min-width: 1201px) {

    .mobile-nav,
    .mobile-nav__backdrop,
    .nav-toggle {
        display: none !important;
    }
}

/* ============================================================
   1381–1680px — e-mail tylko ikonka, telefon z numerem, menu lżej
   ============================================================ */
@media (min-width: 1381px) and (max-width: 1680px) {

    .menu a {
        padding: .6rem .7rem;
    }

    .hcontact .lnk[href^="mailto"] .txt {
        display: none;
    }

    .hcontact .lnk[href^="tel"] .txt {
        white-space: nowrap;
    }
}

/* ============================================================
   1201–1380px — pasek zagęszczony: kontakt tylko ikonki, menu ciaśniej
   ============================================================ */
@media (min-width: 1201px) and (max-width: 1380px) {

    .menu {
        gap: .3rem;
    }

    .menu a {
        padding: .55rem .65rem;
        font-size: .86rem;
    }

    .hero-header .bar {
        gap: .9rem;
    }

    .hcontact {
        gap: .5rem;
    }

    .hcontact .txt {
        display: none;
    }
}

/* ============================================================
   992–1200px — nagłówek: menu → hamburger, kontakt + Serwis zostają;
   „zlepione" liczniki: mniejsze fonty + social do góry
   ============================================================ */
@media (min-width: 992px) and (max-width: 1200px) {

    .menu {
        display: none;
    }

    .nav-toggle {
        display: inline-flex;
    }

    .hero-header .bar {
        justify-content: space-between;
        gap: .8rem;
    }

    /* Kontakt lekko odchudzony, żeby pasek się domknął */
    .hcontact {
        gap: .6rem;
    }

    .hcontact .lnk {
        font-size: .85rem;
        gap: .45rem;
    }

    .hcontact .ico {
        width: 36px;
        height: 36px;
    }

    .counter .wrap {
        gap: 1.1rem;
    }

    .stat-body {
        padding: 1.3rem 1.2rem;
    }

    .stat .num {
        font-size: 1.5rem;
    }

    .stat .label {
        font-size: .82rem;
    }

    .footer-socials {
        justify-content: flex-start;
    }
}

/* ============================================================
   ≤ 1200px — siatki: pierwszy stopień redukcji kolumn
   ============================================================ */
@media (max-width: 1200px) {

    .srv-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .logos {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ============================================================
   ≤ 991px — nagłówek mobilny (hamburger + panel) + stackowanie
   ============================================================ */
@media (max-width: 991px) {

    /* Header: desktopowe menu chowamy, hamburger pokazujemy */
    .menu {
        display: none;
    }

    .nav-toggle {
        display: inline-flex;
    }

    /* Telefony/e-mail przenoszą się do panelu — pasek odchudzony */
    .hcontact {
        display: none;
    }

    .hero-header {
        padding-inline: 1.2rem;
    }

    .hero-header.is-stuck {
        padding-inline: 0;
    }

    .hero-header.is-stuck .bar {
        padding-inline: 1.2rem;
    }

    .hero-header .logo img {
        height: 36px;
        width: auto;
    }

    .hero .wrap {
        padding-inline: 1.4rem;
    }

    /* Hamburger przy prawej krawędzi paska */
    .hero-header .bar {
        justify-content: space-between;
    }

    /* Ciemniejsza maska hero — biały tekst czytelny na mobile */
    .hero-scene::after {
        background: linear-gradient(180deg, rgba(2, 17, 33, .72) 0%, rgba(2, 17, 33, .5) 45%, rgba(2, 17, 33, .7) 100%);
    }

    /* Layouty dwukolumnowe → jedna kolumna */
    .about-grid {
        grid-template-columns: 1fr;
    }

    .offer-head {
        grid-template-columns: 1fr;
        justify-items: start;
        row-gap: 1.8rem;
    }

    .offer-head > .btn-accent {
        justify-self: start;
    }

    .counter .wrap {
        grid-template-columns: repeat(2, 1fr);
    }

    .srv-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Sterowanie hero + strzałka „w dół" wyżej — nad chatem/krawędzią */
    .hero-controls {
        bottom: 6rem;
    }

    .scroll-down {
        bottom: 6rem;
        right: 1rem;
    }

    /* Nagłówek podstrony: bazowy kształt scoopa, tylko wyższy pod dłuższe H1 */
    .page-title:not(.page-title--flat) {
        padding-bottom: clamp(7rem, 15vw, 9rem);
    }
}

/* ============================================================
   577–991px — stopka: logo (pełna szer.) → 3 kolumny → social lewo
   ============================================================ */
@media (min-width: 577px) and (max-width: 991px) {

    .footer-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .footer-about {
        grid-column: 1 / -1;
    }

    .footer-socials {
        grid-column: 1 / -1;
        align-items: flex-start;
    }
}

/* ============================================================
   ≤ 991px — siatki treści/kontaktu, galerie (spójnie z progiem tabletu)
   ============================================================ */
@media (max-width: 991px) {

    .branches {
        grid-template-columns: repeat(2, 1fr);
    }

    .contact-top {
        grid-template-columns: 1fr;
    }

    .item-gallery__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .entry-content .blocks-gallery-grid,
    .entry-content .wp-block-gallery.has-nested-images {
        column-count: 2;
    }
}

/* ============================================================
   ≤ 768px — hero, nagłówki podstron, sekcja aktualności
   ============================================================ */
@media (max-width: 768px) {

    .news-sec .head {
        grid-template-columns: 1fr;
        row-gap: 1.4rem;
    }

    .hero-inner {
        min-height: auto;
        padding-top: 8rem;
    }

    /* Przyciski — mniejszy font i padding na wąskich ekranach */
    .btn {
        padding: .72rem 1.3rem;
        font-size: .9rem;
    }

    /* Szerokie tabele w treści — przewijanie zamiast rozpychania */
    .entry-content table {
        display: block;
        overflow-x: auto;
    }
}

/* ============================================================
   ≤ 576px — jedna kolumna, kompaktowy footer, galerie 1-kol.
   ============================================================ */
@media (max-width: 576px) {

    .counter .wrap,
    .srv-grid,
    .feat {
        grid-template-columns: 1fr;
    }

    .logos {
        grid-template-columns: repeat(2, 1fr);
    }

    .branches {
        grid-template-columns: 1fr;
    }

    .footer-grid {
        grid-template-columns: 1fr;
    }

    .footer-bottom {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }

    .footer-bottom .fb-copy,
    .footer-bottom .to-top {
        justify-self: center;
    }

    /* Social i „Rzetelna Firma" do lewej */
    .footer-socials {
        align-items: flex-start;
    }

    /* Badge Google na całą szerokość */
    .greview {
        width: 100%;
    }

    /* Serwis (CTA) jest w panelu — w pasku zbędny */
    .hero-header .btn-serwis {
        display: none;
    }

    /* Galerie treści → jedna kolumna */
    .entry-content .blocks-gallery-grid,
    .entry-content .wp-block-gallery.has-nested-images {
        column-count: 1;
    }

    /* Belka „Zobacz urządzenia" — pionowy stos: ikona → napis → strzałka */
    .item-cta {
        flex-direction: column;
        text-align: center;
    }

    /* Box „Zapytaj o wycenę" — treść nad przyciskiem, przycisk na pełną szerokość */
    .quote-cta {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }

    .quote-cta__desc {
        max-width: none;
    }

    .quote-cta__btn {
        justify-content: center;
    }

    /* Lightbox — strzałki bliżej krawędzi */
    .dejw-lb-prev {
        left: 1.5vw;
    }

    .dejw-lb-next {
        right: 1.5vw;
    }
}

/* ============================================================
   ≤ 480px — galeria urządzenia 1-kol., mniejsze nagłówki
   ============================================================ */
@media (max-width: 480px) {

    .item-gallery__grid {
        grid-template-columns: 1fr;
    }

    .hero-header .logo img {
        height: 32px;
    }

    .page-title h1 {
        font-size: clamp(1.9rem, 7vw, 2.3rem);
    }

    .btn {
        padding: .64rem 1.15rem;
        font-size: .86rem;
    }
}

/* ============================================================
   ≤ 340px — ekrany ultra-wąskie: dokręcenie odstępów
   ============================================================ */
@media (max-width: 340px) {

    .hero-header .logo img {
        height: 28px;
    }

    .hero-header .bar {
        gap: .5rem;
    }

    .stat-body {
        padding: 1.3rem 1.4rem;
    }

    .mobile-nav {
        padding: 1rem 1.1rem 1.6rem;
    }
}

/* ============================================================
   Dostępność — ograniczenie ruchu
   ============================================================ */
@media (prefers-reduced-motion: reduce) {

    * {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}

/* Listy wpisów — grid 3 → 2 → 1 */
@media (max-width: 991px) {
    .post-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .post-grid {
        grid-template-columns: 1fr;
    }
}

/* Parkomaty — siatka systemów 3 → 2 → 1 */
@media (max-width: 991px) {
    .park-systems__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .park-systems__grid {
        grid-template-columns: 1fr;
    }
}

/* Formularz serwisowy — pola 3 → 2 → 1 */
@media (max-width: 991px) {
    .form-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .form-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 991px) {
    .entry-content .wp-block-image.alignright,
    .entry-content .wp-block-image .alignright {
        float: none;
        margin: .5rem 0 .5rem;
    }

    .feat-band h2 {
        font-size: clamp(1.4rem, 4.6vw, 2rem);
    }

    .feat-band p {
        font-size: .88rem;
        margin-bottom: 1.6rem;
    }

    /* Boczny pasek serwisów tylko na desktopie — na mobile socials są w stopce. */
    .side-rail {
        display: none;
    }
}