/*
 * rooster/family-card (now a variant of the library: BRIEF-2026-11-01-BLOCK-LIBRARY.md) (BRIEF-2026-10-31-LANDING-PARITY-2.md item 7): the legacy home's family card, hero tile, links
 * panel and banner (themes/om-portal-theme/templates/home.php, Tailwind v4's scale), complete on its own: every rule
 * of its look is here (the owner, 31 Oct 2026: a block displays complete on its own; nothing from the section around
 * it, a page class or another block's sheet). Colours are the theme's tokens with the legacy's values as fallbacks;
 * the family colour is the theme's accent for the family (`is-style-accent-<family>` on the root gives
 * --rooster-accent, light-dark() of the family's two colours), with the accent preset and the legacy orange after it.
 * The band, the tile and the banner are dark in both schemes, as the legacy's: they carry the theme's Dark section
 * class (the dark palette inside) and color-scheme dark (so the family colour takes its dark value there, the
 * legacy's --fam-d); their gradient is the legacy's own (#2a2b2f to #1c1d20). Breakpoints are the legacy's: 40rem (sm)
 * of the window. Compiled by build/blocks-css.mjs to style.css; the same sheet styles the editor's preview.
 */

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

.rooster-family-card {
	--rooster-family: var(--rooster-accent, var(--wp--preset--color--accent, #f59a52));
	--rooster-family-text: var(--rooster-accent-text, var(--wp--preset--color--accent-text, var(--rooster-family)));
	--rooster-family-fg: var(--wp--preset--color--fg, #f1f5f9);
	--rooster-family-strong: var(--wp--preset--color--contrast, #ffffff);
	--rooster-family-soft: var(--wp--preset--color--contrast-2, #cad5e2);
	--rooster-family-muted: var(--wp--preset--color--muted, #90a1b9);
	--rooster-family-line: var(--wp--preset--color--line, rgb(255 255 255 / 10%));
	--rooster-family-surface: light-dark(var(--wp--preset--color--bg, #ffffff), var(--wp--preset--color--neutral-50, #0f172b));
	--rooster-family-band: linear-gradient(170deg, #2a2b2f, #1c1d20);
	--rooster-family-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
	--rooster-family-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");
	position: relative;
	box-sizing: border-box;
	margin: 0;
	color: var(--rooster-family-fg);
	font-size: 1rem;
	line-height: 1.5;
	overflow-wrap: normal;
}

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

.rooster-family-card :is(h2, h3, h4, p, ul, li) {
	margin: 0;
	padding: 0;
}

.rooster-family-card ul {
	list-style: none;
}

.rooster-family-card a,
a.rooster-family-card {
	text-decoration: none;
}

/* A link in the family's text or lede (the spec's `[text](url)`): the words' own colour, underlined (on the band too). */
.rooster-family-card :is(.rooster-family-card__text, .rooster-family-card__lede) a {
	color: inherit;
	text-decoration: underline;
}

/*
 * The palettes (the legacy Rooster Zero page's colour palettes): bordered rows of three overlapping swatches and the
 * palette's name; one column, two from 40rem, four from 64rem (its sm and lg). The list is the root: the browser's
 * list padding and markers reset here (its margin by the root's rule above).
 */
.rooster-family-card.rooster-family-card--palettes {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0.75rem;
	padding: 0;
	list-style: none;
}

.rooster-family-card .rooster-family-card__palette {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	min-height: 2.75rem;
	padding: 0.625rem 0.75rem;
	border: 1px solid var(--rooster-family-line);
	border-radius: 0.75rem;
}

.rooster-family-card__swatches {
	display: flex;
	flex: none;
}

.rooster-family-card__swatch {
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 50%;
	background: var(--rooster-swatch, transparent);
	box-shadow: 0 0 0 2px var(--wp--preset--color--bg, light-dark(#ffffff, #0f172b));
	outline: 1px solid light-dark(rgb(15 23 42 / 15%), rgb(255 255 255 / 25%));
}

.rooster-family-card__swatch + .rooster-family-card__swatch {
	margin-inline-start: -0.375rem;
}

.rooster-family-card .rooster-family-card__palette-name {
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.25rem;
	color: var(--rooster-family-fg);
}

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

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

/* The always-dark surfaces: the band, the tile, the banner. */
.rooster-family-card__band,
.rooster-family-card.rooster-family-card--tile,
.rooster-family-card.rooster-family-card--banner {
	color-scheme: dark;
	background: var(--rooster-family-band);
	color: var(--rooster-family-fg);
}

.rooster-family-card.rooster-family-card--banner {
	color: var(--rooster-family-strong);
}

/*
 * The family's inks again on the dark surfaces inside a card (the band, the illustration's box): a custom property's
 * var() is resolved where it is declared, so the card's own, in the page's scheme, handed the band the light scheme's
 * ink (#111) on its dark gradient: the wordmark near-black in the light scheme (the owner, 3 Nov 2026). Declared here
 * they resolve inside the Dark section (the tile and the banner are Dark sections at the root already).
 */
.rooster-family-card__band,
.rooster-family-card__motif--box {
	--rooster-family-text: var(--rooster-accent-text, var(--wp--preset--color--accent-text, var(--rooster-family)));
	--rooster-family-fg: var(--wp--preset--color--fg, #f1f5f9);
	--rooster-family-strong: var(--wp--preset--color--contrast, #ffffff);
	--rooster-family-soft: var(--wp--preset--color--contrast-2, #cad5e2);
	--rooster-family-muted: var(--wp--preset--color--muted, #90a1b9);
	--rooster-family-line: var(--wp--preset--color--line, rgb(255 255 255 / 10%));
}

/* The illustration: the site's SVG in the family colour. */
.rooster-family-card__motif {
	display: flex;
	flex: none;
	color: var(--rooster-family);
}

.rooster-family-card__motif :is(svg, .wp-block-html, p) {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
}

.rooster-family-card__motif svg {
	color: inherit;
}

/* ---------- card ---------- */

.rooster-family-card.rooster-family-card--card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--rooster-family-line);
	border-radius: 1.5rem;
	background: var(--rooster-family-surface);
	box-shadow: 0 1px 2px 0 rgb(0 0 0 / 5%);
	transition: box-shadow 300ms;
}

.rooster-family-card.rooster-family-card--card:hover {
	box-shadow: 0 20px 25px -5px rgb(15 23 42 / 5%), 0 8px 10px -6px rgb(15 23 42 / 5%);
}

.rooster-family-card__band {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 1.5rem;
	min-height: 12rem;
	padding: 1.5rem;
}

.rooster-family-card .rooster-family-card__name {
	font-size: 1.25rem;
	line-height: 1.25;
	font-weight: 800;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--rooster-family-strong);
	overflow-wrap: normal;
	word-break: normal;
}

/* The rule under the wordmark, in the family colour. */
.rooster-family-card .rooster-family-card__name::after {
	content: "";
	display: block;
	margin-top: 0.75rem;
	width: 3rem;
	height: 0.125rem;
	border-radius: 999px;
	background: var(--rooster-family);
}

.rooster-family-card__motif--band {
	width: 100%;
	max-width: 16rem;
	height: 6rem;
	transition: transform 500ms;
}

.rooster-family-card--card:hover .rooster-family-card__motif--band {
	transform: scale(1.04);
}

.rooster-family-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding: 1.5rem;
}

.rooster-family-card .rooster-family-card__text {
	font-size: 1rem;
	line-height: 1.625;
	color: var(--rooster-family-soft);
}

.rooster-family-card .rooster-family-card__products {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 1.5rem;
}

.rooster-family-card a.rooster-family-card__chip,
.rooster-family-card span.rooster-family-card__chip {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	min-height: 2.5rem;
	padding: 0 0.875rem;
	border: 1px solid color-mix(in srgb, var(--rooster-family-fg) 15%, transparent);
	border-radius: 999px;
	font-size: 0.875rem;
	line-height: 1.25rem;
	font-weight: 500;
	color: var(--rooster-family-fg);
	transition: color 150ms, border-color 150ms, background-color 150ms;
}

.rooster-family-card a.rooster-family-card__chip:hover {
	border-color: var(--rooster-family);
	background: color-mix(in srgb, var(--rooster-family) 10%, transparent);
	color: var(--rooster-family-text);
}

/* The badge's words in the family colour, no lighter than OKLCH 0.5 in the light scheme: 4.5:1 on the tint. */
.rooster-family-card .rooster-family-card__badge {
	padding: 0 0.375rem;
	border-radius: 999px;
	background: color-mix(in srgb, var(--rooster-family) 15%, transparent);
	color: light-dark(oklch(from var(--rooster-family) min(l, 0.5) c h), var(--rooster-family));
	font-size: 0.6875rem;
	line-height: 1.4286;
	font-weight: 600;
}

/* The features: a tick in the family colour before each, two columns from the legacy's sm. */
.rooster-family-card .rooster-family-card__features {
	display: grid;
	gap: 0.5rem;
	margin-top: 1.5rem;
}

.rooster-family-card .rooster-family-card__features > li {
	display: flex;
	gap: 0.5rem;
	font-size: 0.875rem;
	line-height: 1.25rem;
	color: var(--rooster-family-muted);
}

.rooster-family-card .rooster-family-card__features > li::before {
	content: "";
	flex: none;
	width: 1rem;
	height: 1rem;
	margin-top: 0.125rem;
	background: var(--rooster-family);
	mask: var(--rooster-family-tick) center / contain no-repeat;
}

.rooster-family-card .rooster-family-card__features a {
	color: inherit;
}

.rooster-family-card .rooster-family-card__features a:hover {
	color: var(--rooster-family-strong);
	text-decoration: underline;
}

.rooster-family-card .rooster-family-card__links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1.5rem;
	margin-top: auto;
	padding-top: 2rem;
}

/* The call to action in the family's text shade (the theme's accent text: the colour itself where it reads 4.5:1 on
   the page, a shade darker where it does not). */
.rooster-family-card a.rooster-family-card__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	min-height: 2.75rem;
	font-size: 1rem;
	line-height: 1.5rem;
	font-weight: 600;
	color: var(--rooster-family-text);
}

/* The arrow after "Explore …" and a product link's name: Lucide's arrow-right as a mask, nudged on hover. */
.rooster-family-card a.rooster-family-card__cta::after,
.rooster-family-card .rooster-family-card__product-name::after {
	content: "";
	flex: none;
	width: 1rem;
	height: 1rem;
	background: currentColor;
	mask: var(--rooster-family-arrow) center / contain no-repeat;
	transition: transform 200ms;
}

.rooster-family-card a.rooster-family-card__cta:hover::after,
.rooster-family-card a.rooster-family-card__product:hover .rooster-family-card__product-name::after {
	transform: translateX(0.125rem);
}

.rooster-family-card a.rooster-family-card__docs {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	font-size: 0.875rem;
	line-height: 1.25rem;
	font-weight: 500;
	color: var(--rooster-family-muted);
}

.rooster-family-card a.rooster-family-card__docs:hover {
	color: var(--rooster-family-strong);
	text-decoration: underline;
}

/* ---------- tile: the hero's square ---------- */

.rooster-family-card.rooster-family-card--tile {
	display: flex;
	flex-direction: column;
	aspect-ratio: 1;
	overflow: hidden;
	padding: 1rem;
	border-radius: 1rem;
	box-shadow: 0 20px 25px -5px rgb(15 23 42 / 15%), 0 8px 10px -6px rgb(15 23 42 / 15%), 0 0 0 1px rgb(255 255 255 / 5%);
	transition: transform 300ms, box-shadow 300ms;
}

/* The second column sits lower, as the legacy's staggered squares. */
.rooster-family-card.rooster-family-card--tile:nth-child(even) {
	translate: 0 1.5rem;
}

.rooster-family-card.rooster-family-card--tile:hover {
	transform: translateY(-0.25rem);
	box-shadow: 0 25px 50px -12px rgb(15 23 42 / 25%), 0 0 0 1px rgb(255 255 255 / 5%);
}

.rooster-family-card .rooster-family-card__logo {
	display: block;
	align-self: flex-start;
	width: auto;
	max-width: none;
	height: 1.25rem;
	opacity: 0.9;
}

/* The wordmark on two lines (a line break after the first word, printed by the block), its rule shorter. */
.rooster-family-card--tile .rooster-family-card__name {
	display: block;
	margin-top: 0.75rem;
	font-size: 0.8125rem;
	letter-spacing: 0.2em;
	white-space: pre-line;
}

.rooster-family-card--tile .rooster-family-card__name::after {
	margin-top: 0.5rem;
	width: 2rem;
}

.rooster-family-card__motif--tile {
	width: 100%;
	height: 33.333%;
	margin-top: auto;
	transition: transform 300ms;
}

.rooster-family-card--tile:hover .rooster-family-card__motif--tile {
	transform: scale(1.03);
}

/* ---------- links: the panel of product cards ---------- */

.rooster-family-card.rooster-family-card--links {
	display: flex;
	flex-direction: column;
	padding: 1.5rem;
	border: 1px solid var(--rooster-family-line);
	border-radius: 1.5rem;
	background: var(--rooster-family-surface);
	box-shadow: 0 1px 2px 0 rgb(0 0 0 / 5%);
	transition: box-shadow 150ms;
}

.rooster-family-card.rooster-family-card--links:hover {
	box-shadow: 0 20px 25px -5px rgb(15 23 42 / 5%), 0 8px 10px -6px rgb(15 23 42 / 5%);
}

.rooster-family-card__top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1.5rem;
}

.rooster-family-card .rooster-family-card__title {
	font-size: 1.25rem;
	line-height: 1.75rem;
	font-weight: 700;
	letter-spacing: normal;
	color: var(--rooster-family-strong);
}

.rooster-family-card .rooster-family-card__intro .rooster-family-card__text {
	margin-top: 0.5rem;
}

.rooster-family-card .rooster-family-card__motif--box {
	align-items: center;
	justify-content: center;
	width: 9rem;
	height: 5rem;
	padding: 0 0.75rem;
	border-radius: 1rem;
	background: #232427;
}

.rooster-family-card__motif--box :is(svg, .wp-block-html, p) {
	height: 3.5rem;
}

.rooster-family-card--links .rooster-family-card__products {
	display: grid;
	gap: 0.75rem;
}

.rooster-family-card a.rooster-family-card__product {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 1rem;
	border: 1px solid var(--rooster-family-line);
	border-radius: 0.75rem;
	transition: border-color 150ms, background-color 150ms;
}

.rooster-family-card a.rooster-family-card__product:hover {
	border-color: var(--rooster-family);
	background: color-mix(in srgb, var(--rooster-family) 10%, transparent);
}

.rooster-family-card .rooster-family-card__product-name {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	font-size: 0.875rem;
	line-height: 1.25rem;
	font-weight: 600;
	color: var(--rooster-family-strong);
}

.rooster-family-card .rooster-family-card__product-line {
	margin-top: 0.25rem;
	font-size: 0.8125rem;
	line-height: 1.375;
	color: var(--rooster-family-muted);
}

/* ---------- banner: the call to action ---------- */

.rooster-family-card.rooster-family-card--banner {
	overflow: hidden;
	padding: 2rem;
	border-radius: 1.5rem;
}

.rooster-family-card__motif--banner {
	position: absolute;
	right: -2.5rem;
	bottom: 0;
	width: 36rem;
	max-width: none;
	height: 14rem;
	opacity: 0.25;
	pointer-events: none;
}

.rooster-family-card__inner {
	position: relative;
	max-width: 42rem;
}

/* The eyebrow (and a chip's words under the pointer) in the family's text shade (package G), the colour itself where it reads. */
.rooster-family-card .rooster-family-card__eyebrow {
	font-size: 0.875rem;
	line-height: 1.25rem;
	font-weight: 800;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--rooster-family-text);
}

.rooster-family-card .rooster-family-card__heading {
	margin-top: 0.75rem;
	font-size: 1.875rem;
	line-height: 2.25rem;
	font-weight: 700;
	letter-spacing: -0.025em;
	color: var(--rooster-family-strong);
}

.rooster-family-card .rooster-family-card__lede {
	margin-top: 1rem;
	font-size: 1.125rem;
	line-height: 1.625;
	color: var(--rooster-family-soft);
}

.rooster-family-card--banner .rooster-family-card__features {
	font-size: 0.875rem;
	line-height: 1.25rem;
	color: color-mix(in srgb, var(--rooster-family-soft) 55%, var(--rooster-family-strong));
}

.rooster-family-card--banner .rooster-family-card__features > li {
	color: inherit;
}

.rooster-family-card .rooster-family-card__buttons {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin-top: 2rem;
}

.rooster-family-card a.rooster-family-card__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 3rem;
	padding: 0 1.5rem;
	border: 1px solid rgb(255 255 255 / 25%);
	border-radius: 0.75rem;
	font-size: 1rem;
	line-height: 1.5rem;
	font-weight: 600;
	color: var(--rooster-family-strong);
	transition: background-color 150ms, color 150ms;
}

.rooster-family-card a.rooster-family-card__button:hover {
	background: rgb(255 255 255 / 10%);
}

.rooster-family-card a.rooster-family-card__button.is-primary {
	border: 0;
	background: var(--rooster-family);
	color: #020618;
}

.rooster-family-card a.rooster-family-card__button.is-primary:hover {
	background: #ffffff;
}

.rooster-family-card :is(a.rooster-family-card__chip, a.rooster-family-card__cta, a.rooster-family-card__docs, a.rooster-family-card__product, a.rooster-family-card__button, .rooster-family-card__features a):focus-visible,
.rooster-family-card.rooster-family-card--tile:focus-visible {
	outline: 2px solid var(--rooster-family);
	outline-offset: 2px;
}

/* ---------- the legacy's sm (a 40rem window): the band in a row, the wider paddings, two columns ---------- */

@media (min-width: 40rem) {
	.rooster-family-card__band {
		flex-direction: row;
		align-items: flex-end;
		padding: 2rem;
	}

	.rooster-family-card .rooster-family-card__name {
		font-size: 1.5rem;
	}

	.rooster-family-card__motif--band {
		width: 16rem;
	}

	.rooster-family-card__body,
	.rooster-family-card.rooster-family-card--links {
		padding: 2rem;
	}

	.rooster-family-card .rooster-family-card__features,
	.rooster-family-card--links .rooster-family-card__products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.rooster-family-card.rooster-family-card--tile {
		padding: 1.25rem;
	}

	.rooster-family-card--tile .rooster-family-card__name {
		font-size: 1rem;
	}

	.rooster-family-card.rooster-family-card--banner {
		padding: 3rem;
	}

	.rooster-family-card__motif--banner {
		opacity: 0.4;
	}

	.rooster-family-card .rooster-family-card__heading {
		font-size: 2.25rem;
		line-height: 2.5rem;
	}

	.rooster-family-card .rooster-family-card__buttons {
		flex-direction: row;
	}
}