/*
 * LAYOUT — contenedores, secciones y grids genéricos.
 * Fluido primero: los breakpoints solo reorganizan grids.
 */

.container {
	width: min(100% - 2 * var(--gutter), var(--width-site));
	margin-inline: auto;
}

.container--narrow {
	width: min(100% - 2 * var(--gutter), var(--width-prose));
}

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

.section--compact {
	padding-block: var(--space-8);
}

.section--surface {
	background-color: var(--color-surface);
}

/* Grid de cards: auto-fit, sin media queries. */
.grid-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
	gap: var(--space-5);
	/* Contexto para container queries de las cards. */
	container-type: inline-size;
}

/* Utilidades de composición */
.stack > * + * {
	margin-block-start: var(--space-4);
}

.cluster {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	align-items: center;
}

/* Cabecera de archivo */
.archive-header {
	max-width: var(--width-prose);
	margin-block-end: var(--space-7);
}

.archive-header__description {
	margin-block-start: var(--space-3);
	color: var(--color-ink-soft);
}

.archive-header__search {
	margin-block-start: var(--space-5);
	max-width: 28rem;
}

/* Imagen destacada de single */
.single-thumbnail {
	margin: 0;
}

.single-thumbnail img {
	width: 100%;
	border-radius: var(--radius-lg);
}

.single-footer {
	padding-block-end: var(--space-8);
}

.single-tags {
	color: var(--color-ink-soft);
	font-size: var(--text-sm);
}

.post-nav {
	display: flex;
	justify-content: space-between;
	gap: var(--space-5);
	margin-block-start: var(--space-6);
	padding-block-start: var(--space-5);
	border-block-start: 1px solid var(--color-line);
}

.post-nav__next {
	text-align: end;
}

/* 404 */
.error-404 {
	text-align: center;
}

.error-404__code {
	font-size: var(--text-display);
	font-weight: var(--weight-bold);
	color: var(--color-line);
	line-height: 1;
}

.error-404__title {
	margin-block-start: var(--space-4);
}

.error-404__text {
	margin-block-start: var(--space-3);
	color: var(--color-ink-soft);
}

.error-404__actions {
	margin-block-start: var(--space-6);
}

.error-404__search {
	max-width: 28rem;
	margin: var(--space-7) auto 0;
}

/* Estado vacío */
.content-none {
	max-width: 28rem;
}

.content-none__text {
	margin-block: var(--space-3) var(--space-5);
	color: var(--color-ink-soft);
}

/* Migas de pan */
.breadcrumbs {
	margin-block-end: var(--space-4);
	font-size: var(--text-sm);
	color: var(--color-ink-soft);
}

.breadcrumbs__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

.breadcrumbs__item + .breadcrumbs__item::before {
	content: '·';
	color: var(--color-accent);
	font-weight: var(--weight-bold);
	margin-inline-end: var(--space-2);
}

/* Paginación: la página actual lleva el punto de la marca. */
.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	border-radius: var(--radius-sm);
	text-decoration: none;
	position: relative;
}

.pagination .page-numbers:hover:not(.current) {
	background-color: var(--color-surface);
}

.pagination .page-numbers.current {
	font-weight: var(--weight-bold);
}

.pagination .page-numbers.current::after {
	content: '';
	position: absolute;
	inset-block-end: 5px;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background-color: var(--color-accent);
}