/**
 * Feature Columns — Residential Roofing sections 4 and 7.
 *
 * Both are a 3-up 460px grid with a 30px gutter inside the 1440 container.
 * They differ only in the card head:
 *   .feature-columns--bordered  section 4 — green rounded icon, 1px panel
 *   .feature-columns--media     section 7 — photo on top, STEP badge overlaid
 *
 * Measured: section 4 head runs mark 120-149, heading caps 182/258/326,
 * lede 417-501, cards from 558, button 1039-1088. Section 7 cards 338-983.
 */

.feature-columns__inner {
	display: flex;
	flex-direction: column;
	gap: var(--space-40);
}

/* The diamond lattice behind the band. Held in the theme rather than linked
 * from the uploads folder: a CSS background cannot use a relative WordPress
 * path, and the absolute URL it was given points at the WP Engine host, which
 * would keep this environment fetching the asset from production.
 *
 * `repeat no-repeat` is the design's own tiling — the 1920x638 artwork repeats
 * across but never down, so a taller band shows it once at the top. */
.feature-columns {
	background-image: url("../../images/bg-vc.svg");
	background-repeat: repeat no-repeat;
}

/* --- head ------------------------------------------------------------ */
.feature-columns__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.feature-columns--left .feature-columns__head {
	align-items: flex-start;
	text-align: left;
}

.feature-columns__head .section-eyebrow,
.feature-columns__head .section-eyebrow-center {
	margin-bottom: 26px;
}

/* The 64px heading's browser line box carries ~25px of dead space under the
 * glyphs (Anek's ascent puts the cap at the top of the line where Figma centres
 * it). So the space to a following lede is 14, and when the heading is the last
 * thing in the head that dead space has to come back out of the inner gap: the
 * step row's head ink ends at 309 and its cards start at 338. */
.feature-columns__heading {
	margin-bottom: 0;
}

.feature-columns__heading + .feature-columns__text {
	margin-top: 14px;
}

.feature-columns__head > .feature-columns__heading:last-child {
	margin-bottom: -27px;
}

/* The two designed instances wrap differently, so this is scoped rather than
 * blanket: the step row (section 7) holds its head to 1180 to break after
 * "Residential Roofing", while the icon row (section 4) uses the full 1440
 * and runs to three lines. Applying 1180 to both pushed section 4 onto a
 * fourth line and overshot its height by 72px. */
.feature-columns--media .feature-columns__head .feature-columns__heading {
	max-width: 1180px;
}

.feature-columns__text {
	max-width: 1440px;
	margin: 0;
}

/* The lede is an editor field now, so it holds paragraphs rather than one run
 * of text. Same treatment the Two Column body copy gets: kill the base 20px
 * paragraph margin and reopen the gap to the 15 Figma leaves between them
 * (32px line pitch, paragraphs opening at 47). */
.feature-columns__text p {
	margin-bottom: 0;
}

.feature-columns__text p + p {
	margin-top: 15px;
}

.feature-columns__text > :first-child {
	margin-top: 0;
}

.feature-columns__text > :last-child {
	margin-bottom: 0;
}

/* Windows & Sliding Doors section 4 sets its lede 1188 wide — 126 either side
 * of the container — so it runs to three lines. Left at the 1440 default it
 * takes two and the section lands 31px short. Per-instance, hence opt-in. */
.feature-columns--lede-1188 .feature-columns__text {
	max-width: 1188px;
}

/* --- grid ------------------------------------------------------------ */
.feature-columns__list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	/* Every row the same height as the tallest, which is how Figma draws the
	 * six-card grid on Metal Roofs section 7. No effect on the single-row
	 * instances. */
	grid-auto-rows: 1fr;
	gap: var(--space-30);
	margin: 0;
	padding: 0;
	list-style: none;
}

.feature-columns--2up .feature-columns__list { grid-template-columns: repeat(2, 1fr); }
.feature-columns--4up .feature-columns__list { grid-template-columns: repeat(4, 1fr); }

.feature-columns__item {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

/* --- card (section 4) -------------------------------------------------
 * Read off the Figma node, not guessed: the card is 460x453, padding 40/30,
 * a 40px stack gap, background #FFFFFF, corner radius 0, and it carries a
 * DROP_SHADOW of 0 10px 50px rgba(0,0,0,0.05).
 *
 * It has NO border. This was built with a 1px #DBDBDB stroke and no shadow —
 * both wrong. The shadow is scoped here rather than added to `.card` because
 * the homepage genuinely has no shadows anywhere; this is the first block in
 * the project that does.
 * ------------------------------------------------------------------- */
.feature-columns--bordered .feature-columns__item {
	align-items: center;
	gap: var(--space-40);
	padding: var(--space-40) var(--space-30);
	border: 0;
	border-radius: var(--radius-0);
	background-color: var(--white);
	box-shadow: 0 10px 50px 0 rgb(0 0 0 / 5%);
	text-align: center;
}

/* Card alignment is independent of head alignment — see the block template.
 *
 * The left-aligned card is not just the centred one re-aligned: Figma pads it
 * 50 on every side (against 40/30), opens 50 between the icon and the title
 * (against 40) and 18 under the title (against 15). Measured off the export
 * at 1:1 — icon 80x80 at (51,54), title ink 189-211, copy lines on a 30px
 * pitch from 226. */
.feature-columns--bordered.feature-columns--cards-left .feature-columns__item {
	align-items: flex-start;
	gap: 50px;
	padding: 50px;
	text-align: left;
}

.feature-columns--bordered.feature-columns--cards-left .feature-columns__item-title {
	margin-bottom: 18px;
	line-height: 1;
}

.feature-columns--bordered.feature-columns--cards-center .feature-columns__item {
	align-items: center;
	text-align: center;
}

/* The second card treatment in the file: Figma strokes the "Comprehensive …
 * Services" cards #121212 at 15% and gives them no shadow at all, against the
 * shadowed panel the "Why Choose" cards use. Chosen per row with the Card edge
 * field. */
.feature-columns--card-outline .feature-columns__item {
	border: 1px solid rgb(18 18 18 / 15%);
	box-shadow: none;
}

/* Figma "Icon" frame: 80x80, solid #01963A, square — not the 60x60 rounded
 * tile this was built as. The glyph inside is 28x35, so the height must stay
 * auto or the vector is squashed. */
.feature-columns--bordered .feature-columns__item-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 80px;
	height: 80px;
	border-radius: var(--radius-0);
	background-color: var(--primary-green);
	color: var(--white);
}

/* The glyphs are not one size: Figma draws them between 28x32 and 50x32
 * depending on the shape. Each icon publishes its designed size as the SVG's
 * intrinsic width/height (see kerrigan_icon), so letting that stand
 * reproduces the design instead of forcing everything to 28 wide. */
.feature-columns--bordered .feature-columns__item-icon svg {
	width: auto;
	height: auto;
	max-width: 50px;
}

/* An uploaded icon shares that chip. Unlike a registered glyph its intrinsic
 * size is whatever the file happens to be — a 512px export would fill the chip
 * and spill out of it — so this caps both axes and leaves anything smaller at
 * its own size, the way the vectors above behave. */
.feature-columns--bordered .feature-columns__item-icon-img {
	width: auto;
	height: auto;
	max-width: 50px;
	max-height: 50px;
	object-fit: contain;
}

/* Get a Quote section 6 puts a step number in that same chip: Roboto 700
 * 24/100% white, and the flex centring above already lands it dead centre
 * (Figma has the 28x28 ink box at 77,80 inside the 80x80 chip at 51,54). */
.feature-columns__item-number {
	font-family: var(--font-body);
	font-size: var(--fs-24);
	font-weight: 700;
	line-height: 1;
}

/* Those numbered cards are drawn a flat 460x426 whatever the copy runs to —
 * the bottom gap is 108 on card 1 and 78 on card 5, so it is a card height
 * rather than padding. Released at 991 where the grid drops to 2-up and the
 * wider cards would only gain whitespace. */
.feature-columns--numbered .feature-columns__item {
	min-height: 426px;
}

/* Five cards over a 3-up grid: Figma centres the orphan row rather than
 * letting it hang left, starting it at x245 of the 1440 track. Six columns of
 * 215 on the same 30 gutter give a 460 card across two of them and put that
 * row's first card at exactly 245. */
.feature-columns--last-centered .feature-columns__list {
	grid-template-columns: repeat(6, minmax(0, 1fr));
}

.feature-columns--last-centered .feature-columns__item {
	grid-column: span 2;
}

.feature-columns--last-centered .feature-columns__item:nth-child(3n + 1):nth-last-child(2) {
	grid-column: 2 / span 2;
}

/* --- media card (section 7) ------------------------------------------ */
.feature-columns--media .feature-columns__item {
	background-color: var(--white);
}

.feature-columns__item-figure {
	position: relative;
	margin: 0;
	/* Per-instance: the step row places 460x300, the shingle range 460x243.
	 * Falls back to the step-row ratio when the fields are empty. */
	aspect-ratio: var(--card-media-ratio, 460 / 300);
	overflow: hidden;
}

.feature-columns__item-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.feature-columns__item-badge {
	position: absolute;
	top: var(--space-20);
	left: var(--space-20);
	padding: var(--space-10) var(--space-20);
	background-color: var(--primary-green);
	color: var(--white);
	font-family: var(--font-body);
	font-size: var(--fs-18);
	font-weight: 500;
	line-height: var(--lh-18-30);
	text-transform: uppercase;
}

/* Figma frame "4": 460x346, padding 40 on every side. The title and copy are
 * the body's direct children, so the 23px Content gap IS the space between
 * them — setting a gap *and* a title margin stacked to 47 and pushed the
 * section 53px over.
 *
 * That 23 is measured between Figma's cap boxes (title node 40, copy node 82).
 * The browser's 36px line box for the 30px title already contains most of it,
 * so 6 is what puts the copy's ink on the designed y=728. */
.feature-columns--media .feature-columns__item-body {
	gap: 6px;
	padding: var(--space-40);
}

/* The 6px gap above is the title-to-copy step; the link makes up the rest of
 * the space before the button. 40 at the developer's instruction — the design's
 * own figure is 24 (Details panel: content 608..714, button 738..778, panel to
 * 818 on node 1092:20104), which the 18 here produced against the body's 6px
 * gap.
 *
 * `auto`, not a flat 40. As a fixed margin the link followed the copy, so a card
 * whose text ran one line longer than its neighbours dropped its button 32px
 * below theirs. Pushed to the foot of the card instead — the cards are already
 * equal height — and the 40 survives as a floor via the padding below, so the
 * tallest card still shows exactly the designed gap. */
.feature-columns--media .feature-columns__item-link {
	margin-top: auto;
}

.feature-columns--media .feature-columns__item-title {
	margin-bottom: 0;
	color: var(--primary-green);
	font-size: var(--fs-30);
	line-height: var(--lh-30);
}

.feature-columns--media .feature-columns__item-text {
	font-size: var(--fs-20);
	line-height: var(--lh-body);
}

/* The card title size, chosen per row with the Card title size field. The
 * block default is Figma's 24 (see the base rule below); this steps a row down
 * to 22, which is what the whole block used before the default was corrected. */
.feature-columns--card-title-22 .feature-columns__item-title {
	font-size: var(--fs-22);
}

/* The design's other card copy size. Chosen per row with the Card text size
 * field: 18/30 is the common one and stays the block's default, 20/32 is what
 * the "Comprehensive ... Services" cards use. */
.feature-columns--card-text-20 .feature-columns__item-text {
	font-size: var(--fs-20);
	line-height: var(--lh-body);
}

/* A bare text link on the card, not the padded pill the button variants use —
 * the body's own 23px gap is all the separation Figma gives it. The 40 on top is
 * the minimum gap the margin-top:auto above can no longer express on its own. */
.feature-columns--media .feature-columns__item-link {
	padding-block: 40px 0;
}

/* --- card type ------------------------------------------------------- */
.feature-columns__item-body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
}

.feature-columns__item-title {
	/* Figma inner content gap: 15 on the icon card, 23 on the step card.
	 * The 24px title's box is 28 in the design, not the 24 its "100%" line
	 * height suggests — every instance puts the body copy 43 below the title
	 * top (706 -> 749 on Residential Roofing, 792 -> 835 on Vinyl). */
	margin: 0 0 var(--space-15);
	color: var(--primary-black);
	font-family: var(--font-heading);
	/* Figma's 24, at the developer's instruction — the block shipped at 22 for
	 * a while, and the rows that wanted the design size opted in per row. The
	 * line box stays the measured 28, so the card rhythm does not move with the
	 * size either way. */
	font-size: var(--fs-24);
	font-weight: 700;
	line-height: var(--lh-24-28);
}

/* A <span> in a card title is the design's lighter run — the title field allows
 * inline HTML, and wrapping part of it drops that run back to regular weight
 * against the 700 the rest of the title carries. */
.feature-columns__item-title span {
	font-weight: 400;
}

/* Section 4's card titles are Roboto, not the heading face. */
.feature-columns--bordered .feature-columns__item-title {
	font-family: var(--font-body);
}

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

/* --- actions ---------------------------------------------------------- */
.feature-columns__actions {
	justify-content: center;
}

.feature-columns--left .feature-columns__actions {
	justify-content: flex-start;
}

/* Per-row override, so a centred head can still sit over a left-aligned button
 * and the other way round. Stated after the --left rule so it wins whichever
 * way the head is set. */
.feature-columns--actions-left .feature-columns__actions {
	justify-content: flex-start;
}

.feature-columns--actions-center .feature-columns__actions {
	justify-content: center;
}

.feature-columns--actions-right .feature-columns__actions {
	justify-content: flex-end;
}

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

	.feature-columns--4up .feature-columns__list {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 991px) {

	.feature-columns__list,
	.feature-columns--2up .feature-columns__list,
	.feature-columns--4up .feature-columns__list,
	.feature-columns--last-centered .feature-columns__list {
		grid-template-columns: repeat(2, 1fr);
	}

	.feature-columns--last-centered .feature-columns__item,
	.feature-columns--last-centered .feature-columns__item:nth-child(3n + 1):nth-last-child(2) {
		grid-column: auto;
	}

	.feature-columns--numbered .feature-columns__item {
		min-height: 0;
	}
}

@media (max-width: 767px) {

	.feature-columns__list,
	.feature-columns--2up .feature-columns__list,
	.feature-columns--4up .feature-columns__list,
	.feature-columns--last-centered .feature-columns__list {
		grid-template-columns: 1fr;
		/* One card per row here, so `1fr` no longer means "equal columns" — it
		 * means every stacked card is as tall as the longest one on the page, and
		 * a short card carries the difference as dead white. Auto at the
		 * developer's instruction: each card is its own height once stacked. */
		grid-auto-rows: auto;
	}
}

/* Optional per-card CTA (Roof Replacement section 6 "GET PRICING"). Position
 * only — appearance comes from the global button system. */
.feature-columns__item-link {
	align-self: flex-start;
	margin-top: auto;
	padding-top: var(--space-20);
}

/* Some bordered card rows carry a green 30px title instead of the black 24px
 * one — DaVinci section 6, where the cards are services rather than features.
 * Opt in per row with the Extra CSS classes field. */
.feature-columns--titles-green .feature-columns__item-title {
	color: var(--primary-green);
	font-family: var(--font-heading);
	font-size: var(--fs-30);
	line-height: var(--lh-30);
}

/* No icon on those cards, so the copy starts at the top of the panel. */
.feature-columns--titles-green .feature-columns__item {
	align-items: flex-start;
	text-align: left;
}

/* --- notice strip ----------------------------------------------------
 * Metal Roofs section 7 closes with a black band restating the GAF Master
 * Elite credential. Measured 1440 wide inside the section padding, 141 tall,
 * sitting 40px below the button.
 */
.feature-columns__notice {
	display: flex;
	align-items: center;
	/* Figma's own numbers for the band (node 1092:22024): 38 padding all round
	 * and a 49 gap between the star and the copy, which puts the band at the
	 * measured 142 tall around the 66px star. */
	gap: 49px;
	margin-top: var(--space-40);
	padding: 38px;
	background-color: var(--primary-black);
}

.feature-columns__notice-icon {
	display: inline-flex;
	flex: 0 0 auto;
	color: var(--primary-green);
}

/* The star node is 66x66 in Figma; the glyph's own bounds sit inside that, so
 * the box is what has to be 66 — not the shape. */
.feature-columns__notice-icon svg {
	width: 66px;
	height: 66px;
}

.feature-columns__notice-text {
	margin: 0;
	color: var(--white);
	font-family: var(--font-body);
	font-size: var(--fs-20);
	font-weight: 400;
	line-height: var(--lh-body);
}

@media (max-width: 767px) {

	.feature-columns__notice {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-20);
		padding: var(--space-30);
	}

	/* 25 at the developer's instruction, down from 40. Placed in this block
	 * rather than the earlier one because the base rule is two classes deep —
	 * it needs the same specificity and a later position to win. */
	.feature-columns--media .feature-columns__item-body {
		padding: 25px;
	}

	/* 5/10 and 14 at the developer's instruction. The STEP badge is drawn for a
	 * 371px photo card; on a full-width one it only needs to read, not carry the
	 * desktop 10/20 and 18. */
	.feature-columns__item-badge {
		padding: 5px 10px;
		font-size: 14px;
	}

	/* Bordered cards go full width here, so the 80px chip and its 50px glyph are
	 * doing nothing but taking vertical room above the copy. 60/35 and a 20 stack
	 * gap at the developer's instruction. */
	.feature-columns--bordered .feature-columns__item {
		gap: 20px;
	}

	.feature-columns--bordered .feature-columns__item-icon {
		width: 60px;
		height: 60px;
	}

	/* Both icon kinds, or the two would disagree: the bordered rows use an
	 * uploaded image on Commercial Roofing and a registered glyph on Residential
	 * Roofing and Roof Repair, and only shrinking the image would leave those
	 * pages with a 50px glyph inside the new 60px chip. */
	.feature-columns--bordered .feature-columns__item-icon-img,
	.feature-columns--bordered .feature-columns__item-icon svg {
		max-width: 35px;
		max-height: 35px;
	}
}