/*
 * H-03 use cases (Phase 8, pattern sealcoin/usecases). Ported from the
 * redesign PoC (css/site.css @ ed0ab9f7, ".sec-head", ".usecases", ".card",
 * ".card-row", ".hexpicto", ".example", ".trust-note") using theme.json tokens
 * and base.css aliases only. Loaded only on pages whose content uses the
 * section (functions.php), and in the editor.
 *
 * Cards use the Phase 4 `card` block style. They are not links, so they have
 * no hover effect (G-12). No scroll reveal (docs/05 §6).
 *
 * Breakpoints follow docs/05 §3.1: the PoC's 700px becomes sm (760px) and its
 * 560px becomes xs (520px); the result is identical at every QA viewport.
 *
 * Literal values kept from the PoC: 1px and 2px borders and the dashed rule.
 */

.sc-usecases-section {
	margin-block: 0;
}

/* Margin resets at the lowest specificity; component rules below win. */
.sc-usecases-section :where(.wrap, .sc-section-head, .sc-usecases, .sc-usecase, .sc-usecase-row, .sc-usecase-body) > * {
	margin-block: 0;
}

/* ---------- Grid: 6 columns, two wide cards then three ---------- */

.sc-usecases {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: var(--wp--custom--usecases--gap);
}

.sc-usecase {
	grid-column: span 2;
}

.sc-usecase.sc-usecase-wide {
	grid-column: span 3;
}

/* ---------- Card content ---------- */

.sc-usecase-row {
	display: grid;
	grid-template-columns: var(--wp--custom--usecases--row-columns);
	gap: var(--wp--custom--usecases--row-gap);
	align-items: start;
}

.sc-usecase-picto {
	flex: none;
	width: var(--wp--custom--usecases--picto-size);
	height: var(--wp--custom--usecases--picto-size);
}

.sc-usecase-picto img {
	display: block;
	width: 100%;
	height: 100%;
}

.sc-usecase > .sc-usecase-picto {
	margin-bottom: var(--wp--custom--gap--stack);
}

.sc-usecase h3 {
	margin-bottom: var(--wp--preset--spacing--xs);
}

.sc-usecase p + p {
	margin-top: var(--wp--custom--usecases--paragraph-gap);
}

.sc-usecase-text {
	font-size: var(--wp--custom--font-size--usecase-text);
	color: var(--c-muted);
}

.sc-usecase-example {
	border-left: 2px solid var(--c-orange);
	padding-left: var(--wp--custom--gap--stack);
	font-size: var(--wp--custom--font-size--usecase-example);
	color: var(--c-muted);
}

.sc-usecase .sc-usecase-trust {
	display: flex;
	gap: var(--wp--custom--usecases--trust-gap);
	margin-top: var(--wp--custom--usecases--trust-offset);
	border-top: 1px dashed var(--line);
	padding-top: var(--wp--custom--usecases--trust-padding);
	font-size: var(--wp--custom--font-size--usecase-trust);
	line-height: var(--wp--custom--line-height--compact);
	color: var(--c-muted);
}

.sc-usecase-trust strong {
	font-family: var(--f-display);
	font-weight: 500;
	white-space: nowrap;
	color: var(--c-orange);
}

/* lg */
@media (max-width: 1080px) {

	.sc-usecases {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.sc-usecase,
	.sc-usecase.sc-usecase-wide {
		grid-column: span 1;
	}

	.sc-usecase:last-child {
		grid-column: span 2;
	}
}

/* sm (PoC: 700px) */
@media (max-width: 760px) {

	.sc-usecases {
		grid-template-columns: 1fr;
	}

	.sc-usecase:last-child {
		grid-column: span 1;
	}
}

/* xs (PoC: 560px) */
@media (max-width: 520px) {

	.sc-usecase-row {
		grid-template-columns: 1fr;
	}
}