/* ==========================================================================
   RESPONSIVE + IMPRESIÓN
   --------------------------------------------------------------------------
   El CSS es "mobile first": todo lo anterior es para móvil y aquí se
   añaden los cambios para pantallas más grandes.

   Puntos de corte (si los cambias, actualiza también header.css y
   utilities.css, y el comentario de variables.css):
     48em  = 768px  → tablet
     64em  = 1024px → escritorio
   El menú móvil → escritorio se cambia en header.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   TABLET (≥ 768px)
   -------------------------------------------------------------------------- */
@media (min-width: 48em) {
	:root {
		--gutter: var(--space-6); /* Más margen lateral */
	}

	/* Anterior / Siguiente en dos columnas */
	.post-nav .nav-links {
		grid-template-columns: 1fr 1fr;
	}

	.post-nav .nav-next {
		grid-column: 2;
	}
}

@media (max-width: 63.99em) {
	.front-page .sidebar {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   ESCRITORIO (≥ 1024px)
   -------------------------------------------------------------------------- */
@media (min-width: 64em) {
	:root {
		--section-gap: var(--space-8); /* Más aire entre bloques */
	}

	/* Contenido + sidebar a dos columnas.
	   Solo si la sidebar tiene widgets (si no, el contenido ocupa todo).
	   Para poner la sidebar a la izquierda: grid-template-columns: var(--sidebar-width) 1fr
	   y añade "order: -1" a .layout__sidebar. */
	.layout--sidebar:has(.layout__sidebar) {
		grid-template-columns: minmax(0, 1fr) var(--sidebar-width);
	}

	/* Sidebar pegada al hacer scroll */
	.layout__sidebar {
		position: sticky;
		top: calc(var(--header-height) + var(--space-5));
		align-self: start;
	}
}

/* --------------------------------------------------------------------------
   REDUCIR ANIMACIONES (preferencia del sistema del usuario)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: 0.01ms;
		animation-duration: 0.01ms;
	}
}

/* --------------------------------------------------------------------------
   IMPRESIÓN
   Quita navegación, sidebar, comentarios y colores para imprimir solo el texto.
   -------------------------------------------------------------------------- */
@media print {
	:root {
		--color-text: #000;
		--color-heading: #000;
		--color-bg: #fff;
	}

	.site-header,
	.site-footer,
	.sidebar,
	.menu-toggle,
	.post-nav,
	.pagination,
	.comments,
	.search-form,
	.skip-link {
		display: none;
	}

	body {
		font-size: 12pt;
		line-height: 1.5;
	}

	.site-main {
		padding: 0;
	}

	.container {
		max-width: none;
		padding: 0;
	}

	.layout--sidebar:has(.layout__sidebar) {
		grid-template-columns: 1fr;
	}

	a {
		color: #000;
	}

	/* Muestra la URL de los enlaces del contenido */
	.entry__content a[href^="http"]::after {
		content: " (" attr(href) ")";
		font-size: 0.85em;
	}

	img,
	pre,
	blockquote,
	table {
		page-break-inside: avoid;
	}

	h2,
	h3 {
		page-break-after: avoid;
	}
}