/*
 * Home page components.
 *
 * Kept in its own file because these are the only things on the site that exist
 * for one page. Everything the home page could borrow from the design system it
 * does borrow - hero, cards, checks, pills, statement, proofband, ovw - so what
 * is left here is the handful of shapes /home-2026-test uses and nothing else
 * does: the logo strip, the before/after pair, the metric cards and a few
 * centred variants of existing components.
 *
 * Loaded on every page, like the others; it is 2 KiB and splitting it per-page
 * would cost a request to save nothing.
 */

/* --- Centred variants ---------------------------------------------------- */
/*
 * The section heads on this page are centred, unlike the two-column `wg-sechead`
 * used across the industry and feature pages. Modifiers rather than new
 * components, so the type scale stays in one place.
 */
.wg-h2--centred,
.wg-lede--centred,
.wg-eyebrow--centred {
	text-align: center;
	margin-inline: auto;
}
.wg-h2--centred { max-width: 22ch; }
.wg-lede--centred { max-width: 62ch; }

.wg-checks--centred {
	width: fit-content;
	margin-inline: auto;
}

.wg-shot-centred figure { margin-inline: auto; }
.wg-shot-centred img {
	border-radius: 15px;
	box-shadow: 0 18px 50px rgba(9, 12, 76, .13);
}

.wg-fineprint {
	text-align: center;
	font-size: var(--wp--preset--font-size--x-small);
	opacity: .8;
	margin-block-start: var(--wp--preset--spacing--40);
}

/* --- Customer logo strip ------------------------------------------------- */
.wg-logos-label {
	text-align: center;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text);
	margin-block-end: var(--wp--preset--spacing--50);
}
.wg-logos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: clamp(1.5rem, 4vw, 3.5rem);
}
/*
 * Customer logos arrive at wildly different sizes and colours - the live page
 * mixes a 221x70 PNG with a 200x200 cut-out and a 297x61 WebP. Capping height
 * and desaturating is what makes them read as one row rather than a scrapbook.
 */
.wg-logos img {
	height: clamp(28px, 3.4vw, 40px);
	width: auto;
	max-width: 150px;
	object-fit: contain;
	filter: grayscale(1);
	opacity: .55;
	transition: filter .2s, opacity .2s;
}
.wg-logos img:hover { filter: none; opacity: 1; }

/* --- Before / with WorkGuru --------------------------------------------- */
.wg-compare .wg-eyebrow { margin-block-end: var(--wp--preset--spacing--30); }
.wg-compare img {
	border-radius: 10px;
	margin-block-start: var(--wp--preset--spacing--50);
}
/* The second card is the answer, so it carries the accent edge. */
.wg-cards > .wg-compare:last-child,
.wg-cards > li:last-child .wg-compare {
	border-color: var(--wp--preset--color--accent);
}

/* --- Bullet lists inside cards ------------------------------------------ */
/*
 * Not `.wg-checks`, which is a two-column grid of tick tiles for full-width
 * sections - inside a 28rem card it split five bullets into two cramped columns.
 */
.wg-bullets {
	list-style: none;
	margin: var(--wp--preset--spacing--50) 0 0;
	padding: 0;
	display: grid;
	gap: .45rem;
}
.wg-bullets li {
	position: relative;
	padding-left: 1.5rem;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.45;
}
.wg-bullets li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .48em;
	width: .5rem;
	height: .5rem;
	border-radius: 2px;
	background: var(--wp--preset--color--accent);
}
.wg-on-dark .wg-bullets li::before { background: var(--wp--preset--color--accent-bright); }

.wg-bullets--centred {
	width: fit-content;
	margin-inline: auto;
	text-align: left;
}

.wg-outcome .wg-bullets { margin-block-end: 0; }
.wg-on-dark .wg-outcome {
	background: rgba(255, 255, 255, .04);
	border-color: rgba(255, 255, 255, .16);
}
.wg-on-dark .wg-outcome h3 { color: var(--wp--preset--color--accent-bright); }

/* --- Metric + quote cards ----------------------------------------------- */
.wg-metric {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--heading-sm);
	line-height: 1.15;
	color: var(--wp--preset--color--contrast);
	margin-block-end: var(--wp--preset--spacing--40);
}
.wg-metric-cite,
.wg-quote-role {
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--text);
	margin-block-start: var(--wp--preset--spacing--40);
	margin-block-end: 0;
}
.wg-quote-name {
	font-weight: 700;
	color: var(--wp--preset--color--text-strong);
	margin-block-start: var(--wp--preset--spacing--50);
	margin-block-end: 0;
}
.wg-quote-role { margin-block-start: 0; }

/* --- Pull quote --------------------------------------------------------- */
.wg-statement-quote {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.25rem, 2.2vw, 1.75rem);
	line-height: 1.3;
	text-align: center;
	margin-inline: auto;
	max-width: 46ch;
}
.wg-statement-cite {
	text-align: center;
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: .04em;
	text-transform: uppercase;
	margin-block-start: var(--wp--preset--spacing--50);
}

/* --- Support trio ------------------------------------------------------- */
.wg-support .wp-block-buttons { margin-block-start: auto; }
.wg-support { display: flex; flex-direction: column; }

/* --- Small screens ------------------------------------------------------ */
@media (max-width: 767px) {
	.wg-h2--centred { max-width: none; }
	.wg-logos { gap: 1.5rem 2rem; }
	.wg-logos img { height: 26px; }
	.wg-metric { font-size: var(--wp--preset--font-size--medium); }
}