/* =============================================================
   Side-hero — .side-hero-graesmarken
   Kompakt hero til UNDERSIDER. Baggrundsbillede med eyebrow +
   H1 + body-tekst ovenpå, og et grønt overlay der gør den hvide
   tekst læsbar.

   Højden er et fast pixel-interval styret med clamp() — ikke vh.
   Tre trin: small / medium / large.
   ============================================================= */


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

.side-hero-graesmarken {
    position: relative;
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background-color: var(--color-green-900);
}

/* Højde-trin — fast px-interval via clamp(), ingen media query.
   min-height så indhold aldrig klemmes på smalle skærme. */
.side-hero-graesmarken--small  { min-height: clamp(300px, 38vw, 380px); }
.side-hero-graesmarken--medium { min-height: clamp(380px, 46vw, 480px); }
.side-hero-graesmarken--large  { min-height: clamp(460px, 54vw, 600px); }


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

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

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


/* ---- Overlay — tre styrker ----
   Grøn ink-gradient over hele billedet: let i toppen, mørkere mod
   bunden, så hvid tekst altid har kontrast. Styrken vælges i
   editoren via section-modifier (--overlay-*). Bygger på samme
   RGB som --color-green-900 for en varm, jordnær tone. */

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

.side-hero-graesmarken--overlay-light .side-hero-graesmarken__overlay {
    background: linear-gradient(
        to bottom,
        rgba(26, 42, 32, 0.04) 0%,
        rgba(26, 42, 32, 0.06) 45%,
        rgba(26, 42, 32, 0.30) 100%
    );
}

.side-hero-graesmarken--overlay-medium .side-hero-graesmarken__overlay {
    background: linear-gradient(
        to bottom,
        rgba(26, 42, 32, 0.18) 0%,
        rgba(26, 42, 32, 0.22) 45%,
        rgba(26, 42, 32, 0.55) 100%
    );
}

.side-hero-graesmarken--overlay-strong .side-hero-graesmarken__overlay {
    background: linear-gradient(
        to bottom,
        rgba(26, 42, 32, 0.32) 0%,
        rgba(26, 42, 32, 0.40) 45%,
        rgba(26, 42, 32, 0.75) 100%
    );
}


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

.side-hero-graesmarken__content {
    position: relative;
    z-index: 3;            /* over billede (1) og overlay (2) */
    padding-top: var(--space-xl);
    padding-bottom: clamp(2.5rem, 6vw, 4.5rem);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.side-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);
}

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

.side-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: 18ch;
    text-wrap: balance;
    text-shadow: 0 2px 24px rgba(26, 42, 32, 0.35);
}

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

.side-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: 52ch;
    text-wrap: pretty;
    text-shadow: 0 1px 16px rgba(26, 42, 32, 0.30);
}