@charset "utf-8";
/* CSS Document */

/* ========================================
   FEATURE CARDS — SECTIE
======================================== */

.cards-section {
    position: relative;
    overflow: hidden;

    background: var(--bg);
}

.cards-inner {
    width: 100%;
    max-width: 42rem;
    margin-inline: auto;
}


/* ========================================
   FEATURE CARDS — RASTER
======================================== */

.feature-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 1fr;
    align-items: stretch;

    gap: var(--gap);

    width: 100%;
    margin-top: 3rem;
}


/* ========================================
   FEATURE CARD — BASIS
======================================== */

.feature-card {
    position: relative;

    display: flex;
    flex-direction: column;
    align-items: center;

    width: 100%;
    min-width: 0;
    min-height: 220px;
    height: 100%;

    padding: 26px 14px 48px;

    overflow: hidden;

    color: var(--dark-blue);
    text-align: center;
    text-decoration: none;

    background:
        linear-gradient(
            135deg,
            var(--ice-blue) 0%,
            var(--soft-blue) 38%,
            var(--storm-blue) 70%,
            var(--soft-blue) 100%
        );

    background-size: 300% 300%;

    animation:
        feature-card-gradient
        18s
        ease-in-out
        infinite;

    border: var(--soft-card-border);
    border-radius: var(--card-radius);

    box-shadow: var(--soft-card-shadow);

    -webkit-tap-highlight-color: transparent;
}

.feature-card h3,
.feature-card p,
.feature-card > svg:not(.card-arrow),
.feature-card .feature-card__icon,
.feature-card .feature-card__icon svg,
.feature-card .feature-card-icon,
.feature-card .feature-card-icon svg,
.feature-card .card-arrow {
    color: var(--dark-blue);
}
	
background-size: 300% 300%;

animation:
    feature-card-gradient
    18s
    ease-in-out
    infinite;

    border: var(--soft-card-border);
    border-radius: var(--card-radius);

    box-shadow: var(--soft-card-shadow);

    -webkit-tap-highlight-color: transparent;


animation:
    feature-card-gradient
    18s
    ease-in-out
    infinite;

}

/* ========================================
   FEATURE CARD — ICOON
======================================== */

.feature-card > svg:not(.card-arrow),
.feature-card .feature-card-icon {
    width: 52px;
    height: 52px;

    margin-bottom: 14px;

    color: var(--blue);
    stroke-width: 1.7;

    flex: 0 0 auto;
}


/* ========================================
   FEATURE CARD — TITEL
======================================== */

.feature-card h3 {
    margin: 0 0 12px;

    color: var(--dark-blue);

    font-family: var(--font-heading);
    font-size: clamp(1.05rem, 5.2vw, 1.4rem);
    font-weight: 600;
    line-height: 1.15;

    text-wrap: balance;
    overflow-wrap: anywhere;
}


/* ========================================
   FEATURE CARD — TEKST
======================================== */

.feature-card p {
    margin: 0;

    color: var(--blue);

    font-family: var(--font-body);
    font-size: 0.82rem;
    line-height: 1.45;

    overflow-wrap: anywhere;
}


/* ========================================
   FEATURE CARD — PIJL
======================================== */

.feature-card .card-arrow {
    position: absolute;
    right: 14px;
    bottom: 14px;

    width: 18px;
    height: 18px;

    margin: 0;

    color: var(--blue);

    transition:
        color var(--transition),
        transform var(--transition);
}


/* ========================================
   FEATURE CARDS — REVEAL
======================================== */

.feature-card.is-prepared {
    opacity: 0;

    transition:
        opacity 0.7s ease,
        transform 0.8s cubic-bezier(.22, 1, .36, 1),
        box-shadow var(--transition);

    transition-delay:
        calc(var(--card-index, 0) * 55ms);

    will-change: opacity, transform;
}

.feature-card.is-prepared:nth-child(odd) {
    transform: translateX(-2.5rem);
}

.feature-card.is-prepared:nth-child(even) {
    transform: translateX(2.5rem);
}

.feature-card.is-prepared.is-visible {
    opacity: 1;
    transform: translateX(0);
}


/* ========================================
   FEATURE CARD — INTERACTIE
======================================== */

.feature-card:focus-visible {
    outline: 3px solid var(--honey);
    outline-offset: 4px;
}

.feature-card.is-visible:active {
    transform: scale(0.98);
}

@media (hover: hover) {

    .feature-card.is-visible:hover {
        transform: translateY(-4px);

        box-shadow:
            0 1.75rem 4rem rgba(12, 27, 44, 0.14),
            0 0.35rem 1rem rgba(12, 27, 44, 0.08);
    }

    .feature-card:hover .card-arrow {
        color: var(--honey);
        transform: translateX(5px);
    }
}


/* ========================================
   ZEER SMALLE SCHERMEN
======================================== */

@media (max-width: 360px) {

    .feature-grid {
        gap: 0.75rem;
    }

    .feature-card {
        min-height: 210px;
        padding: 22px 11px 44px;
    }

    .feature-card > svg:not(.card-arrow),
    .feature-card .feature-card-icon {
        width: 46px;
        height: 46px;
    }

    .feature-card h3 {
        font-size: 1rem;
    }

    .feature-card p {
        font-size: 0.77rem;
    }
}

.tradition-card:last-child {
    grid-column: 1 / -1;
}

/* ========================================
   MINDER BEWEGING
======================================== */

@media (prefers-reduced-motion: reduce) {

    .feature-card,
    .feature-card.is-prepared,
    .feature-card.is-prepared:nth-child(odd),
    .feature-card.is-prepared:nth-child(even),
    .feature-card.is-prepared.is-visible {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .feature-card .card-arrow {
        transition: none;
    }
}

/* ========================================
   FEATURE CARDS — GEANIMEERDE GRADIENT
======================================== */

@keyframes feature-card-gradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.feature-card {
    --card-start: var(--ice-blue);
    --card-middle: var(--soft-blue);
    --card-end: var(--storm-blue);

    color: var(--card-text, var(--dark-blue));

    background:
        linear-gradient(
            135deg,
            var(--card-start),
            var(--card-middle),
            var(--card-end),
            var(--card-middle)
        );

    background-size: 300% 300%;

    animation:
        feature-card-gradient
        18s
        ease-in-out
        infinite;
}

.feature-card h3,
.feature-card p,
.feature-card > svg:not(.card-arrow),
.feature-card .feature-card__icon,
.feature-card .feature-card__icon svg,
.feature-card .feature-card-icon,
.feature-card .feature-card-icon svg,
.feature-card .card-arrow {
    color: var(--card-text, var(--dark-blue));
}

/* ========================================
   FEATURE CARDS — AUTOMATISCH KLEURPALET
======================================== */

/* Kaart 1, 9, 17... */
.feature-card:nth-child(8n + 1) {
    --card-start: var(--ice-blue);
    --card-middle: var(--soft-blue);
    --card-end: var(--storm-blue);
    --card-text: var(--dark-blue);
}

/* Kaart 2, 10, 18... */
.feature-card:nth-child(8n + 2) {
    --card-start: var(--sand);
    --card-middle: var(--kaki);
    --card-end: var(--honey);
    --card-text: var(--dark-blue);
}

/* Kaart 3, 11, 19... */
.feature-card:nth-child(8n + 3) {
    --card-start: var(--brass);
    --card-middle: var(--honey);
    --card-end: var(--karamel);
    --card-text: var(--brown-dark);
}

/* Kaart 4, 12, 20... */
.feature-card:nth-child(8n + 4) {
    --card-start: var(--storm-blue);
    --card-middle: var(--blue);
    --card-end: var(--dark-blue);
    --card-text: var(--offwhite);
}

/* Kaart 5, 13, 21... */
.feature-card:nth-child(8n + 5) {
    --card-start: var(--white-rock);
    --card-middle: var(--sand);
    --card-end: var(--brown-light);
    --card-text: var(--dark-blue);
}

/* Kaart 6, 14, 22... */
.feature-card:nth-child(8n + 6) {
    --card-start: var(--coffee);
    --card-middle: var(--karamel);
    --card-end: var(--brown-dark);
    --card-text: var(--offwhite);
}

/* Kaart 7, 15, 23... */
.feature-card:nth-child(8n + 7) {
    --card-start: var(--soft-blue);
    --card-middle: var(--ice-blue);
    --card-end: var(--kaki);
    --card-text: var(--dark-blue);
}

/* Kaart 8, 16, 24... */
.feature-card:nth-child(8n) {
    --card-start: var(--jet);
    --card-middle: var(--jungle);
    --card-end: var(--dark-blue);
    --card-text: var(--offwhite);
}