/* ==========================================================================
   Case Studies Block — Smith 2.0 "Large Case Studies"
   Centered title + stack of full-width coloured testimonial cards.
   ========================================================================== */

.case-studies {
    background-color: var(--color-white, #fff);
    padding: clamp(3.5rem, 9vw, 7rem) clamp(1.25rem, 5vw, 4rem);
}

.case-studies__inner {
    max-width: 1280px;
    margin-inline: auto;
}

.case-studies__title {
    text-align: center;
    max-width: 768px;
    margin: 0 auto clamp(2.5rem, 5vw, 4rem);
}

.case-studies__heading {
    font-family: var(--font-family-heading, "Hoefler Text", Georgia, serif);
    font-weight: 400; /* 400: Smith Style Guide - Hoefler Text is Regular. See docs/DECISIONS.md D8 */
    font-size: 3.25rem;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--color-blue-zodiac, #0e1b44);
    margin: 0;
}

.case-studies__subheading {
    font-family: var(--font-family-base, "Barlow", sans-serif);
    font-size: 1.5rem;
    line-height: 1.4;
    color: var(--color-blue-zodiac, #0e1b44);
    margin: 0.75rem 0 0;
}

.case-studies__list {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

/* --- Card shell ---------------------------------------------------------- */
.case-studies__card {
    /* DEV Figma 10957:14646: 60px vertical / 40px horizontal card padding */
    display: block;
    padding: clamp(2rem, 4vw, 3.75rem) clamp(1.5rem, 3vw, 2.5rem);
}

.case-studies__main {
    display: flex;
    gap: 2.5rem; /* Figma 40px column gap */
    align-items: center;
}

.case-studies__card--img-right .case-studies__main {
    flex-direction: row-reverse;
}

/* Card colours (navy/teal = light text; sage/gold = dark text). */
.case-studies__card--navy { background-color: var(--color-blue-zodiac, #0e1b44); color: #fff; }
.case-studies__card--teal { background-color: var(--color-surfie-green, #0f7e7c); color: #fff; }
.case-studies__card--sage { background-color: var(--color-pine-glade, #b9c789); color: var(--color-blue-zodiac, #0e1b44); }
.case-studies__card--gold { background-color: var(--color-selective-yellow, #f0b200); color: var(--color-blue-zodiac, #0e1b44); }

/* --- Media --------------------------------------------------------------- */
.case-studies__media {
    flex: 0 0 400px;
    max-width: 400px;
    align-self: center;
}

.case-studies__media img {
    display: block;
    width: 100%;
    height: auto;
}

.case-studies__card--fit-cover .case-studies__media img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.case-studies__card--fit-contain .case-studies__media img {
    object-fit: contain;
    max-height: 340px;
    width: auto;
    max-width: 100%;
    margin-inline: auto;
}

/* Feature card (gold, with pull-quote) uses a narrower book image. */
.case-studies__card--feature .case-studies__media {
    flex-basis: 300px;
    max-width: 300px;
    align-self: flex-start;
}

/* --- Body ---------------------------------------------------------------- */
.case-studies__body {
    flex: 1 1 auto;
    min-width: 0;
}

.case-studies__pull {
    font-family: var(--font-family-heading, "Hoefler Text", Georgia, serif);
    font-weight: 400;
    font-size: 2.25rem;
    line-height: 1.25;
    margin: 0 0 1.5rem;
    color: inherit;
}

.case-studies__quote {
    font-family: var(--font-family-heading, "Hoefler Text", Georgia, serif);
    font-weight: 400;
    font-size: 1.5rem;
    line-height: 1.4;
    margin: 0;
    color: inherit;
    /* Reset the global `blockquote` treatment (cream box + teal border + italic
       light text from base/_typography.scss). Figma places the quote directly
       on the coloured card; the leaked box made white text on navy/teal cards
       invisible. */
    background: none;
    border: 0;
    padding: 0;
    font-style: normal;
}

/* Feature cards use lighter-weight body copy for the long testimonial. */
.case-studies__card--feature .case-studies__quote {
    font-family: var(--font-family-base, "Barlow", sans-serif);
    /* BugZap #127, Christine 2026-08-06: "can the whole box be regular
       paragraph size (see the Agentis design export)". Was 24px/1.5/400 off the superseded DEV
       Figma frame; the export runs body copy at 17/1.6/300 throughout, the
       same Body-L step already adopted for #118, #120 and #124. */
    font-weight: 300;
    font-size: 1.0625rem;
    line-height: 1.6;
}

/* DEV Figma cards 1/2: quote block and attribution are centered. */
.case-studies__card:not(.case-studies__card--feature) .case-studies__body {
    text-align: center;
}
.case-studies__card:not(.case-studies__card--feature) .case-studies__quote {
    font-family: var(--font-family-base, "Barlow", sans-serif);
    /* BugZap #127 - see the --feature rule above. */
    font-weight: 300;
    font-size: 1.0625rem;
    line-height: 1.6;
}

.case-studies__author {
    font-family: var(--font-family-base, "Barlow", sans-serif);
    font-weight: 700;
    font-size: 1.5rem; /* DEV Figma 24px */
    margin: 1.5rem 0 0;
    color: inherit;
}

.case-studies__book {
    font-family: var(--font-family-base, "Barlow", sans-serif);
    font-style: italic;
    font-size: 1rem;
    line-height: 1.4;
    margin: 0.25rem 0 0;
    color: inherit;
    opacity: 0.9;
}

.case-studies__media-list {
    /* DEV Figma: full-width centered strip below the card row (1200x48, 16px bold) */
    font-family: var(--font-family-base, "Barlow", sans-serif);
    /* BugZap #127: "needs a header that says Featured in and is bolded then
       space/enter/return for the list - these should not be bolded". The
       strip itself is now regular weight and only an explicit <b>/<strong>
       lead is bold. */
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.5;
    margin: 2.5rem 0 0; /* 40px above the strip */
    text-align: center;
    color: inherit;
    /* BugZap #215, third pass - this `opacity: 0.85` was the actual cause and
       I missed it twice.
       Christine: "it still looks paler on my screen (refreshed cache) for sure
       it's #0e1b44 at 100%?" She is right and the answer to her question is no:
       the colour IS #0e1b44, but it was being painted at 85%.
       My first pass reported "full opacity, correct navy" because I measured
       opacity on the <b> label, which computes 1 - opacity is not inherited as
       a value, so a child always reports its own while the PARENT's 0.85 still
       paints the whole subtree. Measuring the child told me nothing about what
       is on screen.
       The weight fix earlier in this ticket (300 -> 400) was also real and
       stays; there were two causes stacked, which is why fixing one left it
       still looking pale. The sibling paragraphs run 400 at opacity 1, so the
       strip now matches them exactly. */
    opacity: 1;
}

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 782px) {
    .case-studies__main,
    .case-studies__card--img-right .case-studies__main {
        flex-direction: column;
        align-items: stretch;
    }
    .case-studies__media,
    .case-studies__card--feature .case-studies__media {
        flex-basis: auto;
        max-width: 100%;
    }
    .case-studies__card--fit-cover .case-studies__media img {
        aspect-ratio: 16 / 10;
    }
}



/* DEV Figma: quote paragraphs — first paragraph is a serif bold lead. */
.case-studies__quote p { margin: 0; }
.case-studies__quote p + p { margin-top: 1em; }
.case-studies__card:not(.case-studies__card--feature) .case-studies__quote p:first-child {
    font-family: var(--font-family-heading, Georgia, serif);
    font-weight: 400;
    font-size: 1.75rem; /* 28px serif lead */
    line-height: 1.3;
}


/* Frame cards are a fixed 608px with centred content (Business Large Case
   Studies 10957:14646: Card y274/y922, h608 each); auto-height cards ran
   short and the section drifted downward (Scout 21-11: 15.3% bottom-heavy). */
@media (min-width: 901px) {
    .case-studies__card {
        min-height: 608px;
        justify-content: center;
    }
}


/* Feature card (Figma Louisa 10957:14646): photo column carries the centred
   attribution + outlets under a ~300px book image; body is the pull quote +
   left-aligned Barlow paragraphs. */
.case-studies__card--feature .case-studies__media {
    flex-basis: 420px;
    max-width: 420px;
    text-align: center;
}
.case-studies__card--feature .case-studies__media img {
    max-width: 300px;
    margin-inline: auto;
}
.case-studies__card--feature .case-studies__media .case-studies__author {
    font-size: 1.25rem;
    margin-top: 1.5rem;
}
.case-studies__card--feature .case-studies__media .case-studies__book {
    font-size: 0.875rem;
    margin-top: 0.5rem;
}
.case-studies__media-list b,
.case-studies__media-list strong {
    font-weight: 700;
}
.case-studies__card--feature .case-studies__media .case-studies__media-list {
    font-size: 0.875rem;
    margin-top: 1.75rem;
    text-align: center;
    opacity: 1;
}


/* Feature quote: the frame closes on a serif-bold line. */
.case-studies__card--feature .case-studies__quote p:last-child {
    font-family: var(--font-family-heading, "Hoefler Text", Georgia, serif);
    font-weight: 400;
    font-size: 1.5rem;
    line-height: 1.4;
}