/**
 * Trusted Logos — Figma section 03 (node 1092:19044)
 * 1920x222, padding 40 240, bg #F2FAF5. Heading left, logo row right.
 * Placed logo sizes: 138x142, 204x129.74, 330x64.
 */

.trusted-logos.section {
	padding-block: var(--space-40);
}

.trusted-logos__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-40);
}

.trusted-logos__heading {
	flex: 0 0 auto;
	margin: 0;
	color: var(--primary-black);
	font-family: var(--font-heading);
	font-size: var(--fs-36);
	font-weight: 700;
	line-height: var(--lh-36);
	text-transform: uppercase;
}

.trusted-logos__list {
	display: flex;
	flex: 0 1 auto;
	align-items: center;
	gap: var(--space-40);
}

.trusted-logos__item {
	display: flex;
	align-items: center;
}

/* The design draws a hairline rule to the left of the final logo.
 *
 * It is not a separate line node: the DaVinci frame (234x100) carries a
 * right-side stroke only — borderRightWeight 1, #121212 at 15% — so the rule is
 * the FRAME's height, 100, not the 64 of the James Hardie logo beside it. The
 * min-height gives the border those 100px while the flex centring keeps the
 * logo where it was, and 15% black is a warm hairline (#DBDBDB over the pale
 * ground) rather than the mid-green this was built with. */
.trusted-logos__item.has-divider {
	min-height: 100px;
	padding-left: var(--space-40);
	border-left: 1px solid rgb(18 18 18 / 15%);
}

.trusted-logos__logo {
	width: auto;
	max-height: 142px;
	object-fit: contain;
}

/* An explicit width/height reproduces the Figma placed frame. Several brand
 * assets are multi-logo sheets that the design crops with a FILL paint, so a
 * framed logo covers rather than contains. */
/* Scaled by --frame-scale at narrower widths so the crop is preserved.
 * Switching to object-fit:contain here would expose the full source sheet
 * (image.png is three GAF badges side by side). */
.trusted-logos__logo.is-framed {
	width: calc(var(--frame-w) * var(--frame-scale, 1));
	max-width: none;
	height: calc(var(--frame-h) * var(--frame-scale, 1));
	max-height: none;
	object-fit: cover;
}

/* Same reason as the footer: the container is narrower than the design's 1440
 * below a 1560 viewport, so the Figma-framed logo widths stop fitting there
 * rather than at 1199 where the first scale step used to be. */
/* The row must never wrap while it is beside the heading: a wrapped James
 * Hardie logo drops to a second line on its own and takes the band from 201 to
 * 341. `nowrap` makes that impossible, and the scale steps below are placed at
 * the widths where the row actually stops fitting rather than at the theme's
 * usual breakpoints — the old 1199 step arrived ~40px too late, which is why
 * 1200-1239 and 992-1039 both broke. Below 992 the inner stacks and wrapping
 * is what the column wants. */
@media (max-width: 1559px) {

	.trusted-logos__list {
		--frame-scale: 0.85;
		flex-wrap: nowrap;
	}
}

@media (max-width: 1239px) {

	.trusted-logos__list {
		gap: var(--space-25);
	}

	.trusted-logos__item.has-divider {
		padding-left: var(--space-25);
	}

	/* Below the design width the Figma frames no longer fit side by side. */
	.trusted-logos__list {
		--frame-scale: 0.8;
	}
}

/* The 100px rule is the DaVinci frame's height at the design width. Below 1199
 * the logos are scaled down and it stops reading as a divider between them and
 * starts reading as a stray vertical line, so it collapses to the item's own
 * height. 1px at the developer's instruction — a min-height that can never
 * bind, rather than removing the declaration, so the desktop value stays
 * visible in the cascade. */
@media (max-width: 1199px) {

	.trusted-logos__item.has-divider {
		min-height: 1px;
	}
}

/* The last step before the inner stacks at 991. */
@media (max-width: 1039px) {

	.trusted-logos__list {
		--frame-scale: 0.7;
	}
}

@media (max-width: 991px) {

	.trusted-logos__inner {
		flex-direction: column;
		justify-content: center;
		text-align: center;
	}

	/* Stacked, the row has the full container to itself and may wrap freely. */
	.trusted-logos__list {
		flex-wrap: wrap;
		justify-content: center;
	}

	.trusted-logos__logo {
		max-height: 100px;
	}
}

@media (max-width: 767px) {

	.trusted-logos__list {
		flex-wrap: wrap;
		justify-content: center;
		gap: var(--space-20);
	}

	.trusted-logos__item.has-divider {
		padding-left: 0;
		border-left: 0;
	}

	.trusted-logos__list {
		--frame-scale: 0.55;
	}

	.trusted-logos__logo {
		max-height: 70px;
	}
}

/* -------------------------------------------------------------------
 * .trusted-logos--stacked — the Dayton location page's "Our Reputation on
 * the Web" band. Same block, second composition.
 *
 * Figma (node 1112:4077 section 8): 1920x568 on #010101, a 1440x328
 * container. Centred head — mark 35, 30, 64/72 heading, 30, 20/32 lede —
 * then 40, then a 120-tall row of five 262x120 white plates each holding a
 * 185x84 logo. The 120 top/bottom padding comes from sec_pad_top/bottom,
 * whose doubled-specificity utility beats this block's own 40.
 *
 * The head reuses .section-eyebrow-center / .section-title / .section-lede
 * verbatim, so only their colour is restated here — the band is dark and
 * both of those default to black and grey.
 * ------------------------------------------------------------------- */
/* `.trusted-logos.section` above sets padding-block:40 at the same specificity
 * as the .section-pt-large utility, so source order keeps the block's 40 and
 * the section-settings choice cannot reach it. Restated here at the same
 * two-class weight, later in the file, so the stacked band gets the design's
 * 120 rhythm. sec_pad_top/bottom stay set to `large` in the data because that
 * is what the band means — this rule only makes it effective. */
.trusted-logos--stacked.section {
	padding-block: var(--section-rhythm);
}

.trusted-logos--stacked .trusted-logos__inner {
	flex-direction: column;
	align-items: center;
	gap: var(--space-40);
}

.trusted-logos--stacked .trusted-logos__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-30);
	text-align: center;
}

.trusted-logos--stacked .section-title,
.trusted-logos--stacked .section-lede {
	color: var(--white);
}

/* Anek's 64px cap sits inside a 72px line box with roughly 16px of dead space
 * above it and 15 below, while Figma measures the 41px ink — the line-box slack
 * already logged site-wide. The design's 30px head gaps are ink-to-ink, so the
 * box is trimmed back to the ink here rather than leaving the band 47px tall.
 * Scoped to this modifier: the shared .section-title is untouched, and every
 * other block stays tuned to the slack it was measured against. */
.trusted-logos--stacked .section-title {
	margin-block: -16px -15px;
}

/* The head spaces its children with `gap`, so .section-eyebrow's own 16px
 * bottom margin would double up. */
.trusted-logos--stacked .section-eyebrow {
	margin-bottom: 0;
}

/* space-between across the full 1440 reproduces the design's 32.5 gutter
 * exactly, without committing a fractional value to the stylesheet. */
.trusted-logos--stacked .trusted-logos__list {
	width: 100%;
	justify-content: space-between;
	gap: 30px;
}

/* The plate is 262x120 in the design but must not hold that width once five of
 * them no longer fit — a fixed 262 overflowed the container between 1200 and
 * 1440, where the wrap rule below does not apply. It shares the row instead and
 * keeps its ratio, so it never exceeds the design size and never overflows. */
.trusted-logos--stacked .trusted-logos__item {
    flex: 1 1 0;
    justify-content: center;
    max-width: 100%;
    padding: 18px 10px;
    background-color: var(--white);
}

.trusted-logos--stacked .trusted-logos__logo,
.trusted-logos--stacked .trusted-logos__logo.is-framed {
	width: auto;
	max-width: calc(100% - var(--space-20));
	max-height: 70%;
	object-fit: contain;
}

@media (max-width: 1199px) {

	.trusted-logos--stacked .trusted-logos__list {
		flex-wrap: wrap;
		justify-content: center;
		gap: var(--space-30);
	}
}

@media (max-width: 991px) {
	.trusted-logos--stacked .trusted-logos__item {
		flex: inherit;
	}
}

@media (max-width: 767px) {

	.trusted-logos--stacked .trusted-logos__list {
		gap: var(--space-20);
	}

	/* The plate is the logo's frame, so it scales with it rather than
	 * keeping a fixed 262 that would overflow a 375 viewport. */
	.trusted-logos--stacked .trusted-logos__item {
		max-width: 144px;
	}
}