/* ==========================================================================
   LAYOUT (ESTRUCTURA)
   --------------------------------------------------------------------------
   Contenedores y rejillas principales. En móvil todo va en una columna;
   las columnas de escritorio están en responsive.css.
   ========================================================================== */

/* Envoltorio general: empuja el footer abajo aunque haya poco contenido */
.site {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.site-main {
	flex: 1;
	padding-block: var(--section-gap);
}

/* ---------- Contenedor ----------
   .container           → ancho máximo de la web (--container-width)
   .container--narrow   → ancho de lectura (--content-width) */
.container {
	width: 100%;
	max-width: var(--container-width);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.container--narrow {
	max-width: calc(var(--content-width) + var(--gutter) * 2);
}

/* ---------- Contenido + sidebar ----------
   Móvil: una columna. Escritorio: ver responsive.css */
.layout {
	display: grid;
	gap: var(--section-gap);
}

.layout__content {
	min-width: 0; /* Evita que contenido ancho (tablas, código) rompa la rejilla */
}

.site-layout {
	max-width: var(--container-width);
	margin: 0 auto;
	padding: var(--section-gap) var(--gutter);
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-6);
}

.site-layout__main {
	min-width: 0;
}

@media (min-width: 64em) {
	.site-layout {
		grid-template-columns: minmax(0, 1fr) var(--sidebar-width);
		gap: var(--space-7);
	}

	.sidebar {
		position: sticky;
		top: calc(var(--header-height) + var(--space-4));
		align-self: start;
	}
}

/* ---------- Rejilla de tarjetas (listados de entradas) ----------
   Se adapta sola: tantas columnas como quepan de mínimo 260px.
   Cambia 260px para hacer las tarjetas más anchas o estrechas. */
.post-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
	gap: var(--space-5);
}

/* ---------- Cabecera de página (títulos de archivo, búsqueda...) ---------- */
.page-header {
	margin-bottom: var(--space-6);
}

.page-header__description {
	margin-top: var(--space-2);
	color: var(--color-text-muted);
}

/* ---------- Hero de la portada ---------- */
.hero {
	margin-top: calc(var(--section-gap) * -1); /* Pegado a la cabecera */
	margin-bottom: var(--section-gap);
	padding-block: var(--space-8);
	background-color: var(--color-bg-alt);
	text-align: center;
}

.hero__title {
	font-size: var(--fs-2xl);
}

.hero__text {
	max-width: 60ch;
	margin: var(--space-3) auto 0;
	font-size: var(--fs-md);
	color: var(--color-text-muted);
}