/**
 * MCF — "Meet the Designer(s)" on a single Project
 *
 * Rendered by mcf-public/includes/mcf-project-designers.php and appended beneath
 * the project write-up. It sits INSIDE the project's content column (the layout
 * has a sidebar), so it's deliberately fluid rather than full-bleed.
 *
 * Layout follows Louise's reference: photo left, name + bio right, each designer
 * stacked beneath the previous; stacks to a single column on mobile.
 */

.mcf-meet-designers {
    margin: 40px 0 8px;
    padding-top: 32px;
    border-top: 1px solid var(--mcf-line, #e4e8f0);
}

/* Colour rules are scoped through .mcf-meet-designers (0,2,0) deliberately:
 * Uncode's style-custom.css styles headings via `.style-light h2 / h3` (0,1,1),
 * which outranks a bare single class — a plain `.mcf-md-name` would silently
 * lose to the theme. The brand vars aren't defined on public pages (they're
 * scoped to the portal CSS), so the fallbacks are what actually render; they're
 * kept as vars so a future :root definition themes this for free. */
.mcf-meet-designers .mcf-meet-designers-title {
    margin: 0 0 28px;
    font-size: 1.5rem;
    line-height: 1.2;
    color: var(--mcf-accent, #008ca7);
}

/* One designer: photo left, text right. */
.mcf-md {
    display: flex;
    gap: 28px;
    align-items: flex-start;
}

.mcf-md + .mcf-md {
    margin-top: 36px;
}

.mcf-md-media {
    flex: 0 0 38%;
    max-width: 260px;
}

/* Square + cover, so a row of designers stays visually consistent no matter what
 * aspect their upload happens to be (the profile carousel card does the same).
 * `center top` keeps faces in frame when a portrait photo is cropped. */
.mcf-meet-designers .mcf-md-media img {
    display: block;
    width: 100%;
    /* height:auto is REQUIRED, not redundant: WordPress emits width/height
     * attributes on the <img> (e.g. 300x200) and those presentational hints
     * supply the height, which silently defeats aspect-ratio. Without this the
     * box keeps the upload's own ratio and the square crop never happens. */
    height: auto;
    /* Square. The reference's photos look portrait, but every real designer photo
     * on this site is landscape 3:2 (1148x766) — a portrait box would crop ~47%
     * of the width off and upscale what's left. 1:1 is the compromise: a moderate
     * side-crop that still normalises every upload to one consistent shape. */
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: center top;
    border-radius: 2px;
}

.mcf-md-body {
    flex: 1 1 auto;
    min-width: 0;
}

.mcf-meet-designers .mcf-md-name {
    margin: 0 0 6px;
    font-size: 1.25rem;
    line-height: 1.25;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--mcf-navy, #002e62);
}

.mcf-meet-designers .mcf-md-role {
    margin: 0 0 12px;
    font-size: .8rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--mcf-accent, #008ca7);
}

.mcf-meet-designers .mcf-md-bio {
    color: #54607a;
    line-height: 1.7;
}

.mcf-meet-designers .mcf-md-bio p {
    margin: 0 0 12px;
}

.mcf-meet-designers .mcf-md-bio p:last-child {
    margin-bottom: 0;
}

/* The single "View Location" button at the foot of the section. The <a> carries
 * Uncode's own .btn classes (see mcf_project_location_link()), so its look comes
 * from the theme — we only own the spacing here. Deliberately NOT restyled: it
 * should stay identical to every other button on the site. */
.mcf-meet-designers .mcf-md-link {
    margin: 35px 0 0;
}

/* Tablet: keep both columns, tighten the gutter. */
@media (max-width: 900px) {
    .mcf-md {
        gap: 20px;
    }

    .mcf-md-media {
        flex-basis: 34%;
    }
}

/* Mobile: photo above the text (capped so it never dominates the screen). */
@media (max-width: 600px) {
    .mcf-md {
        display: block;
    }

    .mcf-md-media {
        max-width: 280px;
        margin: 0 0 16px;
    }

    .mcf-md + .mcf-md {
        margin-top: 28px;
    }
}