/*
 * rooster/detail-cards (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 groups,
 * complete on its own: the grid (two columns from 48rem, 1rem apart, each card at its own height), the card (1rem
 * corners, the line colour, the card surface), the summary (4rem high at the least: the icon in its 2.75rem tinted square,
 * the name, the count, the chevron turning as it opens), the entries under a hairline (a tick, the name semibold, the
 * line small and muted). The tick and the chevron are Lucide's, masks of this sheet. Colours are the theme's tokens
 * with the legacy's light and dark values as fallbacks. Compiled by build/blocks-css.mjs.
 * As the theme's accordions (11.3.3, the FAQ and accordion look): the open card's name and chevron, and a card's under
 * the pointer or the focus, in the accent's readable shade; the theme's focus ring round the summary's corners; the
 * chevron's turn at the theme's base motion, none when reduced.
 */

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

.rooster-detail-cards {
	--rooster-detail-cards-fam: var(--wp--preset--color--accent, light-dark(#334155, #cbd5e1));
	--rooster-detail-cards-ink: var(--wp--preset--color--accent-text, light-dark(#334155, #cbd5e1));
	--rooster-detail-cards-line: var(--wp--preset--color--line, light-dark(#e2e8f0, rgb(255 255 255 / 10%)));
	--rooster-detail-cards-muted: var(--wp--preset--color--muted, light-dark(#45556c, #90a1b9));
	--rooster-detail-cards-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' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
	--rooster-detail-cards-chevron: 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='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: start;
	gap: 1rem;
	box-sizing: border-box;
	font-size: 1rem;
	line-height: 1.5;
	color: var(--wp--preset--color--contrast-2, light-dark(#45556c, #cad5e2));
	overflow-wrap: normal;
	word-break: normal;
}

.rooster-detail-cards *,
.rooster-detail-cards *::before,
.rooster-detail-cards *::after {
	box-sizing: border-box;
}

.rooster-detail-cards__card {
	margin: 0;
	border: 1px solid var(--rooster-detail-cards-line);
	border-radius: 1rem;
	background: light-dark(var(--wp--preset--color--bg, #ffffff), var(--wp--preset--color--neutral-50, #0f172b));
}

.rooster-detail-cards .rooster-detail-cards__summary {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	min-height: 4rem;
	margin: 0;
	padding: 0.75rem 1.25rem;
	list-style: none;
	cursor: pointer;
}

.rooster-detail-cards__summary::-webkit-details-marker {
	display: none;
}

.rooster-detail-cards__summary::marker {
	content: "";
}

/* The theme's focus ring; the transparent outline is what a forced-colours mode draws instead. */
.rooster-detail-cards__summary:focus-visible {
	outline: 2px solid transparent;
	outline-offset: 2px;
	border-radius: 1rem;
	box-shadow: var(--wp--custom--rooster--focus-ring, 0 0 0 3px color-mix(in srgb, var(--rooster-detail-cards-fam) 35%, transparent));
}

/* The open card, and one under the pointer or the focus: its name and chevron in the accent's readable shade. */
.rooster-detail-cards__card[open] > .rooster-detail-cards__summary :is(.rooster-detail-cards__name, .rooster-detail-cards__chevron),
.rooster-detail-cards__summary:is(:hover, :focus-visible) :is(.rooster-detail-cards__name, .rooster-detail-cards__chevron) {
	color: var(--rooster-detail-cards-ink);
}

.rooster-detail-cards__card[open] > .rooster-detail-cards__summary .rooster-detail-cards__chevron,
.rooster-detail-cards__summary:is(:hover, :focus-visible) .rooster-detail-cards__chevron {
	background-color: currentColor;
}

.rooster-detail-cards__badge {
	display: flex;
	flex: none;
	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-detail-cards-fam) 10%, transparent), color-mix(in srgb, var(--rooster-detail-cards-fam) 12%, transparent));
	color: var(--rooster-detail-cards-ink);
}

.rooster-detail-cards__badge .rooster-detail-cards__glyph {
	display: block;
	flex: none;
	width: 1.25rem;
	height: 1.25rem;
	background-color: currentColor;
}

.rooster-detail-cards__name {
	flex: 1 1 0%;
	font-size: 1rem;
	line-height: 1.5rem;
	font-weight: 600;
	color: var(--wp--preset--color--contrast, light-dark(#020618, #ffffff));
}

.rooster-detail-cards__count {
	font-size: 0.875rem;
	line-height: 1.25rem;
	color: var(--rooster-detail-cards-muted);
}

.rooster-detail-cards__chevron {
	flex: none;
	width: 1.25rem;
	height: 1.25rem;
	background-color: var(--rooster-detail-cards-muted);
	-webkit-mask: var(--rooster-detail-cards-chevron) center / contain no-repeat;
	mask: var(--rooster-detail-cards-chevron) center / contain no-repeat;
	transition: transform var(--wp--custom--rooster--motion--base, 200ms);
}

.rooster-detail-cards__card[open] .rooster-detail-cards__chevron {
	transform: rotate(180deg);
}

.rooster-detail-cards__rows {
	display: grid;
	gap: 0.75rem;
	margin: 0;
	padding: 1rem 1.25rem;
	border-top: 1px solid var(--rooster-detail-cards-line);
	list-style: none;
}

.rooster-detail-cards__rows li {
	display: flex;
	gap: 0.625rem;
	margin: 0;
	line-height: 1.375;
}

.rooster-detail-cards__tick {
	flex: none;
	width: 1rem;
	height: 1rem;
	margin-top: 0.125rem;
	background-color: var(--rooster-detail-cards-ink);
	-webkit-mask: var(--rooster-detail-cards-tick) center / contain no-repeat;
	mask: var(--rooster-detail-cards-tick) center / contain no-repeat;
}

.rooster-detail-cards__label {
	font-weight: 600;
	color: var(--wp--preset--color--contrast, light-dark(#020618, #ffffff));
}

.rooster-detail-cards__line {
	display: block;
	font-size: 0.875rem;
	line-height: 1.25rem;
	color: var(--rooster-detail-cards-muted);
}

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

@media (prefers-reduced-motion: reduce) {
	.rooster-detail-cards__chevron {
		transition: none;
	}
}

@media (forced-colors: active) {
	.rooster-detail-cards__chevron {
		forced-color-adjust: none;
		background-color: CanvasText;
	}
}