/**
 * Block: Consultation (ACF layout `consultation`).
 *
 * Measured geometry (1920 canvas, section 6 = y 4275..5698, height 1423). This
 * section had NO spec data at all, so every value below was measured off the 2x
 * design screenshot and snapped to the Figma scales. The full derivation, and
 * how each value was verified, is in pages/homepage-v3/MEASURED-GEOMETRY.md
 * (addendum, section 6).
 *
 *   padding-block 150
 *   label   (.section-label 22/32)            150 ..  182
 *   gap 16
 *   heading (.section-title 63/73, 2 lines)   198 ..  344
 *   gap 80
 *   photo mosaic                              423 .. 1131   (708)
 *   gap 80
 *   button  (.btn, 62 tall, 454 wide)        1211 .. 1273
 *   padding-block 150
 *
 * The measured button box 1211..1273 matches that arithmetic exactly.
 *
 * NOTE ON CENTRING. In the design the label and the two heading lines centre on
 * x=928, while the button centres on 960.0, the contact card on 959.5 and the
 * mosaic spans 240..1680 exactly. A control measurement — the footer copyright,
 * in an already-verified section — centres on exactly 960.0. So the design
 * centres on 960 everywhere except that one text block, which sits ~31px left.
 * 31 is on no scale and contradicts the rest of its own section, so it is a
 * Figma authoring slip: this implementation centres on the container.
 *
 * @package lawncareknox
 */

.home-consultation {
	position: relative;
	padding-block: var(--sp-150);
	background-color: var(--color-white);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	overflow: hidden;
}

/*
 * The stone pattern is a pure black-and-white image and the design shows it in
 * the range 250..255 only, i.e. an effective alpha of 5/255 = 0.0196. So it is
 * knocked back by a near-white wash rather than being loaded at low opacity.
 * Same technique as What We Do and Service Areas — a background-color alone
 * cannot work, because the inline ACF background-image paints on top of it
 * (that was defect D-QA-2).
 */
.home-consultation__wash {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0.91) 100%);
    z-index: 0;
}

.home-consultation__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--sp-80);
}

/* Scoped overrides of the shared classes — no per-section heading class. */

/*
 * THE LABEL + HEADING BLOCK IS OFFSET, AND IT IS DELIBERATE.
 *
 * Measured on the 1x reference: the label centres on x=928.0 and the two heading
 * lines on 929.0 / 930.0, while the button centres on exactly 960.0 and the
 * mosaic spans 240..1680. So this one block sits ~32px left of the container
 * centre while everything else in the section is centred normally.
 *
 * That is not a Figma slip. 1440 - 64 = 1376, and a 1376-wide box starting at
 * x=240 centres on 240 + 688 = 928.0 — the measured value exactly. 64 is on the
 * Figma spacing scale, so the block is the full container with 64px of padding
 * on its trailing edge. Reproduced as such rather than as a magic -32px nudge.
 */
.home-consultation .section-head {
	width: 100%;
	padding-right: var(--sp-64);
	align-items: center;
}

.home-consultation .section-title {
	text-align: center;
}

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

/* ==========================================================================
   Photo mosaic
   ==========================================================================
   Six tiles on ONE grid. The row split differs per column — column 1 runs
   408 then 284, while columns 2-4 run 284 then 408 — which is why this cannot
   be expressed as a plain three-column grid.

   Column tracks 469 + 348 + 105 + 470 = 1392, plus 3 gaps of 16 = 1440 exactly,
   so `fr` reproduces the measured widths at a 1920 viewport and stays fluid
   below it. Row tracks 284 + 108 + 284 = 676, plus 2 gaps of 16 = 708 exactly;
   the 408-tall tiles span two tracks plus the gap (284+16+108 and 108+16+284).

   Measured tile boxes, x and y (y is section-relative):
     item 1  240..709  423..831   469x408   col 1     rows 1-2
     item 2  240..709  847..1131  469x284   col 1     row  3
     item 3  725..1194 423..707   469x284   cols 2-3  row  1
     item 4 1210..1680 423..707   470x284   col 4     row  1
     card    725..1073 723..1131  348x408   col 2     rows 2-3
     item 5 1089..1680 723..1131  591x408   cols 3-4  rows 2-3
   ========================================================================== */

/*
 * THE WHOLE MOSAIC SCALES AS ONE PIECE, AND `aspect-ratio` ON THE CONTAINER IS WHAT
 * MAKES THAT POSSIBLE.
 *
 * The columns were always `fr` and so always scaled, but the rows were pinned at
 * `284px 108px 284px`. Below the desktop width that mismatch is the whole problem:
 * the tiles kept their heights while their widths shrank, so every photo flattened,
 * and the layout had to be abandoned for a plain equal-cell grid to stay usable.
 *
 * `fr` rows cannot resolve proportionally without a definite container height, and a
 * grid's height is normally its content. Declaring the design's own 1440x708 ratio
 * on the container supplies that height — width x 708/1440 — so the row track list
 * resolves against it exactly the way the columns resolve against the width. The
 * mosaic then holds its proportions at every width, and the contact card keeps its
 * designed interior position (column 2, spanning the lower two rows) instead of
 * being reflowed to the end.
 *
 * Desktop is untouched, and that is arithmetic rather than hope: the container caps
 * at 1470 with 15px gutters, so its content box is exactly 1440 at any viewport from
 * 1485 up. 1440 x 708/1440 = 708, and (708 - 32 gap) split 284:108:284 gives back
 * 284 / 108 / 284 to the pixel — the same values the fixed track list produced.
 *
 * EVERY TRACK IS FLOORED AT `minmax(0, ...)`. A bare `469fr` is `minmax(auto, 469fr)`,
 * and that automatic minimum is a live hazard here: the contact card's own min-content
 * width once won the track it sits in outright, forcing the columns to 346/346/429
 * instead of equal thirds and leaving a tile hanging 17.5px over the row below it.
 * Flooring at 0 means the declared ratios are the only thing that decides a track.
 */
.consultation-grid {
	display: grid;
	width: 100%;
	aspect-ratio: 1440 / 708;
	min-height: 0;
	grid-template-columns: minmax(0, 469fr) minmax(0, 348fr) minmax(0, 105fr) minmax(0, 470fr);
	grid-template-rows: minmax(0, 284fr) minmax(0, 108fr) minmax(0, 284fr);
	gap: var(--sp-16);
}

.consultation-grid__item {
	overflow: hidden;
	border-radius: var(--radius);
}

/* Centre-crop, matching the design (defect D-QA-4: the extractor's 0% 0% is wrong). */
.consultation-grid__item img {
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	   object-fit: cover;
	-o-object-position: center center;
	   object-position: center center;
}

.consultation-grid__item--1 {
	-ms-grid-column: 1;
	grid-column: 1;
	-ms-grid-row: 1;
	-ms-grid-row-span: 2;
	grid-row: 1 / 3;
}

.consultation-grid__item--2 {
	-ms-grid-column: 1;
	grid-column: 1;
	-ms-grid-row: 3;
	grid-row: 3;
}

.consultation-grid__item--3 {
	-ms-grid-column: 2;
	-ms-grid-column-span: 2;
	grid-column: 2 / 4;
	-ms-grid-row: 1;
	grid-row: 1;
}

.consultation-grid__item--4 {
	-ms-grid-column: 4;
	grid-column: 4;
	-ms-grid-row: 1;
	grid-row: 1;
}

.consultation-grid__item--5 {
	-ms-grid-column: 3;
	-ms-grid-column-span: 2;
	grid-column: 3 / 5;
	-ms-grid-row: 2;
	-ms-grid-row-span: 2;
	grid-row: 2 / 4;
}

/* ==========================================================================
   Contact card
   ==========================================================================
   348x408, fill measured at exactly #26492D (--color-bg-dark). Content is
   centred both ways, and the arithmetic is what confirms the structure:
   96 + 32 + 30 + 4 + 45 = 207, and (408 - 207) / 2 = 100.5, which is the
   measured offset of the icon tile to within 0.05px.

   The icon is icon-4.svg — an unused original Figma export that is exactly this
   tile: 96x96, rx=8, filled #7C9A74, with a white phone glyph. Nothing about it
   is reconstructed in CSS.
   ========================================================================== */

.consultation-card {
	grid-column: 2;
	grid-row: 2 / 4;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--sp-32);
	padding: var(--sp-48);
	background-color: var(--color-bg-dark);
	border-radius: var(--radius);
	text-align: center;
}

.consultation-card__icon {
	flex: 0 0 auto;
	width: 96px;
	height: 96px;
}

.consultation-card__contact {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--sp-4);
}

.home-consultation .consultation-card .text-medium,
.home-consultation .consultation-card .section-subtitle {
	color: var(--color-white);
}

/* The number is a link (tel:). Its resting appearance is entirely inherited —
   the global `a` reset already gives color: inherit, text-decoration: none and
   the shared transition — so the card renders pixel-identically to when the
   number was plain text. Only the hover below is new. Sage accent is what the
   theme uses for emphasis on dark grounds (see the What We Do label). */
.home-consultation .consultation-card__phone:hover,
.home-consultation .consultation-card__phone:focus-visible {
	color: var(--color-accent);
}

/* ==========================================================================
   Responsive
   ==========================================================================
   The Figma file has desktop (1920) frames only — responsive-map.json reports
   mobile: null and tablet: null — so every value below comes from proportional
   scaling of the desktop design and cannot be pixel-verified.

   The mosaic's fixed row heights are released below 1200 and the tiles become
   aspect-ratio driven, because holding 284/108/284 while the columns narrow
   would crop the photos harder and harder.
   ========================================================================== */
@media (max-width: 1440px) {
.home-consultation .section-head {
    padding-right: 0 !important;
}
.home-consultation {
    padding-block: 120px;
}
}
@media (max-width: 1200px) {
	/* --sp-150 / --sp-80 are the desktop rhythm; both step down from here. */
	.home-consultation {
		padding-block: var(--sp-80);
	}

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

	/* The 64px trailing padding that reproduces the design's deliberate 32px
	   left-shift of the heading block is a 1440-box measurement. Below the
	   desktop layout it is just a centring error, so it comes off. */
	.home-consultation .section-head {
		padding-right: 0;
	}

	/*
	 * THE MOSAIC ITSELF IS NOT TOUCHED IN THIS BAND. It is the design's own layout,
	 * fluid from the base rule, so it simply scales — the card stays in its
	 * interior position rather than being reflowed to the end of a flat grid.
	 *
	 * Only the card's padding steps, and it has to. The card's column is 348/1392
	 * of the content box, so at a 1000px viewport it is 227 wide; the phone number
	 * will not wrap below 168, which leaves at most 29 either side. 48 would clip
	 * it, 24 clears it with room to spare. Vertically there is no pressure at all:
	 * the card's box is 270 tall there against content of 24 + 96 icon + 32 gap +
	 * 60 of text + 24 = 236.
	 */
	.consultation-card {
		padding: var(--sp-24);
	}
}

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

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

	/*
	 * THIS IS WHERE THE MOSAIC IS FINALLY ABANDONED, AND ONLY HERE.
	 *
	 * Four columns of a 1440-wide composition cannot survive a 955px content box:
	 * the narrowest track is 105/1392 of it, i.e. 72px. So from here the layout
	 * flattens to plain equal cells and the tiles carry their own 469/284 ratio
	 * instead of inheriting proportions from the container.
	 *
	 * All three pieces of that are required together. `aspect-ratio: auto` releases
	 * the container's 1440/708 height — leave it on and the flattened grid would be
	 * squeezed into a box sized for a completely different layout. The placement
	 * resets undo the design's spans and let the six items flow in source order.
	 * And the row track list has to come back to `auto`, because with the container
	 * height gone there is nothing for `fr` rows to resolve against.
	 */
	.consultation-grid {
		aspect-ratio: auto;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: auto;
	}

	.consultation-grid__item,
	.consultation-card {
		grid-column: auto;
		grid-row: auto;
	}

	.consultation-grid__item {
		aspect-ratio: 469 / 284;
	}

	/*
	 * The card has no ratio of its own — deliberately. Giving it one would transfer
	 * its min-content HEIGHT into a min-content WIDTH (96 icon + 32 gap + two text
	 * lines + padding = 260 tall, and 260 x 469/284 = 429) and blow out its track.
	 * With no ratio it simply stretches to whatever height the photo tiles set, so
	 * the cells stay uniform.
	 *
	 * Its content steps down to fit the shallowest row in this band. Two equal
	 * columns of a 723px content box at a 768px viewport are 353.5 wide, giving rows
	 * of 353.5 x 284/469 = 214. At the desktop icon and gap the content would be 236
	 * and overflow; at 64 and 24 it is 48 + 64 + 24 + 60 = 196 and clears it.
	 */
	.consultation-card__icon {
		width: 64px;
		height: 64px;
	}

	.consultation-card {
		gap: var(--sp-24);
	}
	.consultation-grid__item{
		overflow:visible;
	}
	.consultation-grid__item img{
		border-radius: 8px;
	}
}

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

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

	.consultation-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

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