/**
 * MCV ProTrust - strat responsive (Faza 4).
 *
 * Contine EXCLUSIV reguli sub 1025px. Designul desktop nu este atins.
 * Paginile Elementor 138 si 286 nu au fost editate: ajustarile lor se fac
 * doar de aici, prin clasele generate de Elementor.
 *
 * CSS-ul generat de Elementor se incarca dupa fisierele temei, deci regulile
 * care concureaza cu el au nevoie de !important.
 *
 * Rollback complet: sterge acest fisier si enqueue-ul 'mcv-responsive'.
 */

/* `body { overflow-x: clip }` a stat aici ca sa ascunda scroll-ul orizontal de
   ~15px produs de breakout-ul pe `100vw` al hero-ului. Scos pe 21.09.2026:
   breakout-ul nu mai foloseste unitati de fereastra, ci iese din padding-ul
   containerului (vezi `mcv-hero.css`), deci nu mai exista ce ascunde. Un
   `overflow-x` pe body ascunde si depasirile viitoare, care e mai bine sa se
   vada la audit. */

img {
    max-width: 100%;
}


/* ==================================================
   TABLETA + MOBIL  (<= 1024px)
   ================================================== */

@media (max-width: 1024px) {

    /* --- HERO pagini produs (138 / 286): inaltimea fixa de 1000px --- */
    #mcv-hero-zoom {
        min-height: clamp(480px, 70vh, 820px) !important;
        height: auto !important;
        padding: 40px 24px !important;
    }

    #mcv-hero-zoom h1 {
        max-width: 100% !important;
        margin-inline-end: 0 !important;
        margin-inline-start: 0 !important;
    }

    /* --- Randurile de 4 avantaje (138 / 286) --- */
    .e-04eb438,
    .e-477446bd-32fe7f6 {
        flex-wrap: wrap !important;
        gap: 30px 24px !important;
        padding-inline: 24px !important;
    }

    .e-04eb438 > *,
    .e-477446bd-32fe7f6 > * {
        width: calc(50% - 12px) !important;
    }

    /* --- Grile de carduri produs (138: 6 carduri / 286: 4 carduri) --- */
    .e-20a53aa,
    .e-a847f39 {
        flex-wrap: wrap !important;
        gap: 32px 24px !important;
        padding-inline: 24px !important;
    }

    .e-20a53aa > *,
    .e-a847f39 > * {
        width: calc(50% - 12px) !important;
    }

    .e-a847f39 img {
        width: 100% !important;
        max-width: 320px;
        height: auto;
    }

    /* --- Certificari & Testari (homepage) --- */
    .e-a597876 {
        flex-wrap: wrap !important;
        gap: 26px !important;
        padding-inline: 24px !important;
    }

    .e-a597876 > * {
        width: 100% !important;
        margin: 0 !important;
    }

    .e-29933e2 {
        justify-content: center !important;
        align-items: center !important;
        gap: 22px 28px !important;
    }

    /* --- Partenerii nostri (homepage) --- */
    .e-20fea6a-2d234ac {
        width: 100% !important;
        flex-wrap: wrap !important;
        gap: 26px !important;
        padding-inline: 24px !important;
    }

    .e-20fea6a-2d234ac > * {
        width: 100% !important;
    }

    .e-fd72ab1-07507a3 {
        justify-content: center !important;
        align-items: center !important;
        gap: 20px 28px !important;
    }

    /* Siglele au latimi fixe in px; le tinem in cadru */
    .e-29933e2 img,
    .e-fd72ab1-07507a3 img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* --- Catalog PDF: nu mai iese din ecran, inaltime proportionala --- */
    .elementor-element-2050560 > div {
        width: 100% !important;
        height: 78vh !important;
        min-height: 520px !important;
        left: auto !important;
        transform: none !important;
    }

    /* --- Footer: gap mai mic ca sa nu se stranga coloanele --- */
    .mcv-footer-inner {
        gap: 26px !important;
    }
}


/* ==================================================
   DOAR TABLETA  (768px - 1024px)
   ================================================== */

@media (min-width: 768px) and (max-width: 1024px) {

    /* HERO homepage: textul sa nu atinga marginile */
    .mcv-hero-content {
        max-width: min(720px, calc(100% - 96px));
    }

    /* Footer: 2 coloane in loc de 3 */
    .mcv-footer-inner {
        grid-template-columns: 1fr 1fr !important;
    }
}


/* ==================================================
   MOBIL  (<= 767px)
   ================================================== */

@media (max-width: 767px) {

    /* --- HERO pagini produs --- */
    #mcv-hero-zoom {
        min-height: clamp(420px, 62vh, 620px) !important;
        padding: 32px 20px !important;
    }

    #mcv-hero-zoom h1 {
        font-size: 32px !important;
        letter-spacing: .5px !important;
    }

    /* --- Toate randurile pe o coloana --- */
    .e-04eb438 > *,
    .e-477446bd-32fe7f6 > *,
    .e-20a53aa > *,
    .e-a847f39 > * {
        width: 100% !important;
    }

    .e-04eb438,
    .e-477446bd-32fe7f6,
    .e-20a53aa,
    .e-a847f39,
    .e-a597876,
    .e-20fea6a-2d234ac {
        padding-inline: 20px !important;
        gap: 26px !important;
    }

    /* Titluri de sectiune prea mari pe telefon */
    .e-3d32b16-4ab4a90,
    .e-f70c091-3e8246a,
    .e-7cbbf27-9f9ae8e,
    .e-1c339c91-58a5483 {
        font-size: 24px !important;
    }

    .e-15c1ee8-09a99c4,
    .e-4db76cd4-ce67bfb {
        font-size: 22px !important;
    }

    .e-5d79be5-135f5db,
    .e-42850b75-3ff3f62 {
        font-size: 20px !important;
    }

    /* Paragrafe cu max-width mare */
    .e-15e8637-402e2c9,
    .e-2ad4e3f-372acbd,
    .e-7ae3aec-e9b4911,
    .e-30bc6029-d599760 {
        padding-inline: 20px !important;
    }

    /* --- Sigle: randuri mai stranse pe telefon --- */
    .e-29933e2,
    .e-fd72ab1-07507a3 {
        gap: 18px 22px !important;
    }

    /* --- Catalog PDF --- */
    .elementor-element-2050560 > div {
        height: 70vh !important;
        min-height: 420px !important;
    }

    /* --- Harta de pe Contact ---
       Cei 300px se dau containerului, nu iframe-ului. Pusa pe iframe, regula
       batea inaltimea lui `.mcv-map` (280px din aspect-ratio si min-height) si
       harta iesea cu 20px in afara, taiata de `overflow: hidden`. Pe container,
       iframe-ul o umple exact, prin `height: 100%`, si nu mai ramane nimic
       taiat si nicio banda alba. */
    .elementor-element-2539cff .mcv-map {
        min-height: 300px !important;
    }

    /* --- Showroom: pastram proportia, dar nu sub o inaltime utila --- */
    .mcv-showroom {
        min-height: 230px;
    }
}