/* =============================================================
   Hero — .hero-graesmarken
   Full-viewport hero med baggrundsbillede, eyebrow + H1,
   og organisk bølge-overgang i bunden.

   Bølgen sidder INDE i hero-sektionen, absolut positioneret
   i bunden med z-index over billede og overlay. Den stikker
   ud nedenfor sektionen — overflow er visible.
   ============================================================= */


/* ---- Hero-sektion ---- */

.hero-graesmarken {
    position: relative;
    width: 100%;
    /* Bevidst fast floor: sikrer at en full-viewport hero (height:100vh) aldrig
       bliver lavere end 560px på korte viewports (fx landskab på mobil). */
    min-height: 560px;
    height: 100vh;
    overflow: visible;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background-color: var(--color-green-900);
}


/* ---- Baggrundsbillede ---- */

.hero-graesmarken__bg {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
}

.hero-graesmarken__bg img,
.hero-graesmarken__video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* ---- Overlay — tre styrker ---- */

.hero-graesmarken__overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
}

/* Overlay-gradienterne bruger color-mix(in srgb, --color-green-900 …) så de
   følger paletten (samme grøn som tidligere rgba(26,42,32,…)) uden drift.
   srgb (ikke oklab) bevarer det nøjagtige udseende fra den oprindelige rgba. */
.hero-graesmarken__overlay--light {
    background: linear-gradient(
        to bottom,
        color-mix(in srgb, var(--color-green-900) 3%, transparent) 0%,
        color-mix(in srgb, var(--color-green-900) 2%, transparent) 40%,
        color-mix(in srgb, var(--color-green-900) 25%, transparent) 70%,
        color-mix(in srgb, var(--color-green-900) 55%, transparent) 100%
    );
}

.hero-graesmarken__overlay--medium {
    background: linear-gradient(
        to bottom,
        color-mix(in srgb, var(--color-green-900) 6%, transparent) 0%,
        color-mix(in srgb, var(--color-green-900) 4%, transparent) 40%,
        color-mix(in srgb, var(--color-green-900) 35%, transparent) 68%,
        color-mix(in srgb, var(--color-green-900) 72%, transparent) 100%
    );
}

.hero-graesmarken__overlay--strong {
    background: linear-gradient(
        to bottom,
        color-mix(in srgb, var(--color-green-900) 10%, transparent) 0%,
        color-mix(in srgb, var(--color-green-900) 8%, transparent) 40%,
        color-mix(in srgb, var(--color-green-900) 50%, transparent) 68%,
        color-mix(in srgb, var(--color-green-900) 85%, transparent) 100%
    );
}


/* ---- Indhold ---- */

.hero-graesmarken__content {
    position: relative;
    z-index: 3;
    padding-bottom: clamp(4rem, 8vh, 7rem);
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.hero-graesmarken__eyebrow {
    font-family: var(--font-body);
    font-size: var(--fs-accent);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-accent);
    text-transform: uppercase;
    color: var(--color-green-100);
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
}

.hero-graesmarken__eyebrow::before {
    content: "";
    display: inline-block;
    width: 1.75rem;
    height: 2px;
    background: var(--color-green-300);
}

.hero-graesmarken__title {
    font-family: var(--font-heading);
    font-size: var(--fs-h1);
    line-height: var(--lh-h1);
    letter-spacing: var(--ls-h1);
    font-weight: var(--fw-semibold);
    color: var(--color-paper);
    margin: 0;
    max-width: 16ch;
    text-wrap: balance;
    text-shadow: 0 2px 24px color-mix(in srgb, var(--color-green-900) 35%, transparent);
}

.hero-graesmarken__title em {
    font-style: italic;
    font-weight: var(--fw-regular);
    color: var(--color-green-100);
}

/* ---- Brødtekst (valgfri) ---- */
.hero-graesmarken__body {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--color-paper);
    margin: 0;
    max-width: 48ch;
    text-wrap: pretty;
    text-shadow: 0 1px 16px color-mix(in srgb, var(--color-green-900) 30%, transparent);
}

/* ---- CTA (valgfri) ---- */
.hero-graesmarken__cta {
    margin-top: var(--space-xs);
}
/* Centreret indhold → centrér knappen med */
.hero-graesmarken__content.is-align-center .hero-graesmarken__cta {
    display: flex;
    justify-content: center;
}
/* Secondary CTA over mørkt billede: lys outline for læsbarhed */
.hero-graesmarken__cta .btn--secondary {
    color: var(--color-paper);
    border-color: var(--color-paper);
}
.hero-graesmarken__cta .btn--secondary:hover {
    background: var(--color-paper);
    color: var(--color-green-900);
}


/* ---- Bølge-SVG ----
   Absolut positioneret i bunden af hero-sektionen.
   bottom: 0 + translateY(99%) skubber den NED så den
   hænger ud under hero'en og dækker overgangen til
   næste sektion. z-index: 10 sikrer at den ligger over
   billede og overlay.

   translateY(99%) i stedet for 100% undgår subpixel-gap
   mellem hero og bølge i visse browsere. */

.hero-graesmarken__wave {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10;
    width: 100%;
    height: 17.7vw;
    transform: translateY(99%);
    display: block;
    pointer-events: none;
}


/* ---- Elementor container override ----
   Elementor sætter overflow: hidden på sine containere.
   Vi har brug for visible så bølgen kan stikke ud.
   Targeterer den nærmeste Elementor-wrapper. */

.elementor-widget-graesmarken-hero,
.elementor-widget-graesmarken-hero .elementor-widget-container {
    overflow: visible;
}