/* (optioneel) fonts; weglaten als al geladen */
@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700;900&family=Fauna+One&display=swap');

/* ===== ML HOME HERO ===== */
.ml-home-hero {
    width: 100vw;
    margin-left: 50%;
    transform: translateX(-50%);
    position: relative;
    overflow: hidden;

    background-image: var(--hero-bg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    height: clamp(60vh, 46vh + 10vw, 88vh);
    min-height: 520px;
    max-height: 980px;

    /* default logo-breedtes (desktop) */
    --mark-w-min: 260px;
    --mark-w-ideal: 34vw;
    --mark-w-max: 720px;
}

/* extra top-ruimte zodat de fixed header niets overlapt */
.ml-home-hero--under-header {
    padding-top: var(--ml-header-h, 67px);
}

/* Groenige mist + verticale gradient */
.ml-home-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(55, 82, 72, 0.32);
    /* #375248 @ 32% */
}

.ml-home-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,
            rgba(55, 82, 72, 0.20) 0%,
            rgba(55, 82, 72, 0.18) 30%,
            rgba(55, 82, 72, 0.28) 65%,
            rgba(55, 82, 72, 0.36) 100%);
}

/* Inhoud centreren */
.ml-home-hero__inner {
    position: relative;
    z-index: 1;
    height: 100%;
    max-width: min(92vw, 1200px);
    margin: 0 auto;
    display: grid;
    place-items: center;
    text-align: center;
    padding: clamp(16px, 3vw, 32px);
    gap: clamp(8px, 2.2vw, 16px);
    /* compacter dan eerst */
}

/* Logo-wrapper */
.ml-home-hero__mark {
    display: grid;
    place-items: center;
}

/* Responsieve logo-breedte (min | ideaal | max) */
.ml-home-hero__logo {
    width: clamp(var(--mark-w-min), var(--mark-w-ideal), var(--mark-w-max));
    max-width: 100%;
    height: auto;
    display: block;
    filter: drop-shadow(0 4px 20px rgba(0, 0, 0, .35));
}

/* CTA-knop */
.ml-home-hero__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5em;
    padding: .85em 1.6em;
    border-radius: 999px;
    font-family: "Fauna One", serif;
    font-weight: 700;
    font-size: clamp(.95rem, 1vw + .5rem, 1.15rem);
    text-decoration: none;
    background: #fff;
    color: #2c3f38;
    border: 1px solid rgba(0, 0, 0, .08);
    box-shadow: 0 14px 30px rgba(0, 0, 0, .18);
    transition: transform .18s, box-shadow .18s, color .18s, background .18s, border-color .18s;
}

.ml-home-hero__cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .22);
    background: #f9faf9;
    border-color: rgba(0, 0, 0, .14);
}

/* 100vw-fix */
html,
body {
    overflow-x: hidden;
}

/* Tablet: logo groter + iets minder gap */
@media (max-width:980px) {
    .ml-home-hero {
        --ml-header-h: 60px;
        /* alleen als je mobiele header lager is */
        --mark-w-min: 300px;
        --mark-w-ideal: 46vw;
        --mark-w-max: 600px;
    }

    .ml-home-hero__inner {
        gap: clamp(8px, 1.8vh, 12px);
    }
}

/* Mobiel: logo flink groter + minimale tussenruimte */
@media (max-width:480px) {
    .ml-home-hero {
        --mark-w-min: 300px;
        --mark-w-ideal: 72vw;
        /* maak 78vw voor nóg groter */
        --mark-w-max: 560px;
    }

    .ml-home-hero__inner {
        gap: 10px;
    }
}