/**
 * Hero's — gedeelde basis (laadt als eerste van de hero-bestanden).
 *
 * Achtergrond (Figma Motion, hero background): een doorlopend verloop van
 * #2C2A67 (donkerblauw) naar #E5007E (roze) dat naadloos rond blijft
 * draaien, rustig genoeg om niet druk te zijn. Het start altijd diagonaal:
 * donkerblauw linksboven, roze rechtsonder. Desktop en mobiel hetzelfde.
 *
 * 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);
 *
 * Nagekeken in Figma: knoppen op het verloop zijn primair wit met
 * donkerblauwe tekst, secundair donkerblauw met witte tekst.
 */

/* Hoek van het verloop als echte (animeerbare) hoek. Start op 135deg
   (donkerblauw linksboven, roze rechtsonder); één volle draai, dus de
   lus loopt naadloos door. inherits: false → per vlak een eigen draai. */
@property --alma-hero-hoek {
    syntax: '<angle>';
    inherits: false;
    initial-value: 135deg;
}

/* Op body (niet :root): de --carmel-* tokens staan op body. */
body {
    --alma-hero-radius: var(--carmel-radius-lg);
}

/* Voorkant: rij > .kt-row-column-wrap > kolom > .kt-inside-inner-col;
   editor: rij > .innerblocks-wrap > kolom > .kadence-inner-column-inner. */
:is(.herowrapper:not(.bighero), .hero-gallery, .ptrn-herobigimage) > :is(.kt-row-column-wrap, .innerblocks-wrap) > .wp-block-kadence-column > :is(.kt-inside-inner-col, .kadence-inner-column-inner) {
    /* Op het vlak zelf (niet als variabele op body): anders wordt de hoek
       op body vastgezet en draait er niets. */
    background: linear-gradient(var(--alma-hero-hoek), var(--alma-donker-blauw) 0%, var(--alma-roze) 100%) !important;
    background-size: 100% 100% !important;
    border-radius: var(--alma-hero-radius) !important;
    animation: alma-hero-draai 24s linear infinite;

    /* 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);
    /* secundair: donkerblauw vlak (Figma, alle hero's) */
    --carmel-color-btn-secondary-bg: var(--alma-donker-blauw);
    --carmel-color-btn-secondary-text: var(--alma-neutral-0);
    --carmel-color-btn-secondary-border: var(--alma-donker-blauw);
    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-draai {
    from { --alma-hero-hoek: 135deg; }
    to   { --alma-hero-hoek: 495deg; }
}

@media (prefers-reduced-motion: reduce) {
    :is(.herowrapper:not(.bighero), .hero-gallery, .ptrn-herobigimage) > :is(.kt-row-column-wrap, .innerblocks-wrap) > .wp-block-kadence-column > :is(.kt-inside-inner-col, .kadence-inner-column-inner) {
        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;
}

/* Mobiel: in alle hero's en paginakoppen alles links uitgelijnd (label,
   kop, tekst en knoppen), ook waar ze op desktop gecentreerd staan.
   body ervoor + !important: de hero-bestanden zelf (hero-gallery,
   profielen, paginakop …) laden later en centreren met !important. */
@media (max-width: 767px) {
    body :is(.herowrapper, .hero-gallery, .ptrn-herobigimage, .ptrn-profielen-overzicht, .alma-paginakop) {
        text-align: left !important;

        :is(.kt-inside-inner-col, .kadence-inner-column-inner) {
            align-items: flex-start !important;
            text-align: left !important;
        }

        :is(h1, h2, h3, h4, h5, h6, p) {
            margin-left: 0 !important;
            margin-right: 0 !important;
            text-align: left !important;
        }

        .wp-block-carmel-core-label {
            display: flex;
            justify-content: flex-start !important;
            margin-left: 0 !important;
            margin-right: 0 !important;
        }

        :is(.kb-buttons-wrap, .kb-btns-outer-wrap) {
            justify-content: flex-start !important;
        }
    }

    /* en overal op dezelfde lijn als het logo (32px van de schermrand):
       vlak 16px van de rand + 16px binnenruimte in de geneste rij (was
       24, Splitscreen ook); de paginakop zonder extra binnenruimte. De
       homepage-hero regelt dit zelf (hero-home.css). */
    body :is(.herowrapper:not(.hero-home), .hero-gallery, .ptrn-herobigimage) > .kt-row-column-wrap > .wp-block-kadence-column > .kt-inside-inner-col > .kb-row-layout-wrap > .kt-row-column-wrap {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    body .alma-paginakop > .kt-row-column-wrap {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}