/**
 * Contactblok (Figma: Pages → Contact, onder de hero): links een kaart
 * met het verloop van de hero's (contactgegevens, witte tekst), rechts de
 * tekst (Ziek melden enz.). Kaart ±376px en tekst 830px breed op 1600,
 * ±104px ertussen; mobiel onder elkaar.
 *
 * Opbouw: rij .alma-contactblok met de kolommen .alma-contactkaart en
 * .alma-contacttekst. De pagina Contact is opgebouwd uit Carousel -
 * Centered (hero), dit blok en Team - Carousel.
 */

.alma-contactblok {
    margin-top: var(--section-gap, 120px) !important;
    margin-bottom: var(--section-gap, 120px) !important;

    > .kt-row-column-wrap {
        grid-template-columns: minmax(0, 376fr) minmax(0, 830fr) !important;
        column-gap: 104px !important;
        justify-content: start;
        align-items: start;
    }

    :is(.kt-inside-inner-col, .kadence-inner-column-inner) {
        padding: 0 !important;
    }
}

/* Kaart: verloop zoals de hero's (hero-_basis.css), witte tekst */
.alma-contactkaart > :is(.kt-inside-inner-col, .kadence-inner-column-inner) {
    padding: 32px !important;
    border-radius: var(--carmel-radius-lg);
    background: linear-gradient(var(--alma-hero-hoek), var(--alma-donker-blauw) 0%, var(--alma-roze) 100%);
    animation: alma-hero-draai 24s linear infinite;
    color: var(--alma-neutral-0);

    h6 {
        margin: 0 0 24px !important;
        font-family: var(--carmel-font-body);
        font-size: var(--carmel-font-size-caption) !important;
        font-weight: var(--carmel-font-weight-medium) !important;
        color: var(--alma-neutral-0) !important;
    }

    p {
        margin: 0 0 16px !important;
        font-size: var(--carmel-font-size-body-medium) !important;
        line-height: 140% !important;
        color: var(--alma-neutral-0) !important;

        &:last-child {
            margin-bottom: 0 !important;
        }
    }

    a {
        color: inherit !important;
        text-decoration: underline;
        text-underline-offset: 3px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .alma-contactkaart > :is(.kt-inside-inner-col, .kadence-inner-column-inner) {
        animation: none;
    }
}

/* Tekst rechts */
.alma-contacttekst {
    h3 {
        margin: 0 0 24px !important;
    }

    h4 {
        margin: 40px 0 16px !important;
    }

    p {
        margin: 0 0 16px !important;
        color: var(--alma-donker-blauw);
    }
}

@media (max-width: 1024px) {
    .alma-contactblok {
        margin-top: 80px !important;
        margin-bottom: 80px !important;

        > .kt-row-column-wrap {
            grid-template-columns: minmax(0, 1fr) !important;
            row-gap: 40px !important;
        }
    }

    .alma-contactkaart > :is(.kt-inside-inner-col, .kadence-inner-column-inner) {
        padding: 24px !important;
    }
}