/* Featured Work Block — "Smith 2.0" / Layout 409
 *
 * Centered serif section heading, then a vertical stack of alternating
 * cards. Each card is a two-column split: large image one side, content
 * panel (cream) the other, alternating left/right via :nth-child(even).
 */

.featured-work {
    /* Section padding: 112px vertical (Figma padding-section-large), generous. */
    padding: clamp(4rem, 8vw, 7rem) 0;
    background-color: var(--color-white, #ffffff);
}

/* --- Section heading ----------------------------------------------------- */

.featured-work__header {
    text-align: center;
    max-width: 768px;
    margin: 0 auto clamp(3rem, 5vw, 5rem);
}

.featured-work__eyebrow {
    display: block;
    font-family: var(--font-family-base, "Barlow", sans-serif);
    font-size: 1.25rem; /* Tagline Barlow Bold ~20px */
    font-weight: 700;
    line-height: 1.5;
    color: var(--color-primary, #0f7e7c);
    margin-bottom: 0.5rem;
}

.featured-work__heading {
    /* Heading / H2: Hoefler Bold 52px, lh 1.2, ls -0.52px, navy. */
    font-family: var(--font-family-heading, "Hoefler Text", serif);
    font-size: 3.25rem;
    font-weight: 400; /* 400: Smith Style Guide - Hoefler Text is Regular. See docs/DECISIONS.md D8 */
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--color-secondary, #0e1b44);
    margin: 0;
}

/* --- Card stack ---------------------------------------------------------- */

.featured-work__list {
    display: flex;
    flex-direction: column;
    gap: 64px; /* Figma gap between cards */
}

/* Frame cards run the full 1280 grid (x80-1360); the global .container inner
   caps at ~1151. Bust the list out to 1280 on wide viewports. */
@media (min-width: 1340px) {
    .featured-work__list {
        width: 1280px;
        margin-left: calc((100% - 1280px) / 2);
    }
}

.featured-work__item {
    /* Shared vertical rhythm for both columns — the image column matches it so
       a contained cover lands at exactly the text height (BugZap #143). */
    --fw-pad-y: 48px;
    display: grid;
    grid-template-columns: 1fr 1fr; /* image + content, equal halves */
    gap: 60px; /* Figma card gap */
    align-items: stretch;
    overflow: hidden;
    background-color: var(--color-tertiary, #f9f8f5); /* Pampas cream */
}

/* Alternate: even cards flip image to the right (content first). */
.featured-work__item:nth-child(even) .featured-work__image {
    order: 2;
}

.featured-work__item:nth-child(even) .featured-work__info {
    order: 1;
}

/* Manual ACF overrides (image_position). */
.featured-work__item--reversed .featured-work__image {
    order: 2;
}
.featured-work__item--reversed .featured-work__info {
    order: 1;
}
.featured-work__item--natural .featured-work__image,
.featured-work__item--natural:nth-child(even) .featured-work__image {
    order: 0;
}
.featured-work__item--natural .featured-work__info,
.featured-work__item--natural:nth-child(even) .featured-work__info {
    order: 1;
}

/* --- Image side ---------------------------------------------------------- */

.featured-work__image {
    position: relative;
    /* BugZap #143. The cover is centred in the column and carries the same
       vertical padding as .featured-work__info, so a contained image resolves
       to the height of the *text* rather than the height of the whole card —
       which is what Christine asked for three rounds running.

       Keeping the img in normal flow (it used to be position:absolute with
       inset:0) is the other half of the fix: with an absolutely positioned
       only child, this column collapsed to 0px height as soon as the grid
       stacked, and the cover rendered at its own height straight over the
       quote. Measured at 430px before the change: column 0px, image 420px,
       both starting at the same y as the text. */
    /* BugZap #117 ("Change size of image container to match Agentis design for this
       and all below"). The 680px came from the superseded Figma card frame;
       the Agentis design export renders every featured-work item at 1280x476 with the
       same 64px row gap (row pitch 540 vs our 744). Measured 2026-08-06 with
       staging and the export both at innerWidth 1512 - 5 items x 204px is the
       whole of the +1022px the home page ran long. */
    min-height: 476px;
}

.featured-work__image img {
    /* Absolute on purpose: an in-flow cover feeds its own height back into the
       grid row, so the image ends up setting the row height that is supposed
       to be setting the image height. Out of flow, the text column alone
       drives the row and the cover just fits inside it. */
    position: absolute;
    left: 0;
    right: 0;
    top: var(--fw-pad-y, 48px);
    bottom: auto;
    /* Explicit height, not auto, and not `bottom`. For an absolutely
       positioned *replaced* element, `height: auto` resolves from the
       intrinsic ratio and `bottom` is ignored — which is why insetting the
       top and bottom alone left the cover at 772px instead of 324px. */
    height: calc(100% - (var(--fw-pad-y, 48px) * 2));
    width: 100%;
    object-fit: contain;
    display: block;
}

/* --- Content panel ------------------------------------------------------- */

.featured-work__info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 24px;
    /* Vertical half shared with the image column via --fw-pad-y (BugZap #143);
       change them together or the cover stops matching the text height. */
    padding: var(--fw-pad-y, 48px) 48px; /* Figma content padding */
    text-align: left;
}

.featured-work__category {
    /* Tagline: Hoefler Bold 24px, navy, lh 1.3, ls -0.24px. */
    font-family: var(--font-family-heading, "Hoefler Text", serif);
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--color-secondary, #0e1b44);
    margin: 0 0 1rem; /* 40px group gap minus content gap */
}

.featured-work__quote {
    /* Heading / H3: Hoefler Bold 36px, navy, lh 1.2, ls -0.36px. */
    font-family: var(--font-family-heading, "Hoefler Text", serif);
    font-size: 2.25rem;
    font-weight: 400;
    font-style: normal;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--color-secondary, #0e1b44);
    margin: 0;
    padding: 0;
    border: none;
    background: none;
}

.featured-work__author {
    /* Barlow Bold 24px, teal. */
    font-family: var(--font-family-base, "Barlow", sans-serif);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.5;
    color: var(--color-primary, #0f7e7c);
    margin: 0;
}

.featured-work__media {
    /* Barlow Regular, navy. */
    font-family: var(--font-family-base, "Barlow", sans-serif);
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--color-secondary, #0e1b44);
    margin: 0;
}

/* --- Responsive: stack image above content under ~992px ------------------ */

@media (max-width: 991px) {
    .featured-work__item,
    .featured-work__item--reversed,
    .featured-work__item--natural {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .featured-work__item .featured-work__image,
    .featured-work__item:nth-child(even) .featured-work__image,
    .featured-work__item--reversed .featured-work__image,
    .featured-work__item--natural .featured-work__image {
        order: 0;
    }

    .featured-work__item .featured-work__info,
    .featured-work__item:nth-child(even) .featured-work__info,
    .featured-work__item--reversed .featured-work__info,
    .featured-work__item--natural .featured-work__info {
        order: 1;
    }

    .featured-work__item,
    .featured-work__item--reversed,
    .featured-work__item--natural {
        --fw-pad-y: 32px;
    }

    .featured-work__image {
        min-height: 0;
        /* BugZap #143 — the 4/3 box cropped portrait covers into a landscape
           frame. Stacked, the column simply sizes to the cover it contains. */
        aspect-ratio: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: var(--fw-pad-y, 32px) 0;
    }

    .featured-work__image img {
        /* Back in flow once stacked — there is no row to over-inflate here,
           and an out-of-flow only child left this column measuring 0px with
           the cover painted straight over the quote (430px, 2026-08-13). */
        position: static;
        width: auto;
        max-width: 100%;
        height: auto;
        /* Keep it a card illustration, not a full-screen takeover. */
        max-height: 360px;
    }

    .featured-work__info {
        padding: clamp(1.5rem, 5vw, 2.5rem);
    }
}