/* =========================================================
   FLEXIBLE CARDS
   CSS #458682
   Bootstrap 4 site
   ========================================================= */


/* ---------------------------------------------------------
   Section
   --------------------------------------------------------- */

.flex-cards {
    width: 100%;
    padding: 2.5rem 0;
}

.flex-cards__heading {
    margin: 0 0 0.75rem;
}

.flex-cards__intro {
    margin: 0 0 1.75rem;
    max-width: 48rem;
}


/* ---------------------------------------------------------
   Section background treatments
   --------------------------------------------------------- */

.flex-cards--white {
    background: #ffffff;
    color: #131640;
}

.flex-cards--blue {
    background: #131640;
    color: #ffffff;
}

.flex-cards--blue .flex-cards__heading,
.flex-cards--blue .flex-cards__intro {
    color: #ffffff;
}


/* ---------------------------------------------------------
   Card grid
   --------------------------------------------------------- */

.flex-cards__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;

    /* Natural-height cards by default */
    align-items: start;
}


/* Two-column layout */

@media (min-width: 768px) {
    .flex-cards__grid--2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* Three-column layout */

@media (min-width: 768px) {
    .flex-cards__grid--3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 992px) {
    .flex-cards__grid--3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}


/* ---------------------------------------------------------
   Individual card
   --------------------------------------------------------- */

.flex-card {
    display: flex;
    flex-direction: column;

    padding: 1.5rem;

    background: #ffffff;
    color: #131640;

    border: 1px solid #d9dce5;
    border-top: 4px solid #006b7f;
    border-radius: 0.125rem;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}

.flex-card:hover,
.flex-card:focus-within {
    border-color: #006b7f;
    box-shadow: 0 0.4rem 1rem rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}


/* ---------------------------------------------------------
   Card height treatments
   --------------------------------------------------------- */

/* Natural height */

.flex-card.auto {
    height: auto;
    align-self: start;
}


/* Equal height */

.flex-card.h-100 {
    height: 100%;
    align-self: stretch;
}


/* ---------------------------------------------------------
   Card heading
   --------------------------------------------------------- */

.flex-card__heading {
    margin: 0 0 0.75rem;
    color: #131640;
}


/* ---------------------------------------------------------
   Card content
   --------------------------------------------------------- */

.flex-card__text {
    margin: 0;
}

.flex-card__text > :first-child {
    margin-top: 0;
}

.flex-card__text > :last-child {
    margin-bottom: 0;
}


/* ---------------------------------------------------------
   Card action
   --------------------------------------------------------- */

.flex-card__action {
    margin-top: 1rem;
}


/* Equal-height cards align actions at the bottom */

.flex-card.h-100 .flex-card__action {
    margin-top: auto;
    padding-top: 1rem;
}


.flex-card__link {
    display: inline-flex;
    align-items: center;

    color: #006b7f;
    font-weight: 600;

    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.flex-card__link:hover,
.flex-card__link:focus {
    color: #131640;
    text-decoration-thickness: 2px;
}


/* ---------------------------------------------------------
   Focus
   --------------------------------------------------------- */

.flex-card__link:focus-visible {
    outline: 3px solid currentColor;
    outline-offset: 3px;
}


/* ---------------------------------------------------------
   Small screens
   --------------------------------------------------------- */

@media (max-width: 767.98px) {

    .flex-cards {
        padding: 2rem 0;
    }

    .flex-cards__grid {
        gap: 1rem;
    }

    .flex-card {
        padding: 1.25rem;
    }
}


/* ---------------------------------------------------------
   Managed columns – independent vertical stacks
   DOM order: left-column cards, then right-column cards.
   --------------------------------------------------------- */

.flex-cards__columns {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
}

.flex-cards__column {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 1.5rem;
}

.flex-cards__column > * {
    min-width: 0;
    flex: 0 0 auto;
}

@media (min-width: 768px) {
    .flex-cards__columns--2,
    .flex-cards__columns--3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .flex-cards__columns,
    .flex-cards__column {
        gap: 1rem;
    }
}