/*
 * page-projects.css — rules used only on the Projects page (page-projects.php).
 * Markup: page-projects.php and template-parts/projects/project-card.php.
 */

/* ------------------------------------------------------------------------
 * "Case studies in preparation" band under the breadcrumb
 * --------------------------------------------------------------------- */

.fdfs-projects-notice {
    padding-block: 41px;
    background: var(--fdfs-surface-muted);
    border-bottom: 1px solid var(--fdfs-line);
}

.fdfs-notice {
    display: grid;
    grid-template-columns: 20px minmax(0, 700px);
    align-items: start;
    column-gap: 17px;
    padding-bottom: 2px;
    padding-left: 24px;
    border-left: 2px solid var(--fdfs-red);
}

.fdfs-notice__icon {
    width: 20px;
    height: 20px;
    margin-top: 2px;
    color: var(--fdfs-red);
}

.fdfs-notice__title {
    color: var(--fdfs-black);
    font-family: var(--fdfs-font-heading);
    font-size: 1.025rem;
    font-weight: 700;
    line-height: 1.2;
}

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

/* ------------------------------------------------------------------------
 * Project records: two bordered columns
 * --------------------------------------------------------------------- */

/* Slightly less space under the references note than other sections, as in the design. */
.fdfs-projects {
    padding-bottom: calc(var(--fdfs-section-space) - 2px);
}

.fdfs-project-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 60px;
    border-top: 1px solid var(--fdfs-line);
    border-left: 1px solid var(--fdfs-line);
}

.fdfs-project-card {
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--fdfs-line);
    border-bottom: 1px solid var(--fdfs-line);
}

.fdfs-project-card__media {
    position: relative;
}

.fdfs-project-card__image {
    aspect-ratio: 16 / 9;
}

.fdfs-project-card__badge {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    padding: 0 12px 3px;
    background: var(--fdfs-ink);
    color: var(--fdfs-white);
    font-family: var(--fdfs-font-mono);
    font-size: 0.653rem;
    line-height: 23px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.fdfs-project-card__body {
    flex: 1;
    padding: 34px 32px 35px;
}

.fdfs-project-card__title {
    color: var(--fdfs-black);
    font-family: var(--fdfs-font-heading);
    font-size: 1.29rem;
    font-weight: 700;
    line-height: 1.25;
}

/* Label / value rows with a line above each and below the last. */
.fdfs-project-card__details {
    margin: 27px 0 0;
    border-bottom: 1px solid var(--fdfs-line);
}

.fdfs-project-card__row {
    display: grid;
    grid-template-columns: 34% minmax(0, 1fr);
    padding: 11px 0;
    border-top: 1px solid var(--fdfs-line);
}

.fdfs-project-card__row dt {
    padding-right: 12px;
    color: #6a6967;
    font-family: var(--fdfs-font-mono);
    font-size: 0.653rem;
    line-height: 1.65;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.fdfs-project-card__row dd {
    margin: 0;
    font-size: var(--fdfs-size-card-text);
    line-height: 1.6;
}

.fdfs-project-card__statement {
    font-size: var(--fdfs-size-card-text);
    line-height: 1.6;
}

.fdfs-project-card__details + .fdfs-project-card__statement {
    margin-top: 24px;
}

.fdfs-project-card__statement + .fdfs-project-card__statement {
    margin-top: 16px;
}

.fdfs-project-card__statement strong {
    color: var(--fdfs-black);
    font-weight: 600;
}

/* ------------------------------------------------------------------------
 * References note under the records
 * --------------------------------------------------------------------- */

.fdfs-projects__references {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-top: 65px;
    padding-top: 49px;
    border-top: 1px solid var(--fdfs-line);
}

.fdfs-projects__references-text {
    max-width: 720px;
    font-size: var(--fdfs-size-card-text);
    line-height: 1.67;
}

.fdfs-projects__references .fdfs-button {
    margin-top: 25px;
}

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

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

@media (max-width: 639px) {
    .fdfs-notice {
        padding-left: 16px;
        column-gap: 12px;
    }

    .fdfs-project-card__body {
        padding: 28px 20px;
    }

    .fdfs-project-card__row {
        grid-template-columns: 40% minmax(0, 1fr);
    }
}