/* ============================================================
   publiek/kop.css - het brede stuk bovenaan met het plaatje.
   Hoort bij templates/public/delen/_kop.html.

   Het plaatje komt binnen als --kop-beeld (zie de opmaak). Het
   staat rechts en loopt naar links weg in het donker, zodat de
   titel leesbaar blijft.
   ============================================================ */

.kop {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 28px 0 80px;
}

/* het plaatje */
.kop::before {
    content: "";
    position: absolute;
    inset: 0 0 0 auto;
    width: min(84%, 1500px);
    z-index: -2;
    background: var(--kop-beeld, none) center 44% / cover no-repeat;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 34%);
            mask-image: linear-gradient(90deg, transparent 0%, #000 34%);
}

/* donker naar links (voor de tekst) en naar onder (overgang naar de pagina) */
.kop::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(180deg, rgba(6, 8, 24, 0) 50%, var(--nacht) 100%),
        linear-gradient(90deg, rgba(6, 8, 24, .78) 0%, rgba(6, 8, 24, .35) 38%, rgba(6, 8, 24, 0) 62%);
}

.kop-binnen {
    max-width: var(--breedte);
    margin: 0 auto;
    padding: 0 calc(var(--rand-ruimte) + 22px);
}

.kop h1 {
    font-size: clamp(30px, 3.5vw, 54px);
    font-weight: 800;
    letter-spacing: -.5px;
    line-height: 1.02;
    text-shadow: 0 2px 24px rgba(0, 0, 0, .55);
}
.kop-regel { display: block; }
.kop-kleur {
    padding-bottom: .12em;   /* ruimte voor de staart van de g */
    background: linear-gradient(90deg, #8b3dff 0%, #4f6bff 48%, #38bdf8 100%);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
    text-shadow: none;
    filter: drop-shadow(0 2px 18px rgba(79, 70, 229, .45));
}

.kop-tekst {
    margin: 10px 0 0;
    max-width: 560px;
    font-size: clamp(15px, 1.1vw, 17px);
    line-height: 1.35;
    color: #e6e8ff;
    text-shadow: 0 1px 12px rgba(0, 0, 0, .7);
}
.kop-tekst span { display: block; }

.kop-punten {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 30px;
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
    font-size: 14px;
    font-weight: 600;
    text-shadow: 0 1px 10px rgba(0, 0, 0, .8);
}
.kop-punten li { display: flex; align-items: center; gap: 9px; }
.kop-punten .icoon { color: #a66bff; filter: drop-shadow(0 0 8px rgba(139, 61, 255, .7)); }

/* de knop onder de punten, bijvoorbeeld 'Upload a walkthrough' */
.kop-knop {
    display: inline-flex;
    margin-top: 18px;
    padding: 10px 20px;
    font-size: 14.5px;
}

@media (max-width: 760px) {
    .kop { padding: 26px 0 74px; }
    .kop::before {
        width: 100%;
        opacity: .5;
        -webkit-mask-image: none;
                mask-image: none;
    }
    .kop-binnen { padding: 0 var(--rand-ruimte); }
    .kop-punten { gap: 8px 18px; font-size: 13px; }
    .kop-punten .icoon { width: 20px; height: 20px; }
}