/* ============================================================
   EVE Theme — Layout
   Container, grid, seções, wrappers estruturais.
   ============================================================ */

/* ── Container ───────────────────────────────────────────── */
.container {
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-px);
}

.container--wide {
	max-width: var(--container-wide);
}

.container--narrow {
	max-width: var(--container-narrow);
}

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

.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
.grid--4 { grid-template-columns: 1fr; }

@media (min-width: 768px) {
	.grid--2 { grid-template-columns: repeat(2, 1fr); }
	.grid--3 { grid-template-columns: repeat(2, 1fr); }
	.grid--4 { 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); }
}

/* ── Seção base ──────────────────────────────────────────── */
.section {
	padding-block: var(--section-py);
}

.section--lg {
	padding-block: var(--section-py-lg);
}

.section--sm {
	padding-block: clamp(2rem, 4vw, 3rem);
}

/* ── Fundos de seção ─────────────────────────────────────── */
.bg-white   { background-color: var(--color-white); }
.bg-alt     { background-color: var(--color-bg-alt); }
.bg-dark    { background-color: var(--color-bg-dark); }
.bg-primary { background-color: var(--color-bg-primary); }

/* ── Section Header ──────────────────────────────────────── */
.section-header {
	margin-bottom: var(--space-12);
	max-width: 640px;
}

.section-header--center {
	text-align: center;
	margin-inline: auto;
}

.section-header .eyebrow {
	margin-bottom: var(--space-3);
}

.section-title {
	font-family: var(--font-heading);
	font-size: clamp(1.75rem, 3.2vw, 2.5rem);
	font-weight: var(--font-bold);
	line-height: 1.15;
	letter-spacing: -0.025em;
	color: var(--color-text);
	margin-bottom: var(--space-4);
}

.section-subtitle {
	font-size: var(--text-lg);
	color: var(--color-text-muted);
	line-height: var(--leading-relaxed);
}

/* Versão clara (para seções escuras) */
.bg-dark .section-title,
.bg-primary .section-title {
	color: var(--color-white);
	font-weight: var(--font-extrabold);
}

.bg-dark .section-subtitle,
.bg-primary .section-subtitle {
	color: rgba(255,255,255,0.65);
}

/* ── Flex utilitários ────────────────────────────────────── */
.flex          { display: flex; }
.flex-center   { display: flex; align-items: center; justify-content: center; }
.flex-between  { display: flex; align-items: center; justify-content: space-between; }
.flex-col      { display: flex; flex-direction: column; }
.flex-wrap     { flex-wrap: wrap; }
.gap-4  { gap: var(--space-4); }
.gap-6  { gap: var(--space-6); }
.gap-8  { gap: var(--space-8); }

/* ── Divisor de seção com linha ─────────────────────────── */
.section-divider {
	height: 1px;
	background: linear-gradient(
		to right,
		transparent,
		var(--color-border) 20%,
		var(--color-border) 80%,
		transparent
	);
	margin-inline: auto;
	max-width: var(--container-max);
}

/* ── Wrapper para conteúdo de página ────────────────────── */
.site-wrapper {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

.site-content {
	flex: 1;
}

/* ── Inner de 2 colunas (conteúdo + sidebar) ────────────── */
.content-sidebar {
	display: grid;
	gap: var(--space-12);
}

@media (min-width: 1024px) {
	.content-sidebar {
		grid-template-columns: 1fr 320px;
		align-items: start;
	}
}

/* ── Imagem de destaque responsiva ───────────────────────── */
.aspect-video    { aspect-ratio: 16 / 9; overflow: hidden; }
.aspect-card     { aspect-ratio: 4 / 3;  overflow: hidden; }
.aspect-hero     { aspect-ratio: 21 / 9; overflow: hidden; }
.aspect-square   { aspect-ratio: 1 / 1;  overflow: hidden; }

.aspect-video img,
.aspect-card img,
.aspect-hero img,
.aspect-square img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}
