/**
 * Block: Service Areas (ACF layout `service_areas`).
 *
 * NOTE: the Figma extractor named this section `what_you_get`. That is WRONG —
 * `what_you_get` is Service Areas and `cta` is the Footer. Always resolve through
 * sections_discovered.build_order in project-config.json.
 *
 * Measured geometry (1920 canvas, section 6 = y 5698..6598, height 900):
 *   Section padding-block 150, so the content box is 600 tall.
 *   Row: intro 527 + 80 gap + list group 833 = 1440. Expressed as proportional
 *   flex-grow (527 / 833 against 1440 - 80 = 1360) so it scales fluidly and is
 *   exact at 1920.
 *   The list group has padding-left 64 -> 769 of content in 2 columns with a 64
 *   column-gap, so each column is 352.5 and the map pins land at x=911 and
 *   x=1327.5 — matching the measured 911 and 1328.
 *   Rows: text 36 + padding-block 32 = 100px pitch. 6 rows = 600, running
 *   150..750 exactly. Pin 36x36 + 16 gap -> text at x=963. Rule
 *   rgba(43,43,43,0.2).
 *   Card 527x235 at rel y 515, bottom-aligned. White, radius 8, padding 48,
 *   content 45 + 32 gap + 62 = 139, and 48 + 139 + 48 = 235 exactly.
 *
 * Two details that must NOT be borders:
 *   - the row rules, because a 1px border would make the pitch 101 and the six
 *     rows would drift off their measured y positions
 *   - the card's 4px accent bar, because the design's card text sits at x=288,
 *     i.e. card edge + 48. A border-left would push it to 292.
 * Both are `inset` box-shadows, which cost no layout.
 *
 * The area list is CSS multi-column rather than a grid so that it fills
 * COLUMN-MAJOR (East Knoxville..Bearden down the left, Rocky Hill..West Hills
 * down the right, as designed) and stays correct for any number of repeater rows.
 *
 * @package lawncareknox
 */

.home-service-areas {
	position: relative;
	padding-block: var(--sp-150);
	background-color: var(--color-bg-light);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}

/*
 * The ACF background photo (what-you-get-2.jpg) must sit almost entirely BEHIND
 * the flat mint, exactly as the What We Do photo does behind #26492D. Setting
 * background-color alone does not do it: the inline background-image from ACF
 * paints on top of the colour, so the map rendered at full strength — a grey
 * map instead of the design's pale mint wash.
 *
 * Measured against screenshots/what-you-get.png: the flat gutters read
 * (236.8, 252.6, 242.7) against #EFFFF5 = (239, 255, 245), i.e. the photo is
 * only ~2/255 visible. Alpha anywhere in 0.90..0.97 lands within ~2/255 of the
 * reference; 0.97 is used because that is the value already measured and
 * documented for the sibling section in what-we-do.css, keeping both
 * photo-backed sections on one traceable value.
 *
 * A pseudo-element is used rather than an overlay div so no PHP changes.
 */
/* .home-service-areas::before {
	content: "";
	position: absolute;
	inset: 0;
	background-color: rgba(239, 255, 245, 0.97);
} */

.home-service-areas__inner {
	position: relative;
	z-index: 1;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: stretch;
	    -ms-flex-align: stretch;
	        align-items: stretch;
	gap: var(--sp-80);
	min-height: 600px;
}

/* --- Intro column: head pinned top, CTA card pinned bottom. --- */
.home-service-areas__intro {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-flex: 527;
	    -ms-flex: 527 1 0px;
	        flex: 527 1 0;
	min-width: 0;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
	-webkit-box-align: start;
	    -ms-flex-align: start;
	        align-items: flex-start;
	min-width: 527px;
}

.home-service-areas .section-label {
	color: var(--color-primary);
}

/* --- CTA card. --- */
.areas-card {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
	-webkit-box-align: start;
	    -ms-flex-align: start;
	        align-items: flex-start;
	gap: var(--sp-32);
	width: 100%;
	padding: var(--sp-48);
	background-color: var(--color-white);
	border-radius: var(--radius);
	-webkit-box-shadow: inset 4px 0 0 0 var(--color-secondary);
	        box-shadow: inset 4px 0 0 0 var(--color-secondary);
}

/* --- Area list. --- */
.areas-list {
	-webkit-box-flex: 833;
	    -ms-flex: 833 1 0px;
	        flex: 833 1 0;
	min-width: 0;
	padding-left: var(--sp-64);
	-webkit-columns: 2;
	   -moz-columns: 2;
	        columns: 2;
	-webkit-column-gap: var(--sp-64);
	   -moz-column-gap: var(--sp-64);
	        column-gap: var(--sp-64);
}

.areas-list__item {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	gap: var(--sp-16);
	padding-block: var(--sp-32);
	-webkit-column-break-inside: avoid;
	   -moz-column-break-inside: avoid;
	        break-inside: avoid;
	-webkit-box-shadow: inset 0 -1px 0 0 var(--color-hairline);
	        box-shadow: inset 0 -1px 0 0 var(--color-hairline);
}

.areas-list__pin {
	-webkit-box-flex: 0;
	    -ms-flex: 0 0 36px;
	        flex: 0 0 36px;
	width: 36px;
	height: 36px;
}

/* ==========================================================================
   Responsive
   ==========================================================================
   No tablet or mobile frames exist in the Figma file, so these are derived.
   Spacing values are all from the Figma scale.
   ========================================================================== */
@media (max-width: 1440px) {
	.home-service-areas {
    padding-block: 120px;
}
.home-service-areas__intro{
	min-width:auto
}
}
@media (max-width: 1360px) {
	.areas-list {
		padding-left: var(--sp-48);
		-webkit-column-gap: var(--sp-48);
		   -moz-column-gap: var(--sp-48);
		        column-gap: var(--sp-48);
	}
}

@media (max-width: 1200px) {
	/* --sp-150 is the desktop rhythm; 80 is the first step down. */
	.home-service-areas {
		padding-block: var(--sp-80);
	}

	.home-service-areas__inner {
		gap: var(--sp-48);
	}

	.areas-list {
		padding-left: var(--sp-32);
		-webkit-column-gap: var(--sp-32);
		   -moz-column-gap: var(--sp-32);
		        column-gap: var(--sp-32);
	}

	/* 100px row pitch (36 + 2x32) comes down to 84 (36 + 2x24). */
	.areas-list__item {
		padding-block: var(--sp-24);
	}

	.areas-card {
		padding: var(--sp-32);
	}
}

@media (max-width: 999px) {
	.home-service-areas {
		padding-block: var(--sp-64);
	}

	.home-service-areas__inner {
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		    -ms-flex-direction: column;
		        flex-direction: column;
		min-height: 0;
		gap: var(--sp-48);
	}

	.home-service-areas__intro,
	.areas-list {
		-webkit-box-flex: 0;
		    -ms-flex: 0 0 auto;
		        flex: 0 0 auto;
		width: 100%;
	}

	.home-service-areas__intro {
		gap: var(--sp-40);
	}

	.areas-list {
		padding-left: 0;
	}
	.areas-card {
    max-width: 560px;
}
}

@media (max-width: 767px) {
	.home-service-areas {
		padding-block: var(--sp-48);
	}

	.home-service-areas__inner {
		gap: var(--sp-32);
	}

	.home-service-areas__intro {
		gap: var(--sp-24);
	}

	.areas-list {
		-webkit-columns: 1;
		   -moz-columns: 1;
		        columns: 1;
	}

	.areas-list__item {
		padding-block: var(--sp-16);
		gap: var(--sp-10);
	}

	.areas-list__pin {
		-webkit-box-flex: 0;
		    -ms-flex: 0 0 var(--sp-24);
		        flex: 0 0 var(--sp-24);
		width: var(--sp-24);
		height: var(--sp-24);
	}

	.areas-card {
		padding: var(--sp-24);
		gap: var(--sp-24);
	}
}

@media (max-width: 640px) {
	.home-service-areas {
		padding-block: var(--sp-40);
	}
}