/**
 * Hero's — gedeelde basis (laadt als eerste van de hero-bestanden).
 *
 * Figma: SECTIONS → Hero, component "gradient-animated": zachte vlekken in
 * roze, paars, oranje en lichtblauw over een verloop van roze (linksboven)
 * naar donkerblauw (rechtsonder), met een blur-laag, langzaam bewegend.
 *
 * Geldt voor het gekleurde vlak van de hero's van de patroonbibliotheek:
 * de binnenste kolom van .herowrapper (tekst gecentreerd, tekst-reveal),
 * .hero-gallery en .ptrn-herobigimage. De grote foto-hero (.bighero) heeft
 * een eigen achtergrond, zie hero-bighero.css.
 *
 * AANNAMES (nog checken in Figma, zie BLOKKEN.md):
 * - afronding van het vlak: 24px (--carmel-radius-lg);
 * - knoppen op het verloop: primair wit met donkerblauwe tekst, secundair
 *   met witte rand en tekst.
 */

/* Op body (niet :root): de --carmel-* tokens staan op body. */
body {
    --alma-hero-gradient:
        radial-gradient(60% 70% at 15% 10%, rgba(229, 0, 126, 0.95) 0%, rgba(229, 0, 126, 0) 70%),
        radial-gradient(45% 55% at 85% 20%, rgba(73, 187, 188, 0.35) 0%, rgba(73, 187, 188, 0) 70%),
        radial-gradient(50% 60% at 70% 85%, rgba(44, 42, 103, 1) 0%, rgba(44, 42, 103, 0) 75%),
        radial-gradient(40% 45% at 35% 75%, rgba(245, 100, 0, 0.25) 0%, rgba(245, 100, 0, 0) 70%),
        linear-gradient(135deg, var(--alma-roze) 0%, #8A1B7A 45%, var(--alma-donker-blauw) 100%);
    --alma-hero-radius: var(--carmel-radius-lg);
}

:is(.herowrapper:not(.bighero), .hero-gallery, .ptrn-herobigimage) > .kt-row-column-wrap > .wp-block-kadence-column > .kt-inside-inner-col {
    background: var(--alma-hero-gradient) !important;
    background-size: 160% 160% !important;
    background-position: 0% 0%;
    border-radius: var(--alma-hero-radius) !important;
    animation: alma-hero-gradient 24s ease-in-out infinite alternate;

    /* Tekst en knoppen op het verloop */
    --carmel-color-heading: var(--alma-neutral-0);
    --body-color: var(--alma-neutral-0);
    --carmel-color-btn-primary-bg: var(--alma-neutral-0);
    --carmel-color-btn-primary-text: var(--alma-donker-blauw);
    --carmel-color-btn-secondary-bg: transparent;
    --carmel-color-btn-secondary-text: var(--alma-neutral-0);
    --carmel-color-btn-secondary-border: var(--alma-neutral-0);
    color: var(--alma-neutral-0);

    .carmel-label,
    .carmel-label__text {
        color: var(--alma-neutral-0);
    }

    /* Kadence kan per blok een eigen tekstkleur zetten; op het verloop
       altijd wit. */
    :is(h1, h2, h3, h4, h5, h6) {
        color: var(--alma-neutral-0) !important;
    }
}

@keyframes alma-hero-gradient {
    0%   { background-position: 0% 0%; }
    100% { background-position: 100% 100%; }
}

@media (prefers-reduced-motion: reduce) {
    :is(.herowrapper:not(.bighero), .hero-gallery, .ptrn-herobigimage) > .kt-row-column-wrap > .wp-block-kadence-column > .kt-inside-inner-col {
        animation: none;
    }
}

/* Foto's die onder een hero over het verloop heen vallen: zelfde
   afronding als het vlak. */
.hero-text-centered-image figure,
.hero-text-centered-image img {
    border-radius: var(--alma-hero-radius) !important;
}