/**
 * Fichier : argm-catalogue.css
 * Emplacement : assets/css/
 *
 * Responsabilité :
 * Catalogue des applications et page d'une rubrique : en-tête, barre des
 * onglets et des filtres, nombre de résultats, mise en avant et dossiers des
 * rubriques. Les cartes, les boutons et la pagination relèvent de
 * argm-public.css.
 *
 * Onglets de vue :
 *   L'onglet chevauche la ligne basse de la barre, qui se confond avec sa
 *   bordure. L'onglet sélectionné porte une bordure basse épaisse et une
 *   graisse plus forte : sa couleur ne le distingue pas seule.
 *
 * Dossiers :
 *   Une rubrique n'a pas d'illustration : elle se présente en dossier
 *   dessiné en CSS, l'onglet posé au-dessus du corps, dont il reprend la
 *   bordure et le fond.
 *
 * @package App_Rle_General_Manager
 * @since   1.0.0
 */

.argm-catalogue-header {
	margin-block-end: var(--argm-space);
}

.argm-catalogue-title {
	margin-block: 0 var(--argm-space-s);
}

.argm-catalogue-description {
	max-inline-size: var(--argm-reading);
}

.argm-catalogue-description > :last-child {
	margin-block-end: 0;
}

/* =========================================================================
   Barre
   ========================================================================= */

.argm-catalogue-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--argm-space);
	margin-block-end: var(--argm-space);
	padding-block-end: var(--argm-space-s);
	border-block-end: 1px solid var(--argm-color-border);
}

/* Le formulaire des onglets ne porte que des champs cachés. */
.argm-catalogue .argm-views-form {
	display: contents;
}

.argm-catalogue .argm-view-tabs {
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	list-style: none;
}

.argm-catalogue .argm-view-tab-item {
	margin-block-end: calc(var(--argm-space-s) * -1 - var(--argm-hairline, 1px));
}

.argm-catalogue .argm-view-tab {
	display: inline-flex;
	align-items: center;
	min-block-size: 44px;
	min-inline-size: 44px;
	padding: var(--argm-space-s) var(--argm-space);
	border: 1px solid transparent;
	border-block-end-width: 3px;
	background: none;
	color: var(--argm-color-text);
	font: inherit;
	cursor: pointer;
	transition: border-color var(--argm-duration) ease;
}

.argm-catalogue .argm-view-tab:hover,
.argm-catalogue .argm-view-tab:focus-visible {
	border-block-end-color: var(--argm-color-border);
}

.argm-catalogue .argm-view-tab[aria-selected="true"] {
	color: var(--argm-color-link);
	font-weight: var(--argm-weight-strong);
	border-block-end-color: currentcolor;
}

.argm-catalogue .argm-filter-form {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--argm-space-s);
	margin: 0;
}

.argm-catalogue .argm-filter-label {
	font-weight: var(--argm-weight-strong);
}

.argm-catalogue .argm-filter-form select {
	min-block-size: 44px;
	max-inline-size: 100%;
	padding: var(--argm-space-xs) var(--argm-space-s);
	border: 1px solid var(--argm-color-border);
	border-radius: var(--argm-radius);
	background-color: var(--argm-color-background);
	color: var(--argm-color-text);
	font: inherit;
}

.argm-catalogue-results {
	margin-block: 0 var(--argm-space);
	color: var(--argm-color-muted);
}

/* =========================================================================
   Mise en avant
   ========================================================================= */

.argm-featured {
	margin-block-end: calc(var(--argm-space) * 1.5);
	padding: var(--argm-space);
	border: 1px solid var(--argm-color-border);
	border-radius: var(--argm-radius);
	background-color: var(--argm-color-surface);
}

.argm-featured-heading {
	margin-block: 0 var(--argm-space-s);
	font-size: var(--argm-text-s);
	font-weight: var(--argm-weight-strong);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--argm-color-muted);
}

.argm-featured-body {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var(--argm-space);
}

.argm-featured-image {
	flex: 0 0 auto;
}

.argm-featured-icon {
	display: block;
	inline-size: min(40vw, 200px);
	block-size: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: var(--argm-radius);
}

.argm-featured-text {
	flex: 1 1 20rem;
	min-inline-size: 0;
}

.argm-featured-title {
	margin-block: 0 var(--argm-space-xs);
}

.argm-featured-title a {
	color: var(--argm-color-link);
	text-decoration: none;
}

.argm-featured-title a:hover,
.argm-featured-title a:focus-visible {
	color: var(--argm-color-link-hover);
	text-decoration: underline;
}

.argm-featured-summary {
	max-inline-size: var(--argm-reading);
	margin-block: var(--argm-space-s) 0;
}

.argm-featured-actions {
	margin-block: var(--argm-space) 0;
}

/* =========================================================================
   Dossiers des rubriques
   ========================================================================= */

.argm-folders {
	--argm-columns: 3;

	display: grid;
	grid-template-columns: repeat(var(--argm-columns), minmax(0, 1fr));
	gap: var(--argm-space);
	margin: 0 0 var(--argm-space);
	padding: 0;
	list-style: none;
}

.argm-folder {
	display: flex;
}

.argm-folder-link {
	position: relative;
	display: block;
	inline-size: 100%;
	padding-block-start: var(--argm-space);
	color: var(--argm-color-text);
	text-decoration: none;
}

.argm-folder-tab {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	inline-size: 45%;
	block-size: 1.5rem;
	border: 1px solid var(--argm-color-border);
	border-block-end: 0;
	border-start-start-radius: var(--argm-radius);
	border-start-end-radius: var(--argm-radius);
	background-color: var(--argm-color-surface);
}

.argm-folder-body {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--argm-space-xs);
	min-block-size: 5.5rem;
	padding: var(--argm-space-s);
	border: 1px solid var(--argm-color-border);
	border-start-end-radius: var(--argm-radius);
	border-end-start-radius: var(--argm-radius);
	border-end-end-radius: var(--argm-radius);
	background-color: var(--argm-color-surface);
	transition: border-color var(--argm-duration) ease, transform var(--argm-duration) ease;
}

.argm-folder-link:hover .argm-folder-body,
.argm-folder-link:focus-visible .argm-folder-body {
	border-color: var(--argm-color-accent);
	transform: translateY(-2px);
}

.argm-folder-link:hover .argm-folder-tab,
.argm-folder-link:focus-visible .argm-folder-tab {
	border-color: var(--argm-color-accent);
}

.argm-folder-name {
	font-weight: var(--argm-weight-strong);
	line-height: var(--argm-line-tight);
}

.argm-folder-link:hover .argm-folder-name,
.argm-folder-link:focus-visible .argm-folder-name {
	text-decoration: underline;
}

.argm-folder-count {
	font-size: var(--argm-text-s);
	color: var(--argm-color-muted);
}

/* =========================================================================
   Paliers d'écran
   ========================================================================= */

@media (width <= 1024px) {
	.argm-folders {
		grid-template-columns: repeat(min(var(--argm-columns), 3), minmax(0, 1fr));
	}
}

@media (width <= 768px) {
	.argm-folders {
		grid-template-columns: repeat(min(var(--argm-columns), 2), minmax(0, 1fr));
	}

	.argm-catalogue-bar {
		align-items: stretch;
	}
}

@media (width <= 480px) {
	.argm-folders {
		grid-template-columns: minmax(0, 1fr);
	}

	.argm-catalogue .argm-view-tabs,
	.argm-catalogue .argm-filter-form {
		inline-size: 100%;
	}

	.argm-catalogue .argm-view-tab-item {
		flex: 1 1 auto;
	}

	.argm-catalogue .argm-view-tab {
		inline-size: 100%;
		justify-content: center;
	}
}

/* =========================================================================
   Préférences d'affichage
   ========================================================================= */

@media (prefers-contrast: more) {
	.argm-featured,
	.argm-folder-body,
	.argm-folder-tab {
		border-width: 2px;
	}

	.argm-catalogue-results,
	.argm-folder-count,
	.argm-featured-heading {
		color: var(--argm-color-text);
	}
}

@media (prefers-reduced-motion: reduce) {
	.argm-catalogue .argm-view-tab,
	.argm-folder-body {
		transition: none;
	}

	.argm-folder-link:hover .argm-folder-body,
	.argm-folder-link:focus-visible .argm-folder-body {
		transform: none;
	}
}

@media print {
	.argm-catalogue-bar {
		display: none;
	}
}