/* =========================================================
   Personas Section — layout only (typography comes from base.css / .feature-card)
   ========================================================= */

.personas-section {
    background-color: var(--color-ink-50);
    /* border-bottom: 1px solid var(--color-border); */
}

.personas-section .personas-section-wrapper {
    gap: var(--space-sl);
    padding-block: var(--section-padding);
}

.personas-section .personas-section-wrapper h2,
.personas-section .personas-section-wrapper .h2 {
    margin-bottom: var(--space-xs);
}

/* stretch, not flex-start: that is what makes two cards in a row share a
   height. The markup no longer carries .flex-start for the same reason. */
.personas-section .personas-section-wrapper .personas-section-grid {
    align-items: stretch;
    gap: var(--space-lg);
    width: 100%;
}

/* The cards in a row are the same height as each other, and that height
   comes from the tallest card's own content - no minimum, no fixed value.
   The grid stretches them (see the align-items note above), so a card with
   less copy matches its neighbour instead of leaving a gap under it. */
.personas-section .personas-section-wrapper .personas-section-grid .feature-card {
    flex: 0 0 calc(50% - (var(--space-lg) / 2));
    min-width: 0;
}

.personas-mobile-pagination {
    display: none;
}

/* ---------- Card row ----------
   Compliance runs five short .info-cards across instead of two feature
   cards. The grid component does the reflow; this only tells it how
   narrow a column may get before it drops one. */

.personas-section .personas-section-wrapper .personas-section-row {
    --card-grid-min: 210px;
    --card-grid-gap: 14px;
}

.personas-section .personas-section-wrapper .personas-section-grid.personas-section-grid-three .feature-card {
    flex: 1 1 calc(33.33% - var(--space-lg));
}

.personas-section .personas-section-wrapper .personas-section-grid.personas-section-grid-four .feature-card {
    flex: 1 1 calc(25% - var(--space-lg));
}

.personas-section .personas-section-wrapper .personas-section-grid.personas-section-grid-one .feature-card {
    flex: 1 1 100%
}

.personas-section .personas-section-wrapper .personas-section-content {
    max-width: 790px;
    margin: 0 auto 8px;
    text-align: center;
}

.page-for-it-leaders .personas-section .personas-section-wrapper .personas-section-content {
    max-width: 810px;
}

.personas-section .personas-section-wrapper .personas-section-footer {
    margin: 4px auto 0;
    text-align: center;
    max-width: 900px;
}


@media (max-width:1199px) {

    .personas-section .personas-section-wrapper .personas-section-grid.personas-section-grid-three .feature-card,
    .personas-section .personas-section-wrapper .personas-section-grid.personas-section-grid-four .feature-card {
        flex: 0 0 calc(50% - (var(--space-lg) / 2));
    }
}

/* ---------- Tablet ---------- */
@media (max-width: 991px) {
    .personas-section .personas-section-wrapper {
        align-items: flex-start;
    }

    .personas-section .personas-section-wrapper .personas-section-content {
        text-align: left;
        margin: 0 0 8px 0;
    }

    .personas-section .personas-section-wrapper .personas-section-grid {
        gap: var(--space-md);
    }

    .personas-section .personas-section-wrapper .personas-section-grid .feature-card {
        flex: 1 1 100%;
    }

    .personas-section-slider-wrapper {
        position: relative;
        width: 100%;
        max-width: 100vw;
        overflow: hidden;
        /* Prevent horizontal scrollbar during swipe */
        padding-bottom: 0;
    }

    .personas-section .personas-section-wrapper .personas-section-grid.swiper-wrapper {
        flex-wrap: nowrap;
        gap: 0;
        /* Swiper spaceBetween handles gaps */
    }

    .personas-section .personas-section-wrapper .personas-section-grid .feature-card.swiper-slide {
        height: auto;
        /* Let Swiper handle height */
        flex-shrink: 0;
        /* Prevent flexbox from squishing the slides */
        flex-basis: auto !important;
        /* Allow Swiper inline widths to apply for 1.15 view */
    }

    .personas-mobile-pagination {
        display: block;
        position: relative;
        width: 100%;
        text-align: center;
        margin-top: 14px;
    }

    /* Redesign card header for mobile */
    .personas-section .personas-section-wrapper .personas-section-grid .feature-card .feature-card-head {
        background: transparent !important;
        height: auto;
        padding: 24px 24px 0 24px;
        gap: 0;
    }

    .personas-section .personas-section-wrapper .personas-section-grid .feature-card .feature-card-head .feature-card-icon {
        display: none !important;
    }

    .personas-section .personas-section-wrapper .personas-section-grid .feature-card .feature-card-head h3 {
        color: var(--color-primary-dark, #005a70) !important;
        font-size: 20px;
        line-height: 1.3;
    }

    .personas-section .personas-section-wrapper .personas-section-grid .feature-card .feature-card-body {
        padding: 16px 24px 24px 24px;
    }

    .personas-section .personas-section-wrapper .personas-section-footer {
        margin: 4px 0 0;
        text-align: left;
    }

}

/* ---------- Mobile ---------- */
@media (max-width: 767px) {

    .personas-section .personas-section-wrapper {
        align-items: flex-start;
        gap: var(--space-sm);
    }

    .personas-section .personas-section-wrapper .personas-section-grid {
        gap: var(--space-sm);
    }

    .personas-section .personas-section-wrapper .personas-section-row {
        --card-grid-min: 100%;
    }

}

/* ---------- Mobile Slider Overrides ---------- */

.personas-section .personas-section-wrapper .personas-section-grid .feature-card .feature-card-body {
    flex-grow: 1;
}

.personas-section .personas-section-wrapper .personas-section-grid .feature-card .feature-card-body>a {
    margin-top: auto;
}