/*
 * rooster/card-grid (now a variant of the library: BRIEF-2026-11-01-BLOCK-LIBRARY.md) (BRIEF-2026-11-01-LANDINGS-BY-TEMPLATE.md, order 1): the legacy promo template's cards and steps
 * (themes/om-portal-theme/templates/promo-page.php, Tailwind v4's scale), complete on its own (the owner, 31 Oct 2026:
 * every rule of its look here, nothing from the section around it, a page class or another block's sheet). Colours
 * are the theme's tokens with the legacy's light and dark values as fallbacks; the family colour is the page's accent preset
 * (the family's two colours, light-dark()). Breakpoints are the legacy's, of the window: 48rem (md) and 64rem (lg).
 * Compiled by build/blocks-css.mjs to style.css; the same sheet styles the editor's preview.
 */

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

/*
 * The Rooster One template's palette, defined here for this recipe (the legacy's light and dark pairs): nothing
 * reads an undefined custom property. `:where()`: a block's tone (its own sheet) re-maps the brand over it.
 */
:where(.rooster-card-grid) {
	--wp--custom--rooster-one--ink-2: light-dark(#3d454e, #d1d6db);
	--wp--custom--rooster-one--brand: #1e63ce;
	--wp--custom--rooster-one--ink: light-dark(#212222, #eff0f0);
	--wp--custom--rooster-one--mute: light-dark(#5b6168, #d3d6d9);
}

.rooster-card-grid {
	--rooster-card-grid-fam: var(--wp--preset--color--accent, light-dark(#334155, #cbd5e1));
	--rooster-card-grid-ink: var(--wp--preset--color--accent-text, light-dark(#334155, #cbd5e1));
	--rooster-card-grid-strong: var(--wp--preset--color--contrast, light-dark(#020618, #ffffff));
	--rooster-card-grid-text: var(--wp--preset--color--contrast-2, light-dark(#45556c, #cad5e2));
	--rooster-card-grid-line: var(--wp--preset--color--line, light-dark(#e2e8f0, rgb(255 255 255 / 10%)));
	--rooster-card-grid-surface: light-dark(var(--wp--preset--color--bg, #ffffff), var(--wp--preset--color--neutral-50, #0f172b));
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.5rem;
	box-sizing: border-box;
	padding: 0;
	list-style: none;
	font-size: 1rem;
	line-height: 1.5;
	color: var(--rooster-card-grid-text);
	overflow-wrap: normal;
	word-break: normal;
	margin-block-end: 0;
}

.rooster-card-grid *,
.rooster-card-grid *::before,
.rooster-card-grid *::after {
	box-sizing: border-box;
}

.rooster-card-grid__card {
	margin: 0;
	padding: 1.5rem;
	border: 1px solid var(--rooster-card-grid-line);
	border-radius: 1rem;
	background: var(--rooster-card-grid-surface);
}

/*
 * A card's own tone (the line's last cell): the family's accent class re-maps the accent presets on the card, so the
 * family colour is read again there; a semantic tone maps them to the palette's success, warning, danger or the muted
 * ink (the warning's text shade its ink, warning-ink: the chip's icon). The chip's tint, its icon and the side rule follow.
 */
.rooster-card-grid__card[class*="is-tone-"] {
	--rooster-card-grid-fam: var(--wp--preset--color--accent, light-dark(#334155, #cbd5e1));
	--rooster-card-grid-ink: var(--wp--preset--color--accent-text, light-dark(#334155, #cbd5e1));
}

.rooster-card-grid__card:is(.is-tone-success, .is-tone-warning, .is-tone-danger, .is-tone-neutral) {
	--wp--preset--color--accent: var(--rooster-card-grid-tone);
	--wp--preset--color--accent-text: var(--rooster-card-grid-tone-text);
}

.rooster-card-grid__card.is-tone-success {
	--rooster-card-grid-tone: var(--wp--preset--color--success, light-dark(#15803d, #4ade80));
	--rooster-card-grid-tone-text: var(--rooster-card-grid-tone);
}

.rooster-card-grid__card.is-tone-warning {
	--rooster-card-grid-tone: var(--wp--preset--color--warning, light-dark(#b45309, #fbbf24));
	--rooster-card-grid-tone-text: var(--wp--preset--color--warning-ink, light-dark(#896610, #fbbf24));
}

.rooster-card-grid__card.is-tone-danger {
	--rooster-card-grid-tone: var(--wp--preset--color--danger, light-dark(#b91c1c, #f87171));
	--rooster-card-grid-tone-text: var(--rooster-card-grid-tone);
}

.rooster-card-grid__card.is-tone-neutral {
	--rooster-card-grid-tone: var(--wp--preset--color--muted, light-dark(#525252, #a3a3a3));
	--rooster-card-grid-tone-text: var(--rooster-card-grid-tone);
}

/* `rule: side`: the legacy LMS landing's stripe, 4 px at each card's start in its family colour. */
.rooster-card-grid--rule-side .rooster-card-grid__card {
	border-inline-start: 4px solid var(--rooster-card-grid-fam);
}

/* `border`: the Pro cards' grey (the legacy's slate-400; the line on a dark page), or the family colour. */
.rooster-card-grid--border-strong .rooster-card-grid__card {
	border-color: light-dark(#94a3b8, var(--rooster-card-grid-line));
}

.rooster-card-grid--border-accent .rooster-card-grid__card {
	border-color: light-dark(color-mix(in srgb, var(--rooster-card-grid-fam) 45%, #ffffff), color-mix(in srgb, var(--rooster-card-grid-fam) 45%, transparent));
}

.rooster-card-grid--rule-side.rooster-card-grid--border-strong .rooster-card-grid__card,
.rooster-card-grid--rule-side.rooster-card-grid--border-accent .rooster-card-grid__card {
	border-inline-start-color: var(--rooster-card-grid-fam);
}

/* The icon in its square, tinted with the family colour (10 % light, 12 % dark). */
.rooster-card-grid__badge {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 0.75rem;
	background: light-dark(color-mix(in srgb, var(--rooster-card-grid-fam) 10%, transparent), color-mix(in srgb, var(--rooster-card-grid-fam) 12%, transparent));
	color: var(--rooster-card-grid-ink);
}

.rooster-card-grid__badge .rooster-card-grid__glyph {
	display: block;
	flex: none;
	width: 1.25rem;
	height: 1.25rem;
	background-color: currentColor;
}

/* A step's number in its disc: the contrast colour on a light page, the family colour on a dark one. */
.rooster-card-grid__number {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 999px;
	background: light-dark(var(--rooster-card-grid-strong), var(--rooster-card-grid-fam));
	color: var(--wp--preset--color--bg, light-dark(#ffffff, #020618));
	font-size: 0.875rem;
	line-height: 1.25rem;
	font-weight: 700;
}

.rooster-card-grid .rooster-card-grid__title {
	margin: 1rem 0 0;
	font-size: 1.125rem;
	line-height: 1.75rem;
	font-weight: 600;
	letter-spacing: normal;
	text-wrap: wrap;
	color: var(--rooster-card-grid-strong);
}

/* A card without its chip (`none`): the title opens the card. */
.rooster-card-grid .has-no-icon > .rooster-card-grid__title:first-child {
	margin-top: 0;
}

.rooster-card-grid .rooster-card-grid__text {
	margin: 0.5rem 0 0;
	font-size: 1rem;
	line-height: 1.625;
	color: var(--rooster-card-grid-text);
}

/*
 * A card's link on its own line under its text (`link:[text](url)`, the page agents' gaps, package F: the legacy LMS
 * landing's "Or convert online"): the text's size and leading, the theme's link (underlined, the page's ink, the
 * accent under the pointer), not stretched over the card.
 */
.rooster-card-grid .rooster-card-grid__more {
	margin: 0.5rem 0 0;
	font-size: 1rem;
	line-height: 1.625;
}

/*
 * A step's mark (`mark:<icon>`): the icon in the disc in place of the number (the theme's mask, in the disc's colour),
 * the number kept for a screen reader.
 */
.rooster-card-grid__number .rooster-card-grid__mark {
	display: block;
	flex: none;
	width: 1.125rem;
	height: 1.125rem;
	background-color: currentColor;
}

.rooster-card-grid .rooster-card-grid__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}

@media (min-width: 48rem) {
	.rooster-card-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 64rem) {
	.rooster-card-grid--cols-3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.rooster-card-grid--cols-4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/*
 * The plain steps (order 2: the legacy Rooster One landing's `.r1-steps`): no card; the number in a 38 px disc of the
 * brand blue (the legacy's in both schemes) 12 px over the title, the title 15 px at the regular weight (as the
 * legacy's preflight left its h4), the text 13 px muted; four across 22 px apart, two below 1000 px, one below 720 px
 * (the legacy's breakpoints of the window). The template's own palette as custom tokens (`--wp--custom--rooster-one--*`)
 * with the legacy's light and dark values as fallbacks.
 */
.rooster-card-grid.rooster-card-grid--steps-plain {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 22px;
	margin: 0;
	color: var(--wp--custom--rooster-one--ink-2);
}

.rooster-card-grid--steps-plain .rooster-card-grid__card {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
}

.rooster-card-grid--steps-plain .rooster-card-grid__number {
	display: inline-flex;
	width: 38px;
	height: 38px;
	margin: 0 0 12px;
	border-radius: 50%;
	background: var(--wp--custom--rooster-one--brand);
	font-size: 1rem;
	line-height: 1.5;
	font-weight: 700;
	color: #ffffff;
}

.rooster-card-grid.rooster-card-grid--steps-plain .rooster-card-grid__title {
	margin: 0 0 6px;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--wp--custom--rooster-one--ink);
}

.rooster-card-grid.rooster-card-grid--steps-plain .rooster-card-grid__text {
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--wp--custom--rooster-one--mute);
}

@media (max-width: 1000px) {
	.rooster-card-grid.rooster-card-grid--steps-plain {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 720px) {
	.rooster-card-grid.rooster-card-grid--steps-plain {
		grid-template-columns: 1fr;
	}
}

/*
 * A toned step's disc (the block's tone, or the step's own: `Title | Text | tone`), in both layouts: filled with the
 * tone's accent, the number or the mark in the text on it (the theme's `on-accent` for a family; for a semantic tone,
 * white on a dark fill and black on a light one, from the fill's lightness). Untoned discs as before.
 */
.rooster-card-grid:is(.is-tone-success, .is-tone-warning, .is-tone-danger, .is-tone-neutral),
.rooster-card-grid__card:is(.is-tone-success, .is-tone-warning, .is-tone-danger, .is-tone-neutral) {
	--wp--preset--color--on-accent: oklch(from var(--wp--preset--color--accent) clamp(0, (0.62 - l) * 1000, 1) 0 0);
}

.rooster-card-grid[class*="is-tone-"] .rooster-card-grid__number,
.rooster-card-grid__card[class*="is-tone-"] .rooster-card-grid__number {
	background: var(--rooster-card-grid-fam);
	color: var(--wp--preset--color--on-accent, #ffffff);
}