/*
 * rooster/feature-card (now a variant of the library: BRIEF-2026-11-01-BLOCK-LIBRARY.md) (brief of 31 Oct 2026, package 1): the look of the theme's Card style (styles/block/card.json:
 * the page colour, a hairline border, the card radius, the small shadow, the spacing presets) on the block's own
 * classes, so the card costs six nodes and no nested groups. Compiled by build/blocks-css.mjs to style.css.
 */

@import "../../theme.css";

.rooster-feature-card {
	@apply relative grid gap-s3 p-s6 text-fg bg-bg rounded-card;
	border: 1px solid var(--wp--preset--color--line);
	box-shadow: var(--wp--custom--rooster--shadow--sm);
	align-content: start;
}

/* The row layout: the icon beside the body (the texts in their own column), the card as tall as its content. */
.rooster-feature-card--row {
	grid-template-columns: auto minmax(0, 1fr);
	column-gap: var(--wp--preset--spacing--4);
}

.rooster-feature-card__body {
	@apply grid gap-s3;
	align-content: start;
}

/* The icon in its ring: the trust tile's look (the accent's text shade on the border colour; package G: never the raw
   accent, which a family such as Zero's orange draws at 4.12:1 on a subtle band). */
.rooster-feature-card__icon {
	@apply inline-flex items-center justify-center text-accent-text rounded-chip;
	border: 1px solid var(--wp--preset--color--line);
	width: 3rem;
	height: 3rem;
}

/* rooster_icon() sizes its mask with its size class; the ring draws the icon at 1.5 rem inside. */
.rooster-feature-card__icon.rooster-icon--mask {
	--rooster-icon-line: var(--rooster-icon-15);
	background-size: 1.5rem;
	background-position: center;
}

.rooster-feature-card__title {
	@apply m-0 text-lg;
	line-height: var(--wp--custom--rooster--leading--heading);
	font-weight: 600;
}

.rooster-feature-card__title a {
	color: inherit;
	text-decoration: none;
}

/* The heading's link covers the card (a stretched link: no extra node, the whole card is the target). */
.rooster-feature-card.has-link .rooster-feature-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.rooster-feature-card.has-link:hover {
	border-color: var(--wp--preset--color--accent);
}

.rooster-feature-card__title a:focus-visible::after {
	box-shadow: var(--wp--custom--rooster--focus-ring);
}

.rooster-feature-card__title a:focus-visible {
	outline: none;
}

.rooster-feature-card.is-highlighted {
	border-color: var(--wp--preset--color--accent);
}

/* `rule: side`: a 4 px stripe at the card's start in the accent (the legacy LMS landing's feature cards). */
.rooster-feature-card.has-rule-side {
	border-inline-start: 4px solid var(--wp--preset--color--accent);
}

/* `border`: the Pro cards' grey (the legacy's slate-400; the line on a dark page), or the accent, lighter. */
.rooster-feature-card.has-border-strong {
	border-color: light-dark(#94a3b8, var(--wp--preset--color--line));
}

.rooster-feature-card.has-border-accent {
	border-color: light-dark(color-mix(in srgb, var(--wp--preset--color--accent) 45%, #ffffff), color-mix(in srgb, var(--wp--preset--color--accent) 45%, transparent));
}

.rooster-feature-card.has-rule-side:is(.has-border-strong, .has-border-accent) {
	border-inline-start-color: var(--wp--preset--color--accent);
}

.rooster-feature-card__badge {
	@apply self-start text-xs px-s3 py-s1 rounded-chip bg-accent text-on-accent;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-weight: 600;
}

.rooster-feature-card__kicker {
	@apply m-0 text-sm text-accent-text;
	font-weight: 600;
}

.rooster-feature-card__price {
	@apply m-0 text-xl;
	font-weight: 700;
	line-height: 1;
}

.rooster-feature-card__list {
	@apply m-0 text-sm text-muted;
	padding-inline-start: 1.25rem;
	line-height: var(--wp--custom--rooster--leading--body);
}

.rooster-feature-card__text {
	@apply m-0 text-sm text-muted;
	line-height: var(--wp--custom--rooster--leading--body);
}

/* A sub-heading of the card's text (`## Heading`, one level under the card's own): the title's ink and weight, the text's size, a step more above it than the gap. */
.rooster-feature-card__subtitle {
	@apply m-0 text-md text-fg;
	line-height: var(--wp--custom--rooster--leading--heading);
	font-weight: 600;
}

.rooster-feature-card__subtitle:not(:first-child) {
	margin-top: var(--wp--preset--spacing--2);
}

.rooster-feature-card__link {
	@apply text-sm text-accent-text;
	font-weight: 600;
	justify-self: start;
	align-self: end;
}

/* ---------- the row layout with a sub-list: the compiler's stand-in (a group of core blocks on these classes) ---------- */

.rooster-feature-card.has-list {
	display: grid;
	grid-template-columns: 1fr;
	row-gap: var(--wp--preset--spacing--3);
}

.rooster-feature-card__head {
	@apply flex items-center gap-s3;
}

.rooster-feature-card__head .rooster-feature-card__icon {
	flex: 0 0 auto;
}

.rooster-feature-card__head .wp-block-heading {
	@apply m-0 text-lg;
	line-height: var(--wp--custom--rooster--leading--heading);
	font-weight: 600;
	flex: 1 1 auto;
}

.rooster-feature-card__badge.rooster-badge {
	@apply text-xs px-s3 py-s1 rounded-chip bg-subtle text-muted;
	margin: 0;
	margin-inline-start: auto;
	font-weight: 600;
	letter-spacing: 0.04em;
	white-space: nowrap;
}

.rooster-feature-card.has-list .wp-block-list {
	@apply m-0 text-sm;
	line-height: var(--wp--custom--rooster--leading--body);
}

.rooster-feature-card.has-list .wp-block-list li + li {
	margin-top: var(--wp--preset--spacing--1);
}

.rooster-feature-card.has-list .wp-block-list strong {
	font-weight: 600;
}

.rooster-feature-card.has-list .wp-block-list li {
	color: var(--wp--preset--color--muted);
}

.rooster-feature-card.has-list .wp-block-list li strong {
	color: var(--wp--preset--color--fg);
}