/*
 * rooster/role-cards (now a variant of the library: BRIEF-2026-11-01-BLOCK-LIBRARY.md) (BRIEF-2026-11-01-LANDINGS-BY-TEMPLATE.md, order 2): the legacy Rooster One landing's roles
 * (themes/om-portal-theme/templates/landing-rooster-one.php, `.r1-roles`, `.r1-role`), complete on its own: three
 * across 14 px apart (two below 1000 px, one below 720 px, the legacy's breakpoints of the window), each card 12 px
 * corners, 18 px inside (16 at the left), the role's colour as its left rule (5 px in the light scheme, 1 px in the
 * dark as the legacy's darkened twin drew it: the 4 px are an inset band, so the geometry is the same in both), the
 * icon's 24 px row, the name 10.5 px upper-case in the colour (no lighter than OKLCH 0.565 in the light scheme, lifted
 * to 0.82 in the dark, the legacy's hand rule), the question 15.5 px, the line 12.5 px. Colours are the template's own palette as custom tokens
 * (`--wp--custom--rooster-one--*`) with the legacy's light and dark values as fallbacks. Compiled by
 * build/blocks-css.mjs.
 */

@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-role-cards) {
	--wp--custom--rooster-one--ink: light-dark(#212222, #eff0f0);
	--wp--custom--rooster-one--mute: light-dark(#5b6168, #d3d6d9);
	--wp--custom--rooster-one--line: light-dark(#d5dbe3, rgb(255 255 255 / 12%));
	--wp--custom--rooster-one--surface: light-dark(#ffffff, rgb(255 255 255 / 4%));
	--wp--custom--rooster-one--ink-2: light-dark(#3d454e, #d1d6db);
	--wp--custom--rooster-one--brand: #1e63ce;
}

.rooster-role-cards {
	--rooster-role-cards-ink: var(--wp--custom--rooster-one--ink);
	--rooster-role-cards-mute: var(--wp--custom--rooster-one--mute);
	--rooster-role-cards-line: var(--wp--custom--rooster-one--line);
	--rooster-role-cards-surface: var(--wp--custom--rooster-one--surface);
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
	box-sizing: border-box;
	margin: 0;
	font-size: 1rem;
	line-height: 1.5;
	color: var(--wp--custom--rooster-one--ink-2);
	overflow-wrap: normal;
	word-break: normal;
}

.rooster-role-cards .rooster-role-cards__card {
	--rooster-role-cards-tone: var(--wp--custom--rooster-one--brand);
	box-sizing: border-box;
	margin: 0;
	padding: 18px 18px 18px 16px;
	border: 1px solid var(--rooster-role-cards-line);
	border-left-color: var(--rooster-role-cards-tone);
	border-radius: 12px;
	background: var(--rooster-role-cards-surface);
	box-shadow: inset 4px 0 0 0 light-dark(var(--rooster-role-cards-tone), transparent);
}

.rooster-role-cards .rooster-role-cards__icon {
	display: flex;
	align-items: center;
	height: 24px;
	color: light-dark(var(--rooster-role-cards-tone), oklch(from var(--rooster-role-cards-tone) 0.82 c h));
}

.rooster-role-cards .rooster-role-cards__glyph {
	display: block;
	flex: none;
	width: 20px;
	height: 20px;
	background-color: currentColor;
}

/* The name in the role's colour, no lighter than OKLCH 0.565 in the light scheme (4.5:1 on the card: a light role
   colour, the legacy's amber #b07800, is drawn a shade darker; the others as they are). */
.rooster-role-cards .rooster-role-cards__name {
	margin: 8px 0 6px;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.1em;
	line-height: 1.5;
	text-transform: uppercase;
	color: light-dark(oklch(from var(--rooster-role-cards-tone) min(l, 0.565) c h), oklch(from var(--rooster-role-cards-tone) 0.82 c h));
}

.rooster-role-cards .rooster-role-cards__title {
	margin: 0 0 8px;
	font-size: 15.5px;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.3;
	text-wrap: wrap;
	color: var(--rooster-role-cards-ink);
}

.rooster-role-cards .rooster-role-cards__text {
	margin: 0;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--rooster-role-cards-mute);
}

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

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