/**
 * Product Rows — Metal Roofs section 8 "Our Products" (1920x2282).
 *
 * Measured off the export: an intro column 586 wide and a list column 774
 * wide, 80px apart (586 + 80 + 774 = 1440). The intro's video frame is
 * 586x328. Each card is padded 15px, holds a 40px-padded copy panel beside a
 * 371px-wide photo, and takes its height from that photo — the images are
 * 559 / 574 / 655 tall, so the rows are deliberately unequal. Fills alternate
 * white / mid-green down the stack.
 */

/* Figma pads this section 150 top and bottom rather than the 120 rhythm the
 * rest of the page uses — 1.25x it. Expressed as that multiple rather than a
 * flat 150 so it steps down with every other section instead of holding 150
 * into mobile: 150 at full width, 100 at 991, 75 at 767. */
.section.product-rows {
	padding-block: calc(var(--section-rhythm) * 1.25);
}

.product-rows__inner {
	display: grid;
	grid-template-columns: 586fr 774fr;
	align-items: start;
	gap: 80px;
}

/* The intro holds its place while the product stack scrolls past, and each
 * card pins in turn so they deal out over one another. */
.product-rows__intro {
	position: sticky;
	top: 150px;
}

.product-rows__intro .section-eyebrow {
	margin-bottom: 22px;
}

.product-rows__heading {
	margin-bottom: var(--space-16);
}

.product-rows__text {
	margin: 0 0 var(--space-30);
}

.product-rows__video {
	position: relative;
	aspect-ratio: 586 / 328;
	overflow: hidden;
}

.product-rows__video-frame {
	width: 100%;
	height: 100%;
	border: 0;
}

.product-rows__video-poster {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* --- product stack --------------------------------------------------- */
.product-rows__list {
	display: flex;
	flex-direction: column;
	gap: var(--space-40);
	margin: 0;
	padding: 0;
	list-style: none;
}

.product-rows__item {
	position: sticky;
	top: calc(var(--section-rhythm) + ( var(--data-index ) * 40px) );
	display: grid;
	/* 744 usable inside the 15px padding: 373 copy + 371 photo. */
	/* Both tracks need an explicit 0 minimum: with --row-media-ratio set, the
	 * photo track's automatic min-width resolves from its own height and refused
	 * to shrink, overflowing the row by 53px at 1199. */
	grid-template-columns: minmax(0, 373fr) minmax(0, 371fr);
	align-items: stretch;
	padding: 15px;
	background-color: var(--white);
}

/* Fills alternate down the stack, as in the design. */
.product-rows__item:nth-child(even) {
	background-color: var(--mid-green);
}

.product-rows__item-body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	/* Tighter at the foot: the link sits 36px under the copy and only ~24px
	 * clear of the card edge, not the 40 the other three sides use. */
	padding: var(--space-40) var(--space-40) 24px;
}

.product-rows__item-title {
	margin: 0 0 var(--space-16);
	color: var(--primary-black);
	font-family: var(--font-heading);
	font-size: var(--fs-30);
	font-weight: 700;
	line-height: var(--lh-30);
}

/* Figma marks the city name in every card description green and underlined
 * (a HYPERLINK run with an empty URL). It is a real <a> here, pointed at the
 * service the card is about — the card's own Learn More button goes to
 * /contact/, so there was nothing to reuse. Lewis Center is the one page the
 * design does not mark, and it stays plain. */
.product-rows__item-text a {
	color: var(--primary-green);
	text-decoration: underline;
}

.product-rows__item-text a:hover,
.product-rows__item-text a:focus-visible {
	text-decoration: none;
}

/* Figma sets no paragraphSpacing on these nodes, so a second paragraph is
 * separated by one empty 30px line — card 2 on Columbus is 291x210, i.e. seven
 * 30px lines for 3 + blank + 3. A 30px top margin is that empty line. */
.product-rows__item-text + .product-rows__item-text {
	margin-top: 30px;
}

.product-rows__item-text {
	margin: 0 0 16px;
	color: var(--body-grey);
	font-family: var(--font-body);
	font-size: var(--fs-18);
	font-weight: 400;
	line-height: var(--lh-18-30);
}

/* A bare text link here, not the padded pill the cards elsewhere use.
 *
 * The design wraps it in a 291x40 "Button/Primary" frame stroked 1px #FFFFFF
 * with the label in the frame's lower half — i.e. a white rule across the copy
 * column, 20px above the label. White is invisible on the white cards and
 * reads as a divider on the mid-green ones, which is exactly what the export
 * shows. The 20 comes out of the old flat 36 rather than being added to it, so
 * the card keeps its height (the design's 40-above-the-rule would have pushed
 * every card 25px past its 435). */
.product-rows__item-link.product-rows__item-link {
	justify-content: flex-start;
	width: 100%;
	margin-top: auto;
	padding-block: 20px 0;
	/* The Figma stroke is white at 16%, not solid — sampled on the 1:1 export
	 * as (212,225,216) over the #CCDBD2 card, which is exactly that blend, in a
	 * 291px run matching the frame. Solid white drew a hard line on the green
	 * cards where the design shows a tint. Same value the services_grid card
	 * rule already uses. */
	border-top: 1px solid rgb(255 255 255 / 16%); /* #FFFFFF29 */
}

.product-rows__item-figure {
	/* width first, so --row-media-ratio resolves the HEIGHT from it. Left to
	 * resolve the other way the figure took its width from a stretched height
	 * and pushed 53px past its track at 1199. */
	width: 100%;
	min-width: 0;
	max-width: 100%;
	margin: 0;
	overflow: hidden;
	/* Unset by default, so Metal Roofs keeps the copy-led height below. Where a
	 * row states its placed box, that box wins and a portrait source can no
	 * longer stretch the row. */
	aspect-ratio: var(--row-media-ratio, auto);
}

/* The copy panel sets the row height and the photo is cropped to match — the
 * design's three photos are 559 / 574 / 655 tall, which tracks the length of
 * the copy beside them rather than any fixed ratio. */
.product-rows__item-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* The design stacks the rows on a widening gap rather than a constant one: the
 * gap grows 50 per row, so 24, 74, 124, 174 — measured on every page that uses
 * this layout. Metal Roofs was built and signed off on a flat 40 and sits
 * within tolerance there, so this is opt-in rather than the default.
 *
 * nth-child rather than a chain of `+`, because a chain matches every later
 * sibling too: with four rules the fifth row silently reused the fourth's 124
 * and Get a Quote's services section came out 50 short. */
.product-rows--stagger .product-rows__list {
	gap: 0;
}

.product-rows--stagger .product-rows__item:nth-child(n + 2) {
	margin-top: 24px;
}

.product-rows--stagger .product-rows__item:nth-child(3) {
	margin-top: 74px;
}

.product-rows--stagger .product-rows__item:nth-child(4) {
	margin-top: 124px;
}

.product-rows--stagger .product-rows__item:nth-child(5) {
	margin-top: 174px;
}

@media (max-width: 991px) {

	.product-rows--stagger .product-rows__item:nth-child(n + 2) {
		margin-top: var(--space-40);
	}
}

/* --- responsive ------------------------------------------------------- */
@media (max-width: 1199px) {

	.product-rows__inner {
		gap: var(--space-40);
	}

	/* 10 at the developer's instruction, down from 30. */
	.product-rows__item-body {
		padding: 10px;
	}
}

@media (max-width: 991px) {

	.product-rows__inner {
		grid-template-columns: 1fr;
	}

	.product-rows__intro,
	.product-rows__item {
		position: static;
	}
}

@media (max-width: 567px) {

	.product-rows__item {
		grid-template-columns: 1fr;
	}

	/* Extra 25 on top at the developer's instruction — the figure sits above
	 * the body at this width, so the copy needs air under the photo. */
	.product-rows__item-body {
		padding: 25px 10px 10px 10px;
	}

	.product-rows__item-figure {
		order: -1;
	}
}