/* ============================================================================
   KLAAS PUUL - MOBILE OVERRIDES (≤ 1024px)
   Gebaseerd op Figma mobile design (390px canvas)
   
   Dit bestand overschrijft desktop styles voor tablet/mobile.
   Wordt geladen NA kp-sections.css, kp-header.css, kp-footer.css
   en kp-markets-stack.css zodat specificiteit klopt.
   ============================================================================ */

@media (max-width: 1024px) {

    /* ========================================================================
       HEADER / NAV — Figma mobile nav
       Glassmorphism bar: rgba(255,255,255,0.2), backdrop-filter blur(5px)
       Logo: 173×24px, padding 16px, burger + "Menu" tekst rechts
       ======================================================================== */

    /* Header bar */
    body.kp-transparent-header .site-header .inner {
        margin: 16px auto;
        padding: 0;
    }
    body.kp-transparent-header .site-header .header-container {
        max-width: calc(100% - 32px);
        padding: 16px;
        background: var(--color-primary, #0D1C38);
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
    }

    /* Logo smaller op mobile: max 42×42 */
    .site-logo {
        max-width: 42px;
        max-height: 42px;
        height: auto;
    }
    .site-logo img,
    .site-logo__img {
        max-width: 42px;
        max-height: 42px;
    }

    /* ── Mobile menu — Figma: dark blue fullscreen ── */
    body .mobile-menu .mobile-menu__header {
        background: #0D1C38;
        padding: 16px;
    }

    body .mobile-menu .mobile-menu-content {
        background: #0D1C38;
        width: 100%;
        max-width: 100vw;
    }
body .mobile-menu .mobile-nav-menu {
        padding: 0 1rem;
}
body.kp-transparent-header .site-header .header-container {
    margin: 0;
    max-width: 100%;
    min-height:72px;
}
body.kp-transparent-header .site-header .inner {
    margin:0;
}
    /* Menu items: white text, padding 14px 18px 12px */
    body .mobile-menu .mobile-nav-menu > li > a {
        color: #ffffff;
        padding: 14px 18px 12px;
        font-size: 16px;
        line-height: 150%;
        padding-top:1.375rem;
        padding-bottom:1.375rem;
    }

    /* Dividers: rgba(255,255,255,0.25) */
    body .mobile-menu .mobile-nav-menu > li + li::before {
        border-top-color: rgba(255, 255, 255, 0.25);
    }

    /* Close button: white */
    body .mobile-menu .mobile-menu__close,
    body .mobile-menu .mobile-menu__close-text,
    body .mobile-menu .mobile-menu__close-icon {
        color: #ffffff;
    }

    /* Logo in mobile menu: white */
    body .mobile-menu .mobile-menu__logo svg path,
    body .mobile-menu .mobile-menu__logo svg rect,
    body .mobile-menu .mobile-menu__logo svg polygon,
    body .mobile-menu .mobile-menu__logo svg circle,
    body .mobile-menu .mobile-menu__logo-svg path {
        fill: #ffffff;
    }
    body .mobile-menu .mobile-menu__logo-img {
        filter: brightness(0) invert(1);
    }

    /* Submenu panels: dark blue */
    body .mobile-submenu-panel {
        background: #0D1C38;
    }
    body .mobile-submenu-panel__back {
        color: #ffffff;
        font-weight: 700;
    }
    body .mobile-submenu-panel__back + .mobile-submenu-panel__divider {
        border-top-color: rgba(255, 255, 255, 0.25);
    }
    body .mobile-submenu-panel__list > li > a {
        color: #ffffff;
    }
    body .mobile-submenu-panel__list > li + li {
        border-top-color: rgba(255, 255, 255, 0.25);
    }

    /* Arrow icons in menu items: white */
    body .mobile-menu .mobile-nav-menu > li.menu-item-has-children > a::after {
        filter: brightness(0) invert(1);
    }


    /* ========================================================================
       HERO BANNER
       Figma: padding 40px 0 (NIET 16px — .inner zorgt al voor side padding)
       Titel: 28px / 140%
       Buttons: column layout, width: auto (breedte van langste button)
       ======================================================================== */
    .kp-hero-banner__content {
        padding: 40px 0;
    }

    .kp-hero-banner__title {
        font-size: 24px;
        line-height: 140%;
        margin-bottom: 24px;
    }

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

    /* Buttons: width auto, NIET full width */
    .kp-hero-banner__buttons .kp-btn {
        width: auto;
    }

    .kp-hero-banner__logo-bar {
        padding: 16px 0;
    }

    .kp-hero-banner__logo-strip {
        max-height: 60px;
    }


    /* ========================================================================
       SECTION LABEL
       Figma: padding 24px 16px, tekst 14px / 150% / medium (500)
       ======================================================================== */
    .kp-section-label {
        padding: 24px 0;
    }

    .kp-section-label__text {
        font-size: 16px;
        font-weight: 400;
    }


    /* ========================================================================
       TEKST + USP BLOKKEN
       Figma: vertical stack, gap 80px
       Titel: 48px / 120%, tekst: 18px / 150%
       USP items: padding-bottom 32px (Figma: gap 32px)
       Dividers: margin-bottom 32px
       Buttons: column, auto width
       ======================================================================== */
    .kp-text-usp__grid {
        flex-direction: column;
        gap: 80px;
    }

    .kp-text-usp__title {
        font-size: 48px;
        line-height: 120%;
    }

    .kp-text-usp__text {
        font-size: 18px;
        line-height: 150%;
    }

    .kp-text-usp__buttons {
        flex-direction: column;
        align-items: flex-start;
    }

    .kp-text-usp__buttons .kp-btn {
        width: auto;
    }

    .kp-text-usp__item {
        padding: 0 0 32px 0;
    }

    .kp-text-usp__divider {
        margin-bottom: 32px;
    }

    .kp-text-usp__item-title {
        font-size: 24px;
        line-height: 140%;
    }

    .kp-text-usp__item-text {
        font-size: 16px;
        line-height: 150%;
    }


    /* ========================================================================
       PRODUCT CARDS (SLIDER)
       Figma: 85% breedte per card, min 280px
       Card image: ~400px hoog bij 320px breed = aspect-ratio 1/1.25
       Title: 24px
       ======================================================================== */
    .kp-product-card {
        flex: 0 0 85%;
        min-width: 280px;
    }

    .kp-product-card__image {
        aspect-ratio: 1/1.25;
    }

    .kp-product-card__title {
        font-size: 24px;
    }

    .kp-product-cards__nav {
        margin-top: 40px;
    }


    /* ========================================================================
       ACCORDION RIJEN
       Figma: header column gap 40px, margin-bottom 40px
       Titel: 48px / 120%, intro: 18px / 150%, full width
       Item header: padding 24px 0
       Item title: 24px / 140%
       ======================================================================== */
    .kp-accordion-rows__header {
        flex-direction: column;
        gap: 40px;
        margin-bottom: 40px;
            align-items: flex-start;
    }

    .kp-accordion-rows__title {
        font-size: 48px;
        line-height: 120%;
    }

    .kp-accordion-rows__intro {
        font-size: 18px;
        width: 100%;
    }

    .kp-accordion-rows__item-header {
        padding: 24px 0;
    }

    .kp-accordion-rows__item-title {
        font-size: 24px;
        line-height: 140%;
        padding-right: 1rem;
    }


    /* ========================================================================
       MERKEN / BRAND CARDS
       Figma: vertical stack, gap 40px
       Image: ~420px hoog bij ~358px breed = aspect-ratio 1/1.17
       Title: 24px
       ======================================================================== */
    .kp-brand-cards__grid {
        flex-direction: column;
        gap: 40px;
    }

    .kp-brand-card {
        min-width: 100%;
    }

    .kp-brand-card__image {
        aspect-ratio: 1/1.17;
    }

    .kp-brand-card__title {
        font-size: 24px;
    }


    /* ========================================================================
       CONTACT CTA
       Figma: titel 48px / 120%, tekst 24px / 150%
       Padding: 80px 16px (via medium-padding utility)
       ======================================================================== */
    .kp-contact-cta__title {
        font-size: 40px;
        line-height: 120%;
    }

    .kp-contact-cta__text {
        font-size: 16px;
        line-height: 150%;
    }


    /* ========================================================================
       FULLSCREEN MARKETS (single slide fallback, niet de stack)
       Figma: vertical layout, sidebar verborgen
       Titel: 48px, tekst: 18px, grid: max 357×357
       ======================================================================== */
    .kp-fullscreen-markets__sidebar {
        display: none;
    }

    .kp-fullscreen-markets__content {
        flex-direction: column;
        padding: 80px 0;
        gap: 80px;
    }

    .kp-fullscreen-markets__title {
        font-size: 48px;
    }

    .kp-fullscreen-markets__text {
        font-size: 18px;
        max-width: 100%;
    }

    .kp-fullscreen-markets__right {
        flex: none;
        width: 100%;
        max-width: 357px;
        height: auto;
    }


    /* ========================================================================
       GLOBAL BUTTONS — niet full width op mobile
       ======================================================================== */
    .kp-btn {
        width: auto;
    }


    /* ========================================================================
       PADDING UTILITIES
       ======================================================================== */
    .small-padding  { padding-top: 2rem !important; padding-bottom: 2rem !important; }
    .medium-padding { padding-top: 4rem !important; padding-bottom: 4rem !important; }
    .large-padding  { padding-top: 4rem !important; padding-bottom: 4rem !important; }
    .xl-padding     { padding-top: 4rem !important; padding-bottom: 4rem !important; }


    /* ========================================================================
       FOOTER
       Figma: branding padding 80px 0 40px, tagline 40px
       Columns: vertical stack, gap 40px
       Bottom bar: vertical stack
       ======================================================================== */
    .kp-footer__branding {
        padding: 80px 0 40px;
    }

    .kp-footer__tagline {
        font-size: 40px;
    }

    .kp-footer__columns {
        flex-direction: column;
        gap: 0;
    }

    .kp-footer__col {
        width: 100%;
    }

    .kp-footer__bottom {
        flex-direction: column;
        gap: 8px;
            align-items: flex-start;
    }

    body .kp-hero-banner__bg::before,
body .kp-contact-cta::before,
body .kp-pd-cta-banner__bar::before {
        opacity: 0.06;
        mix-blend-mode: soft-light;
}
body .kp-section-label.bg-dark::before {
        display: none;
}
}