/*
 * Content Columns - merges the former "Column Highlights" and "Stats
 * Container" components into one. Figma:
 *  - "3 Column Callout" (node 712:2456): diamond icon + H4 heading + body
 *    copy, no background, optional CTA button below.
 *  - "3 Column Cards" (node 714:2718): colored box (White/Sandstone/
 *    Malachite/Kyanite) + H2 value + H5 label, centered.
 * Teal/Mixta Didone tokens match the FTWA theme (see
 * ../../../clientlibs/clientlib-site/css/ftwa-theme.css).
 */
.ftwa-content-columns {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 60px;
    padding: 60px 20px;
}

.ftwa-content-columns__title {
    margin: 0;
    max-width: 1199px;
    font-family: var(--font-family-ptsans-bold, "Mixta Didone", Georgia, serif);
    font-weight: 500;
    font-size: var(--ftwa-h2-size, 60px);
    line-height: var(--ftwa-heading-line-height, 1.3);
    letter-spacing: var(--ftwa-h2-letter-spacing, 1.2px);
    text-align: center;
    color: var(--brand-primary-teal, #005A5C);
}

.ftwa-content-columns__row {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    gap: 60px;
    width: 100%;
    max-width: 1200px;
}

.ftwa-content-columns__col {
    box-sizing: border-box;
    flex: 1 1 0;
    min-width: 0;
}

/* Callout style: diamond icon + heading + body, no background */
.ftwa-content-columns--callout .ftwa-content-columns__col {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.ftwa-content-columns--callout .ftwa-content-columns__icon {
    display: block;
    width: 60px;
    height: 60px;
    background: url("clientlib/resources/icon-diamond-divider.svg") no-repeat center / 24px 56px;
}

.ftwa-content-columns--callout .ftwa-content-columns__icon:first-child {
    margin-bottom: 16px;
}

.ftwa-content-columns--callout .ftwa-content-columns__icon:last-child:not(:first-child) {
    margin-top: 16px;
}

.ftwa-content-columns--callout .ftwa-content-columns__heading {
    margin: 0 0 24px;
    font-family: var(--font-family-ptsans-bold, "Mixta Didone", Georgia, serif);
    font-weight: 500;
    font-size: var(--ftwa-h4-size, 36px);
    line-height: var(--ftwa-heading-line-height, 1.3);
    letter-spacing: var(--ftwa-h4-letter-spacing, 0.72px);
    color: var(--brand-primary-teal, #005A5C);
}

.ftwa-content-columns--callout .ftwa-content-columns__heading:last-child {
    margin-bottom: 0;
}

.ftwa-content-columns--callout .ftwa-content-columns__body {
    margin: 0;
    font-family: var(--font-family-ptsans-regular, Arial, Helvetica, sans-serif);
    font-size: var(--ftwa-body-size, 18px);
    line-height: var(--ftwa-body-line-height, 1.5);
    letter-spacing: var(--ftwa-body-letter-spacing, 0.198px);
    color: var(--brand-primary-teal, #005A5C);
}

/* Card style: colored box, value + label centered */
.ftwa-content-columns--card .ftwa-content-columns__col {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 360px;
    padding: 48px;
}

.ftwa-content-columns__col--white {
    background: var(--brand-color-white, #FFFFFF);
}

.ftwa-content-columns__col--sandstone {
    background: var(--brand-primary-light-gray, #ECE6DC);
}

.ftwa-content-columns__col--malachite {
    background: var(--brand-primary-teal, #005A5C);
}

.ftwa-content-columns__col--kyanite {
    background: var(--brand-primary-dark-teal, #003858);
}

.ftwa-content-columns--card .ftwa-content-columns__col--white .ftwa-content-columns__heading,
.ftwa-content-columns--card .ftwa-content-columns__col--white .ftwa-content-columns__body,
.ftwa-content-columns--card .ftwa-content-columns__col--sandstone .ftwa-content-columns__heading,
.ftwa-content-columns--card .ftwa-content-columns__col--sandstone .ftwa-content-columns__body {
    color: var(--brand-primary-teal, #005A5C);
}

.ftwa-content-columns--card .ftwa-content-columns__col--malachite .ftwa-content-columns__heading,
.ftwa-content-columns--card .ftwa-content-columns__col--malachite .ftwa-content-columns__body,
.ftwa-content-columns--card .ftwa-content-columns__col--kyanite .ftwa-content-columns__heading,
.ftwa-content-columns--card .ftwa-content-columns__col--kyanite .ftwa-content-columns__body {
    color: var(--brand-color-white, #FFFFFF);
}

.ftwa-content-columns--card .ftwa-content-columns__heading {
    margin: 0 0 24px;
    font-family: var(--font-family-ptsans-bold, "Mixta Didone", Georgia, serif);
    font-weight: 500;
    font-size: var(--ftwa-h2-size, 60px);
    line-height: var(--ftwa-heading-line-height, 1.3);
    letter-spacing: var(--ftwa-h2-letter-spacing, 1.2px);
}

.ftwa-content-columns--card .ftwa-content-columns__heading:last-child {
    margin-bottom: 0;
}

.ftwa-content-columns--card .ftwa-content-columns__body {
    margin: 0;
    font-family: var(--font-family-ptsans-bold, "Mixta Didone", Georgia, serif);
    font-weight: 500;
    font-size: var(--ftwa-h5-size, 24px);
    line-height: var(--ftwa-heading-line-height, 1.3);
    letter-spacing: var(--ftwa-h5-letter-spacing, 0.48px);
}

/* prevent site-wide footnote auto-linking (bound on the sup.asterisk element itself) from making these superscripts clickable */
.ftwa-content-columns__body sup {
    pointer-events: none;
}

.ftwa-content-columns__body sup a {
    color: inherit;
    text-decoration: none;
    cursor: default;
}

/* CTA button */
.ftwa-content-columns__cta {
    margin: 0;
}

.ftwa-content-columns__cta-link {
    display: inline-block;
    padding: 16px 24px;
    background: var(--brand-primary-teal, #005A5C);
    font-family: var(--font-family-ptsans-bold, "Mixta Didone", Georgia, serif);
    font-weight: 500;
    font-size: 24px;
    line-height: 1.3;
    letter-spacing: 0.72px;
    color: var(--brand-color-white, #FFFFFF);
    text-decoration: none;
    transition: background-color 0.15s ease-in-out;
}

/* matches the site's standard button hover (e.g. header nav, form submit): blue bg, white text */
.ftwa-content-columns__cta-link:hover,
.ftwa-content-columns__cta-link:focus {
    background: var(--brand-primary-lapis, #00205B);
    color: var(--brand-color-white, #FFFFFF);
}

@media only screen and (max-width: 767px) {
    .ftwa-content-columns__row {
        flex-direction: column;
        width: 100%;
    }

    .ftwa-content-columns__col {
        width: 100%;
    }

    .ftwa-content-columns--card .ftwa-content-columns__col {
        height: auto;
    }
}