/**
 * Home page styles.
 *
 * Loaded only on pages using the "Home Page" block template (see functions.php).
 * Every colour, radius, shadow and duration comes from the tokens in style.css;
 * nothing is hardcoded here.
 *
 * Sections, in page order, each from a pattern in patterns/:
 *   .home-hero      home-hero.php      message card + fact sheet
 *   .home-services  home-services.php  bento grid of service cards (styled in style.css)
 *   .home-process   home-process.php   step cards on a full-width band
 *   .home-recipes   (page content)     the [crg_recipes] grid, restyled
 *   .service-cta    service-cta.php    the accent band, styled in style.css
 *   .home-start     home-start.php     intro beside the enquiry form
 *
 * The groups use the default (flow) layout, because core prints
 * "body .is-layout-flex { display: flex }", which would beat the grids below;
 * each container therefore resets its children's flow margins itself.
 */

/* -----------------------------------------------------------------------------
 * Section rhythm
 *
 * Sections pad themselves, so the content's block gap is not used between them.
 * -------------------------------------------------------------------------- */

.home-main .wp-block-post-content > * {
	margin-block: 0;
}

/*
 * Flow and constrained layouts give every block after the first a top margin.
 * Grid items and section children space themselves, so drop it.
 */
.home-process > *,
.home-process__steps > * {
	margin-block-start: 0;
}

.home-services,
.home-process,
.home-recipes,
.home-start {
	padding-block: var( --wp--preset--spacing--70 );
}

/* The call to action sits between two sections that already pad themselves. */
.home-main .service-cta {
	padding-block: var( --wp--preset--spacing--40 );
}

@media ( max-width: 600px ) {
	.home-services,
	.home-process,
	.home-recipes,
	.home-start {
		padding-block: var( --wp--preset--spacing--60 );
	}
}

/* -----------------------------------------------------------------------------
 * Hero
 *
 * Two cards side by side, stretched to the same height: the message over 7 of
 * 12 columns and the fact sheet over 5. They stack below 1100px, where the
 * message column gets too narrow for its trust points.
 * -------------------------------------------------------------------------- */

.home-hero {
	padding-block: var( --wp--preset--spacing--60 ) var( --wp--preset--spacing--70 );
}

.home-hero__grid {
	display: grid;
	grid-template-columns: minmax( 0, 7fr ) minmax( 0, 5fr );
	align-items: stretch;
	gap: var( --wp--preset--spacing--40 );
}

.home-hero__grid > *,
.home-hero__card > *,
.home-hero__copy > *,
.home-hero__foot > *,
.home-facts > *,
.home-facts__body > *,
.home-facts__bar > *,
.home-facts__list > *,
.home-facts__item > *,
.home-facts__foot > * {
	margin-block: 0;
}

.home-hero__card {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: var( --wp--preset--spacing--50 );
	padding: 2.5rem;
	background-color: var( --crg-color-surface );
	border: 1px solid var( --crg-color-border );
	border-radius: var( --crg-radius-2xl );
	box-shadow: var( --crg-shadow-card );
}

.home-hero__copy {
	display: grid;
	justify-items: start;
	gap: var( --wp--preset--spacing--40 );
}

.home-hero__title {
	font-size: clamp( 2.125rem, 1.4rem + 2.6vw, 3rem );
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.15;
	text-wrap: balance;
}

.home-hero__lead {
	color: var( --crg-color-text-muted );
	font-size: var( --wp--preset--font-size--large );
	line-height: 1.65;
	text-wrap: pretty;
}

.home-hero__lead strong {
	color: var( --crg-color-text );
	font-weight: 600;
}

.home-hero__foot {
	display: grid;
	gap: var( --wp--preset--spacing--40 );
}

.home-hero__actions {
	gap: var( --wp--preset--spacing--30 );
}

/* Short trust points on a rule, spread out while they fit on one line. */
.home-hero__trust {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var( --wp--preset--spacing--30 );
	padding: var( --wp--preset--spacing--40 ) 0 0;
	border-top: 1px solid var( --crg-color-surface-alt );
	color: var( --crg-color-text-dim );
	font-size: 0.75rem;
	font-weight: 600;
	list-style: none;
}

.home-hero__trust li {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.home-hero__trust li::before {
	content: "";
	flex: none;
	width: 16px;
	height: 16px;
	background-color: var( --crg-color-success );
	-webkit-mask: url( ../icons/check_circle.svg ) center / contain no-repeat;
	mask: url( ../icons/check_circle.svg ) center / contain no-repeat;
}

/* -- Fact sheet ---------------------------------------------------------------- */

.home-facts {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: var( --wp--preset--spacing--50 );
	background-color: var( --wp--custom--color--fact-sheet );
	border: 1px solid var( --crg-color-border );
	border-radius: var( --crg-radius-2xl );
	box-shadow: var( --crg-shadow-card );
}

/* A window bar: three dots, then the label. */
.home-facts__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var( --wp--preset--spacing--30 );
	margin-bottom: var( --wp--preset--spacing--40 );
	padding-bottom: var( --wp--preset--spacing--30 );
	border-bottom: 1px solid var( --crg-color-border );
}

.home-facts__bar::before {
	content: "";
	flex: none;
	width: 52px;
	height: 12px;
	background:
		radial-gradient( circle at 6px 6px, var( --wp--custom--color--dot-red ) 5.5px, transparent 6px ),
		radial-gradient( circle at 26px 6px, var( --wp--custom--color--dot-amber ) 5.5px, transparent 6px ),
		radial-gradient( circle at 46px 6px, var( --wp--custom--color--dot-green ) 5.5px, transparent 6px );
}

.home-facts__label {
	padding: 0.25rem 0.75rem;
	background-color: var( --crg-color-surface );
	border: 1px solid var( --crg-color-border );
	border-radius: var( --crg-radius-sm );
	color: var( --crg-color-text-dim );
	font-family: var( --crg-font-mono );
	font-size: 0.75rem;
	font-weight: 500;
}

.home-facts__label code {
	padding: 0;
	background: none;
	color: inherit;
	font: inherit;
}

.home-facts__list {
	display: grid;
	gap: var( --wp--preset--spacing--30 );
}

.home-facts__item {
	display: grid;
	gap: 0.25rem;
	padding: 0.875rem;
	background-color: var( --crg-color-surface );
	border: 1px solid var( --crg-color-surface-alt );
	border-radius: var( --crg-radius-md );
}

.home-facts__key {
	color: var( --tint-fg, var( --crg-color-text-dim ) );
	font-family: var( --crg-font-mono );
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.home-facts__value {
	color: var( --crg-color-text );
	font-size: var( --wp--preset--font-size--small );
	font-weight: 700;
}

.home-facts__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var( --wp--preset--spacing--30 );
	margin-top: var( --wp--preset--spacing--40 );
	padding-top: var( --wp--preset--spacing--30 );
	border-top: 1px solid var( --crg-color-border );
	color: var( --crg-color-text-dim );
	font-family: var( --crg-font-mono );
	font-size: 0.75rem;
}

.home-facts__status {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}

.home-facts__status::before {
	content: "";
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background-color: var( --crg-color-success );
}

.home-facts__note {
	color: var( --crg-color-text-muted );
	font-weight: 600;
}

@media ( max-width: 1099px ) {
	.home-hero__grid {
		grid-template-columns: minmax( 0, 1fr );
	}
}

/* Where the trust points wrap, a left-aligned row reads better than a spread one. */
@media ( max-width: 1279px ) and ( min-width: 1100px ), ( max-width: 767px ) {
	.home-hero__trust {
		justify-content: flex-start;
		column-gap: var( --wp--preset--spacing--40 );
		row-gap: var( --wp--preset--spacing--20 );
	}
}

@media ( max-width: 640px ) {
	.home-hero {
		padding-block: var( --wp--preset--spacing--40 ) var( --wp--preset--spacing--60 );
	}

	.home-hero__card {
		padding: 1.75rem;
	}

	.home-facts {
		padding: var( --wp--preset--spacing--40 );
	}
}

/* -----------------------------------------------------------------------------
 * Process: step cards on a full-width band
 *
 * Each card: a tinted label numbered by a counter ("01 / Discovery"), the
 * step, what happens, and the outcome pinned to the bottom so the rules line
 * up across a row. Four, two or one per row -- never three and an orphan.
 * -------------------------------------------------------------------------- */

.home-process {
	background-color: var( --crg-color-surface-alt );
}

.home-process__steps {
	display: grid;
	grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
	gap: var( --wp--preset--spacing--40 );
	counter-reset: step;
}

.home-step {
	counter-increment: step;
	display: flex;
	flex-direction: column;
	padding: var( --wp--preset--spacing--40 );
	background-color: var( --crg-color-surface );
	border: 1px solid var( --crg-color-border );
	border-radius: var( --crg-radius-2xl );
	box-shadow: var( --crg-shadow-card );
}

.home-step > * {
	margin-block: 0;
}

.home-step__label {
	align-self: flex-start;
	margin-bottom: var( --wp--preset--spacing--30 );
	padding: 0.25rem 0.625rem;
	background-color: var( --tint-bg, var( --crg-color-accent-soft ) );
	border-radius: var( --crg-radius-sm );
	color: var( --tint-fg, var( --crg-color-accent ) );
	font-family: var( --crg-font-mono );
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	line-height: 1.5;
	text-transform: uppercase;
}

.home-step__label::before {
	content: counter( step, decimal-leading-zero ) " / ";
}

.home-step__title {
	margin-bottom: 0.5rem;
	font-size: 1.1875rem;
	font-weight: 700;
	line-height: 1.3;
}

.home-step__text {
	margin-bottom: var( --wp--preset--spacing--40 );
	color: var( --crg-color-text-muted );
	font-size: 0.9375rem;
	line-height: 1.6;
}

.home-step__outcome {
	margin-top: auto;
	padding-top: var( --wp--preset--spacing--30 );
	border-top: 1px solid var( --crg-color-border );
	color: var( --crg-color-text-muted );
	font-size: var( --wp--preset--font-size--x-small );
	font-weight: 600;
	line-height: 1.5;
}

@media ( max-width: 1023px ) {
	.home-process__steps {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}

@media ( max-width: 559px ) {
	.home-process__steps {
		grid-template-columns: minmax( 0, 1fr );
	}
}

/* -----------------------------------------------------------------------------
 * Recipes
 *
 * The plugin's own grid, given a centred section head. Its cards take the
 * card tokens from crg-recipes/assets/css/recipes.css.
 * -------------------------------------------------------------------------- */

.home-recipes .crg-recipes__header {
	max-width: 42rem;
	margin: 0 auto var( --wp--preset--spacing--50 );
	text-align: center;
}

.home-recipes .crg-recipes__title-main {
	font-size: clamp( 1.875rem, 1.55rem + 1.1vw, 2.25rem );
	font-weight: 800;
	letter-spacing: -0.025em;
}

.home-recipes .crg-recipes__description {
	margin-inline: auto;
}

.home-recipes .crg-recipes__search-form {
	margin-inline: auto;
}

/* -----------------------------------------------------------------------------
 * Start a project: intro beside the enquiry form
 * -------------------------------------------------------------------------- */

.home-start__grid {
	display: grid;
	grid-template-columns: minmax( 0, 0.85fr ) minmax( 0, 1.15fr );
	align-items: start;
	gap: var( --wp--preset--spacing--70 );
}

.home-start__grid > *,
.home-start__intro > *,
.home-start__helps > *,
.home-start__form > * {
	margin-block: 0;
}

.home-start__intro {
	position: sticky;
	top: calc( var( --wp-admin--admin-bar--height, 0px ) + var( --crg-header-height ) + var( --wp--preset--spacing--40 ) );
	display: grid;
	justify-items: start;
	gap: var( --wp--preset--spacing--40 );
}

.home-start__title {
	font-size: clamp( 2rem, 1.75rem + 1.1vw, 2.5rem );
	font-weight: 800;
	letter-spacing: -0.025em;
	text-wrap: balance;
}

.home-start__lead {
	color: var( --crg-color-text-muted );
	font-size: var( --wp--preset--font-size--large );
}

.home-start__helps {
	display: grid;
	gap: var( --wp--preset--spacing--30 );
	width: 100%;
	padding-top: var( --wp--preset--spacing--30 );
	border-top: 1px solid var( --crg-color-border );
}

.home-start__subtitle {
	font-size: var( --wp--preset--font-size--medium );
	font-weight: 700;
}

.home-start__list {
	display: grid;
	gap: var( --wp--preset--spacing--20 );
	padding: 0;
	list-style: none;
}

.home-start__list li {
	position: relative;
	padding-inline-start: 1.75rem;
	color: var( --crg-color-text-muted );
}

/* A tick drawn from two borders, so it sits on the first line whatever the font. */
.home-start__list li::before {
	content: "";
	position: absolute;
	top: 0.5em;
	left: 0.15rem;
	width: 0.85em;
	height: 0.45em;
	border-left: 2px solid var( --crg-color-accent );
	border-bottom: 2px solid var( --crg-color-accent );
	transform: rotate( -45deg );
}

.home-start__privacy {
	color: var( --crg-color-text-dim );
	font-size: var( --wp--preset--font-size--small );
}

@media ( max-width: 960px ) {
	.home-start__grid {
		grid-template-columns: minmax( 0, 1fr );
		gap: var( --wp--preset--spacing--50 );
	}

	.home-start__intro {
		position: static;
	}
}