/**
 * css/components/template-social-impact.css — Website 2.0 Social Impact
 * restyle (#126)
 *
 * template-social_impact.php-scoped styles: the image-grid card
 * (`.cg-impact-grid`/`.cg-impact-tile` — blocks/social_impact_content/
 * image_grid.php) and a page-scoped zero-top-margin fix for the closing
 * band's eyebrow-less statement (blocks/social_impact_content/text.php).
 *
 * No dedicated design HTML exists for this page (per docs/
 * 2.0-system-guide.md §8 "don't guess the design") — the tile look
 * extrapolates the already-shipped `.cg-work-tile` (css/components/
 * template-work.css, #62)/`.cg-latest-work__tile` (template-single-work.css,
 * #63/#64) fixed-crop object-fit:cover pattern (uniform tile size
 * regardless of source image dimensions, the #126 acceptance criterion),
 * reimplemented here as its own component rather than reusing those
 * classes directly: `.cg-work-tile` is deliberately scoped under
 * `.js-ajax-items-holder` (present only on template-work.php's AJAX
 * grid) so it can never leak here — see that file's own docblock.
 *
 * Tokens only — no raw hex, no @layer, no !important. The one exception
 * (documented inline) is the `rgba(14, 14, 12, …)` scrim gradient, which
 * matches the literal precedent already shipped in
 * template-single-work.css `.cg-latest-work__ov` (#63) — `--cg-ink` is
 * `#0E0E0C` = `rgb(14, 14, 12)`, so this is that same token's channel
 * values used in a gradient stop where a solid `var(--cg-ink)` can't
 * express the fade.
 *
 * `.grid-items`/`.grid-items-section` (legacy classes, style.css) are kept
 * on the same markup per docs/2.0-system-guide.md §5.2 ("add classes,
 * don't rename") — every selector below that touches them is qualified
 * with the page-only `.cg-impact-grid-section` ancestor so its 2-class
 * specificity always beats the legacy single-class `.grid-items …` rules
 * in style.css regardless of source order (same technique as
 * template-work.css's `.js-ajax-items-holder`-scoped `.cg-work-grid`/
 * `.cg-work-tile`).
 */

/* ------------------------------------------------------------------ *
 * Closing band (blocks/social_impact_content/text.php) — no eyebrow on
 * this layout's ACF schema, so the statement is always the split
 * column's first child; zero its eyebrow-gap top margin, same fix as
 * template-single-work.css's `body.single-work .cg-split > div
 * .cg-statement:first-child`.
 * ------------------------------------------------------------------ */

.page-template-template-social_impact .cg-split > div > .cg-statement:first-child {
	margin-top: 0;
}

/* ------------------------------------------------------------------ *
 * Image-grid tile (blocks/social_impact_content/image_grid.php)
 * ------------------------------------------------------------------ */

.cg-impact-grid-section .grid-items.cg-impact-grid {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: 0;
	margin-top: 44px;
}

.cg-impact-grid-section .grid-items.cg-impact-grid li {
	width: auto;
	padding-top: 0;
	position: static;
	overflow: visible;
}

.cg-impact-grid-section .cg-impact-tile {
	display: block;
	position: relative;
	width: auto;
	height: auto;
	top: auto;
	left: auto;
	overflow: hidden;
	aspect-ratio: 640 / 560;
	background: var( --cg-ink-85 );
	text-decoration: none;
}

.cg-impact-grid-section .cg-impact-tile__media {
	position: absolute;
	inset: 0;
}

.cg-impact-grid-section .cg-impact-tile__media picture,
.cg-impact-grid-section .cg-impact-tile__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s cubic-bezier( 0.16, 1, 0.3, 1 );
}

.cg-impact-grid-section .cg-impact-tile:hover .cg-impact-tile__media img {
	transform: scale( 1.04 );
}

.cg-impact-grid-section .cg-impact-tile__ov {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 150px;
	background: linear-gradient( 180deg, rgba( 14, 14, 12, 0 ) 0%, rgba( 14, 14, 12, 0.86 ) 100% );
	pointer-events: none;
}

.cg-impact-grid-section .cg-impact-tile__title {
	position: absolute;
	left: 30px;
	right: 30px;
	bottom: 28px;
	z-index: 2;
	margin: 0;
	font-family: var( --font-serif );
	font-weight: 400;
	font-size: 26px;
	line-height: 1.06;
	letter-spacing: -0.6px;
	color: var( --cg-cream );
}

@media ( max-width: 1024px ) {
	.cg-impact-grid-section .grid-items.cg-impact-grid {
		grid-template-columns: 1fr 1fr;
	}
}

@media ( max-width: 680px ) {
	.cg-impact-grid-section .grid-items.cg-impact-grid {
		grid-template-columns: 1fr;
	}
}