/* ==========================================================================
   Forsidens foerste banner — "Nu med evidens."
   --------------------------------------------------------------------------
   Designets HeroBanner: groen flade, runde hjoerner, to lige spalter og
   hoejden 520 px paa store skaerme.

   Farverne er designets oklch-vaerdier, og hver af dem faar en hex foerst, saa
   en browser uden oklch staar med en farve frem for ingen.
   ========================================================================== */

.alk-helt {
    max-width: 1280px;
    /* .column.main er en flex-kolonne paa forsiden; uden width:100% kryber
       `margin: 0 auto` sammen om indholdet i stedet for at straekke. Se den
       samme note i udvalgte.css. */
    width: 100%;
    margin: 0 auto;
    padding: 24px 20px 0;
    font-family: "Nunito", "Open Sans", sans-serif;
    text-align: left;
}

.alk-helt-flade {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 24px;
    overflow: hidden;
    border-radius: 24px;
    background: #b8edc8;
    background: oklch(0.92 0.08 155);
}

/* --- venstre spalte --- */

.alk-helt-tekst { padding: 48px; }

.alk-helt-maerkat {
    margin: 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: #2f6a48;
    color: oklch(0.40 0.12 155);
}

.alk-helt-overskrift {
    margin: 12px 0 0;
    font-family: "Fredoka One", "Nunito", sans-serif;
    /* Bootstrap saetter en !important-stoerrelse paa h1 ligesom paa h3, saa
       vaerdien skal haevdes her for ikke at blive slaaet. */
    font-size: 60px !important;
    font-weight: 700;
    line-height: 1.05;
    color: #123524;
    color: oklch(0.25 0.09 155);
}

.alk-helt-overskrift span {
    color: #1f8f52;
    color: oklch(0.48 0.18 155);
}

.alk-helt-broedtekst {
    margin: 20px 0 0;
    max-width: 448px;
    font-size: 16px;
    line-height: 1.6;
    color: #1d4a33;
    color: oklch(0.30 0.08 155);
}

.alk-helt-knapper {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}

.alk-helt-knap {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    transition: background-color .2s ease, box-shadow .2s ease;
}

.alk-helt-knap--fyldt {
    background: var(--alk-primary, #8b3fd4);
    color: #fff;
    box-shadow: 0 1px 2px rgba(42, 33, 53, .12);
}

.alk-helt-knap--fyldt:hover,
.alk-helt-knap--fyldt:focus {
    background: #7a33bf;
    color: #fff;
    text-decoration: none;
}

.alk-helt-knap--hvid {
    background: #fff;
    color: var(--alk-tekst, #2a2135);
    box-shadow: inset 0 0 0 1px var(--alk-kant, #e6dcf3);
}

.alk-helt-knap--hvid:hover,
.alk-helt-knap--hvid:focus {
    background: #f6f1fc;
    color: var(--alk-tekst, #2a2135);
    text-decoration: none;
}

/* --- hoejre spalte --- */

.alk-helt-billede {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Designets hoejde paa banneret. */
    min-height: 520px;
    padding: 24px 24px 24px 0;
}

/* Billedet er selv en faerdig banner (1120x650) med bog, overskrift og et
   "NY UDGAVE"-maerke. Derfor vises det HELT — fyldte det spalten ud, ville
   enten bogen eller overskriften blive skaaret vaek. */
.alk-helt-billede img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 100%;
    object-fit: contain;
    border-radius: 20px;
    box-shadow: 0 22px 40px -24px rgba(18, 53, 36, .55);
}

.alk-helt-pille {
    position: absolute;
    top: 40px;
    right: 40px;
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--alk-accent, #e0459b);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    box-shadow: 0 10px 20px -10px rgba(42, 33, 53, .6);
    transform: rotate(3deg);
}

/* --- smalle skaerme --- */

@media (max-width: 1023px) {
    .alk-helt-tekst { padding: 32px; }
    .alk-helt-overskrift { font-size: 44px !important; }
    .alk-helt-billede { min-height: 0; }
}

@media (max-width: 767px) {
    .alk-helt { padding: 16px 16px 0; }

    .alk-helt-flade {
        grid-template-columns: 1fr;
        gap: 0;
    }

    /* Billedet foerst paa mobil, som i designet. */
    .alk-helt-billede {
        order: 1;
        padding: 16px 16px 0;
    }

    .alk-helt-tekst {
        order: 2;
        padding: 24px;
    }

    .alk-helt-overskrift { font-size: 36px !important; }

    .alk-helt-broedtekst { font-size: 15px; }

    .alk-helt-pille {
        top: 26px;
        right: 26px;
    }
}