/*
 * page-home.css — rules used only on the home page (front-page.php).
 * Markup: template-parts/home/*. Sections in page order.
 */

/* ------------------------------------------------------------------------
 * Top of page: fills the window below the header, content at the bottom
 * --------------------------------------------------------------------- */

.fdfs-home-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: calc(100vh - var(--fdfs-topbar-height) - var(--fdfs-header-height) - 1px);
    min-height: calc(100svh - var(--fdfs-topbar-height) - var(--fdfs-header-height) - 1px);
    overflow: hidden;
    background: var(--fdfs-ink);
    border-bottom: 3px solid var(--fdfs-red);
    color: var(--fdfs-white);
}

.fdfs-home-hero__media {
    position: absolute;
    inset: 0;
}

.fdfs-home-hero__media:not(.fdfs-media--empty)::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(13, 14, 18, 0.9) 0%, rgba(13, 14, 18, 0.74) 50%, rgba(13, 14, 18, 0.45) 100%);
}

.fdfs-home-hero__media.fdfs-media--empty {
    justify-content: flex-end;
    padding-right: 14%;
    background: #15161a;
}

.fdfs-home-hero__media.fdfs-media--empty .fdfs-media__icon {
    width: 72px;
    height: 72px;
    color: rgba(255, 255, 255, 0.16);
}

.fdfs-home-hero__inner {
    position: relative;
    padding-top: 96px;
    padding-bottom: 64px;
}

.fdfs-home-hero__content {
    max-width: 788px;
}

.fdfs-home-hero .fdfs-eyebrow {
    color: #bbbcc1;
}

.fdfs-home-hero__heading {
    margin-top: 25px;
    color: var(--fdfs-white);
    font-family: var(--fdfs-font-heading);
    font-size: var(--fdfs-size-hero);
    font-weight: 700;
    line-height: 1.035;
}

.fdfs-home-hero__text {
    max-width: 700px;
    margin-top: 26px;
    color: #dbdce0;
    font-size: 1.15rem;
    line-height: 1.64;
}

.fdfs-home-hero__buttons {
    margin-top: 42px;
}

/* Accreditation labels under the buttons, each after a small red square. */
.fdfs-home-hero__strip {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 34px;
    margin-top: 49px;
    padding-top: 27px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    color: #bdbec2;
    font-family: var(--fdfs-font-mono);
    font-size: 0.64rem;
    line-height: 1.4;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.fdfs-home-hero__strip li {
    position: relative;
    padding-left: 14px;
}

.fdfs-home-hero__strip li::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 6px;
    height: 6px;
    background: var(--fdfs-red);
    transform: translateY(-50%);
}

/* ------------------------------------------------------------------------
 * Accreditations band
 * --------------------------------------------------------------------- */

.fdfs-home-accred {
    padding-top: 82px;
    padding-bottom: 83px;
}

.fdfs-home-accred__inner {
    display: grid;
    grid-template-columns: minmax(0, 527fr) minmax(0, 781fr);
    align-items: center;
    column-gap: 64px;
}

.fdfs-home-accred__text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.fdfs-home-accred__heading {
    color: var(--fdfs-black);
    font-family: var(--fdfs-font-heading);
    font-size: 1.9375rem;
    font-weight: 700;
    line-height: 1.25;
}

.fdfs-home-accred__body {
    margin-top: 20px;
    font-size: var(--fdfs-size-card-text);
    line-height: 1.63;
}

.fdfs-home-accred .fdfs-link {
    margin-top: 25px;
}

/* ------------------------------------------------------------------------
 * Introduction
 * --------------------------------------------------------------------- */

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

.fdfs-home-intro__body p + p {
    margin-top: 20px;
}

.fdfs-home-intro__image {
    aspect-ratio: 535 / 664;
}

/* ------------------------------------------------------------------------
 * Capabilities: three cards
 * --------------------------------------------------------------------- */

.fdfs-capability-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 58px;
}

.fdfs-capability-card {
    display: flex;
    flex-direction: column;
    background: var(--fdfs-surface);
}

.fdfs-capability-card__image {
    aspect-ratio: 16 / 10;
}

/* The button sits at the bottom so the three buttons line up. */
.fdfs-capability-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    padding: 40px;
}

.fdfs-capability-card__title {
    margin-top: 14px;
    color: var(--fdfs-black);
    font-family: var(--fdfs-font-heading);
    font-size: 1.2875rem;
    font-weight: 700;
    line-height: 1.25;
}

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

.fdfs-capability-card .fdfs-bullets {
    align-self: stretch;
    margin: 28px 0 32px;
    padding-top: 24px;
    border-top: 1px solid #e6e5e1;
}

.fdfs-capability-card .fdfs-button {
    margin-top: auto;
}

/* ------------------------------------------------------------------------
 * Why us: four numbered points
 * --------------------------------------------------------------------- */

/* Keeps the design's line breaks: "Delivered Around / Your Programme." */
.fdfs-home-why .fdfs-heading {
    text-wrap: balance;
}

.fdfs-feature-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-top: 63px;
}

.fdfs-feature {
    display: flex;
    flex-direction: column;
    padding: 40px;
}

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

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

/* ------------------------------------------------------------------------
 * Projects
 * --------------------------------------------------------------------- */

.fdfs-home-projects__image {
    aspect-ratio: 4 / 3;
}

.fdfs-home-projects .fdfs-split__text > .fdfs-button {
    margin-top: 36px;
}

/* ------------------------------------------------------------------------
 * Delivery process: six step cards
 * --------------------------------------------------------------------- */

.fdfs-steps {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
    margin-top: 58px;
}

.fdfs-step {
    padding: 28px;
    background: var(--fdfs-surface);
}

.fdfs-step__number {
    display: block;
    color: var(--fdfs-red);
    font-family: var(--fdfs-font-heading);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
}

.fdfs-step__title {
    margin-top: 18px;
    color: var(--fdfs-black);
    font-family: var(--fdfs-font-heading);
    font-size: 0.86rem;
    font-weight: 700;
    line-height: 1.5;
}

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

/* ------------------------------------------------------------------------
 * Clients
 * --------------------------------------------------------------------- */

.fdfs-home-clients {
    padding-block: 98px;
}

.fdfs-home-clients__note {
    max-width: 690px;
    margin: 42px auto 0;
    color: #555452;
    font-size: var(--fdfs-size-card-text);
    line-height: 1.6;
    text-align: center;
}

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

@media (max-width: 1279px) {
    .fdfs-steps {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1023px) {
    .fdfs-home-hero__inner {
        padding-top: 72px;
        padding-bottom: 48px;
    }

    /* Keep the empty-photo icon clear of the text. */
    .fdfs-home-hero__media.fdfs-media--empty {
        align-items: flex-start;
        padding: 24px 24px 0 0;
    }

    .fdfs-home-accred__inner {
        grid-template-columns: 1fr;
        row-gap: 48px;
    }

    .fdfs-capability-cards {
        grid-template-columns: 1fr;
    }

    .fdfs-feature-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .fdfs-feature {
        padding: 28px 0;
    }

    .fdfs-home-clients {
        padding-block: 80px;
    }
}

@media (max-width: 639px) {
    .fdfs-home-hero__strip {
        flex-direction: column;
    }

    .fdfs-capability-card__body {
        padding: 28px;
    }

    .fdfs-feature-grid {
        grid-template-columns: 1fr;
    }

    .fdfs-steps {
        grid-template-columns: 1fr;
    }
}