/**
 * Fichier : argm-layout.css
 * Emplacement : assets/css/
 *
 * Responsabilité :
 * Charpente commune des pages de contenu : deux colonnes et une bande, ou une
 * pile.
 *
 * Le placement ne touche pas au balisage :
 *   Chaque groupe de blocs suit l'ordre du balisage. La grille assigne sa
 *   colonne à chaque groupe selon sa zone, et le remplissage dense comble les
 *   rangées laissées libres : une colonne se lit donc de haut en bas, sans
 *   trou. La lecture vocale et le clavier suivent le balisage.
 *
 * Ce que la grille garantit :
 *   La bande occupe toute la largeur, sous les deux colonnes. Une zone qui
 *   grandit ne pousse que ce qui la suit : déplier un onglet allonge la
 *   bande, les colonnes gardent leur hauteur. Les colonnes s'alignent en haut
 *   et ne s'étirent pas.
 *
 * Aucune valeur en dur :
 *   Espacements et bordures viennent des variables du thème, avec une valeur
 *   de repli. Le thème redéfinit ses variables pour prefers-contrast: more,
 *   et une valeur codée ici crève ce mécanisme en silence.
 *
 * @package App_Rle_General_Manager
 * @since   1.0.0
 */

.argm-layout {
	--argm-layout-gap: var(--discovery-space-8, 2rem);
	--argm-layout-space: var(--discovery-space-6, 1.5rem);
	--argm-layout-border: var(--discovery-color-border, #767676);

	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--argm-layout-gap);
	align-items: start;
}

.argm-layout-group,
.argm-layout-block {
	min-inline-size: 0;
}

/*
 * Les blocs d'un groupe se suivent, avec l'air qu'il faut entre eux. L'écart
 * est porté par les blocs : chaque page resserre ce qu'elle veut.
 */

.argm-layout-group {
	display: flex;
	flex-direction: column;
}

.argm-layout-group > .argm-layout-block + .argm-layout-block {
	margin-block-start: var(--argm-layout-space);
}

/*
 * Rupture avant la bande : elle sépare ce qui se lit d'un coup de ce qui se
 * déplie. Seul le premier groupe de la bande la porte.
 */

.argm-layout-band-start {
	padding-block-start: var(--argm-layout-gap);
	border-block-start: 1px solid var(--argm-layout-border);
}

@media (width >= 768px) {
	.argm-layout-colonnes {
		grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
		grid-auto-flow: row dense;
		row-gap: var(--argm-layout-space);
	}

	.argm-layout-colonnes > .argm-layout-zone-tete {
		grid-column: 1;
	}

	.argm-layout-colonnes > .argm-layout-zone-suite {
		grid-column: 2;
	}

	.argm-layout-colonnes > .argm-layout-zone-bande {
		grid-column: 1 / -1;
	}

	.argm-layout-colonnes > .argm-layout-band-start {
		margin-block-start: var(--argm-layout-gap);
	}

	/*
	 * Deux colonnes qui alternent dans le balisage, tête puis suite, puis de
	 * nouveau tête et suite. Chaque groupe s'étend sur plusieurs rangées et
	 * commence sous celui qui le précède dans sa colonne : la colonne la plus
	 * courte ne traîne pas le vide de l'autre. Sans premier groupe de tête,
	 * le second prend sa place en haut de la colonne.
	 */

	.argm-layout-colonnes > .argm-layout-tete-1 {
		grid-row: 1 / span 2;
	}

	.argm-layout-colonnes > .argm-layout-suite-1 {
		grid-row: 1;
	}

	.argm-layout-colonnes > .argm-layout-tete-2 {
		grid-row: 3 / span 2;
	}

	.argm-layout-colonnes > .argm-layout-suite-1:first-child ~ .argm-layout-tete-2 {
		grid-row: 1 / span 4;
	}

	.argm-layout-colonnes > .argm-layout-suite-2 {
		grid-row: 2 / span 3;
	}
}

@media (prefers-contrast: more) {
	.argm-layout-band-start {
		border-block-start-width: 2px;
	}
}