/* ============================================================================
   mobile-match.css — mobiel laten aansluiten op het desktopontwerp

   Doel: op telefoon dezelfde vormtaal als op desktop (zelfde accenten,
   uitlijning, kleuren en ritme), alleen kleiner geschaald. Geen eigen
   "mobiele variant" van componenten meer.

   Alles hieronder staat in een max-width media query en wordt als laatste
   stylesheet ingeladen: het desktopontwerp blijft onaangeroerd.
   ========================================================================= */

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

    /* --------------------------------------------------------------------
       1 · Stat-strip (Kwaliteit & Service)

       Desktop: open rijen met een dunne bovenlijn en een kort groen streepje
       linksboven. Mobiel was hier een witte kaart met verticale balkjes van
       gemaakt — een compleet ander component. Terug naar de desktopvorm,
       onder elkaar gestapeld.
       ----------------------------------------------------------------- */
    .quality-metrics {
        width: 100% !important;
        max-width: none !important;
        margin: 2rem 0 0 !important;
        padding: 0 !important;
        gap: 1.65rem !important;
        background: none !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    .quality-metrics article {
        display: block !important;
        min-height: 0 !important;
        padding: 1.15rem 0 0 !important;
        border-top: 1px solid rgba(31, 48, 38, 0.16) !important;
        border-bottom: 0 !important;
    }

    /* het korte groene streepje weer horizontaal op de bovenlijn */
    .quality-metrics article::before {
        top: -2px !important;
        left: 0 !important;
        width: 48px !important;
        height: 3px !important;
        transform: none !important;
        border-radius: 0 !important;
    }

    .quality-metrics strong {
        margin-bottom: 0.3rem !important;
    }

    .quality-metrics span:last-child {
        font-size: 0.95rem !important;
        line-height: 1.45 !important;
    }

    /* --------------------------------------------------------------------
       2 · Eén koptekstschaal voor de hele pagina

       De site heeft al een gedeelde maat (--section-title-size). Media en
       Onze Regio's liepen daar met een eigen clamp omheen en werden een paar
       pixels groter dan de rest. Terug naar de gedeelde maat, zodat elke H2
       op elk toestel gelijk meeschaalt.
       ----------------------------------------------------------------- */
    .home-page .story-sections .section-header h2,
    .home-page .team-section .section-header h2 {
        font-size: var(--section-title-size) !important;
        line-height: 1.16;
        letter-spacing: -0.012em;
    }

    /* --------------------------------------------------------------------
       3 · Opsomming "Nova Green Plants"

       Desktop zet deze punten in de donkere inktkleur; mobiel maakte er
       lichtgrijze bijtekst van, waardoor de sectie slap werd.
       ----------------------------------------------------------------- */
    .features li {
        color: var(--ink, #1e2c23) !important;
    }

    /* --------------------------------------------------------------------
       4 · Sectiekoppen links uitlijnen, net als op desktop

       Alle koppen stonden al links, behalve die van het teamblok — die viel
       daardoor uit de toon.
       ----------------------------------------------------------------- */
    .home-page #team .section-header,
    .team-section .section-header {
        text-align: left;
        margin-left: 0;
        margin-right: auto;
    }

    .home-page #team .story-kicker {
        justify-content: flex-start;
    }

    .home-page #team .section-header h2::after {
        margin-left: 0;
        margin-right: auto;
    }

    .team-section .section-header p {
        margin-left: 0;
        margin-right: auto;
    }

    /* --------------------------------------------------------------------
       5 · Footer

       Mobiel was de footer een eigen ontwerp geworden: bijna zwarte laag over
       de foto, grote witte koppen zonder kapitalen, alles gecentreerd.
       Desktop gebruikt de foto met een dunne sluier, groene kapitaalkoppen en
       links uitgelijnde kolommen. Dat is nu ook de mobiele vorm — alleen
       onder elkaar in plaats van naast elkaar.
       ----------------------------------------------------------------- */
    .footer-section {
        background:
            linear-gradient(180deg, rgba(8, 22, 14, 0.12), rgba(8, 22, 14, 0.12)),
            url('../img/backgrounds/bladeren-donker-footer.jpg') center / cover no-repeat !important;
        color: #d7ded3;
    }

    /* Het "Nova Green Plants"-watermerk blijft uit op telefoon: op deze breedte
       valt er nog maar een halve lettergreep in beeld en dat leest als ruis. */

    .footer-content {
        justify-items: start !important;
        text-align: left !important;
    }

    .footer-col {
        text-align: left !important;
    }

    .footer-about {
        align-items: flex-start !important;
    }

    .footer-logo {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .footer-about p {
        margin-left: 0 !important;
        margin-right: 0 !important;
        color: #d7ded3;
    }

    .footer-col h3 {
        margin-bottom: 1.1rem !important;
        color: #8dcc72 !important;
        font-size: 1.25rem !important;
        font-weight: 700;
        letter-spacing: 0.015em !important;
        text-transform: uppercase !important;
    }

    .footer-contact-note {
        margin-left: 0 !important;
        margin-right: 0 !important;
        color: rgba(215, 222, 211, 0.72);
    }

    .footer-contact ul,
    .footer-contact-list,
    .footer-quick ul {
        justify-items: start !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .footer-col li,
    .footer-contact li:first-child {
        color: #d7ded3;
    }

    .footer-quick a {
        color: #d7ded3 !important;
    }

    .footer-contact-link {
        justify-content: flex-start;
        color: #ffffff !important;
    }

    .footer-bottom {
        margin-left: 0 !important;
        margin-right: 0 !important;
        text-align: left;
    }

    .footer-bottom p {
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* --------------------------------------------------------------------
       5b · Mobiele uitsnede van de sfeerfoto

       Veranker de blaadjes links, zodat ze op smalle schermen zichtbaar zijn.
       ----------------------------------------------------------------- */
    .welcome-section {
        /* De sluier liep op desktop maar over de bovenste 150px; daaronder is de
           foto daar bleek genoeg. Op telefoon wordt dezelfde foto ruim drie keer
           zo groot uitvergroot, dus daar loopt de sluier over de hele sectie —
           anders vechten de blaadjes met de cijfers. */
        background-image:
            linear-gradient(180deg,
                rgb(255, 254, 250) 0%,
                rgba(255, 254, 250, 0.95) 16%,
                rgba(255, 254, 250, 0.72) 40%,
                rgba(255, 254, 250, 0.66) 100%),
            url('../img/backgrounds/bladeren-licht-kwaliteit-service.jpg') !important;
        background-size: 100% 100%, cover !important;
        background-position: 50% 0%, 0% 45% !important;
        background-repeat: no-repeat, no-repeat !important;
    }

    /* --------------------------------------------------------------------
       5c · Onderbalk footer op dezelfde breedte als de kolommen

       De balk met het copyright was 340px breed tegen 351px voor de kolommen
       erboven, en stond daardoor 11px uit het lood (19,5px links, 30,5px
       rechts). De streep erboven liep dus niet gelijk met de inhoud.
       ----------------------------------------------------------------- */
    .footer-bottom {
        width: 100% !important;
        max-width: none !important;
    }

    /* De twee blokken met een scheidingslijn kregen 36px en 33,6px ruimte boven
       hun kop. Gelijk getrokken, zodat de lijnen hetzelfde ademen. */
    .footer-contact,
    .footer-quick {
        padding-top: 2.25rem !important;
    }

    /* "T:" en "E:" zijn niet even breed, waardoor het telefoonnummer en het
       e-mailadres 0,3px uit elkaar liepen. Vaste labelbreedte lijnt de waarden
       netjes onder elkaar uit. */
    .footer-contact-label {
        flex: 0 0 1rem;
        min-width: 1rem;
    }

    /* Op desktop staat het copyright gecentreerd onder drie kolommen; daar
       klopt dat. Mobiel is de footer één linkslijnende kolom, dus centreren
       leest daar als een slordigheid. */
    .footer-bottom,
    .footer-bottom p {
        text-align: left !important;
    }

    .footer-bottom p {
        display: block !important;
    }

    /* De links onder "Snel naar" hadden mobiel 8,8px padding-links, waardoor ze
       ingesprongen stonden ten opzichte van de kop en de rest van de footer.
       Op desktop is die padding 0 en lijnen ze exact uit. */
    .footer-quick a {
        padding-left: 0 !important;
    }

    /* Drie verschillende regelbreedtes (351, 315 en 285px) gaven de footer drie
       verschillende rechterranden. Alles op de kolombreedte, zodat de tekst
       links én rechts op dezelfde lijn eindigt als de rest. */
    .footer-about p,
    .footer-contact-note {
        max-width: none !important;
    }

    /* De contactregels stonden 64,5px uit elkaar tegen 56,5px voor de
       snelkoppelingen. Oorzaak: de contactlink heeft een marge van 8px onder
       zich, bovenop de 12,5px die het lijstje zelf al als tussenruimte geeft.
       Marge eruit; beide lijstjes lopen nu in hetzelfde ritme. */
    .footer-contact-list li {
        display: flex;
        align-items: center;
    }

    .footer-contact-list .footer-contact-link {
        margin-bottom: 0 !important;
    }

    /* Alle drie de scheidingslijnen dezelfde aanloop en dezelfde uitloop:
       de blokken onderling stonden op 42px, maar de laatste lijn kreeg er 21
       boven en 20 onder. Nu overal 42px erboven en 36px eronder. */
    .footer-content {
        margin-bottom: 2.65rem !important;
    }

    .footer-bottom {
        padding-top: 2.25rem !important;
    }

    /* --------------------------------------------------------------------
       5d · Verticaal ritme gelijk

       De vier verhaalsecties staan op 56px boven en onder. "Nova Green Plants"
       week af met 54 boven en 70 onder, waardoor de afstand tussen de blokken
       zichtbaar ongelijk werd.
       ----------------------------------------------------------------- */
    .about-section {
        padding-top: 3.5rem !important;
        padding-bottom: 3.5rem !important;
    }

    /* --------------------------------------------------------------------
       6 · Scroll-reveal ook op mobiel

       Op desktop komen blokken rustig in beeld; mobiel stond dat helemaal uit,
       waardoor de pagina statisch aanvoelde. Weer aan, maar zonder de dure
       blur-filter: alleen opacity en een kleine verschuiving.
       ----------------------------------------------------------------- */
    body.motion-ready .reveal {
        opacity: 0 !important;
        filter: none !important;
        transform: translate3d(0, 14px, 0) !important;
        transition:
            opacity 520ms cubic-bezier(0.22, 1, 0.36, 1),
            transform 520ms cubic-bezier(0.22, 1, 0.36, 1) !important;
        transition-delay: var(--reveal-delay, 0ms) !important;
        will-change: opacity, transform !important;
    }

    body.motion-ready .reveal.active {
        opacity: 1 !important;
        transform: translate3d(0, 0, 0) !important;
    }
}

/* ============================================================================
   7 · Hero

   Op desktop is de hero één beeld met de tekst eroverheen. Op telefoon was het
   uit elkaar getrokken: een donkergroen tekstblok bovenin en de foto los
   eronder — een andere opzet, geen kleinere versie.

   Hieronder staat de foto weer als volledige achtergrond met de kop erop, net
   als op desktop. De schaduw loopt op deze breedte van boven naar beneden in
   plaats van van links naar rechts, zodat de kop leesbaar blijft en de
   vrachtwagen onderin vrij in beeld staat.

   Bewust op max-width 700px: dat is precies het bereik waar de gesplitste
   opzet leefde, zodat tablets (701–768px) de desktophero houden.
   ========================================================================= */
@media screen and (max-width: 700px) {
    #home {
        --hero-wave-height: 62px;

        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        min-height: 540px !important;
        height: calc(100svh - 78px) !important;
        max-height: 570px;
        padding: 1.5rem var(--mobile-edge, 1.25rem)
                 calc(var(--hero-wave-height) + 0.75rem) !important;
        overflow: hidden;
    }

    /* foto terug als volledige achtergrond in plaats van een los blok eronder */
    #home .hero-slider {
        order: 0;
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        aspect-ratio: auto;
        flex: none;
        z-index: 0;
        overflow: hidden;
    }

    #home .hero-photo {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        /* Staande uitsnede: opschuiven naar de cabine, zodat de vrachtwagen
           herkenbaar blijft in plaats van een witte trailerzijkant. */
        object-position: 90% 55%;
    }

    /* leesvlak verdonkeren zonder de vrachtwagen dicht te gooien */
    #home .hero-overlay {
        display: block;
        position: absolute;
        inset: 0;
        z-index: 3;
        background: linear-gradient(180deg,
            rgba(8, 25, 15, 0.55) 0%,
            rgba(8, 25, 15, 0.76) 28%,
            rgba(8, 25, 15, 0.72) 56%,
            rgba(8, 25, 15, 0.34) 80%,
            rgba(8, 25, 15, 0.40) 100%);
        pointer-events: none;
    }

    #home .hero-content {
        order: 0;
        position: relative;
        z-index: 4;
        width: 100%;
        max-width: 440px;
        margin: 0;
        padding: 0 !important;
    }

    #home .hero-content h1 {
        font-size: clamp(2.1rem, 10.4vw, 3.1rem) !important;
        line-height: 1.07 !important;
        margin-bottom: 1.15rem;
    }

    #home .hero-content p {
        max-width: 24em;
        margin-bottom: 1.5rem;
        font-size: 1.02rem !important;
        line-height: 1.5;
        /* Zonder dit brak de zin af als "...strak op / de route." — een tweede
           regel van twee woorden. Balance verdeelt de twee regels gelijk. */
        text-wrap: balance;
    }
}

/* ============================================================================
   8 · WhatsApp-tekstwolkje

   style.css zette `.whatsapp-badge { display: none !important }` voor élk
   aanraakscherm — bedoeld om de kaartlabels op de contactpagina vrij te
   houden, maar het sloopte het wolkje op de hele site. Op de contactpagina
   is de knop zelf al verborgen, dus die uitzondering is niet meer nodig.

   Het tonen zelf blijft aan de bestaande logica in main.js: het wolkje
   verschijnt pas na ~420px scrollen, via .show-badge + data-badge-ready.
   ========================================================================= */
@media (max-width: 768px), (pointer: coarse) {
    .whatsapp-badge {
        display: block !important;
    }

    body:has(.contact-page-section) .whatsapp-badge {
        display: none !important;
    }
}

/* Wie beweging uitzet, krijgt gewoon de eindtoestand. */
@media screen and (max-width: 768px) and (prefers-reduced-motion: reduce) {
    body.motion-ready .reveal,
    body.motion-ready .reveal.active {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}