/*
 * layout.css — Contenedores, secciones y grillas.
 *
 * Regla: el espaciado ENTRE secciones se define acá y en un solo lugar
 * (--esp-seccion). Ningún componente pone su propio margen vertical externo.
 * Es lo que evita que después haya que andar cazando márgenes que se suman.
 */

/* -------------------------------------------------------------------------
 * Contenedor
 * ---------------------------------------------------------------------- */

.contenedor {
	width: 100%;
	max-width: var(--ancho-contenido);
	margin-inline: auto;
	padding-inline: var(--margen-lateral);
}

/* El enlace de salto lleva el foco a #contenido, que arranca justo debajo de una
   cabecera sticky de 64px: sin este respiro, el destino queda tapado por ella.
   Se nota sobre todo en la tienda, donde la sección ya no tiene aire arriba. */
#contenido {
	scroll-margin-block-start: var(--header-alto);
}

/* Para piezas que sangran a ancho completo dentro de un contenedor */
.ancho-completo {
	width: 100vw;
	margin-inline: calc(50% - 50vw);
}

/* -------------------------------------------------------------------------
 * Secciones
 * ---------------------------------------------------------------------- */

.seccion {
	padding-block: var(--esp-seccion);
}

/* Secciones consecutivas: una sola separación, no la suma de dos */
.seccion + .seccion {
	padding-block-start: 0;
}

/* El título de sección respira antes de su contenido. Con 24px el titular en
   Bodoni quedaba pegado al carrusel y las dos cosas se leían como un bloque. */
.seccion__cabecera {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--esp-2xs) var(--esp-sm);
	margin-block-end: var(--esp-lg);
}

.seccion__titulo {
	margin: 0;
}

.seccion__acciones {
	display: flex;
	align-items: center;
	gap: var(--esp-2xs);
	margin-inline-start: auto;
}

/* -------------------------------------------------------------------------
 * Grilla de productos
 *
 * Dos columnas en mobile. Una sola columna en un teléfono obliga a scrollear
 * el doble para ver lo mismo y hace que el catálogo parezca vacío.
 *
 * ul.products y no .products a secas: en la ficha, WooCommerce le pone la clase
 * "products" también al <section class="related products"> que envuelve al
 * título y a la lista. Con el selector suelto esa sección se volvía grilla de
 * cuatro columnas y el h2 "Productos relacionados" caía adentro de una celda.
 * ---------------------------------------------------------------------- */

.grilla-productos,
ul.products {
	display: grid;
	grid-template-columns: repeat(var(--grilla-columnas), minmax(0, 1fr));
	gap: var(--esp-md) var(--esp-sm);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* -------------------------------------------------------------------------
 * Ficha de producto
 *
 * Arranca con las migas, que ya son texto chico: el respiro completo de una
 * sección de la home la deja flotando lejos del encabezado.
 * ---------------------------------------------------------------------- */

.seccion--ficha {
	padding-block-start: var(--esp-md);
}

/* -------------------------------------------------------------------------
 * Tienda y categorías
 *
 * Sin aire arriba: la primera pieza es la banda negra del título y tiene que
 * arrancar pegada a la cabecera. El respiro lo pone la banda, por dentro y más
 * chico. Antes eran 48px en teléfono, 64 desde 768 y 96 desde 1440 de blanco
 * antes de la primera palabra: en un monitor grande, un cuarto de pantalla
 * vacío por encima de "Inicio".
 *
 * Solo el de arriba. El de abajo separa la grilla del pie y se queda.
 * ---------------------------------------------------------------------- */

.seccion--tienda {
	padding-block-start: 0;
}

/* -------------------------------------------------------------------------
 * Portada
 * ---------------------------------------------------------------------- */

.portada > .seccion:first-of-type {
	padding-block-start: var(--esp-lg);
}

/* -------------------------------------------------------------------------
 * Listado de entradas
 * ---------------------------------------------------------------------- */

.lista-entradas {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--esp-lg);
}

.vacio {
	display: grid;
	justify-items: start;
	gap: var(--esp-sm);
	max-width: 40ch;
	padding-block: var(--esp-xl);
}

/* -------------------------------------------------------------------------
 * Saltos
 * ---------------------------------------------------------------------- */

@media (min-width: 36em) {   /* 576px */

	.lista-entradas {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 48em) {   /* 768px */

	.seccion__cabecera {
		margin-block-end: var(--esp-xl);
	}

	.grilla-productos,
	ul.products {
		gap: var(--esp-lg) var(--esp-md);
	}
}

@media (min-width: 64em) {   /* 1024px */

	.lista-entradas {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}