/* Content List Block — Smith 2.0 "Layout / 19" + mirror "Layout / 210" */

.content-list {
    background-color: var(--color-white, #ffffff);
    color: var(--color-blue-zodiac, #0e1b44);
    /* Figma: 112px vertical, 64px horizontal page padding */
    padding: clamp(3.5rem, 9vw, 7rem) clamp(1.25rem, 5vw, 4rem);
}

.content-list__container {
    /* Figma container max-width 1280px, centered */
    max-width: 1280px;
    margin-inline: auto;
    width: 100%;
}

.content-list__grid {
    display: flex;
    flex-direction: column;
    /* Figma component gap 80px */
    gap: 2.5rem;
}

@media (min-width: 768px) {
    .content-list__grid {
        flex-direction: row;
        align-items: center;
        gap: 5rem; /* 80px */
    }

    /* Content takes remaining space; image is a fixed ~400px column */
    .content-list__content {
        flex: 1 1 0;
        min-width: 0;
    }

    .content-list__media {
        flex: 0 0 400px;
        align-self: stretch;
    }

    /* Mirror layout — image on the left (Figma "Layout / 210") */
    .content-list--image-left .content-list__grid {
        flex-direction: row-reverse;
    }

    /* Top-align content with the image (e.g. About "Join the team") */
    .content-list--valign-top .content-list__grid {
        align-items: flex-start;
    }
}

/* BugZap #47. The Agentis design export steps the row gutter down once the two
   columns get narrow - it authors `@media (min-width: 768px) and
   (max-width: 1199px) .content-list__grid { gap: 1.75rem }` and then lets its
   own `@media (min-width: 992px) .content-list__grid { gap: 80px }` win back
   on source order, so the step is effectively 768-991 only. Measured on the
   export: 1759/1200/1100/1000/992 -> 80px, 985/900/800 -> 28px.

   Ours held 80px all the way down to 768, which is the "gap looks huge on
   tablet" half of #47. Written here as the honest 768-991 range rather than
   reproducing the export's overlapping-query accident; the >=992 side is
   unchanged (5rem here, and 80px again from
   figma-layer/figma-desktop-shared.css:177 on the Agentis design theme). */
@media (min-width: 768px) and (max-width: 991px) {
    .content-list__grid {
        gap: 1.75rem; /* 28px */
    }
}

/* ---- Content column ---- */
.content-list__content {
    display: flex;
    flex-direction: column;
    /* Figma outer content gap 32px */
    gap: 2rem;
}

/* heading-top variant — eyebrow/heading full-width above the row
   (Figma "Layout / 201" single-heading, e.g. Home team section 10773:68383:
   heading 52px, then 60px gap to the image/copy row). */
.content-list--heading-top .content-list__header {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 60px;
}

.content-list__eyebrow {
    font-family: var(--font-family-base, "Barlow", -apple-system, sans-serif);
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.5;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-surfie-green, var(--color-primary, #0f7e7c));
    margin: 0;
}

/* Heading — Figma: Hoefler Text Bold 52px / 1.2, letter-spacing -0.52px */
.content-list__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, var(--color-secondary, #0e1b44));
    margin: 0;
}

/* Intro / body — Figma: Barlow Regular 24px / 1.5. Now rich text (may contain
   multiple paragraphs + <strong>/<u>/<a>). */
.content-list__intro {
    font-family: var(--font-family-base, "Barlow", -apple-system, sans-serif);
    font-weight: 400;
    font-size: 1.125rem;
    line-height: 1.5;
}
.content-list__intro p { margin: 0; }
.content-list__intro p + p { margin-top: 1.25rem; }
.content-list__intro strong { font-weight: 700; }
.content-list__intro a { color: inherit; }

/* Sub-line — base: Barlow Italic (focus-overview rows, Figma 10836:3937) */
.content-list__subline {
    font-family: var(--font-family-base, "Barlow", -apple-system, sans-serif);
    font-weight: 400;
    font-style: italic;
    font-size: 1.125rem;
    line-height: 1.5;
    margin: 0;
}

/* The intro group (heading -> subline) sits 32px from the list per Figma;
   inner spacing between heading/intro/subline is 16px-24px. */
/* BugZap #112: everything after the first line of the heading is emitted as
   .content-list__heading-sub instead of a <br>. Block-level here so the line
   break renders exactly as nl2br() used to on every page that does not opt
   into the smaller Agentis design sub-line size. */
.content-list__heading-sub { display: block; }

.content-list__heading + .content-list__intro,
.content-list__eyebrow + .content-list__heading {
    margin-top: -1rem; /* tighten toward 16px inner gap within the title group */
}

/* ---- List ---- */
.content-list__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem; /* Figma list gap 16px */
}

.content-list__item {
    position: relative;
    font-family: var(--font-family-base, "Barlow", -apple-system, sans-serif);
    font-weight: 400;
    font-size: 1.125rem;
    line-height: 1.5;
    color: var(--color-blue-zodiac, var(--color-secondary, #0e1b44));
    padding-left: 2.5rem; /* BugZap #48 - 40px, matches the Agentis design reference */
}

/* BugZap #48 - gold rule marker replaces the teal disc.
   Agentis design reference: 28x2px, #F0B200, left 0, top 11.9px at 17px = 0.7em. */
.content-list__item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.7em;
    width: 1.75rem;
    height: 2px;
    border-radius: 0;
    background-color: var(--color-accent-gold, #f0b200);
}

/* ---- Conclusion — Figma: Barlow Bold 24px / 1.5 ---- */
.content-list__conclusion {
    font-family: var(--font-family-base, "Barlow", -apple-system, sans-serif);
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 1.5;
    color: var(--color-blue-zodiac, var(--color-secondary, #0e1b44));
}
.content-list__conclusion p { margin: 0; }
.content-list__conclusion p + p { margin-top: 1.25rem; }

/* ---- Media column ---- */
.content-list__media {
    width: 100%;
}

/* Mobile ONLY: cap height so tall images stay reasonable. (This cap used to
   apply at all widths, flattening every image-driven row to 480px — the
   design's rows are set by the image height: e.g. Services "The Book" 635px,
   "The Expert" 567px, Figma 10773:67538.) */
@media (max-width: 767px) {
    .content-list__media {
        max-height: 480px;
    }
}

.content-list__image {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 320px;
    object-fit: cover;
    border-radius: 0; /* square corners per Figma */
}

/* ---- Coloured band variants (Business / Book Publicity checklists) ------- */
.content-list--bg-cream { background-color: var(--color-pampas, #f9f8f5); }
.content-list--bg-navy  { background-color: var(--color-blue-zodiac, #0e1b44); }

/* Carded: band + a white card holding the heading and check-list (no image). */
.content-list--carded .content-list__content {
    background-color: var(--color-white, #fff);
    padding: clamp(2rem, 5vw, 5rem);
    max-width: 1040px;
    margin-inline: auto;
    width: 100%;
}

/* Check-mark markers replace the disc bullet inside carded checklists. */
.content-list--carded .content-list__item::before {
    content: "✓";
    background: none;
    width: auto;
    height: auto;
    left: 0;
    top: 0;
    color: var(--color-surfie-green, #0f7e7c);
    font-weight: 700;
    font-size: 1.1em;
    line-height: 1.5;
}
.content-list--carded .content-list__item { padding-left: 2rem; }

/* ---- Contain fit: cut-out artwork (e.g. floating book-cover clusters) ---- */
/* Show the cut-out at its natural size, centred, never cropped like a photo. */
.content-list--imgfit-contain .content-list__media {
    max-height: none;
    align-self: center;
    display: flex;
    justify-content: center;
}
.content-list--imgfit-contain .content-list__image {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 460px;
    /* BugZap #73: was min-height:0. A native loading="lazy" image with
       width/height:auto has a 0x0 box until it loads, and Chrome never
       lazy-loads a 0x0 box - so the cut-out never appeared (row 4 on the
       three focus-area pages). 1px gives the loader a box to observe. */
    min-height: 1px;
    min-width: 1px;
    object-fit: contain;
}

/* --- CTA button (gold pill) ------------------------------------------------
   Optional CTA below the content column (e.g. "SEE OUR FOCUS AREAS").
   Matches the compact gold pill used across Smith 2.0. */
.content-list__actions {
    margin-top: 2rem;
    display: flex;
}

.content-list__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.375rem 1.25rem; /* 6px / 20px (Figma) */
    background-color: var(--color-selective-yellow, #f0b200);
    border: 1px solid var(--color-selective-yellow, #f0b200);
    color: var(--color-blue-zodiac, #0e1b44);
    font-family: var(--font-family-base, "Barlow", sans-serif);
    font-weight: 700;
    font-size: 1.25rem; /* BZ #40: Figma Button component = Barlow Bold 20px (10774:90375) */
    letter-spacing: normal;
    line-height: 1.5;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 100px;
    transition: filter 0.2s ease;
}

.content-list__button:hover,
.content-list__button:focus-visible {
    filter: brightness(0.93);
}

/* On the navy band the pill text stays navy for contrast on gold. */
.content-list--bg-navy .content-list__button {
    color: var(--color-blue-zodiac, #0e1b44);
}


/* ---- Chapter variant (History page "Content" rows, Figma 10852:9067 etc.) --
   50/50 columns (600/600 @1440), 36px serif row heading, 24px body,
   image column stretches to match the text column height. Sub hero
   (heading-top) pairs the 52px full-width heading with a serif 36px
   sub-heading rendered as an <h3> inside intro_text. */
@media (min-width: 768px) {
    .content-list--chapter .content-list__media {
        flex: 1 1 0; /* equal columns per Figma History rows */
        max-height: none;
        position: relative; /* image is absolutely filled so the TEXT column sets the row height */
        min-height: 280px;
    }

    .content-list--chapter .content-list__image {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        min-height: 0;
        object-fit: cover;
    }
}

.content-list--chapter .content-list__content {
    gap: 2.5rem; /* Figma heading -> body gap 40px */
}

.content-list--chapter .content-list__content .content-list__heading {
    font-size: 2.25rem; /* Figma 36px / 1.2 */
    line-height: 1.2;
}

.content-list--chapter .content-list__heading + .content-list__intro {
    margin-top: 0; /* keep the full 40px gap (base tightens to 16px) */
}

.content-list--chapter .content-list__intro {
    font-size: 1.5rem; /* Figma 24px / 1.5 */
    line-height: 1.5;
}

.content-list--chapter .content-list__intro p + p {
    margin-top: 1.5em; /* Figma paragraph gap = one 36px line */
}

.content-list--chapter .content-list__intro h3 {
    font-family: var(--font-family-heading, "Hoefler Text", Georgia, serif);
    font-weight: 400;
    font-size: 2.25rem; /* Figma 36px / 1.2 */
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--color-blue-zodiac, var(--color-secondary, #0e1b44));
    margin: 0 0 2.5rem; /* Figma sub-heading -> body gap 40px */
}

/* Sub hero: Figma gap between the full-width heading and the row is 80px. */
.content-list--chapter.content-list--heading-top .content-list__header {
    margin-bottom: 80px;
}

/* ...but Content/1 rows (full-width heading + media/copy row, e.g. PA/Business/
   Lifestyle 10774:78813 et al) pair the heading with a 40px gap to the row. */
.content-list--chapter.content-list--heading-top[class*="content-list--media-"] .content-list__header {
    margin-bottom: 40px; /* focus Content/1 rows only */
}

/* Home Layout/201 rows: chapter + heading-top WITH a media column but no
   media-* variant — their frames run the heading-top 60 (the 80px sub-hero
   margin was landing here). */
.content-list--chapter.content-list--heading-top:not([class*="content-list--media-"]):has(.content-list__media) .content-list__header {
    margin-bottom: 60px;
}

/* Chapter rows: the content column's 40px flex gap IS the Figma CTA gap —
   the base 32px margin double-dipped to 72 (frame: intro -> button = 40). */
.content-list--chapter .content-list__actions {
    margin-top: 0;
}

/* ---- Large-list variant (Home "Positioned with purpose", Figma Layout/477) --
   24px intro/items and a taller contain-fit image (Figma books cut-out 580x506). */
.content-list--lg-items .content-list__intro,
.content-list--lg-items .content-list__item {
    font-size: 1.5rem; /* Figma 24px / 1.5 */
    line-height: 1.5;
}

.content-list--lg-items .content-list__list {
    gap: 2.5rem; /* frame list-item gap 40px (glyph pitch ~55 at 24px text) */
}
.content-list--lg-items .content-list__content {
    gap: 2.5rem; /* frame heading/intro/list gaps run 40px, not the 32px base */
}
.content-list--lg-items .content-list__actions {
    margin-top: 0; /* the 40px column gap IS the frame's CTA gap */
}

.content-list--lg-items.content-list--imgfit-contain .content-list__image {
    max-height: 506px; /* Figma 580x506 */
}

@media (min-width: 768px) {
    /* lg-items variant: Figma Layout/477 gives the artwork a full 600px column.

       BugZap #50 / #54. This used to be `flex: 0 0 600px`, which is what the
       Agentis design export authors too - but the export's homepage instance also
       carries `content-list--split-50-50`, so the rigid rule never actually
       renders there. Ours did, and a rigid 600px media column cannot shrink:
       the text column simply absorbs whatever is left after the 80px gutter.
       Measured on staging before this change:
           1759 -> content 600  media 600
           1200 -> content 392  media 600
            985 -> content 207  media 600
            800 -> content  40  media 600
       which is exactly Christine's "the image stays the same size and the text
       gets squished" / "image stays full size too long".

       `flex: 1 1 50%` with `max-width: 50%` keeps the artwork at a true half
       column at every width and is a no-op at full desktop, because the row
       container is capped at 1280 and 1280 - 80 gutter = 600 + 600. Verified
       by live injection in a width-emulating iframe:
           1759 -> 600 / 600  (identical to before)
           1200 -> 496 / 496
           1150 -> 471 / 471
            985 -> 403 / 403
            800 -> 320 / 320
       against the export's 600/600, 506/506, 419/419, 340/340 - the residual
       few px is the gutter, not the column split.

       `.content-list--split-50-50` (see below) sets the same properties at the
       same specificity and sits LATER in this file, so an instance that does
       carry the 50/50 field still wins on source order. */
    .content-list--lg-items .content-list__media {
        flex: 1 1 50%;
        max-width: 50%;
        min-width: 0;
    }
    .content-list--lg-items .content-list__content {
        flex: 1 1 50%;
        min-width: 0;
    }
}

/* ---- Flush-top variant: rows that sit under a shared section title in the
   same Figma section (Services "two-part approach" rows, 10773:67538). ---- */
.content-list--flush-top {
    padding-top: 0;
}

/* Services "two-part approach" rows: the subline lead-in is BOLD, not italic
   (services-2-spec: "subline is bold"). */
.content-list--flush-top .content-list__subline {
    font-weight: 700;
    font-style: normal;
}

/* Chapter rows that carry a subline render it at the Figma 24px. */
.content-list--chapter .content-list__subline {
    font-size: 1.5rem;
    line-height: 1.5;
}


/* ---- Media-fit utility (About "Our Story", Figma 10790:42099) ------------
   The image column stops dictating the row height: the image absolutely
   fills its ~400px column to match the TEXT column height (design 352x334
   next to a 334px text block). Same treatment as --chapter's media column
   but without the 50/50 columns or heading resize. */
@media (min-width: 768px) {
    .content-list--media-fit .content-list__media {
        max-height: none;
        position: relative;
        min-height: 280px;
    }

    .content-list--media-fit .content-list__image {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        min-height: 0;
        object-fit: cover;
    }
}

/* ---- Tight-bottom utility -------------------------------------------------
   80px bottom padding instead of 112px, for sections that flow into a
   directly-related band below (Figma About Story: text -> video gap = 80). */
.content-list--tight-bottom {
    padding-bottom: 5rem;
}


/* ---- Media aspect variants (Services Layout/19, Figma 10773:67538) -------
   The design's image column drives the row height with specific crops:
   The Book row 400x635, The Expert row 400x567. aspect-ratio gives the media
   column a definite height so object-fit:cover crops the photo to match. */
@media (min-width: 768px) {
    .content-list--media-h635 .content-list__media { aspect-ratio: 400 / 635; }
    .content-list--media-h567 .content-list__media { aspect-ratio: 400 / 567; }
}

/* ---- Row-tight utility (Services "Focus Sections", Figma 10773:68026) ----
   Consecutive content-list rows inside one design section: 40px block padding
   so adjacent rows read as the design's 80px row gap instead of stacking
   two full 112px section paddings (224px). */
.content-list--row-tight {
    padding-block: 2.5rem;
}


/* Story variant body copy is Barlow 24px per Figma 10790:42105 (base intro
   is 18px, which read visibly smaller than the frame). */
.content-list--media-fit .content-list__intro {
    font-size: 1.5rem;
}


/* ---- Design-exact column/media geometry variants -------------------------
   The generic row is text-flex + 400px media, but the frames use several
   specific geometries. Each variant pins the media column basis and the
   design crop via aspect-ratio (image covers), and --inner-1160 recreates
   the 60px-inset 1160px component grid (Figma "Layout / 13" rows). */
@media (min-width: 768px) {
    .content-list--inner-1160 .content-list__grid {
        max-width: 1160px;
        margin-inline: auto;
    }

    .content-list--media-540 .content-list__media { flex: 0 0 540px; aspect-ratio: 540 / 320; max-height: none; }
    .content-list--media-270 .content-list__media { flex: 0 0 270px; aspect-ratio: 270 / 400; max-height: none; }
    .content-list--media-360 .content-list__media { flex: 0 0 360px; aspect-ratio: 360 / 374; max-height: none; }
    .content-list--media-600 .content-list__media { flex: 0 0 600px; aspect-ratio: 600 / 476; max-height: none; }
    .content-list--media-600.content-list--media-sq .content-list__media { aspect-ratio: 1 / 1; }
    .content-list--media-sq400 .content-list__media { flex: 0 0 400px; aspect-ratio: 1 / 1; max-height: none; }
    .content-list--media-440 .content-list__media { flex: 0 0 440px; aspect-ratio: 440 / 292; max-height: none; } /* About Join, 10773:75129 */
    /* The Join photo upload isn't an exact 440x292 crop — pin the crop on the
       img itself so the media box can't grow past the frame's 292. */
    .content-list--media-440 .content-list__image { aspect-ratio: 440 / 292; width: 100%; height: auto; min-height: 0; object-fit: cover; }
}

/* ---- BugZap #71 / #72 / #73 — focus-area rows are 2/3 text, 1/3 photo -----
   "text (left) should be 2/3, photo (right) 1/3" / "photo should be 1/3,
   text 2/3" / "Text 2/3 photo 1/3 width".

   The --media-270 / --media-360 / --media-540 bases came from the older Figma
   frames and gave 810/270, 720/360 and 420/540 — the last of which put the
   photo WIDER than the text. The Agentis design export drops the per-frame sizes
   entirely: every row inside the 1160 grid is a flexible text column beside a
   fixed 400px media column, i.e. 680 / 400 with the 80px gutter — 2/3 to 1/3
   of the 1080 of actual content. Measured on the reference at 1759px:
   content 680, media 400, gap 80, container 1160, on all three rows.

   --inner-1160 is only ever applied to these nine rows (three each on
   /business-leadership/, /lifestyle-wellness/ and /public-affairs-policy/),
   so scoping the override to it leaves every other template untouched. */
@media (min-width: 768px) {
    /* Reset the obsolete per-frame media widths on the 1160 rows. The export
       gives every inner row a flat 400px media column beside a flexible text
       column, with no aspect-ratio: the box takes its height from the image
       (base .content-list__image min-height 320px, media max-height 480px).
       That reproduces the reference exactly on all three pages, including
       Public Affairs row 2 which is 400x480 where the other two are 400x320 —
       a fixed aspect-ratio here would have been wrong. */
    .content-list--inner-1160 .content-list__media {
        flex: 0 0 400px;
        aspect-ratio: auto;
        max-height: 480px;
    }

    /* Row 1 carries --media-540 --carded in our block content; the export
       calls it --media-match-text: the photo stretches to the height of the
       copy beside it, with the image absolutely positioned so it can never
       push the row taller. Recipe copied verbatim from the export. */
    .content-list--inner-1160.content-list--media-540 .content-list__media {
        align-self: stretch;
        position: relative;
        display: block;
        min-height: 0;
        max-height: none;
        overflow: hidden;
    }
    .content-list--inner-1160.content-list--media-540 .content-list__image {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        min-height: 0;
        max-height: none;
        object-fit: cover;
        object-position: center;
    }

    /* Row 3 is --imgfit-contain: the cut-out keeps its natural size, centred
       in the 400px column, capped at 460px tall by the rule near line 227.
       Re-assert max-height so the reset above cannot clip it to 480. */
    .content-list--inner-1160.content-list--imgfit-contain .content-list__media {
        max-height: none;
    }
}

/* ---- Insights Blog/Podcast rows (media-sq400, Figma 10774:81273) ----------
   Frame: 24px/1.5 body (ours ran the 18px base), text column top-aligned with
   the 400px image (ours centered, which floated the copy ~50px low). */
@media (min-width: 768px) {
    .content-list--media-sq400 .content-list__grid {
        align-items: flex-start;
    }
    .content-list--media-sq400 .content-list__intro {
        font-size: 1.5rem; /* Figma 24px / 1.5 */
        line-height: 1.5;
    }
}

/* ---- About Join (media-440 + heading-top, Figma 10773:75124) --------------
   Frame: section pt 80 (not 112), heading -> row gap 40 (not 60), 24px/1.5
   body in an 800px column 40px off the photo, copy top-aligned with photo. */
.content-list--media-440.content-list--heading-top {
    padding-top: 80px;
}
.content-list--media-440.content-list--heading-top .content-list__header {
    margin-bottom: 40px;
}
@media (min-width: 768px) {
    .content-list--media-440 .content-list__grid {
        align-items: flex-start;
        gap: 2.5rem; /* Figma photo -> copy gap 40px */
    }
    .content-list--media-440 .content-list__intro {
        font-size: 1.5rem; /* Figma 24px / 1.5 */
        line-height: 1.5;
    }
}

/* Layout/13 carded rows (PA/Business/Lifestyle "Who We Work With",
   10774:78813 et al): the frame is a WHITE section with a 1280px linen panel
   around the whole text+image grid (padding 40/60) — we had the inverse
   (cream section, white card on just the text column). */
.content-list--bg-cream.content-list--inner-1160.content-list--carded[class*="content-list--media-"] {
    background-color: var(--color-white, #fff);
}
.content-list--inner-1160.content-list--carded[class*="content-list--media-"] .content-list__content {
    background: none;
    padding: 0;
    max-width: none;
}
/* BugZap #71 — the grid-level cream panel was a duplicate. .content-list__container
   is already 1280px with 56/60 padding and the pampas background (measured
   identical to the export), so the extra 40/60 on the grid shrank the inner
   box to 1040 and the text column to 560 instead of 680. The export has no
   grid padding and no grid background here; align-items comes from
   --valign-top (flex-start), with the media stretching via align-self. */

/* Business Layout/13 (10774:78813): the frame runs the carded row copy at
   24px/1.5 (PA/Lifestyle frames keep the 18px base). Page-scoped to match. */
.page-id-93 .content-list--inner-1160 .content-list__intro {
    font-size: 1.5rem;
    line-height: 1.5;
}


/* When a design-exact media variant is set on a --chapter row, the variant's
   aspect crop wins over chapter's absolute text-height fill (PA/Lifestyle
   Content/1 rows carry both; the abs-fill was overriding the 600x476 crop). */
@media (min-width: 768px) {
    .content-list--chapter[class*="content-list--media-"]:not(.content-list--media-match-text) .content-list__media {
        position: static;
    }

    /* align-self:stretch lets a taller text column defeat the aspect crop
       (PA Content/1 rendered 600x548 instead of 600x476); variant rows
       center the image column like the frames instead. */
    /* BugZap #70. `--media-match-text` contains the substring
       `content-list--media-`, so the attribute guard below caught it too and,
       at (0,3,0) against the variant's own (0,2,0), pinned the media to
       `align-self: center`. With the image absolutely positioned that collapsed
       the column to 0px (Business & Leadership row 2 measured 400x0 live).
       The guard was only ever meant for the fixed-crop variants. */
    .content-list[class*="content-list--media-"]:not(.content-list--media-match-text) .content-list__media {
        align-self: center;
    }

    .content-list--chapter[class*="content-list--media-"]:not(.content-list--media-match-text) .content-list__image {
        position: static;
        inset: auto;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}


/* Business/Lifestyle Content/1 frames hand-place the section content 10px right
   and ~11px down vs the grid (PA sits on-grid). Utility applied via className. */
@media (min-width: 768px) {
    .content-list--frame-down {
        padding-top: 123px;
        padding-bottom: 101px;
    }
    .content-list--frame-down .content-list__container {
        transform: translateX(10px);
    }
}


/* ---- Mobile stack order (mobile frames): the media leads the section,
   then heading/copy/panel — we rendered the text column first. ---- */
@media (max-width: 767px) {
    .content-list__media {
        order: -1;
    }
}


/* ---- BugZap #84 - Split 50/50 (About "Our Story") -------------------------
   Christine, verbatim:
       "let's 50/50 split text and media, then replace image on right with the
        video below popping up in a modal when clicked to play.
        https://www.youtube.com/watch?v=xxz2cXoPgb0
        and add custom play button on top - see the Agentis design export"

   Measured on the Agentis design export at viewport 1759 (the section there is
   `content-list section content-list--valign-top content-list--split-50-50`):
       section  1759x481, padding 112px 64px
       grid     1280x257, gap 80, align-items flex-start
       content  600x234
       media    600x257
       image    600x257, object-fit contain, height auto (natural 1936x828)
       heading  52 / 61.984
   600 + 80 + 600 = 1280, so the columns are a true half each.

   The export authors this twice: a base rule (gap clamp(2rem,4vw,4rem),
   align-items stretch, absolutely-positioned cover image) and a later
   override layer that wins with !important. Only the override layer renders,
   so that is what is reproduced here - without the !important, which the
   export only needs because its two layers fight each other:
       gap clamp(2rem, 5vw, 5rem)   align-items flex-start
       content/media flex 1 1 50%, width 50%, max-width 50%, min-width 0
       image position static, height auto, object-fit contain

   Placed after --media-fit deliberately, and the media reset below is written
   to be self-contained, so the variant lands correctly whether or not the
   block instance also carries --media-fit / --tight-bottom (the About block
   currently carries both). */
@media (min-width: 768px) {
    .content-list--split-50-50 .content-list__grid {
        flex-direction: row;
        align-items: flex-start;
        gap: clamp(2rem, 5vw, 5rem);
    }

    .content-list--split-50-50 .content-list__content,
    .content-list--split-50-50 .content-list__media {
        flex: 1 1 50%;
        width: 50%;
        max-width: 50%;
        min-width: 0;
    }

    /* Undo the --media-fit / aspect-ratio treatments: at 50/50 the still is
       shown whole at its natural aspect, not cropped to the text height. */
    .content-list--split-50-50 .content-list__media {
        position: static;
        height: auto;
        min-height: 0;
        max-height: none;
        aspect-ratio: auto;
        align-self: flex-start;
    }

    .content-list--split-50-50 .content-list__image {
        position: static;
        inset: auto;
        width: 100%;
        height: auto;
        min-height: 0;
        max-width: 100%;
        object-fit: contain;
    }
}

/* BugZap #47. The 768-1199px `gap: 1.75rem` step that used to live here is
   deleted on purpose. The export does author that rule, but it authors it
   BEFORE `.content-list--split-50-50 .content-list__grid { gap: clamp(2rem,
   5vw, 5rem) }`, so at equal specificity the clamp wins and the step never
   renders. Measured on the export's 50/50 row: 1200 -> 60px, 1100 -> 55px,
   1000 -> 50px, 985 -> 49.25px, 900 -> 45px, 800 -> 40px - that is 5vw
   throughout, not 28px. Ours sat after the clamp and so did render, which
   made the About "Our Story" gutter 21px too tight at tablet. The 50/50
   variant keeps the fluid clamp at every width above 768. */


/* ---- Services rows: one-third media + two-thirds copy (--split-1-2) --------
   BugZap #56. The Agentis design export builds the /services/ "The Book" and "The
   Expert" rows from four className variants we did not have:
       content-list--flush-top content-list--split-1-2
       content-list--valign-top content-list--tight
       content-list--square-media
   `--flush-top`, `--valign-top` and `--square-media` already existed here (or
   in the figma layer); `--split-1-2` and `--tight` are ported below, verbatim
   from the export's authored rules.

   What we render today instead is `--image-left --flush-top --media-h635`
   (and `--flush-top --media-h567` on the second row), i.e. a 400x635 and a
   400x567 portrait crop on an 80px gutter. Christine's note on #56 - "1x1
   ratio" - is `--square-media`.

   Measured on the export, /services/ row 1:
       @1400  gap 56  media maxw 33.333%  box 405x405
       @1200  gap 48  media maxw 33.333%  box 341x341
       @1100  gap 28  media maxw 50%      box 486x486
       @1000  gap 28  media maxw 50%      box 436x436
       @900   gap 28  media maxw 50%      box 405x405
       @800   gap 28  media maxw 50%      box 360x360
       @700   gap 16  column              box 660x660
   The 56/48 step is clamp(2rem, 4vw, 4rem); the 28px tablet step and the 50%
   media are a (768-1199) override the export layers on top of its own >=768
   rule. Both are reproduced in that order below so the cascade matches.

   This section is CSS + markup only. Applying it needs an editor pass on the
   Services page: swap `content-list--media-h635` / `--media-h567` for
   `content-list--split-1-2 content-list--tight content-list--square-media`,
   keeping `--flush-top`, `--valign-top` and (row 1 only) `--image-left`. */
.content-list--split-1-2 .content-list__media {
    position: relative;
    overflow: hidden;
    height: 60vw;
    max-height: 480px;
    min-height: 240px;
    width: 100%;
}

.content-list--split-1-2 .content-list__image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: cover;
    object-position: center;
}

@media (max-width: 767px) {
    .content-list--split-1-2 .content-list__grid {
        display: flex;
        flex-direction: column;
    }
    .content-list--split-1-2 .content-list__media {
        order: 0;
    }
    .content-list--split-1-2 .content-list__content {
        order: 1;
    }
}

@media (min-width: 768px) {
    .content-list--split-1-2 .content-list__grid {
        align-items: stretch;
        gap: clamp(2rem, 4vw, 4rem);
    }
    .content-list--split-1-2 .content-list__media {
        flex: 1 1 0;
        max-width: 33.333%;
        align-self: stretch;
        max-height: none;
        height: auto;
        min-height: 0;
        position: relative;
        overflow: hidden;
    }
    .content-list--split-1-2 .content-list__content {
        flex: 2 2 0;
        max-width: 66.667%;
        min-width: 0;
    }
    .content-list--valign-top.content-list--split-1-2 .content-list__grid {
        align-items: flex-start;
    }
    /* Three classes, so this also outranks the base `--tight` 1.25rem below -
       the export renders 8px here, not 20px. */
    .content-list--valign-top.content-list--split-1-2 .content-list__content {
        gap: 0.5rem;
    }
}

/* Must follow the >=768 block: the export lets this narrow-column step win on
   source order, so tablet gets a 50% media column on a 28px gutter. */
@media (min-width: 768px) and (max-width: 1199px) {
    .content-list--split-1-2 .content-list__media {
        max-width: 50%;
        flex: 1 1 50%;
    }
    .content-list--split-1-2 .content-list__grid {
        gap: 1.75rem; /* 28px */
    }
}


/* ---- Condensed row copy (--tight) -----------------------------------------
   BugZap #56, ported verbatim from the export. Pairs with --split-1-2 on the
   Services rows; on its own it just tightens the copy stack. */
.content-list--tight .content-list__content {
    gap: 1.25rem;
}

.content-list--tight .content-list__intro,
.content-list--tight .content-list__subline,
.content-list--tight .content-list__item {
    line-height: 1.3;
}

.content-list--tight .content-list__list {
    gap: 0.125rem;
}

/* The export authors `--tight` first and then lets its >=992px `--flush-top`
   bullet step win on source order, so the Services rows render a 4px bullet
   gap, not 2px. Our copy of that step lives in
   figma-layer/figma-desktop-shared.css:297, which is enqueued BEFORE the block
   stylesheets - so without this it would lose to the 0.125rem above and the
   bullets would tighten to 2px. Restated here to keep the winning value in one
   place; see the note left at figma-desktop-shared.css:297. */
@media (min-width: 992px) {
    .content-list--flush-top .content-list__list {
        gap: 0.25rem; /* 4px */
    }
}

.content-list--tight .content-list__intro p + p {
    margin-top: 0.5rem;
}


/* ---- Condensed row copy, Agentis design's own (--compact) -------------------------
   BugZap #70. Ported verbatim from the Agentis design export's computed rules (read
   off the export's own stylesheet bundle, not inferred). The export puts this
   on the Business Leadership chapter row instead of our
   `--heading-top --media-600 --frame-down` stack.

   Distinct from `--tight` above: `--tight` is the Services treatment (1.25rem
   content gap, tightened line-height, 2-4px bullets). `--compact` is a 1rem
   content gap with a --stack-gap custom property, and it also zeroes the
   heading->intro margin when paired with --chapter. Both exist upstream; we
   carry both so the class sets can match the export exactly. */
.content-list--compact .content-list__content {
    gap: 1rem;
    --stack-gap: 1rem;
}

.content-list--compact.content-list--chapter .content-list__heading + .content-list__intro {
    margin-top: 0;
}

.content-list--compact .content-list__intro p + p {
    margin-top: 0.75rem;
}

.content-list--compact .content-list__actions {
    margin-top: 1rem;
}


/* ---- Explicit mobile stacking order ---------------------------------------
   BugZap #70 / #76. The export drives the single-column order with an explicit
   class on every Business Leadership row rather than relying on the default
   source order, so a row can be image-right on desktop and image-first on
   mobile (or vice versa) without touching the markup.

   `smith-theme-Agentis design` already carries the --imgfit-contain pair below in
   assets/css/figma-layer/figma-mobile-v4.css:1636-1645, but that file does not
   exist in `smith-theme` and the figma layer is enqueued BEFORE the block
   stylesheets, so the authoritative copy lives here. Values are the export's
   verbatim. */
@media (max-width: 767px) {
    .content-list--mobile-text-first .content-list__grid {
        flex-direction: column;
    }
    .content-list--mobile-text-first .content-list__content {
        order: 0;
    }
    .content-list--mobile-text-first .content-list__media {
        order: 1;
    }

    .content-list--mobile-image-first .content-list__grid {
        flex-direction: column;
    }
    .content-list--mobile-image-first .content-list__media {
        order: 0;
    }
    .content-list--mobile-image-first .content-list__content {
        order: 1;
    }

    /* --imgfit-contain otherwise flips the order back; the export resolves the
       collision with !important rather than specificity. Kept verbatim. */
    .content-list--imgfit-contain.content-list--mobile-text-first .content-list__media {
        order: 1 !important;
    }
    .content-list--imgfit-contain.content-list--mobile-text-first .content-list__content {
        order: 0 !important;
    }
}


/* ---- Media column matches the text column (--media-match-text) -------------
   BugZap #70 / #76 / #78. This is the export's replacement for our fixed-pixel
   media columns (--media-540 / --media-270 / --media-360 / --media-600). Those
   bases declare `flex: 0 0 Npx`, which between 768 and 991 leaves the copy a
   sliver - measured 92px of text beside a 600px image on Business Leadership
   at 800px wide. The export has no fixed-px media column on that page at all:
   every row measures media 346 / content 346 at 800px, a clean 50/50.

   Rather than bolt a speculative tablet guard onto the fixed-px variants, we
   port the variant the export actually uses. The image is absolutely
   positioned inside a stretched media cell so it fills whatever height the
   copy sets, and falls back to intrinsic height on mobile. Ported verbatim. */
@media (min-width: 768px) {
    .content-list--media-match-text .content-list__grid {
        align-items: stretch;
    }
    .content-list--media-match-text .content-list__media {
        align-self: stretch;
        position: relative;
        display: block;
        min-height: 0;
        max-height: none;
        overflow: hidden;
    }
    .content-list--media-match-text .content-list__image {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        min-height: 0;
        max-height: none;
        object-fit: cover;
        object-position: center center;
    }
}

@media (max-width: 767px) {
    .content-list--media-match-text .content-list__media {
        max-height: none;
    }
    .content-list--media-match-text .content-list__image {
        width: 100%;
        height: auto;
        min-height: 0;
        object-fit: contain;
    }
}


/* ---- Tablet media column (768-1199) ---------------------------------------
   BugZap #78, "break into 1 column sooner" on Business Leadership. Ported
   verbatim from the export's own stylesheet - selector list and declarations
   exactly as authored there, including the bare `.content-list__media` that
   terminates the list:

       @media (min-width: 768px) and (max-width: 1199px) {
         .content-list--chapter .content-list__media,
         .content-list--split-1-2 .content-list__media,
         .content-list--split-2-1 .content-list__media,
         .content-list--split-50-50 .content-list__media,
         .content-list__media { max-width: 50%; flex: 1 1 50%; }
       }

   Our base declares `.content-list__media { flex: 0 0 400px }` inside
   @media (min-width: 768px). Same specificity, so this later block wins from
   768 to 1199 and the 400px column returns at 1200 - which is what the export
   measures. Reference, /business-leadership/ (media/content per row):

       @1200  r0 496/496   r1-r3 400/472   <- 400px column back
       @1100  r0 446/446   r1-r3 374/398
       @1000  r0 396/396   r1-r3 346/326
       @992   r0 392/392   r1-r3 344/320
       @900   all rows 391/391  (gap 28)
       @800   all rows 346/346  (gap 28)

   Before this, staging held 400px all the way down: at 800 the copy column
   measured 292px beside a 400px image, and with `--media-600` still on the
   chapter row it measured 92px. That is the whole of #78.

   Note the one deliberate deviation: a row that still carries an explicit
   `--media-540 / --media-270 / --media-360 / --media-600` class keeps its
   fixed column here, because those selectors outrank the bare one above. The
   export has no such classes on this page - they disappear as the class sets
   are swapped to match it (#70 / #76), and that is what closes #78 for good.
   Adding them to the selector list instead would change tablet layout on
   pages the export has not been checked against, so they are left alone. */
@media (min-width: 768px) and (max-width: 1199px) {
    .content-list--chapter .content-list__media,
    .content-list--split-1-2 .content-list__media,
    .content-list--split-2-1 .content-list__media,
    .content-list--split-50-50 .content-list__media,
    .content-list__media {
        max-width: 50%;
        flex: 1 1 50%;
    }
    /* The copy column carries the same basis, and that is not cosmetic. With
       only the media column at 50%, the two bases sum to 50% + 0 + gap, the
       copy grows into all the slack, and the media clamps at a flat 50% of the
       container - measured 405/377 at 900 and 360/332 at 800. With both at
       50% the bases overflow by exactly the gap, both shrink by half of it,
       and the row lands on the export's 391/391 and 346/346. */
    .content-list__content {
        flex: 1 1 50%;
        min-width: 0;
        max-width: 50%;
    }
}

/* The export then walks the media column's basis back to 400px from 992 up,
   as a lone longhand so the `1 1` grow/shrink set above survives. That single
   line is what makes 992-1199 asymmetric:

       container 852 @1100, gap 80, available 772
       media   basis 400            -> shrinks 400/826 x 54 = 26.1 -> 373.9
       content basis 50% (426)      -> shrinks 426/826 x 54 = 27.8 -> 398.2

   which is the export's measured 374/398. Without it both columns take a 50%
   basis and shrink evenly to 386/386. Below 992 the basis stays at 50% and the
   row is a true 50/50 (391/391 @900, 346/346 @800); at 1200 and up the base
   `flex: 0 0 400px` takes over again and the column is a hard 400px. */
@media (min-width: 992px) {
    .content-list__media {
        flex-basis: 400px;
    }
}


/* --------------------------------------------------------------------------
   content-list--media-first-mobile

   A second, !important-flavoured spelling of --mobile-image-first that the
   reference uses on About's "Join the Smith Publicity Team" row. Ported under
   its own name rather than aliased, because the class strings in the editor
   have to match the reference exactly for the swaps in #86 to be checkable.
   Read verbatim off the reference bundle. -------------------------------- */
@media (max-width: 767px) {
    .content-list--media-first-mobile .content-list__grid {
        display: flex !important;
        flex-direction: column !important;
    }
    .content-list--media-first-mobile .content-list__media { order: -1 !important; }
    .content-list--media-first-mobile .content-list__content { order: 0 !important; }
}

/* ---------------------------------------------------------------------------
   BODY COPY SIZE — Christine, 2026-08-05: "please follow font sizing of Agentis design".

   The Agentis design export sets `p { font-size: 1.0625rem !important }` globally in
   main.css. Measured against the deployed export: /about/ renders 42 of 44
   main-content paragraphs at 17px / 1.6, /services/ renders 21 of 26 the same.
   Every font-size on these classes above this line came from Figma frames the
   export supersedes (24px / 20px / 18px / 16px variants), so per the standing
   "export beats superseded Figma" rule they all lose.

   !important is required: the sizes being replaced live on modifier rules with
   higher specificity (e.g. .content-list--chapter, .content-features--cards-bar).
   The export wins the same way, so this mirrors the reference implementation.

   Deliberately NOT flattened, because the export does not flatten them either:
     - display paragraphs (the export keeps 22px and 32px instances)
     - eyebrow / meta text at 12-13px
     - .block-team__role / __joined / __modal-role, which render 14px here. The
       export only shows those at 17px because its rule is blanket; Christine
       confirmed the 4- and 5-column team grids stay as built, and reflowing
       those labels would work against that. Left alone on purpose.

   Headings were verified already correct and are untouched: /about/ h1-h4 match
   the export exactly at 80/52/28/20px, all weight 400.

   TRACKING (added 2026-08-05, same ruling, widened by Matt to "all font sizing
   including letter spacing etc."): the export sets -0.015em on body copy -
   measured at 17px / letter-spacing -0.255px on both /about/ and Home. We had
   none.

   Font-weight is deliberately NOT changed here. The export runs body copy at
   300 where we run 400, but <strong> resolves `bolder` relative to its parent,
   so dropping the wrapper to 300 would quietly demote every bold run inside
   body copy from 700 to 400. That needs its own pass with explicit strong/b
   weights. Measured and flagged, not applied.
   --------------------------------------------------------------------------- */
.content-list__intro > p {
    font-size: 1.0625rem !important;
    line-height: 1.6 !important;
    letter-spacing: -0.015em !important;
}