/**
 * Paginakop zonder hero (Figma: Pages → Locatie - Actueel; ook bruikbaar
 * voor andere pagina's zonder hero).
 *
 * Opbouw op de pagina: eerst de rij .alma-headerband (de verloopbalk
 * achter de header, header.css), dan een rij .alma-paginakop met een
 * label en een H1, gecentreerd in een kolom van max. 664px, 24px tussen
 * label en kop. 96px onder de verloopbalk (64px marge van de
 * verloopbalk + 32px padding hier), 80px tot wat eronder staat.
 */

.alma-paginakop {
    margin: 0 auto 80px !important;
    padding: 32px 0 0 !important; /* padding: een marge valt samen met die van de verloopbalk */

    > .kt-row-column-wrap {
        max-width: calc(664px + 32px) !important;
        margin: 0 auto;
        padding: 0 16px !important;
    }

    :is(.kt-inside-inner-col, .kadence-inner-column-inner) {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0 !important;
        text-align: center;
    }

    .wp-block-carmel-core-label {
        margin: 0 0 24px !important;
    }

    h1 {
        margin: 0 !important;
        font-family: var(--carmel-font-heading);
        font-size: var(--carmel-font-size-h1) !important;
        line-height: var(--carmel-line-height-h1) !important;
        letter-spacing: var(--carmel-letter-spacing-h1) !important;
        font-weight: var(--carmel-font-weight-h1, 700) !important;
        text-align: center;
        color: var(--alma-donker-blauw);
    }
}

@media (max-width: 1024px) {
    .alma-paginakop {
        margin: 0 auto 40px !important;
        padding-top: 16px !important;

        .wp-block-carmel-core-label {
            margin-bottom: 16px !important;
        }

        h1 {
            font-size: var(--carmel-font-size-h1-mobile) !important;
            letter-spacing: var(--carmel-letter-spacing-h1-mobile) !important;
        }
    }
}

/* Lichte vlak (Figma: AC grijs, afronding 24, 16px van de rand): begint
   achter de verloopbalk (24px onder de bovenkant ervan, zodat de ronde
   hoeken eronder wegvallen; het komt er niet bovenuit) en loopt door
   tot 16px boven de footer; 160px ruimte onderaan. De inhoud blijft
   waar hij stond (de padding boven = wat het vlak omhoog schuift). Zoals
   de zoekresultatenpagina (search.css).
   Ook op elke pagina die met de verloopbalk begint (.alma-headerband
   bovenaan de inhoud): nieuwsberichten en Infohub-items (Kadence
   Elements Post template / Infohub template). Niet op de 404: daar
   staat de balk buiten .entry-content en is de pagina wit (Figma). */
#inner-wrap #primary:is(:has(.alma-paginakop), :has(.entry-content > .alma-headerband:first-child)) {
    --alma-kop-header: calc(var(--alma-topbar-h, 0px) + var(--alma-header-gap, 0px) + var(--alma-mainbar-h, 81px));
    --alma-kop-vlak-boven: calc(var(--alma-topbar-h, 0px) + 24px);
    width: calc(100% - 32px);
    margin: calc(var(--alma-kop-vlak-boven) - var(--alma-kop-header)) auto 16px;
    padding: calc(var(--alma-kop-header) - var(--alma-kop-vlak-boven)) 0 160px;
    background: var(--alma-ac-grijs);
    border-radius: var(--carmel-radius-lg);
}

@media (max-width: 1024px) {
    #inner-wrap #primary:is(:has(.alma-paginakop), :has(.entry-content > .alma-headerband:first-child)) {
        --alma-kop-header: 81px; /* mobiele header, zonder bovenbalk */
        padding-bottom: 96px;
    }
}