/*
	Mobile-first single column, then an explicit column count at the same
	48em breakpoint layout.css's .grid-2/.grid-3 use — but driven by how many
	benefits actually exist (2/3/4), not by container width the way
	.card-grid's auto-fit is. A dedicated class rather than reusing .grid-2/
	.grid-3 directly: those are two-column-content's and three-column-
	content's, and coupling Benefits' column count to their unrelated CSS
	would make a future change to either one silently affect the other.
*/
.benefits-grid {
	display: grid;
	gap: var(--space-6);
	grid-template-columns: 1fr;
}

@media (min-width: 48em) {
	.benefits-grid--2 {
		grid-template-columns: repeat(2, 1fr);
	}

	.benefits-grid--3 {
		grid-template-columns: repeat(3, 1fr);
	}

	.benefits-grid--4 {
		grid-template-columns: repeat(4, 1fr);
	}
}

.benefit {
	display: flex;
	flex-direction: column;
	/* One shared value covers both requested gaps (icon-to-header,
	   header-to-content) since they're adjacent pairs in the same column
	   flex — a per-pair override isn't needed. Also becomes the text-to-
	   button gap when a button is present, on top of the button's own
	   extra padding-block-start below. */
	gap: var(--space-5); /* 24px */
	padding: var(--space-5); /* 24px, uniform — was 24px block / 16px inline */
	border: 1px solid var(--dark-card-border-color);
	border-radius: var(--radius-lg);
	background: var(--dark-card-gradient);
	/* The gradient is dark regardless of which section background (Style
	   Guide bg-*) this block sits on, so text/icon colour is set explicitly
	   here — inherited by the header, body copy, and the star bullet below
	   — rather than left to the surrounding section's own light/dark text
	   pairing, which would otherwise put dark text on this dark card on any
	   light section. */
	color: var(--dark-card-fg);
}

/* Small fixed mark, not a cover image. A wrapping div, not a bare <img>,
   matching the Features block's own .feature__icon shape (a plain
   file-field upload, no focal point). align-self centers it within the
   column without affecting the sibling items below, which stay full-width
   by the container's own default align-items: stretch. */
.benefit__icon {
	align-self: center;

	& img {
		width: 3rem;
		height: 3.125rem; /* 50px */
		object-fit: contain;
	}
}

/* Centered, both as a block (align-self) and its own text (text-align) —
   heading-style-h3 (typography.css) supplies the font-family/size/weight/
   line-height, not this rule. */
.benefit__header {
	margin: 0;
	align-self: center;
	text-align: center;
}

/* .benefit's own flex `gap` (24px) already covers this pair like every other
   adjacent pair in the column — this adds the extra 8px on top, only when a
   header is immediately followed by text, to reach the requested 32px
   header-to-text gap specifically without changing the icon/button gaps
   that share the same flex `gap` value. */
.benefit__header + .benefit__text {
	margin-block-start: var(--space-2); /* 8px + the 24px gap = 32px */
}

/*
	Explicit, not inherited — layout.css's `.bg-default h1..h6 { color:
	var(--color-heading); }` rule targets the bare <h3> element directly, and
	an explicit rule on an element always beats an inherited value regardless
	of specificity. That rule only fires when this block sits on a Default
	background section, which is why the header silently reverted to
	--color-heading there while every other background worked fine. The
	compound selector here (.benefit .benefit__header, two classes) has
	higher specificity than `.bg-default h3` (one class + one element), so
	it wins in every case, not just by source-order luck.
*/
.benefit .benefit__header {
	color: var(--dark-card-fg);
}

/* Explicit, not just the browser default — the icon and header above are
   both centered, so this states outright that the body copy is not. */
.benefit__text {
	text-align: left;
}

/*
	Star bullet for any list an editor adds inside a benefit's body copy —
	overrides .prose's own generic 3px currentColor dot (typography.css)
	with the brand star mark, tinted to match the card's own text colour,
	for this block specifically. star.svg is a plain black-fill shape, not
	currentColor-friendly, so it's recoloured via mask-image instead of
	background-image: the image supplies only the star's silhouette as a
	mask, and background-color paints through it — the standard native way
	to tint a single-colour SVG to an arbitrary colour without a second,
	pre-tinted copy of the file.
*/
.benefit__text.prose ul {
	/* Removes .prose's own var(--space-5) padding-inline-start on the <ul>
	   itself — the <li>'s own padding-inline-start below is what makes room
	   for the star bullet, so this outer padding is redundant indent. */
	padding-inline-start: 0;
}

.benefit__text.prose ul li {
	/* Bumped from .prose's own var(--space-4) — a 16px icon filling that
	   exact space left no gap before the text. */
	padding-inline-start: var(--space-5); /* 24px */
	/* Overrides .prose's own var(--line-height-prose) for list items only —
	   paragraphs in this same field keep the normal prose line-height. */
	line-height: var(--line-height-tight);
}

.benefit__text.prose ul li + li {
	/* Overrides .prose's own var(--space-2) (8px) default gap between list
	   items. */
	margin-block-start: var(--space-5); /* 24px */
}

.benefit__text.prose ul li::before {
	/* Top-aligned with the first line of text, not vertically centered — li
	   has no padding-block of its own, so top: 0 would land the icon flush
	   with the top of the text's own line box. Nudged down var(--space-1)
	   (4px) from that flush position to sit better centred on the first
	   line specifically. */
	top: var(--space-1); /* 4px */
	width: var(--space-4); /* 16px */
	height: var(--space-4);
	border-radius: 0;
	background-color: var(--dark-card-fg);
	-webkit-mask-image: url("../../assets/images/star.svg");
	mask-image: url("../../assets/images/star.svg");
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

/* Optional per-card button — pushed to the bottom so buttons line up across
   a row of cards with different amounts of text above them. Only affects the
   text-to-button gap, not the header-to-text gap, so it doesn't reintroduce
   the "variable spacing under the heading" problem .card__text had. 32px
   gap above the button (was 8px), matching .resource-card__button. */
.benefit__button {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
	margin-block-start: auto;
	padding-block-start: var(--space-6);
}