/**
 * Vividly in Love: homepage.
 *
 * Same rules as devotion.css. Every colour is a Kadence palette variable, never
 * a hex value, so the Customizer stays the single source of truth for the brand.
 * Air Blue is 3.01:1 on white and never carries small text.
 *
 * Loaded on the front page only.
 */

.vil-home {
	--vil-serif: Georgia, "Times New Roman", serif;
}

.vil-home .vil-band {
	padding-block: 3rem;
	padding-inline: 1.25rem;
}
/* ONE container width per section.
 *
 * Previously the intro text sat in a 36rem centred column while the card grids
 * used a 52rem centred grid. Both were centred, but they did not share an edge:
 * measured at 1280, text began at x=352 and every card row at x=224, so each
 * row of cards jutted 128px further out on both sides than the words above it.
 * Individually centred, collectively misaligned.
 *
 * Now every section shares a 52rem container, and reading width is controlled
 * on the paragraphs instead, so text and cards start on the same line. */
.vil-home .vil-inner {
	max-width: 52rem;
	margin-inline: auto;
}
.vil-home .vil-wide {
	max-width: 52rem;
	margin-inline: auto;
}

/* Cap the line length, and CENTRE the text column in the band.
 *
 * This reverses the left-edge decision recorded in the container comment
 * above, deliberately. Measured at 1920: the container ran 537..1369 while
 * the text ran 537..1113, leaving 256px of dead space on the right, roughly
 * a third of the box. Against the centred hero directly above it that read
 * as broken rather than as a choice.
 *
 * The trade-off is real and cannot be avoided: two centred boxes of
 * different widths cannot share an edge, so the intro text no longer starts
 * on the same line as the card grids beneath it. A narrower centred intro
 * above a wider card row is a recognised editorial shape. A third of the
 * column standing empty on one side is not.
 *
 * The headings are capped to the same measure, otherwise a full-width
 * heading would start to the LEFT of the paragraphs it introduces, which
 * is a worse misalignment than the one being fixed. */
.vil-home .vil-stakes .vil-inner p,
.vil-home .vil-guide .vil-inner p,
.vil-home .vil-plan .vil-inner p,
.vil-home .vil-series .vil-inner p,
.vil-home .vil-guide .vil-pull,
.vil-home .vil-plan .vil-inner h2,
.vil-home .vil-series .vil-inner h2 {
	max-width: 36rem;
	margin-inline: auto;
}

/* Centred sections stay centred. */
.vil-home .vil-hero .vil-inner p,
.vil-home .vil-close .vil-inner p {
	margin-inline: auto;
}
.vil-home .vil-eyebrow {
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--global-palette1);
	margin: 0 0 0.6rem;
}

/* ---- THE GRID FIX, read this before changing any grid below --------------
 *
 * WordPress wraps a group block's children in .wp-block-group__inner-container.
 * A grid declared on the group itself therefore has exactly ONE child, so every
 * card stacked inside a single narrow column while the computed style still
 * reported three columns. Checking grid-template-columns looked fine and was
 * meaningless; the giveaway was that all nine cards had different top offsets.
 *
 * display:contents removes the wrapper from the layout tree so the cards become
 * real grid items. Every grid rule below then works as written.
 * ------------------------------------------------------------------------- */
.vil-home .vil-proof > .wp-block-group__inner-container,
.vil-home .vil-steps > .wp-block-group__inner-container,
.vil-home .vil-grid > .wp-block-group__inner-container {
	display: contents;
}

/* Each series card is wrapped in a paragraph, and WordPress gives paragraphs a
   32px bottom margin. Stacked on top of the 16px grid gap that produced 48px
   of dead space under every row. */
.vil-home .vil-grid p {
	margin: 0;
	height: 100%;
}

/* Equal height across a row, so a two-line series name does not leave its
   neighbours short. Grid stretch alone did not reach the card, because the
   card sits one level inside the grid item. */
.vil-home .vil-proof,
.vil-home .vil-steps,
.vil-home .vil-grid {
	align-items: stretch;
}
.vil-home .vil-proof-item,
.vil-home .vil-step,
.vil-home .vil-grid .vil-card {
	height: 100%;
}

/* ---- hero -------------------------------------------------------------- */
.vil-home .vil-hero {
	background: var(--global-palette7);
	padding-block: 3.5rem 3rem;
	text-align: center;
	border-bottom: 1px solid rgba(0, 48, 73, 0.10);
}
.vil-home .vil-hero h1 {
	font-size: clamp(1.85rem, 6vw, 2.75rem);
	line-height: 1.15;
	color: var(--global-palette3);
	margin: 0 0 1rem;
	max-width: 18ch;
	margin-inline: auto;
}
.vil-home .vil-hero .vil-sub {
	font-size: 1.075rem;
	line-height: 1.65;
	color: var(--global-palette5);
	max-width: 34rem;
	margin: 0 auto 1.9rem;
}
.vil-home .vil-cta {
	display: inline-block;
	background: var(--global-palette1);
	color: var(--global-palette9);
	text-decoration: none;
	font-weight: 700;
	padding: 0.85rem 1.7rem;
	border-radius: 4px;
	font-size: 1.02rem;
}
.vil-home .vil-cta:hover,
.vil-home .vil-cta:focus {
	background: var(--global-palette2);
	color: var(--global-palette9);
}
.vil-home .vil-cta-soft {
	display: inline-block;
	margin-top: 1rem;
	font-size: 0.95rem;
	color: var(--global-palette3);
	text-decoration: underline;
}

/* ---- stakes ------------------------------------------------------------ */
.vil-home .vil-stakes {
	background: var(--global-palette9);
}
.vil-home .vil-stakes p {
	font-size: 1.1rem;
	line-height: 1.75;
	color: var(--global-palette3);
	margin: 0 0 1.1rem;
}
.vil-home .vil-stakes p:last-child {
	margin-bottom: 0;
}

/* ---- guide ------------------------------------------------------------- */
.vil-home .vil-guide {
	background: var(--global-palette8);
	border-block: 1px solid rgba(0, 48, 73, 0.10);
}
.vil-home .vil-guide p {
	line-height: 1.7;
	margin: 0 0 1.1rem;
}
.vil-home .vil-pull {
	font-family: var(--vil-serif);
	font-style: italic;
	font-size: 1.2rem;
	line-height: 1.6;
	color: var(--global-palette3);
	border-left: 3px solid var(--global-palette10);
	padding: 0.2rem 0 0.2rem 1.15rem;
	margin: 1.75rem 0;
}

/* Evidence, not adjectives. Numbers the brand has actually earned. */
.vil-home .vil-proof {
	display: grid;
	gap: 1rem;
	max-width: 52rem;
	margin: 2rem auto 0;
}
@media (min-width: 40rem) {
	.vil-home .vil-proof {
		grid-template-columns: repeat(3, 1fr);
	}
}
.vil-home .vil-proof-item {
	background: var(--global-palette9);
	border: 1px solid rgba(0, 48, 73, 0.14);
	border-radius: 6px;
	padding: 1.2rem 1.1rem;
	text-align: center;
}
.vil-home .vil-proof-item strong {
	display: block;
	font-size: 1.5rem;
	color: var(--global-palette1);
	line-height: 1.2;
	margin-bottom: 0.3rem;
}
.vil-home .vil-proof-item span {
	font-size: 0.9rem;
	color: var(--global-palette5);
	line-height: 1.5;
	display: block;
}

/* ---- the plan ---------------------------------------------------------- */
.vil-home .vil-plan {
	background: var(--global-palette9);
}
.vil-home .vil-steps {
	display: grid;
	gap: 1.1rem;
	max-width: 52rem;
	margin: 1.75rem auto 0;
	counter-reset: vilstep;
}
@media (min-width: 44rem) {
	.vil-home .vil-steps {
		grid-template-columns: repeat(3, 1fr);
	}
}
.vil-home .vil-step {
	border-top: 3px solid var(--global-palette1);
	padding-top: 1rem;
}
/* Numbered because the content genuinely is sequential. */
.vil-home .vil-step h3 {
	font-size: 1.02rem;
	margin: 0 0 0.5rem;
	color: var(--global-palette3);
}
.vil-home .vil-step h3::before {
	counter-increment: vilstep;
	content: counter(vilstep) ". ";
	color: var(--global-palette1);
}
.vil-home .vil-step p {
	margin: 0;
	font-size: 0.98rem;
	line-height: 1.65;
	color: var(--global-palette5);
}

/* ---- series ------------------------------------------------------------ */
.vil-home .vil-series {
	background: var(--global-palette7);
	border-block: 1px solid rgba(0, 48, 73, 0.10);
}
.vil-home .vil-grid {
	display: grid;
	gap: 1rem;
	max-width: 52rem;
	margin: 1.75rem auto 0;
}
/* Equal-height cards, so a two-line series name does not leave its neighbours
   floating with a ragged bottom edge.
 *
 * The grid item is the paragraph WordPress wraps each link in, not the link
 * itself, so stretching the grid alone did nothing: the paragraph stretched
 * and the card inside it kept its natural height. The card has to be told to
 * fill its wrapper. */
.vil-home .vil-grid > p {
	margin: 0;
}
.vil-home .vil-grid .vil-card {
	height: 100%;
}
@media (min-width: 34rem) {
	.vil-home .vil-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (min-width: 52rem) {
	.vil-home .vil-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}
.vil-home .vil-card {
	display: block;
	background: var(--global-palette9);
	border: 1px solid rgba(0, 48, 73, 0.14);
	border-radius: 6px;
	padding: 1.15rem 1.1rem;
	text-decoration: none;
}
.vil-home .vil-card:hover,
.vil-home .vil-card:focus {
	border-color: var(--global-palette1);
}
.vil-home .vil-card strong {
	display: block;
	color: var(--global-palette3);
	font-size: 1.02rem;
	line-height: 1.35;
	margin-bottom: 0.35rem;
}
.vil-home .vil-card span {
	display: block;
	font-size: 0.85rem;
	color: var(--global-palette6);
}

/* ---- closing ----------------------------------------------------------- */
.vil-home .vil-close {
	background: var(--global-palette3);
	text-align: center;
}
.vil-home .vil-close h2 {
	color: var(--global-palette9);
	font-size: clamp(1.35rem, 4.5vw, 1.75rem);
	margin: 0 0 0.9rem;
	line-height: 1.25;
}
.vil-home .vil-close p {
	color: var(--global-palette7);
	line-height: 1.7;
	margin: 0 auto 1.6rem;
	max-width: 34rem;
}
.vil-home .vil-close .vil-cta-soft {
	color: var(--global-palette7);
}

/* ---- boundary and safety ----------------------------------------------- */
.vil-home .vil-note {
	background: var(--global-palette9);
	border-top: 1px solid rgba(0, 48, 73, 0.12);
	padding-block: 1.75rem 3rem;
	/* Without this the notice text sat flat against both screen edges. */
	padding-inline: 1.25rem;
}
.vil-home .vil-note p {
	font-size: 0.875rem;
	line-height: 1.65;
	color: var(--global-palette6);
	/* Was 52rem, which produced a 115 character line on a tablet. Small text
	   needs a shorter measure than body copy, not a longer one. */
	max-width: 34rem;
	margin: 0 auto 0.7rem;
}
.vil-home .vil-note p:last-child {
	margin-bottom: 0;
}

/* The homepage hides its own title, so the header only needs a gutter. */
.vil-home .entry-header {
	padding-inline: 1.25rem;
}
.vil-home .vil-note strong {
	color: var(--global-palette3);
}
.vil-home .vil-note a {
	color: var(--global-palette3);
}

/* ---- header dropdown --------------------------------------------------- */
/* The navigation sits at the right edge of the header, so a dropdown anchored
   to its parent's left edge runs off the screen. Measured at a 1280 viewport:
   the submenu ended at 1328px against a 1265px page, cutting 63px off every
   series name. Anchoring it right keeps it on screen at any header width. */
.vil-home .main-navigation ul.sub-menu {
	left: auto;
	right: 0;
}

a:focus-visible {
	outline: 3px solid var(--global-palette1);
	outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
	.vil-home * {
		animation: none !important;
		transition: none !important;
	}
}