/*
 * page-about.css — rules used only on the About page (page-about.php).
 * Sections in page order. The logo panel itself is in components.css.
 */

/* ------------------------------------------------------------------------
 * Who we are: text left, photo and fact card right
 * --------------------------------------------------------------------- */

.fdfs-about-who__body {
    margin-top: 34px;
    font-size: 1.045rem;
    line-height: 1.63;
}

.fdfs-about-who__body p + p {
    margin-top: 20px;
}

.fdfs-about-who__image {
    aspect-ratio: 4 / 5;
}

.fdfs-fact-card {
    margin: 16px 0 0;
    padding: 33px 33px 31px;
    background: var(--fdfs-white);
    border: 1px solid var(--fdfs-line);
}

.fdfs-fact-card__item + .fdfs-fact-card__item {
    margin-top: 25px;
}

.fdfs-fact-card__text {
    margin: 17px 0 0;
    font-size: var(--fdfs-size-card-text);
    line-height: 1.6;
}

.fdfs-fact-card__year {
    margin: 12px 0 0;
    color: var(--fdfs-black);
    font-family: var(--fdfs-font-heading);
    font-size: 2.42rem;
    font-weight: 700;
    line-height: 1.1;
}

/* ------------------------------------------------------------------------
 * Our approach and Compliance culture: less vertical space than other sections
 * --------------------------------------------------------------------- */

.fdfs-about-approach,
.fdfs-about-compliance {
    padding-block: 98px;
}

/* Four points in bordered cells, two per row. */
.fdfs-approach-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 58px;
    border-top: 1px solid var(--fdfs-line);
    border-left: 1px solid var(--fdfs-line);
}

.fdfs-approach {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 45px 40px 42px;
    background: var(--fdfs-surface);
    border-right: 1px solid var(--fdfs-line);
    border-bottom: 1px solid var(--fdfs-line);
}

.fdfs-approach__title {
    margin-top: 23px;
    color: var(--fdfs-black);
    font-family: var(--fdfs-font-heading);
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.25;
}

.fdfs-approach__text {
    margin-top: 14px;
    font-size: var(--fdfs-size-card-text);
    line-height: 1.6;
}

/* ------------------------------------------------------------------------
 * Compliance culture: text left, logo panel right, then the team note
 * --------------------------------------------------------------------- */

.fdfs-about-compliance__inner {
    display: grid;
    grid-template-columns: minmax(0, 541fr) minmax(0, 775fr);
    align-items: center;
    column-gap: 56px;
}

/* Keeps the design's three-line heading. */
.fdfs-about-compliance__heading {
    max-width: 400px;
}

.fdfs-about-compliance .fdfs-section-head__text {
    max-width: 540px;
    margin-top: 22px;
}

.fdfs-about-compliance .fdfs-split__text > .fdfs-button {
    margin-top: 34px;
}

.fdfs-about-team {
    margin-top: 82px;
    padding-top: 50px;
    border-top: 1px solid var(--fdfs-line);
}

.fdfs-about-team__text {
    max-width: 700px;
    margin-top: 17px;
    font-size: var(--fdfs-size-card-text);
    line-height: 1.6;
}

/* ------------------------------------------------------------------------
 * Smaller screens
 * --------------------------------------------------------------------- */

@media (max-width: 1023px) {
    .fdfs-about-compliance__inner {
        grid-template-columns: 1fr;
        row-gap: 48px;
    }

    .fdfs-about-approach,
    .fdfs-about-compliance {
        padding-block: 80px;
    }
}

@media (max-width: 639px) {
    .fdfs-approach-grid {
        grid-template-columns: 1fr;
    }

    .fdfs-approach {
        padding: 32px 24px;
    }

    .fdfs-fact-card {
        padding: 24px;
    }
}