/* ══════════════════════════════════════════════════════════════
   ACIEX — layout.css
   Container, grids e utilitários de espaçamento.
   ══════════════════════════════════════════════════════════════ */

.container {
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-pad);
}

@media (min-width: 768px) {
	.container {
		padding-inline: 2rem; /* 32px tablet+ */
	}
}

/* ---- Espaçamento vertical de seção ---- */
.section {
	padding-block: var(--space-16); /* 64px mobile */
}

@media (min-width: 768px) {
	.section {
		padding-block: var(--space-24); /* 96px desktop */
	}
}

/* ---- Grids ---- */
.grid {
	display: grid;
	gap: var(--space-6);
}

.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
.grid-4 { grid-template-columns: repeat(2, 1fr); }

@media (min-width: 640px) {
	.grid-2 { grid-template-columns: repeat(2, 1fr); }
	.grid-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
	.grid-3 { grid-template-columns: repeat(3, 1fr); }
	.grid-4 { grid-template-columns: repeat(4, 1fr); }
}

/* ---- Auto-fill responsivo (cards) ---- */
.grid-auto {
	display: grid;
	gap: var(--space-6);
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

/* ---- Utilitários simples ---- */
.text-center { text-align: center; }
.is-hidden { display: none !important; }