/**
 * The layout of the depot's own templates: the product sheet and the catalogue.
 *
 * UNE DISPOSITION, PAS UNE TOILETTE. Pas une couleur ni une police : les
 * blocs prennent celles du thème, et leurs traits sont tirés de la couleur du
 * texte. Les règles sont en :where(), sans poids : la moindre règle du thème
 * l'emporte. Un thème qui fournit ses propres gabarits (cab-depot/fiche.php,
 * cab-depot/catalogue.php) n'a que faire de cette feuille.
 *
 * @package cab-depot
 * @since   0.8.0
 */

:where(.cab-depot-fiche, .cab-depot-catalogue) {
	--cab-depot-ecart: clamp(36px, 5vw, 72px);
	--cab-depot-lecture: 720px;
	--cab-depot-rayon: 16px;
	--cab-depot-trait: color-mix(in srgb, currentColor 14%, transparent);
	--cab-depot-voile: color-mix(in srgb, currentColor 4%, transparent);
	--cab-depot-discret: color-mix(in srgb, currentColor 66%, transparent);
}

/* ---- La fiche : l'en-tête --------------------------------------------- */

:where(.cab-depot-fiche) {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--cab-depot-ecart);
}

:where(.cab-depot-fiche__une) {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 32px 56px;
	align-items: center;
}

@media (min-width: 900px) {
	:where(.cab-depot-fiche__une) {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	:where(.cab-depot-fiche__faits) {
		grid-column: 1 / -1;
	}
}

:where(.cab-depot-fiche__une-texte) > * + * {
	margin-top: 18px;
}

:where(.cab-depot-fiche__surtitre) {
	margin: 0;
	font-size: 0.75em;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--cab-depot-discret);
}

:where(.cab-depot-fiche__titre) {
	margin-bottom: 0;
	text-wrap: balance;
}

:where(.cab-depot-fiche__accroche) {
	font-size: 1.2em;
	line-height: 1.45;
	text-wrap: pretty;
}

:where(.cab-depot-fiche__visuel) {
	margin: 0;
}

:where(.cab-depot-fiche__visuel img) {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--cab-depot-rayon);
}

:where(.cab-depot-fiche__faits) {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 12px;
	margin: 0;
}

:where(.cab-depot-fiche__faits > div) {
	padding: 14px 16px;
	border: 1px solid var(--cab-depot-trait);
	border-radius: calc(var(--cab-depot-rayon) * 0.75);
	background: var(--cab-depot-voile);
}

:where(.cab-depot-fiche__faits dt) {
	font-size: 0.8em;
	color: var(--cab-depot-discret);
}

:where(.cab-depot-fiche__faits dd) {
	margin: 4px 0 0;
	font-variant-numeric: tabular-nums;
}

/* ---- La fiche : la lecture -------------------------------------------- */

:where(.cab-depot-fiche__contenu) {
	display: grid;
	gap: var(--cab-depot-ecart);
	width: 100%;
	max-width: var(--cab-depot-lecture);
	margin-inline: auto;
	min-width: 0;
}

:where(.cab-depot-fiche__contenu code) {
	overflow-wrap: anywhere;
}

:where(.cab-depot-fiche__contenu .wp-block-details + .wp-block-details) {
	margin-top: 0.75em;
}

:where(.cab-depot-fiche__captures) {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
	gap: 20px;
}

:where(.cab-depot-fiche__captures figure) {
	margin: 0;
}

:where(.cab-depot-fiche__captures img) {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid var(--cab-depot-trait);
	border-radius: calc(var(--cab-depot-rayon) / 2);
}

:where(.cab-depot-fiche__captures figcaption) {
	margin-top: 8px;
	font-size: 0.875em;
	color: var(--cab-depot-discret);
}

/* ---- Le catalogue ----------------------------------------------------- */

:where(.cab-depot-catalogue__liste) {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

:where(.cab-depot-carte) {
	position: relative;
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr);
	grid-template-rows: auto auto 1fr;
	align-content: start;
	gap: 6px 18px;
	margin: 0;
	padding: 24px;
	border: 1px solid var(--cab-depot-trait);
	border-radius: var(--cab-depot-rayon);
	transition: border-color 0.2s ease, transform 0.2s ease;
}

:where(.cab-depot-carte--lien:hover, .cab-depot-carte--lien:focus-within) {
	border-color: currentColor;
	transform: translateY(-2px);
}

:where(.cab-depot-carte__icone) {
	grid-row: 1 / span 3;
	width: 56px;
	height: 56px;
	border-radius: 22%;
}

/*
 * Un nom de carte n'est pas un titre de section : sans cette taille, il prend
 * celle des h2 du thème. Une classe, pour l'emporter sur la règle h2 du
 * thème ; la taille reste une propriété qu'un thème règle.
 */
.cab-depot-carte__titre {
	margin: 0;
	font-size: var(--cab-depot-titre-carte, 1.3rem);
	line-height: 1.3;
}

:where(.cab-depot-carte__titre a) {
	color: inherit;
	text-decoration: none;
}

/* Toute la carte mène à la page ; le lien reste le seul lien. */
:where(.cab-depot-carte__titre a)::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

:where(.cab-depot-carte__titre a:focus-visible) {
	outline: none;
}

:where(.cab-depot-carte--lien:focus-within) {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

:where(.cab-depot-carte__accroche) {
	margin: 0;
	line-height: 1.5;
}

:where(.cab-depot-carte__meta) {
	align-self: end;
	margin: 8px 0 0;
	font-size: 0.85em;
	color: var(--cab-depot-discret);
	font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
	:where(.cab-depot-carte) {
		transition: none;
	}

	:where(.cab-depot-carte--lien:hover, .cab-depot-carte--lien:focus-within) {
		transform: none;
	}
}