/* The wrapper is the query container rather than the grid it holds: `alignwide` carries its own
   `max-width` at a specificity this file cannot outrank, so the measure sits one level down. */
.grave-besoin__rows {
	container-type: inline-size;
}

.grave-besoin__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--30);
	max-width: var(--wp--custom--home--entry-rows-measure);
	margin-inline: auto;
}

.wp-block-group.grave-besoin__rows > *,
.wp-block-group.grave-besoin__grid > * {
	margin-block: 0;
}

@container (width > 44rem) {
	.grave-besoin__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* The section is the query container, so the cards follow the band they sit in rather than the
   viewport, and keep their count when the page is composed inside a narrower shell. */
.grave-home-services {
	container-type: inline-size;
}

/* Core gives the grid's children a block margin that would fight the grid tracks. Its
   `.wp-container-… > * + *` rule ties on specificity, so the reset needs the extra class to win.
   The section itself keeps its margins: they are its block gap. */
.wp-block-group.grave-home-services__grid > * {
	margin: 0;
}

.grave-home-services__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
}

.grave-home-services .grave-controle-media-card__text > .wp-block-heading {
	color: var(--wp--preset--color--fg-dark);
}

.grave-home-services .grave-controle-media-card__panel > .wp-block-buttons {
	flex: none;
	margin: 0;
}

.grave-home-services__button .wp-block-button__link {
	--grave-btn-icon-size: 1rem;
	--grave-btn-icon-only-padding: var(--wp--preset--spacing--30);

	border-radius: var(--wp--custom--radius--sm);
}

.grave-home-services .grave-controle-media-card:has(.grave-home-services__button .wp-block-button__link:focus-visible) {
	outline: auto;
}

.grave-home-services__button .wp-block-button__link:focus-visible {
	background-color: var(--wp--custom--button--secondary--background-hover);
	outline: none;
}

.grave-home-section-heading.is-motion-ready {
	opacity: 0;
	transform: translateY(var(--wp--preset--spacing--25));
	transition:
		opacity var(--wp--custom--motion--duration--base) var(--wp--custom--motion--easing--out),
		transform var(--wp--custom--motion--duration--base) var(--wp--custom--motion--easing--out);
}

.grave-home-section-heading.is-motion-ready.is-motion-visible {
	opacity: 1;
	transform: translateY(0);
}

.grave-besoin .grave-link-card:has(.grave-link-card__label a:active) .wp-block-grave-icon.is-style-chip {
	background-color: var(--wp--preset--color--primary-highlight);
}

@media (prefers-reduced-motion: no-preference) {
	.grave-besoin .grave-link-row.grave-link-card:has(.grave-link-card__label a:active) {
		transition-timing-function: var(--wp--custom--motion--easing--out);
	}

	.grave-besoin .grave-link-row.grave-link-card:has(.grave-link-card__label a:active) {
		transform: scale(0.98);
	}
}

@media (prefers-reduced-motion: reduce) {
	.grave-home-section-heading.is-motion-ready {
		transform: none;
		transition: opacity var(--wp--custom--motion--duration--fast) var(--wp--custom--motion--easing--out);
	}
}

/* Container conditions cannot resolve theme custom properties, so these structural thresholds
   stay font-relative while every visual value continues to come from theme.json. They break
   earlier than the contrôle grid's 48rem and 72rem: this grid ends on four columns, and at a
   tablet width the section is about 43rem, where a single column would draw a 700px square. */
@container (width > 40rem) {
	.grave-home-services__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@container (width > 64rem) {
	.grave-home-services__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}