/**
 * Intro With Badges — Figma section 06 (node 1092:19084)
 * 1920x1008, padding 120 240, bg #FFFFFF, section gap 88.
 * Row: 705px image + 88px gap + 647px text column. Badges row below,
 * distributed edge to edge across the 1440 container.
 *
 * Shares its Figma frame name with section 04 but is a different layout.
 */

.intro-with-badges__inner {
	display: flex;
	flex-direction: column;
	gap: var(--space-88);
}

.intro-with-badges__row {
	display: grid;
	/* Proportional, not a fixed 705: the design is 705 image + 88 gap + 647
	 * text across the 1440 container, and a fixed track held its full width at
	 * 1210 while the text column collapsed to a ribbon. */
	grid-template-columns: minmax(0, 705fr) minmax(0, 647fr);
	align-items: center;
	gap: var(--space-88);
}

.intro-with-badges__figure {
	margin: 0;
}

/* Right-hand column — capped so the heading and copy break as designed. */
.intro-with-badges__content {
	max-width: 644px;
}

/**
 * Figma renders this image at 705x590. aspect-ratio keeps the proportion no
 * matter what the editor uploads, instead of pinning a height the image may
 * not suit.
 */
/* Unset by default, so the homepage keeps sizing from the file itself. */
.intro-with-badges--badges-overlap .intro-with-badges__figure {
	width: 100%;
	min-width: 0;
	max-width: 100%;
	overflow: hidden;
	aspect-ratio: var(--intro-media-ratio, auto);
}

.intro-with-badges--badges-overlap .intro-with-badges__image {
	height: 100%;
	object-fit: cover;
}

.intro-with-badges__image {
	width: 100%;
	height: auto;
	aspect-ratio: 705 / 590;
	object-fit: cover;
}

/* 15 and 40 at the developer's instruction, replacing the 25/30 the block was
 * built with. */
.intro-with-badges__heading {
	margin-bottom: 15px;
}

.intro-with-badges__text {
	margin-bottom: 40px;
}

/* The design's text node is 644x303 — nine 32px lines is 288, and the extra 15
 * is paragraph spacing. wpautop was turning the single newline into a <br>, so
 * the two paragraphs ran together with no gap at all. */
.intro-with-badges__text p + p {
	margin-top: var(--space-15);
}

/* The 30 above opens the gap to the button. The location pages have no button,
 * so the lede is the column's last child and that 30 is dead space under it —
 * the design ends the column on the text node itself (Right Content 644x593 =
 * Title 250 + 40 + text 303). Left in place wherever a button does follow. */
.intro-with-badges__text:last-child {
	margin-bottom: 0;
}

/* Position only — appearance comes from the global button system. */
.intro-with-badges__button {
	align-self: flex-start;
}

/* --- badges row ---------------------------------------------------- */
.intro-with-badges__badges {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-40);
}

.intro-with-badges__badge {
	display: flex;
	align-items: center;
}

.intro-with-badges__badge-img {
	width: auto;
	max-height: 90px;
	object-fit: contain;
}

/* Explicit frame = the Figma placed size. */
.intro-with-badges__badge-img.is-framed {
	width: var(--frame-w);
	max-width: none;
	height: var(--frame-h);
	max-height: none;
	object-fit: contain;
}

/* Below 1366 the badges drop their Figma placed frame, at the developer's
 * instruction: the template sets --frame-w / --frame-h inline from the design,
 * and several of those frames are much wider than the logo they contain (GAF is
 * a 122x74 mark in a 258x74 frame), which reads as a gap in the row once the
 * container is narrower than the design. Ignoring the two custom properties
 * lets each badge take its own intrinsic size under the shared height cap.
 * A later rule cannot unset an inline custom property, so the declarations that
 * consume them are overridden instead. */
@media (max-width: 1365px) {

	.intro-with-badges__badge-img,
	.intro-with-badges__badge-img.is-framed {
		width: auto;
		height: auto;
		/* .is-framed lifts the cap because the frame supplied the height;
		 * without the frame the cap has to come back or each badge renders at
		 * its intrinsic size. 70, at the developer's instruction. */
		max-height: 70px;
		object-fit: contain;
	}
}

@media (max-width: 1199px) {

	.intro-with-badges__row {
		grid-template-columns: 1fr 1fr;
		gap: var(--space-40);
	}

	.intro-with-badges__inner {
		gap: var(--space-60);
	}


	/* The five Figma frames total 1054px + gaps, which no longer fits below
	 * the design width — scale by height instead. */
	.intro-with-badges__badges {
		gap: var(--space-25);
	}

	/* The row is two equal halves here, and the inner gap is 60. */
	.intro-with-badges--badges-overlap {
		--badges-w: calc((100% - var(--space-40)) / 2);
		--badges-inner-gap: var(--space-60);
	}

	.intro-with-badges__badge-img,
	.intro-with-badges__badge-img.is-framed {
		max-height: 64px;
	}
}

/* The homepage's five award badges hold ONE row from 1024 up, at the
 * developer's request. They were wrapping in two separate bands: the five
 * Figma frames total 1054 and the design's gaps 160, so 1214 stops fitting
 * once the container drops under it around 1330, and below 1200 the scaled
 * badges total 871 against a 964 container at 1024 with 100 of gap.
 *
 * `nowrap` plus shrinkable images holds the row in both. Because the row is
 * `space-between`, the declared gap only bites at the crunch — nothing moves at
 * any width where the five already fitted. Scoped away from the location pages,
 * whose badges are one full-width strip rather than five items. */
@media (min-width: 1024px) {

	.intro-with-badges:not(.intro-with-badges--badges-overlap) .intro-with-badges__badges {
		flex-wrap: nowrap;
	}

	.intro-with-badges:not(.intro-with-badges--badges-overlap) .intro-with-badges__badge {
		min-width: 0;
	}

	/* The framed badges keep their Figma height and contain inside it, so a
	 * narrower box scales the logo down rather than distorting it. */
	.intro-with-badges:not(.intro-with-badges--badges-overlap) .intro-with-badges__badge-img,
	.intro-with-badges:not(.intro-with-badges--badges-overlap) .intro-with-badges__badge-img.is-framed {
		max-width: 100%;
	}
}

/* 1200-1440: the container is narrower than 1054 + 160, so the design's 40px
 * gap would shrink all five logos. 25 — the value the band below 1200 already
 * uses — keeps them at their drawn size instead. */
@media (min-width: 1200px) and (max-width: 1440px) {

	.intro-with-badges:not(.intro-with-badges--badges-overlap) .intro-with-badges__badges {
		gap: var(--space-25);
	}
}

@media (max-width: 991px) {

	.intro-with-badges__row {
		grid-template-columns: 1fr;
	}


	.intro-with-badges__badges {
		flex-wrap: wrap;
		justify-content: center;
		gap: var(--space-30);
	}

	/* One strip, not five badges — it stays left-aligned and full width. */
	.intro-with-badges--badges-overlap .intro-with-badges__badges {
		justify-content: flex-start;
	}
}

@media (max-width: 567px) {

	/* 38 at the developer's instruction, down from 48. */
	.intro-with-badges__badge-img,
	.intro-with-badges__badge-img.is-framed {
		max-height: 38px;
	}
}

/* --- badge strip overlapping the photo (the location pages) --------------
 * The homepage carries five separate award badges in a row under the content.
 * Every location page instead places one 705x278 strip over the photo's lower
 * edge: its top sits 456 from the figure top, so on a 593 figure it overlaps
 * 137 and hangs 141 below. Kept in flow rather than absolutely positioned, so
 * the hang still occupies the space the design leaves for it.
 *
 * The strip is placed IN the photo's own grid column rather than hung off the
 * bottom of the row. Two things forced that: hung off the row it was only as
 * wide as a formula guessed the column to be (4-6px out below 1200), and the
 * row's bottom is whichever column is taller — so wherever the copy outgrew the
 * photo, around 1200-1300, the overlap collapsed to almost nothing. Dissolving
 * the row with `display: contents` makes the figure, the strip and the copy
 * grid items of the inner, so the strip sits in column 1 under the figure: its
 * width IS the photo's, and its overlap is measured from the photo's own edge
 * whatever the copy does. The overlap is a percentage — 137/705 of the column —
 * so it scales with the photo at every width, including stacked.
 * ---------------------------------------------------------------------- */
.intro-with-badges--badges-overlap .intro-with-badges__inner {
	display: grid;
	grid-template-columns: minmax(0, 705fr) minmax(0, 647fr);
	column-gap: var(--space-88);
	row-gap: 0;
}

.intro-with-badges--badges-overlap .intro-with-badges__row {
	display: contents;
}

/* start, not the grid default stretch: a stretched figure grows with the copy
 * column and the strip then overlaps the figure's padding rather than the
 * photo, which is what put the overlap 17px out at 1200. */
.intro-with-badges--badges-overlap .intro-with-badges__figure {
	grid-column: 1;
	grid-row: 1;
	align-self: start;
}

.intro-with-badges--badges-overlap .intro-with-badges__badges {
	grid-column: 1;
	grid-row: 2;
	/* start, so the strip cannot stretch: the copy spans both rows, and wherever
	 * it is the taller column the surplus lands in row 2 and a stretched strip
	 * centres its image inside it — which pushed the overlap ~9px shallow. */
	align-self: start;
	justify-content: flex-start;
	width: 100%;
	/* 137/705 of the column it sits in. */
	margin-top: -19.433%;
}

.intro-with-badges--badges-overlap .intro-with-badges__content {
	grid-column: 2;
	grid-row: 1 / span 2;
	/* start, not center: the design tops the copy column level with the photo
	 * (Right Content 644x593 at the figure's own y=0). Centred across both rows
	 * it was measuring against the photo PLUS the strip's 141 hang and pushing
	 * the column 67px down on every location page. */
	align-self: start;
}

/* The design measures its 240 bottom padding from the PHOTO, and the strip hangs
 * 141 of that, leaving 99 under the strip. The grid carries the hang in row 2,
 * so only that 99 is padding.
 *
 * Deliberately a flat 99, not derived from the column width: a percentage here
 * resolves against the SECTION's width (1920), not the container's (1440), so
 * a calc that looked right computed a 955px column and took 191 off the 240 —
 * 50px short on every location page. */
.intro-with-badges--badges-overlap {
	padding-bottom: 99px;
}

.intro-with-badges--badges-overlap .intro-with-badges__badge {
	width: 100%;
}

.intro-with-badges--badges-overlap .intro-with-badges__badge-img,
.intro-with-badges--badges-overlap .intro-with-badges__badge-img.is-framed {
	width: 100%;
	max-width: 100%;
	height: auto;
	max-height: none;
}

@media (max-width: 1199px) {

	/* Two equal halves with a 40 gap at this width. */
	.intro-with-badges--badges-overlap .intro-with-badges__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		column-gap: var(--space-40);
	}

	.intro-with-badges--badges-overlap {
		--badges-w: calc((100% - var(--space-40)) / 2);
	}
}

@media (max-width: 991px) {

	/* Stacked: one column, photo then strip then copy — the strip stays with
	 * the photo it belongs to instead of dropping below the description, and it
	 * keeps overlapping exactly as it does at 1440. */
	.intro-with-badges--badges-overlap .intro-with-badges__inner {
		grid-template-columns: minmax(0, 1fr);
	}

	.intro-with-badges--badges-overlap .intro-with-badges__content {
		grid-column: 1;
		grid-row: 3;
		margin-top: var(--space-60);
	}

}