/**
 * Block: Services Cards (ACF layout `services_cards`).
 *
 * Measured geometry (1920 canvas, section 2 = y 1080..1597, height 517):
 *   FULL-BLEED THIRDS, not container-bound. Cards occupy x 0..640, 640..1280,
 *   1280..1920.
 *   Permanent chrome, all #C3C3C3 and all measured exact to the byte (195,195,195):
 *     - horizontal rules at y=1080 and y=1596, spanning the ENTIRE 1920 viewport
 *       (verified: 3840 of 3840 columns match on both rows)
 *     - vertical rules at x=640 and x=1279, spanning the full 517px height
 *   Card padding 48, inner gap 32. Image 544 wide, aspect-ratio 68/43 (=344 tall),
 *   radius 8. Title row: heading (flex:1) + 10px gap + 40x40 arrow.
 *   Vertical accounting is exact: 48 + 344 + 32 + 45 + 48 = 517.
 *
 * Decision D1: the four rules above are PERMANENT resting chrome. The white fill,
 * 1px #C3C3C3 border and 0/30/80 rgba(0,0,0,0.08) shadow that the design shows on
 * the middle card are the HOVER state, applied to all three cards here. The
 * mockup captured card 2 hovered, so the resting render deliberately differs from
 * _full-page.png in this region and QA hovers card 2 before capturing it.
 *
 * Every rule is drawn with `inset` box-shadow rather than `border` so that
 * showing or hiding it never changes layout — the design's title positions
 * (x = 48 / 688 / 1328) hold in every state.
 *
 * @package lawncareknox
 */

.home-services-cards {
	/* The two full-viewport-width rules at the very first and very last pixel row. */
	-webkit-box-shadow:
		inset 0 1px 0 0 var(--color-border-light),
		inset 0 -1px 0 0 var(--color-border-light);
	        box-shadow:
		inset 0 1px 0 0 var(--color-border-light),
		inset 0 -1px 0 0 var(--color-border-light);
}

.services-cards__row {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: stretch;
	    -ms-flex-align: stretch;
	        align-items: stretch;
}

.services-card {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
        -ms-flex: 1 1 0px;
            flex: 1 1 0;
    min-width: 0;
    -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);
    padding: var(--sp-48);
    color: var(--color-text);
    background-color: transparent;
    -webkit-transition: var(--transition);
    transition: var(--transition);
    -webkit-box-shadow: 0px 30px 80px 0px #00000014;
            box-shadow: 0px 30px 80px 0px #00000014;
    border-right: 1px solid #C3C3C3;
    border-bottom: 1px solid #C3C3C3;
}

/* The design's two vertical dividers ARE the middle card's own left and right
   edges: at a 1920 viewport that is exactly x=640 and x=1279, both measured.
   Drawn on card 2 itself so the positions stay exact at any row width. */
/* .services-card:nth-child(2) {
	box-shadow:
		inset 1px 0 0 0 var(--color-border-light),
		inset -1px 0 0 0 var(--color-border-light);
} */

/* --- Hover / focus elevation (D1): all three cards. --- */
.services-card:hover,
.services-card:focus-within {
	background-color: var(--color-white);
	/* box-shadow:
		inset 0 0 0 1px var(--color-border-light),
		0 30px 80px 0 rgba(0, 0, 0, 0.08); */
}

.services-card__media {
	width: 100%;
	aspect-ratio: 68 / 43;
	border-radius: var(--radius);
	/* overflow: hidden; */
}

/*
 * section-specs.json reports objectPosition "0% 0%" for all three card images.
 * That is WRONG, like several other extractor values (section names, gradients).
 * _full-page.png is the declared source of truth and it shows a CENTRE crop.
 *
 * Proof: the source is 2048x1367 (aspect 1.498) in a 544x344 box (aspect 1.581),
 * so cover scales to 544x363 and 19px must be dropped. Re-deriving both crops
 * from image.jpg and diffing against the reference (mean abs, 8-bit luma):
 *   top-left crop vs reference 46.47 | vs our render  3.84
 *   centre   crop vs reference 10.85 | vs our render 45.73
 * and cross-correlating our render against the reference found the optimum at
 * dy = -10, i.e. exactly the (363-344)/2 = 9.5px centre offset.
 * So the design centre-crops and "0% 0%" was pushing every card photo ~10px
 * down. Centre is the CSS default; it is written out to record the finding.
 */
.services-card__media img {
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	   object-fit: cover;
	-o-object-position: center center;
	   object-position: center center;
	   border-radius: var(--radius);
}

.services-card__foot {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	gap: var(--sp-10);
	width: 100%;
}

.services-card__foot .section-subtitle {
	-webkit-box-flex: 1;
	    -ms-flex: 1 1 auto;
	        flex: 1 1 auto;
	min-width: 0;
}

.services-card__arrow {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-flex: 0;
	    -ms-flex: 0 0 40px;
	        flex: 0 0 40px;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	-webkit-transition: var(--transition);
	transition: var(--transition);
}

.services-card__arrow img {
	width: 40px;
	height: 40px;
}

.services-card:hover .services-card__arrow {
	-webkit-transform: translateX(var(--sp-8));
	    -ms-transform: translateX(var(--sp-8));
	        transform: translateX(var(--sp-8));
}

/* ==========================================================================
   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) {
	.services-card {
		padding: var(--sp-32);
	}
}

@media (max-width: 1200px) {
	.services-card {
		padding: var(--sp-32);
		gap: var(--sp-24);
	}
}

/* Stack to a single column. The dividers become horizontal, so card 2's vertical
   pair is dropped and every card after the first takes a top rule instead. */
@media (max-width: 999px) {
	.services-cards__row {
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		    -ms-flex-direction: column;
		        flex-direction: column;
	}

	.services-card:nth-child(2) {
		-webkit-box-shadow: none;
		        box-shadow: none;
	}

	.services-card + .services-card {
		-webkit-box-shadow: inset 0 1px 0 0 var(--color-border-light);
		        box-shadow: inset 0 1px 0 0 var(--color-border-light);
	}

	/* .services-card:hover,
	.services-card:focus-within {
		box-shadow:
			inset 0 0 0 1px var(--color-border-light),
			0 30px 80px 0 rgba(0, 0, 0, 0.08);
	} */
	.services-card {
    border-right: 0px solid #C3C3C3;
}
}

@media (max-width: 767px) {
	.services-card {
		padding: var(--sp-24);
		gap: var(--sp-16);
	}

	.services-card__arrow,
	.services-card__arrow img {
		-ms-flex-preferred-size: var(--sp-32);
		    flex-basis: var(--sp-32);
		width: var(--sp-32);
		height: var(--sp-32);
	}
}

@media (max-width: 479px) {
	.services-card {
		padding: var(--sp-16);
	}

	.services-card__arrow,
	.services-card__arrow img {
		-ms-flex-preferred-size: var(--sp-24);
		    flex-basis: var(--sp-24);
		width: var(--sp-24);
		height: var(--sp-24);
	}
}