/* ============================================
   BDK Wheels Solutions S.R.L. - MOBILE ONLY
   Se aplica DOAR pe ecrane <= 768px
   ============================================ */

@media (max-width: 768px) {

    .container {
        padding: 0 20px;
    }

    /* Sectiuni: ierarhie sincronizata cu desktop (base.css: 100px pentru sectiuni
       majore). Pe mobile scalam proportional: 56px pentru sectiuni de conținut,
       40px pentru blocurile de carduri (de-ce, testimoniale - ca pe desktop).
       Benzi compacte (brands-strip, urgenta-banner) isi pastreaza padding-ul. */
    section {
        padding: 48px 0;
    }

    /* ========== BRANDURI ========== */
    .brands-strip {
        padding-left: 20px;
        padding-right: 20px;
    }
    .brands-message {
        margin-left: 4px;
        margin-right: 4px;
        padding-left: 8px;
        padding-right: 8px;
    }

    /* ========== FLOATING LABEL ========== */
    /* Eticheta "WhatsApp" face butonul sa depaseasca ecranul pe mobil.
       Pe mobil iconita e suficienta — eticheta se ascunde pe toate butoanele,
       INCLUSIV la extinderea la atingere (butonul creste la 118px, fara text). */
    .floating-stack .floating-label {
        display: none !important;
    }
    .floating-btn.apasat .floating-label {
        display: none !important;
    }

    /* ========== HERO ========== */
    /* Header fix masoara 112px pe mobil (sigla 56 + padding 24 sus/jos).
       Hero porneste la 128px ca titlul sa inceapa COMPLET sub bara de header. */
    .hero {
        padding: 128px 0 2rem;
        min-height: auto;
        height: auto;
        align-items: flex-start;
        justify-content: flex-start;
        display: flex;
        flex-direction: column;
    }

    /* Padding lateral unificat pe toate textele de pe mobil. */
    section > .container > *:not(.container) {
        padding-left: 4px;
        padding-right: 4px;
    }

    /* In hero: tot textul aliniat la aceeasi linie (fara padding suplimentar
       pe copii — altfel .hero-title-top/.hero-title-sub/.stat se decaleaza cu 4px
       fata de .hero-title/.hero-desc/.hero-stats).
       Specificitate marita (section.hero > .container.hero-content > *) ca sa
       bata regula de mai sus `section > .container > *:not(.container)`. */
    section.hero > .container.hero-content > *:not(.container) {
        padding-left: 0;
        padding-right: 0;
    }

    /* In sectiunile De ce / Ce facem / Preturi / Testimoniale / Contact:
       headerul aliniat la aceeasi linie cu cardurile (x=24, fara padding 4px).
       Specificitate marita ca sa bata regula de mai sus. */
    section > .container > .section-header {
        padding-left: 0;
        padding-right: 0;
    }
    section > .container > .de-ce-grid,
    section > .container > .servicii-grid {
        padding-left: 0;
        padding-right: 0;
    }
    .de-ce-card,
    .serviciu-card {
        padding-left: 20px;
        padding-right: 20px;
    }

    .hero-content { container-type: inline-size;
        position: static;
        max-width: 100%;
        width: 100%;
        padding: 0 20px;
        transform: none;
        text-align: left;
        box-sizing: border-box;
    }

    .hero-title {
        margin-bottom: 12px;
    }

    .hero-title-top {
        font-size: clamp(2.05rem, 12cqi, 2.9rem);
        letter-spacing: 1px;
        margin-bottom: 8px;
            word-break: keep-all;
        overflow-wrap: break-word;
        hyphens: none;
    }

    /* Banda de deplasare: latimea se seteaza din JS = latimea "VULCANIZARE" */
    .hero-title-main-wrap {
        display: block;
        position: relative;
        overflow: hidden;
        height: 1.2em;
        max-width: 100%;
    }

    .hero-title-main {
        display: inline-block;
        position: absolute;
        left: 0;
        top: 0;
        font-size: clamp(1.3rem, 8cqi, 1.8rem);
        letter-spacing: 0;
        white-space: nowrap;
        animation: slideText 4s ease-in-out infinite;
    }

    .hero-title-sub {
        font-size: 0.9rem;
        letter-spacing: 0.5px;
        margin-top: 6px;
    }

    .hero-desc {
        font-size: 0.95rem;
        margin-bottom: 16px;
        line-height: 1.5;
        max-width: 100%;
    }

    .hero-actions {
        flex-direction: column;
        gap: 8px;
        margin-bottom: 16px;
        width: 100%;
    }

    .hero-actions .btn {
        width: 100%;
        justify-content: center;
        padding: 12px 14px;
        font-size: 0.9rem;
    }

    .hero-stats {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

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

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

    .hero-scroll {
        display: none;
    }

    /* ========== HERO BG ========== */
    .hero-bg::before {
        background:
            radial-gradient(ellipse at 20% 50%, rgba(255,107,0,0.15) 0%, transparent 50%),
            radial-gradient(ellipse at 80% 20%, rgba(255,107,0,0.1) 0%, transparent 40%),
            radial-gradient(ellipse at 50% 80%, rgba(255,255,255,0.03) 0%, transparent 50%);
    }

    /* ========== NAV (hamburger) ========== */
    .nav {
        position: fixed;
        top: 72px;
        left: 0;
        right: 0;
        background: var(--navy);
        flex-direction: column;
        padding: 20px;
        gap: 16px;
        transform: translateY(-120%);
        opacity: 0;
        visibility: hidden;
        transition: var(--transition);
        border-bottom: 1px solid rgba(255,255,255,0.1);
        z-index: 999;
    }

    .nav.active {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
    }

    .nav-link {
        font-size: 1.1rem;
    }

    .nav-cta {
        font-size: 1.05rem;
    }

    /* Buton meniu — abordare A: navy opac + blur, identic cu header.scrolled,
       linii albe, colturi moi 10px ca restul butoanelor. Butonul dispare in
       header, ochiul vede doar cele 3 linii. Contrast linii: alb pe navy
       opac ~0.9 = 14.8:1 (depaseste WCAG AA 4.5:1). */
    .nav-toggle {
        display: flex;
        flex-direction: column;
        gap: 5px;
        padding: 12px;
        min-width: 44px;
        min-height: 44px;
        align-items: center;
        justify-content: center;
        background: var(--navy);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border: 1px solid rgba(255, 255, 255, 0.25);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        cursor: pointer;
        z-index: 1001;
        border-radius: 10px;
    }

    /* Peste hero (header transparent): butonul semi-transparent ca sa se
       vada fundalul prin el; blur pastreaza lizibilitatea liniilor albe.
       Dupa scroll, header primeste .scrolled (fundal navy) si butonul
       devine opac — regula de mai sus (specificitate egala, declarata dupa). */
    .header:not(.scrolled) .nav-toggle {
        background: rgba(10, 22, 40, 0.55);
    }

    .nav-toggle span {
        display: block;
        width: 26px;
        height: 3px;
        background: var(--white);
        transition: var(--transition);
    }

    .nav-toggle.active span:nth-child(1) {
        transform: rotate(45deg) translate(6px, 6px);
    }

    .nav-toggle.active span:nth-child(2) {
        opacity: 0;
    }

    .nav-toggle.active span:nth-child(3) {
        transform: rotate(-45deg) translate(6px, -6px);
    }

    /* ========== FLOATING STACK UNIFICAT ========== */
    /* Ancorat prin bottom: 148px din components.css (referinta: baza sagetii
       la 706px din 854px viewport mobil). Fara top, fara animatie. */
    .floating-stack {
        transform: none;
    }

    /* ========== SECTIONS ========== */
    .despre-inner {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .despre-features {
        grid-template-columns: 1fr;
    }

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

    .galerie-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }

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

    .zone-card {
        padding: 20px;
    }

    .zone-card h3 {
        font-size: 1.25rem;
    }

    .zone-card p {
        font-size: 1rem;
    }


    .preturi-single {
        max-width: 100%;
        margin: 0;
        padding: 20px 16px;
    }

    .preturi-table th,
    .preturi-table td {
        padding: 10px 8px;
        font-size: 0.9rem;
    }

    .section-title {
        font-size: clamp(1.7rem, 7vw, 2.3rem);
    }

    .section-sub {
        font-size: 1rem;
    }

    /* ========== BODY LOCK ========== */
    body.nav-locked {
        overflow: hidden;
    }
}

@media (max-width: 480px) {
    .hero-stats { flex-direction: column; align-items: flex-start; gap: 12px; }
}