/*
 * rooster/price-card (now a variant of the library: BRIEF-2026-11-01-BLOCK-LIBRARY.md) (brief of 31 Oct 2026, package 1): the price-cards pattern's look (a bordered card on the page
 * colour; the highlighted plan on the contrast colour with its button inverted) on the block's own classes, the
 * feature marks an icon plus hidden words, and the enterprise row. Compiled by build/blocks-css.mjs to style.css.
 */

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

.rooster-price-card {
	@apply relative flex flex-col gap-s4 p-s6 text-fg bg-bg rounded-card;
	border: 1px solid var(--wp--preset--color--line);
	box-shadow: var(--wp--custom--rooster--shadow--sm);
}

.rooster-price-card.is-highlighted {
	@apply bg-contrast text-bg;
	border-color: var(--wp--preset--color--contrast);
}

.rooster-price-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;
}

/* The card's own class twice: a section style's heading colour (`:root :where(.is-style-section-… h3)`) never wins. */
.rooster-price-card .rooster-price-card__name {
	@apply m-0 text-lg;
	line-height: var(--wp--custom--rooster--leading--heading);
	font-weight: 600;
	/* The card's own ink: the theme's heading colour is the contrast colour, the highlighted card's surface. */
	color: inherit;
}

.rooster-price-card__tagline {
	@apply m-0 text-sm text-muted;
}

.rooster-price-card.is-highlighted .rooster-price-card__tagline {
	color: inherit;
	opacity: 0.8;
}

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

.rooster-price-card__period {
	@apply text-sm;
	font-weight: 400;
}

.rooster-price-card__note {
	@apply m-0 text-sm text-muted;
}

.rooster-price-card.is-highlighted .rooster-price-card__note {
	color: inherit;
	opacity: 0.8;
}

/* A link in the note or a feature (the spec's `[text](url)`) on the contrast colour: the card's own words, underlined. */
.rooster-price-card.is-highlighted :is(.rooster-price-card__note, .rooster-price-card__feature) a {
	color: inherit;
}

/* Its focus in the words' own colour: the theme's ring is drawn for the page's ground, not this one. */
.rooster-price-card.is-highlighted :is(.rooster-price-card__note, .rooster-price-card__feature) a:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
	box-shadow: none;
}

.rooster-price-card__features {
	@apply m-0 p-0 list-none grid gap-s2 text-sm;
}

.rooster-price-card__feature {
	@apply flex items-start gap-s2;
}

.rooster-price-card__feature .rooster-mark {
	flex: 0 0 auto;
	margin-top: 0.125rem;
}

.rooster-price-card__feature.is-included .rooster-mark {
	color: var(--wp--preset--color--success);
}

.rooster-price-card.is-highlighted .rooster-price-card__feature.is-included .rooster-mark {
	color: inherit;
}

.rooster-price-card__feature.is-excluded {
	color: var(--wp--preset--color--muted);
}

.rooster-price-card.is-highlighted .rooster-price-card__feature.is-excluded {
	color: inherit;
	opacity: 0.7;
}

/* The button: the theme's button element (wp-element-button) pinned to the card's end; inverted on the highlighted plan. */
.rooster-price-card__cta {
	@apply self-start mt-auto;
}

.rooster-price-card.is-highlighted .rooster-price-card__cta {
	background-color: var(--wp--preset--color--bg);
	color: var(--wp--preset--color--contrast);
}

/* A phone stacks the plans with the highlighted one first (the landing parity brief); the grid is the compiler's group. */
@media (max-width: 48rem) {
	.rooster-price-card.is-highlighted {
		order: -1;
	}
}

/*
 * The enterprise row under the grid (the legacy LMS landing's `.lmsl-price.is-ent`): the plan at the left (its name,
 * its badge under it, the price, the note), its tagline over its features in the middle, the button at the right at
 * its own width; one column below 48rem (C7 rule 11: one tree adapting).
 */
.rooster-price-card--row {
	@apply grid items-center gap-s5;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto;
}

.rooster-price-card__lead,
.rooster-price-card__body {
	@apply grid gap-s2;
	align-content: start;
	min-width: 0;
}

.rooster-price-card--row .rooster-price-card__badge {
	justify-self: start;
}

.rooster-price-card--row .rooster-price-card__price {
	@apply text-2xl;
	margin-top: var(--wp--preset--spacing--1);
}

/*
 * The row's features ticked in two columns where its middle has room for two of 12rem, else one (a phone; the page
 * agents' gaps, package G): at most two, whatever the width (auto-fit with each column at least half the list).
 */
.rooster-price-card--row .rooster-price-card__features {
	column-gap: var(--wp--preset--spacing--5);
	grid-template-columns: repeat(auto-fit, minmax(max(12rem, calc((100% - var(--wp--preset--spacing--5)) / 2)), 1fr));
}

/*
 * The button centred at its own height (the page agents' gaps, package F): core's button sheet gives the link
 * `height: 100%` (a row of buttons as tall as each other), which in the row's grid area is the row's height, so the
 * button stretched as tall as the features.
 */
.rooster-price-card--row .rooster-price-card__cta {
	align-self: center;
	height: auto;
	margin-top: 0;
	white-space: nowrap;
}

@media (max-width: 48rem) {
	.rooster-price-card--row {
		grid-template-columns: minmax(0, 1fr);
	}

	.rooster-price-card--row .rooster-price-card__cta {
		justify-self: start;
	}
}