/* =========================================================================
Focus-area template (/business-leadership/ page-id-93, /lifestyle-wellness/
page-id-95, /public-affairs-policy/ page-id-97) - desktop retrofit.
Measured 2026-08-06 on staging at innerWidth 1512.
BugZap #126, widened to the twin pages by #128 / #80 ("this page, and PA
page are the same template as business - all fixes applied to those will
need to be applied [here]"). #126.
SPECIFICITY / SOURCE-ORDER NOTE - read before editing.
This file is enqueued with the rest of the figma layer, i.e. BEFORE the
block stylesheets, so a rule here at equal specificity LOSES on source
order to blocks/content-list/content-list.css. Hence the !important below.
========================================================================= */
@media (min-width: 992px) {
/* ---- #126 -------------------------------------------------------------
"photo height to match text height", y2617 - content-list row index 2
(the --image-left --valign-top --bg-cream row).
That row carries no --chapter and no --media-* variant, so the media
column had nothing pinning it and the ![]()
sat there `position: static`
at its own intrinsic ratio. The source crop is portrait (270x400), so at
the 400px column width it rendered 400x593 while the text column beside
it was only 363 tall - a 230px overhang, which is exactly what the
ticket is pointing at.
Fix is the mechanism --chapter already uses elsewhere in this theme, and
the one the export uses on its --valign-top rows: make the media column
a positioning context that stretches to the flex line, and absolutely
fill it with the image. An absolutely-positioned image contributes zero
intrinsic height, so the TEXT column sets the row and the photo is
cropped to it with object-fit: cover.
Scoped away from --imgfit-contain deliberately. Row index 3 on this page
carries that variant and currently renders its image at 0x0 (a separate,
pre-existing problem with no ticket); stretching a contain-fit column
would not help it and could mask the real cause.
row 2 before h819, media 400x593, text 363
row 2 after h589, media 400x363, text 363
body before 11574 after 11344
---------------------------------------------------------------------- */
:is(.page-id-93, .page-id-95, .page-id-97) .content-list--valign-top:not(.content-list--imgfit-contain) .content-list__media {
position: relative !important;
align-self: stretch !important;
min-height: 0 !important;
}
:is(.page-id-93, .page-id-95, .page-id-97) .content-list--valign-top:not(.content-list--imgfit-contain) .content-list__image {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
}
}
/* =========================================================================
BugZap #74/#75/#76/#77 - validated against the new Agentis design preview,
2026-08-07. Applies to all three focus pages (case-studies +
testimonial-bento render there); per the #128/#80 precedent the twins
get the same treatment.
Export reference values (their images are broken 0-height assets in the
preview, so photo columns keep OUR real rendering per #75):
case-studies: subheading 17/1.6/300; pull 36/43.2/700; attribution
17/1.6/700; Featured-in strip 17/1.6/300.
bento: pull = first quote line 36/43.2/700, body lines 17/1.6/400,
name/role 19/30/400, card gap 24, NO fixed card min-heights
(export rows are content-sized), card-7 photo 300 (not 400).
After this block ours matches the export on every measurable step; the
remaining section-height deltas are real-copy-vs-placeholder length and
our visible photos vs their broken ones.
========================================================================= */
@media (min-width: 992px) {
/* ---- #74: case-studies type steps (services-family formatting) ------- */
.case-studies__subheading {
font-size: 1.0625rem !important;
line-height: 1.6 !important;
font-weight: 300 !important;
}
.case-studies__pull {
font-weight: 700 !important;
line-height: 1.2 !important;
}
.case-studies__quote > p:last-child {
font-size: 1.0625rem !important;
line-height: 1.6 !important;
font-weight: 700 !important; /* attribution line - export runs it bold 17 */
}
.case-studies__media-list {
font-size: 1.0625rem !important;
line-height: 1.6 !important;
/* BugZap #215: was 300, which is why the outlet names read "paler" than
the copy above them. The outlets are a bare text node after the
"Featured in:" , so they inherit this weight. Measured on
/focus-areas/business/ at 1440: media-list 300/17px against sibling
paragraphs 400/17px on all four cards. The colour was never wrong -
full opacity and the correct navy - it was purely the weight.
400 matches the paragraphs and the block's own case-studies.css, which
already said 400 before this layer overrode it. The keeps 700. */
font-weight: 400 !important;
}
/* ---- #76/#77: bento pull-quote structure ------------------------------ */
.testimonial-bento__quote { margin-top: 0 !important; }
.testimonial-bento__card {
min-height: 0 !important; /* export cards are content-sized */
gap: 24px !important;
}
.testimonial-bento__quote p {
font-size: 1.0625rem !important;
line-height: 1.6 !important;
font-weight: 400 !important;
}
.testimonial-bento__quote > p:first-child {
font-size: 2.25rem !important; /* the single pull line */
line-height: 1.2 !important;
/* Was 700, which made the pull line the only Hoefler on the page running
bold. Three things already said 400 and this rule was the lone dissenter:
the block's own testimonial-bento.css (which sets the opening and closing
quote lines to 400 off Figma 10957:14690), the `.testimonial-bento__quote p`
rule twelve lines above in THIS file, and DECISIONS D8 - Hoefler Text is
Regular in the Smith style guide. It is the same trap as #229, where the
post H2 was the only bold heading left standing after the layer pushed
everything else back to 400.
Size stays 36px: that is the pull-quote step and is not in question. */
font-weight: 400 !important;
}
.testimonial-bento__name,
.testimonial-bento__role {
font-size: 1.1875rem !important;
line-height: 1.579 !important;
font-weight: 400 !important; /* "smaller author name" - 19/30/400 */
}
/* #76: the full-width card renders like the rows above it - 300px photo
on the left (was 400), same pull/body steps as the rest. */
.testimonial-bento__card--7 .testimonial-bento__photo,
.testimonial-bento__card--7 .testimonial-bento__photo img {
width: 300px !important;
height: 300px !important;
}
}
/* ---- #75: below desktop the fixed 300px crop was clipping - the image
scales with its column instead. Desktop keeps the 300x300 crop. */
@media (max-width: 991px) {
.case-studies__media img {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
aspect-ratio: 1 / 1;
object-fit: cover;
}
}