/*
 * Feature grids, figures, eyebrows and leads: the parts that introduce a section.
 *
 * Loaded from functions.php, after the styles core prints inline. That order
 * matters: our selectors and core's layout selectors have the same specificity,
 * so the later one wins, and every grid on the site depends on ours winning.
 */

/* ---------------------------------------------------------------- features */

.ghizo-features {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	margin-top: var(--wp--preset--spacing--40);
}

.ghizo-feature {
	background: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 14px;
	padding: var(--wp--preset--spacing--30);
	transition: border-color var(--ghizo-fast) var(--ghizo-ease),
		box-shadow var(--ghizo-slow) var(--ghizo-ease);
}

.ghizo-feature:hover {
	border-color: var(--wp--preset--color--blue-soft);
	box-shadow: var(--wp--preset--shadow--card);
}

/* The icon in a tinted square, which is what stops four cards reading as four
   paragraphs with a decoration on top. */
.ghizo-feature__icon {
	align-items: center;
	background: var(--wp--preset--color--wash);
	border-radius: 10px;
	color: var(--wp--preset--color--navy-deep);
	display: inline-flex;
	height: 2.5rem;
	justify-content: center;
	width: 2.5rem;
}

.ghizo-feature__title {
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.3;
	margin: var(--wp--preset--spacing--20) 0 0;
}

.ghizo-feature__text {
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
	margin: 0.6rem 0 0;
}

.has-wash-background-color .ghizo-feature {
	background: var(--wp--preset--color--paper);
}

.has-wash-background-color .ghizo-feature__icon {
	background: var(--wp--preset--color--wash);
}

/* ------------------------------------------------------------- feature lists */

/*
 * The zero margin was written for the plan card, where the card sets the space
 * above the list. In page flow the same zero welded the list to the heading or
 * the sentence introducing it, so it keeps a top margin of its own and the card
 * still overrides it.
 */
.ghizo-ticks {
	list-style: none;
	margin: var(--wp--preset--spacing--20) 0 0;
	padding: 0;
	display: grid;
	gap: var(--wp--preset--spacing--10);
}

.ghizo-ticks li {
	position: relative;
	padding-left: 1.65rem;
	color: var(--wp--preset--color--ink-muted);
}

.ghizo-ticks li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 0.9rem;
	height: 0.5rem;
	border-left: 2px solid var(--wp--preset--color--blue);
	border-bottom: 2px solid var(--wp--preset--color--blue);
	transform: rotate(-45deg);
}

.ghizo-ticks strong {
	color: var(--wp--preset--color--ink);
	font-weight: 600;
}

/* The same list on navy. */
.has-navy-background-color .ghizo-ticks li,
.has-navy-field-gradient-background .ghizo-ticks li {
	color: var(--wp--preset--color--on-navy);
}

.has-navy-background-color .ghizo-ticks strong,
.has-navy-field-gradient-background .ghizo-ticks strong {
	color: var(--wp--preset--color--paper);
}

.has-navy-background-color .ghizo-ticks li::before,
.has-navy-field-gradient-background .ghizo-ticks li::before {
	border-color: var(--wp--preset--color--blue-soft);
}

/* ------------------------------------------------------------------- stats */

.ghizo-stats {
	border-top: 1px solid var(--wp--preset--color--line);
	display: grid;
	gap: var(--wp--preset--spacing--40);
	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
	padding-top: var(--wp--preset--spacing--40);
}

.ghizo-stat__figure {
	color: var(--wp--preset--color--navy-deep);
	display: block;
	/* Tabular figures so a column of numbers lines up. */
	font-feature-settings: 'tnum';
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 650;
	letter-spacing: -0.02em;
	line-height: 1;
}

.ghizo-stat__label {
	color: var(--wp--preset--color--ink-muted);
	display: block;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.45;
	margin-top: 0.5rem;
	max-width: 22ch;
}

.has-navy-background-color .ghizo-stats,
.has-navy-field-gradient-background .ghizo-stats {
	border-top-color: rgb(147 197 253 / 22%);
}

.has-navy-background-color .ghizo-stat__figure,
.has-navy-field-gradient-background .ghizo-stat__figure {
	color: var(--wp--preset--color--paper);
}

.has-navy-background-color .ghizo-stat__label,
.has-navy-field-gradient-background .ghizo-stat__label {
	color: var(--wp--preset--color--on-navy);
}

/* --------------------------------------------------------------- eyebrow text */

/*
 * The small tracked line above a heading. Its own class because it is a role
 * rather than a size: it always reads as a label, whatever the heading below it
 * is doing.
 */
.ghizo-eyebrow {
	display: block;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 500;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--wp--preset--color--navy-deep);
	margin-bottom: var(--wp--preset--spacing--10);
}

.has-navy-background-color .ghizo-eyebrow,
.has-navy-field-gradient-background .ghizo-eyebrow {
	color: var(--wp--preset--color--blue-soft);
}

/* ------------------------------------------------------------------- leads */

.ghizo-lead {
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.6;
	margin-top: var(--wp--preset--spacing--20);
}

.has-navy-background-color .ghizo-lead,
.has-navy-field-gradient-background .ghizo-lead {
	color: var(--wp--preset--color--on-navy);
}