/*
 * REACH Supply homepage patterns.
 *
 * These rules bridge the approved master design system to stable homepage
 * classes already assigned in Breakdance. They are deliberately scoped to the
 * public homepage and do not target generated Breakdance element IDs.
 */

/* RS-DS-008 — content-sized hero with clear copy/card separation. */
body.home.reach-design-system .reach-home-page .reach-cinematic-hero {
	min-height: auto !important;
	height: auto !important;
}

@media (min-width: 768px) {
	body.home.reach-design-system .reach-home-page .reach-cinematic-hero {
		padding-top: clamp(2.25rem, 3vw, 2.75rem) !important;
		padding-bottom: clamp(2.25rem, 3vw, 2.75rem) !important;
	}
}

@media (min-width: 1120px) {
	body.home.reach-design-system .reach-home-page .reach-cinematic-hero {
		align-items: center !important;
		display: grid !important;
		gap: clamp(3.5rem, 4.5vw, 4.5rem) !important;
		grid-template-columns: minmax(0, 1fr) minmax(21.5rem, 24.375rem) !important;
		justify-content: initial !important;
	}

	body.home.reach-design-system .reach-home-page .reach-hero-content {
		max-width: 42rem !important;
		min-width: 0 !important;
		width: auto !important;
	}

	body.home.reach-design-system .reach-home-page .reach-hero-copy {
		max-width: 39rem !important;
		width: 100% !important;
	}

	body.home.reach-design-system .reach-home-page .reach-hero-search-card {
		justify-self: end !important;
		max-width: 24.375rem !important;
		width: 100% !important;
	}
}

/* RS-DS-009 — one neutral trust surface instead of nested beige cards. */
body.home.reach-design-system .reach-home-page .reach-home-benefits-strip {
	background: var(--rs-color-surface) !important;
	border: var(--rs-border-default) !important;
	border-radius: var(--rs-radius-lg) !important;
	box-shadow: var(--rs-shadow-xs) !important;
	overflow: hidden !important;
	padding: 0 !important;
}

body.home.reach-design-system .reach-home-page .reach-home-benefits-strip .bde-text {
	max-width: none !important;
	width: 100% !important;
}

body.home.reach-design-system .reach-home-page .reach-home-benefits {
	display: grid !important;
	gap: 0 !important;
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	width: 100% !important;
}

body.home.reach-design-system .reach-home-page .reach-home-benefit {
	align-content: center !important;
	align-items: center !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	border-right: var(--rs-border-default) !important;
	column-gap: var(--rs-space-3) !important;
	display: grid !important;
	grid-template-columns: 2.75rem minmax(0, 1fr) !important;
	grid-template-rows: auto auto !important;
	justify-content: initial !important;
	min-height: 6.75rem !important;
	padding: var(--rs-space-5) !important;
	row-gap: var(--rs-space-1) !important;
	text-align: left !important;
}

body.home.reach-design-system .reach-home-page .reach-home-benefit:last-child {
	border-right: 0 !important;
}

body.home.reach-design-system .reach-home-page .reach-home-benefit__icon {
	align-self: center !important;
	background: var(--rs-color-surface-soft) !important;
	border: var(--rs-border-default) !important;
	border-radius: var(--rs-radius-md) !important;
	box-shadow: inset 0 -2px 0 var(--rs-color-gold) !important;
	color: var(--rs-color-ink) !important;
	grid-column: 1 !important;
	grid-row: 1 / 3 !important;
	height: 2.75rem !important;
	margin: 0 !important;
	width: 2.75rem !important;
}

body.home.reach-design-system .reach-home-page .reach-home-benefit__icon svg {
	height: 1.35rem !important;
	width: 1.35rem !important;
}

body.home.reach-design-system .reach-home-page .reach-home-benefit strong {
	color: var(--rs-color-ink) !important;
	font-size: 0.9375rem !important;
	font-weight: var(--rs-font-weight-bold) !important;
	grid-column: 2 !important;
	line-height: 1.35 !important;
	margin: 0 !important;
}

body.home.reach-design-system .reach-home-page .reach-home-benefit small {
	color: var(--rs-color-muted) !important;
	font-size: var(--rs-font-size-sm) !important;
	font-weight: var(--rs-font-weight-regular) !important;
	grid-column: 2 !important;
	line-height: 1.45 !important;
	margin: 0 !important;
}

@media (max-width: 1119px) {
	body.home.reach-design-system .reach-home-page .reach-home-benefits {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}

	body.home.reach-design-system .reach-home-page .reach-home-benefit {
		border-bottom: 0 !important;
		border-right: 0 !important;
	}

	body.home.reach-design-system .reach-home-page .reach-home-benefit:nth-child(odd) {
		border-right: var(--rs-border-default) !important;
	}

	body.home.reach-design-system .reach-home-page .reach-home-benefit:nth-child(-n + 2) {
		border-bottom: var(--rs-border-default) !important;
	}
}

@media (max-width: 767px) {
	body.home.reach-design-system .reach-home-page .reach-home-benefits {
		grid-template-columns: 1fr !important;
	}

	body.home.reach-design-system .reach-home-page .reach-home-benefit,
	body.home.reach-design-system .reach-home-page .reach-home-benefit:nth-child(odd),
	body.home.reach-design-system .reach-home-page .reach-home-benefit:nth-child(-n + 2) {
		border-bottom: var(--rs-border-default) !important;
		border-right: 0 !important;
		min-height: 0 !important;
		padding: var(--rs-space-4) var(--rs-space-5) !important;
	}

	body.home.reach-design-system .reach-home-page .reach-home-benefit:last-child {
		border-bottom: 0 !important;
	}
}

@media (max-width: 420px) {
	body.home.reach-design-system .reach-home-page .reach-home-benefit {
		grid-template-columns: 2.5rem minmax(0, 1fr) !important;
		padding-inline: var(--rs-space-4) !important;
	}

	body.home.reach-design-system .reach-home-page .reach-home-benefit__icon {
		height: 2.5rem !important;
		width: 2.5rem !important;
	}
}