/**
 * Visiora Core — Composant : Stack
 *
 * Primitive générique de mise en page Flexbox destinée
 * à composer plusieurs éléments ou composants.
 *
 * Dépendances :
 * - spacing.css
 * - containers.css
 *
 * @package Visiora_Core
 */

/* ======================================================
   1. BASE
   ====================================================== */

.v-stack {
	display: flex;
	gap: var(--v-space-3);
	min-inline-size: 0;
}

/* ======================================================
   2. DIRECTION
   ====================================================== */

.v-stack--row {
	flex-direction: row;
}

.v-stack--column {
	flex-direction: column;
}

/* ======================================================
   3. ESPACEMENT
   ====================================================== */

.v-stack--gap-xs {
	gap: var(--v-space-1);
}

.v-stack--gap-sm {
	gap: var(--v-space-2);
}

.v-stack--gap-md {
	gap: var(--v-space-3);
}

.v-stack--gap-lg {
	gap: var(--v-space-4);
}

.v-stack--gap-xl {
	gap: var(--v-space-5);
}

/* ======================================================
   4. ALIGNEMENT
   ====================================================== */

.v-stack--start {
	align-items: flex-start;
}

.v-stack--center {
	align-items: center;
}

.v-stack--end {
	align-items: flex-end;
}

.v-stack--stretch {
	align-items: stretch;
}

/* ======================================================
   5. JUSTIFICATION
   ====================================================== */

.v-stack--justify-start {
	justify-content: flex-start;
}

.v-stack--justify-center {
	justify-content: center;
}

.v-stack--justify-end {
	justify-content: flex-end;
}

.v-stack--between {
	justify-content: space-between;
}

.v-stack--around {
	justify-content: space-around;
}

.v-stack--evenly {
	justify-content: space-evenly;
}

/* ======================================================
   6. RETOUR À LA LIGNE
   ====================================================== */

.v-stack--wrap {
	flex-wrap: wrap;
}

.v-stack--nowrap {
	flex-wrap: nowrap;
}

/* ======================================================
   7. CHEVAUCHEMENT
   ====================================================== */

/*
 * Le chevauchement utilise exclusivement le token générique :
 *
 * --v-size-stack-overlap
 *
 * Un composant spécialisé peut redéfinir localement ce token.
 *
 * Exemple pour Avatar Group :
 *
 * .v-avatar-group {
 *     --v-size-stack-overlap:
 *         var(--v-size-avatar-group-overlap);
 * }
 */

.v-stack--overlap {
	gap: 0;
}

.v-stack--overlap > * + * {
	margin-inline-start:
		calc(var(--v-size-stack-overlap) * -1);
}

/* ======================================================
   8. ÉTATS
   ====================================================== */

.v-stack.is-hidden,
.v-stack[hidden] {
	display: none;
}

/* ======================================================
   9. RESPONSIVE
   ====================================================== */

/*
 * Correspond à --v-breakpoint-sm: 40rem.
 *
 * La valeur directe est conservée provisoirement tant que
 * les breakpoints CSS officiels ne sont pas exposés dans
 * les sources transmises sous forme de tokens utilisables.
 */

@media (max-width: 40rem) {
	.v-stack--responsive-column {
		flex-direction: column;
	}

	.v-stack--responsive-center {
		align-items: center;
	}
}

/* ======================================================
   10. ACCESSIBILITÉ
   ====================================================== */

/*
 * Stack est une primitive purement visuelle.
 *
 * Elle ne reçoit aucun rôle ARIA par défaut.
 *
 * La sémantique dépend toujours de l’élément HTML utilisé :
 *
 * - div pour un groupe générique ;
 * - ul ou ol pour une liste ;
 * - nav pour une navigation ;
 * - fieldset pour un groupe de champs ;
 * - section lorsque le contenu forme une région structurée.
 *
 * Stack ne doit jamais remplacer une structure HTML
 * sémantique appropriée.
 */

/* ======================================================
   11. FORCED COLORS
   ====================================================== */

/*
 * Stack ne définit aucune couleur, bordure ou décoration.
 *
 * Aucun traitement Forced Colors spécifique n’est nécessaire.
 */

/* ======================================================
   12. REDUCED MOTION
   ====================================================== */

/*
 * Stack ne définit aucune transition ni animation.
 *
 * Aucun traitement prefers-reduced-motion n’est nécessaire.
 */

/* ======================================================
   13. COMPATIBILITÉ WORDPRESS
   ====================================================== */

.v-root .v-stack,
.editor-styles-wrapper .v-stack {
	box-sizing: border-box;
}

.v-root .v-stack *,
.v-root .v-stack *::before,
.v-root .v-stack *::after,
.editor-styles-wrapper .v-stack *,
.editor-styles-wrapper .v-stack *::before,
.editor-styles-wrapper .v-stack *::after {
	box-sizing: border-box;
}

/* ======================================================
   14. COMPATIBILITÉ GUTENBERG
   ====================================================== */

.wp-block .v-stack {
	display: flex;
	min-inline-size: 0;
}

/* ======================================================
   15. COMPATIBILITÉ SPECTRA
   ====================================================== */

.uagb-container__content .v-stack,
.uagb-infobox .v-stack {
	display: flex;
	min-inline-size: 0;
}

/* ======================================================
   16. PERFORMANCE ET SÉCURITÉ
   ====================================================== */

/*
 * - Aucun JavaScript.
 * - Aucun gestionnaire inline.
 * - Aucune animation.
 * - Aucune transition.
 * - Aucun filtre graphique.
 * - Aucun positionnement absolu.
 * - Aucun z-index.
 * - Aucun contexte d’empilement.
 * - Aucune dépendance externe.
 * - Compatible CSP.
 * - Compatible RTL grâce à margin-inline-start.
 * - Très faible coût de rendu.
 * - Aucune dépendance à un composant spécialisé.
 * - Le chevauchement utilise exclusivement le token Stack.
 */