/* ==========================================================
   CARD GRID SECTION
========================================================== */

.card-grid-section {
    width: 100%;
    max-width: var(--container-content);

    margin-inline: auto;
    padding: clamp(1.5rem, 3vw, 2.5rem);

    border-radius: clamp(1.5rem, 3vw, 2.5rem);

    background: rgba(255, 255, 255, .42);

    box-shadow:
        0 40px 80px rgba(0, 0, 0, .28),
        0 18px 36px rgba(0, 0, 0, .18),
        0 6px 12px rgba(0, 0, 0, .10),
        inset 0 1px 0 rgba(255, 255, 255, .35);
}


/* ==========================================================
   CARD GRID WRAPPER
========================================================== */

.card-grid-wrapper {
    width: 100%;
    max-width: none;

    padding: 0;

    background: transparent;
}


/* ==========================================================
   GENERIC CARD ROW
========================================================== */

.card-grid-row {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: clamp(1.5rem, 3vw, 2rem);

    align-items: stretch;
}

.card-grid-row > * {
    min-width: 0;
    margin-block-start: 0 !important;
}

.card-grid-row > .wp-block-group {
    width: 100%;
    max-width: none;
}

/* ==========================================================
   FEATURES GRID – MOBILE
========================================================== */

@media (max-width: 900px) {

    .card-grid-row--features {
        grid-template-columns: 1fr;
    }

    .feature-card {
        width: 100%;
        min-height: 260px;
    }

}


/* ==========================================================
   5 CARDS GRID
========================================================== */

.card-grid-row--cards-5 {
    display: grid;

    grid-template-columns:
        repeat(6, minmax(0, 1fr));

    gap: clamp(1.5rem, 3vw, 2rem);
}

.card-grid-row--cards-5 > *:nth-child(-n + 3) {
    grid-column: span 2;
}

.card-grid-row--cards-5 > *:nth-child(4) {
    grid-column: 2 / span 2;
}

.card-grid-row--cards-5 > *:nth-child(5) {
    grid-column: 4 / span 2;
}


/* ==========================================================
   5 CARDS GRID – MOBILE
========================================================== */

@media (max-width: 900px) {

    .card-grid-row--cards-5:not(.card-grid-row--scroll) {
        grid-template-columns: 1fr;
    }

    .card-grid-row--cards-5 > * {
        grid-column: auto;
    }

}