/*
 * Welia · Utilities
 * Helpers de layout (stack, cluster), classes utilitaires.
 */

/* Stack vertical avec spacing cohérent */
.stack { display: flex; flex-direction: column; }
.stack > * + * { margin-top: var(--stack-gap, var(--space-4)); }
.stack--xs > * + * { margin-top: var(--space-2); }
.stack--sm > * + * { margin-top: var(--space-3); }
.stack--md > * + * { margin-top: var(--space-5); }
.stack--lg > * + * { margin-top: var(--space-6); }
.stack--xl > * + * { margin-top: var(--space-8); }

/* Cluster horizontal flex avec wrap */
.cluster {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	align-items: center;
}
.cluster--lg { gap: var(--space-5); }

/* Grid utilities */
.grid { display: grid; gap: var(--space-5); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 800px) {
	.grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
	.grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

/* Text */
.text-mono  { font-family: var(--font-mono); }
.text-serif { font-family: var(--font-serif); }
.text-sans  { font-family: var(--font-sans); }
.text-accent { color: var(--accent-1); }
.text-muted  { color: var(--text-2); }
.text-subtle { color: var(--text-3); }
.text-center { text-align: center; }
.text-uppercase { text-transform: uppercase; letter-spacing: var(--ls-wide); }
.text-italic { font-style: italic; }

/* Background */
.bg-surface { background: var(--surface); }
.bg-accent  { background: var(--accent-1); color: var(--text-inverse); }
.bg-dark    { background: var(--text-1); color: var(--text-inverse); }

/* Spacing helpers */
.mt-0 { margin-top: 0; }
.mt-sm { margin-top: var(--space-3); }
.mt-md { margin-top: var(--space-5); }
.mt-lg { margin-top: var(--space-7); }
.mt-xl { margin-top: var(--space-9); }
.mb-sm { margin-bottom: var(--space-3); }
.mb-md { margin-bottom: var(--space-5); }
.mb-lg { margin-bottom: var(--space-7); }

.pt-lg { padding-top: var(--space-8); }
.pb-lg { padding-bottom: var(--space-8); }

/* Section heading group */
.section-head {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-4);
	max-width: 720px;
	margin-bottom: var(--space-7);
}
.section-head.section-head--row {
	grid-template-columns: 1fr auto;
	align-items: end;
	max-width: 100%;
}
@media (max-width: 700px) {
	.section-head--row { grid-template-columns: 1fr; }
}

/* Loading & lazy */
.skeleton {
	background: linear-gradient(90deg, var(--surface-2) 0%, var(--surface) 50%, var(--surface-2) 100%);
	background-size: 200% 100%;
	animation: welia-skeleton 1.6s ease-in-out infinite;
	border-radius: var(--radius-md);
}
@keyframes welia-skeleton {
	0% { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}

/* Borders */
.border-top-subtle { border-top: 1px solid var(--border-subtle); }

/* Aspect ratios */
.aspect-square { aspect-ratio: 1 / 1; }
.aspect-video  { aspect-ratio: 16 / 9; }
.aspect-card   { aspect-ratio: 4 / 3; }
.aspect-portrait { aspect-ratio: 3 / 4; }

/* Print hidden */
@media print { .no-print { display: none !important; } }

/* Empty state placeholder */
.empty-state {
	padding: var(--space-7);
	border: 1px dashed var(--border-default);
	border-radius: var(--radius-lg);
	text-align: center;
	color: var(--text-3);
	font-size: var(--text-sm);
	font-family: var(--font-mono);
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
}