/* ============================================================
   MOBILE FIXES — 3d-archi.de
   Skonsolidowane poprawki mobilne
   ============================================================ */

/* 1. GLOBAL — blokowanie poziomego scrolla */
body {
    overflow-x: hidden;
}

/* 1b. CITY PAGES — sticky CTA zasłania dolną treść (ma ~50px) */
@media (max-width: 991px) {
    body.city-page {
        padding-bottom: 56px !important;
    }
}

/* 2. H2 DEKORACJA — linia 3000px może powodować overflow na mobile */
@media (max-width: 991px) {
    .h2-thin::after {
        display: none !important;
    }
}

/* 3. HEADER — logo za duże na mobile (82px → 50px) */
@media (max-width: 991px) {
    .header__logo {
        height: 50px !important;
    }
}

/* 4. HERO — padding-top żeby tekst nie nachodził na header */
@media (max-width: 991px) {
    /* Strona główna */
    body:not(.city-page) .firstSection__firstColumn {
        padding-top: 80px !important;
        padding-bottom: 30px !important;
    }
    /* Strony miejskie — więcej treści w hero, potrzeba więcej miejsca */
    body.city-page .firstSection__firstColumn {
        padding-top: 120px !important;
        padding-bottom: 40px !important;
    }
}

/* 5. HERO — ukrycie zielonych kapsułek na mobile */
@media (max-width: 991px) {
    .hero-badges {
        display: none !important;
    }
}

/* 6. NAGŁÓWEK "3D-VISUALISIERUNG FÜR BAUTRÄGER" — istniejące style nadają
   display:flex + flex:0 0 auto na span, co blokuje zawijanie tekstu na mobile */
@media (max-width: 767px) {
    .company-info-box h2 {
        display: block !important;
        font-size: 20px !important;
        line-height: 1.3 !important;
        text-align: left !important;
        margin-bottom: 20px !important;
        white-space: normal !important;
    }
    .company-info-box h2 span {
        display: inline !important;
        flex: unset !important;
        font-size: 20px !important;
        white-space: normal !important;
        font-weight: 300 !important;
    }
}

/* 7. NORMALIZACJA BOCZNYCH PADDINGÓW — wyrównanie wszystkich sekcji do 20px */
@media (max-width: 767px) {
    /* __firstContainer — istniejące style ustawiają 40px, redukujemy boki do 20px */
    .fourthSection__firstContainer,
    .fifthSection__firstContainer,
    .seventhSection__firstContainer,
    .eighthSection__firstContainer,
    .ninthSection__firstContainer {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    /* Bootstrap .container — wyrównanie do 20px (tylko strona główna) */
    body:not(.city-page) .site-content .container {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}

/* 8. SEKCJA COMPANY INFO (biała karta) — padding i marginesy */
@media (max-width: 767px) {
    .section-company-info {
        padding: 32px 0 !important;
    }
    .company-info-box {
        padding: 28px 20px !important;
        border-radius: 8px !important;
        margin: 0 !important;
    }
}

/* 9. SEKCJA HAFTUNG — pionowe paddingi */
@media (max-width: 767px) {
    .section-haftung {
        padding: 40px 0 !important;
    }
}

/* 10. SEKCJA NO-AI — pionowe paddingi i CTA box */
@media (max-width: 767px) {
    .section-noai {
        padding: 40px 0 !important;
    }
    .section-noai > .container > div:last-child {
        padding: 24px 20px !important;
    }
}

/* 11. SEKCJA SOCIAL PROOF + FAQ */
@media (max-width: 767px) {
    .section-social-proof {
        padding: 40px 0 !important;
    }
    .section-social-proof details {
        padding: 16px !important;
    }
}

/* 12. PRICING — padding na bardzo małych ekranach */
@media (max-width: 575px) {
    .developerIntro__inner {
        padding: 0 16px !important;
    }
    .dynamic-pricing {
        margin: 16px 0 0 !important;
        padding: 20px 12px !important;
    }
}

/* 13. UNSERE SPEZIALISIERUNG — fixed height 145px przycina nagłówki na mobile */
@media (max-width: 767px) {
    .fourthSection__swiper .swiper-slide__bottomSection {
        height: auto !important;
        min-height: 80px !important;
        padding: 14px 12px !important;
    }
    /* Długie słowa (3D-INNENVISUALISIERUNGEN itp.) — html[lang="de"] = hyphens działa */
    .fourthSection__swiper .swiper-slide__bottomSection h5 {
        overflow-wrap: break-word !important;
        word-break: break-word !important;
        hyphens: auto !important;
    }
}

/* 14. HOW WE WORK SWIPER — slajdy bez bocznych paddingów */
@media (max-width: 991px) {
    .seventhSection .swiper-slide {
        padding-left: 24px !important;
        padding-right: 24px !important;
        padding-bottom: 28px !important;
    }
}

/* 14. SECONDSECTION — text-align: right wygląda źle na mobile */
@media (max-width: 991px) {
    .secondSection .text-padding p {
        text-align: center !important;
    }
}

/* 14. CITIES SECTION — grid 1-kolumnowy na mobile */
@media (max-width: 767px) {
    .cities-section__grid {
        grid-template-columns: 1fr !important;
    }
    .cities-section__faq {
        grid-template-columns: 1fr !important;
        margin-top: 24px !important;
    }
}

/* 15. FOOTER — layout na mobile */
@media (max-width: 767px) {
    .footer__body {
        flex-direction: column !important;
    }
    .footer__body__firstContainer,
    .footer__body__secondContainer {
        width: 100% !important;
        padding: 30px 20px !important;
    }
    .footer__bottom-bar {
        flex-direction: column !important;
        gap: 12px !important;
        text-align: center !important;
    }
    .footer__bottom-links {
        flex-wrap: wrap !important;
        justify-content: center !important;
    }
}

/* 16. CITY PAGES — data-table-report: poziomy scroll zamiast stacked cards */
@media (max-width: 768px) {
    .table-responsive {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    /* Reset stacked table pattern — wyższy specificity niż inline style city pages */
    body.city-page .data-table-report,
    body.city-page .makieta-table {
        display: table !important;
        width: auto !important;
        min-width: 480px !important;
        border-collapse: separate !important;
        border-spacing: 0 !important;
        background: #fff !important;
        box-shadow: 0 10px 30px rgba(0,0,0,0.05) !important;
    }
    body.city-page .data-table-report thead,
    body.city-page .makieta-table thead {
        display: table-header-group !important;
        position: static !important;
        top: auto !important;
        left: auto !important;
    }
    body.city-page .data-table-report tbody,
    body.city-page .makieta-table tbody {
        display: table-row-group !important;
    }
    body.city-page .data-table-report tr,
    body.city-page .makieta-table tr {
        display: table-row !important;
        background: transparent !important;
        border: none !important;
        margin-bottom: 0 !important;
        border-radius: 0 !important;
        overflow: visible !important;
        box-shadow: none !important;
    }
    body.city-page .data-table-report th,
    body.city-page .makieta-table th,
    body.city-page .data-table-report td,
    body.city-page .makieta-table td {
        display: table-cell !important;
        width: auto !important;
        text-align: left !important;
        padding: 12px 16px !important;
        font-size: 13px !important;
        border-bottom: 1px solid #f0f0f0 !important;
    }
    body.city-page .data-table-report td::before,
    body.city-page .makieta-table td::before {
        content: none !important;
        display: none !important;
    }
}

/* 17b. CITY PAGES — ciemne sekcje: kontener bez bocznych paddingów (pełna szerokość) */
@media (max-width: 767px) {
    /* Boczny padding kontenerów w sekcji compliance */
    body.city-page #raport .container {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    /* guarantee-box — pionowe i boczne paddingi zredukowane na mobile */
    body.city-page .guarantee-box {
        padding: 36px 20px !important;
    }
}

/* 17. CITY PAGES — sekcje bez redukcji paddingu na mobile */
@media (max-width: 767px) {
    body.city-page section[style*="padding: 100px"],
    body.city-page section[style*="padding:100px"],
    body.city-page section[style*="padding: 90px"],
    body.city-page section[style*="padding: 80px"],
    body.city-page section[style*="padding: 110px"] {
        padding-top: 48px !important;
        padding-bottom: 48px !important;
    }
    /* guarantee-box — boczne paddingi za duże na 320px */
    body.city-page .guarantee-box {
        padding: 40px 24px !important;
    }
    /* hero badge — inline-flex na 320px wylewa */
    body.city-page .text-div > div[style*="inline-flex"] {
        display: flex !important;
        flex-wrap: wrap !important;
        font-size: 10px !important;
        letter-spacing: 0.5px !important;
        padding: 5px 10px !important;
    }
    body.city-page .text-div > div[style*="inline-flex"] span {
        font-size: 10px !important;
        letter-spacing: 0.5px !important;
    }
    /* h4 nagłówek hero — uppercase + letter-spacing może wylewać */
    body.city-page .text-div h4 {
        font-size: 10px !important;
        letter-spacing: 1px !important;
        white-space: normal !important;
        word-break: break-word !important;
    }
    /* image-constrained — kwadrat za duży, aspect 4:3 zajmuje za dużo miejsca */
    body.city-page .image-constrained {
        max-width: 100% !important;
        aspect-ratio: 16 / 9 !important;
    }
}