/* ============================================================================
   KLAAS PUUL - FLUID DESKTOP OVERRIDES (1025px – 1825px)
   
   Boven 1825px werkt het bestaande systeem (inner-breed max-width 1752px
   + 16px padding + auto-margins) al perfect. Deze overrides gelden
   ALLEEN voor het medium-desktop bereik waar de viewport kleiner is
   dan de inner-breed max-width en de content anders tegen de randen plakt.
   
   Aanpak:
   inner-breed secties krijgen max-width: 1920px + fluid padding (5.208vw).
   De padding neemt de rol over van de auto-margin die op grote schermen
   de witruimte creëert. Op deze manier schaalt de witruimte proportioneel
   mee met de viewport in plaats van vast te staan op 50px.
   
   Figma referentie (1920px canvas):
   - Effectieve witruimte: 100px per kant = 5.208%
   - Content area: 1720px
   ============================================================================ */

@media (min-width: 1025px) and (max-width: 1825px) {

    /* -- Fluid CSS variabelen -- */
    :root {
        /* Gap voor twee-koloms layouts (text-usp, accordion header).
           Figma: 200px gap op 1720px content ≈ 10.42vw */
        --kp-content-gap: clamp(80px, 10.42vw, 200px);
    }


    /* ========================================================================
       INNER-BREED: fluid container
       
       Viewport    Padding    Content     Rand per kant
       1025px      48px       929px       48px  (4.7%)
       1200px      67px       1066px      67px  (5.6%)
       1440px      80px       1280px      80px  (5.6%)
       1600px      89px       1422px      89px  (5.6%)
       1700px      94px       1512px      94px  (5.6%)
       1825px      100px      1625px      100px (5.5%)
       ======================================================================== */

    .inner-breed.inner-breed .inner {
        max-width: 1920px;
        padding-left: clamp(48px, 5.556vw, 100px);
        padding-right: clamp(48px, 5.556vw, 100px);
    }


    /* Inner-groot: bewust breder. Milde fluid padding zodat
       het op medium viewports niet tegen de rand plakt. */
    .inner-groot .inner {
        padding-left: clamp(16px, 2.6vw, 48px);
        padding-right: clamp(16px, 2.6vw, 48px);
    }


    /* Fullwidth image: fluid padding consistent met inner-breed */
    body .kp-fullwidth-image .inner {
        max-width: 116rem;
        padding-left: clamp(16px, 2.6vw, 48px);
        padding-right: clamp(16px, 2.6vw, 48px);
    }


    /* XL padding — fluid verticaal */
    body .xl-padding {
        padding-top: clamp(100px, 8.33vw, 160px);
        padding-bottom: clamp(100px, 8.33vw, 160px);
    }


    /* Footer — mild fluid */
    body .kp-footer .inner {
        padding-left: clamp(24px, 3vw, 50px);
        padding-right: clamp(24px, 3vw, 50px);
    }


    /* ========================================================================
       HERO BANNER
       ======================================================================== */

    /* Hero compact: override the 80px 16px shorthand (specificity 0,4,0)
       so the fluid side padding from .inner-breed.inner-breed .inner applies */
    body .site .kp-hero-banner.hero-compact .kp-hero-banner__content .inner {
        padding-left: clamp(48px, 5.556vw, 100px);
        padding-right: clamp(48px, 5.556vw, 100px);
    }


    /* ========================================================================
       SECTION LABELS
       ======================================================================== */

    body .site .kp-section-label {
        padding: 48px 0;
    }


    /* ========================================================================
       TEKST + USP — font sizes nu fluid in kp-sections.css
       ======================================================================== */


    /* ========================================================================
       FULLSCREEN MARKETS (single slide)
       ======================================================================== */

    body .site .kp-fullscreen-markets__content {
        padding: 0 clamp(80px, 10.42vw, 200px);
    }

    body .site .kp-fullscreen-markets__right {
        flex: 0 0 clamp(380px, 30.2vw, 600px);
        height: clamp(380px, 30.2vw, 600px);
    }


    /* ========================================================================
       MARKETS STACK — sidebar
       ======================================================================== */

    body .site .kp-markets-stack__sidebar-inner {
        height: clamp(60px, 4.167vw, 80px);
    }


    /* ========================================================================
       ACCORDION — font sizes nu fluid in kp-sections.css
       ======================================================================== */


    /* ========================================================================
       BRAND CARDS
       ======================================================================== */

    body .site .kp-brand-cards__grid {
        gap: 16px;
    }

    /* Brand slider nav fluid spacing */
    body .site .kp-brand-cards__nav {
        margin-top: clamp(24px, 2.5vw, 40px);
    }


    /* ========================================================================
       PRODUCT CARDS — font sizes nu fluid in kp-sections.css
       ======================================================================== */


    /* ========================================================================
       CONTACT CTA — font sizes nu fluid in kp-sections.css
       ======================================================================== */


    /* ========================================================================
       FOOTER — tagline font size nu in kp-footer.css of apart
       ======================================================================== */
}


/* ============================================================================
   LAPTOPS MET WEINIG HOOGTE
   ============================================================================ */

@media (min-width: 1025px) and (max-height: 800px) {
    body .site .kp-markets-stack__grid {
        width: clamp(280px, 50vh, 450px);
        height: clamp(280px, 50vh, 450px);
    }
}