/* =================================================================
   sitemap.css — page-sitemap.php (Template Name: Sitemap).
   Listado automatizado (dia_sitemap_sections()) por columnas, reusa .hero-title/.hero-desc
   (base.css) para el hero y .label-section-like para los headings de columna — mismo patrón de
   wrap full-bleed que legal.css/contact.css (§12.41).
   Breakpoint estándar 80rem (§12).
   ================================================================= */

@layer views {

	.sitemap-page {
		padding-inline: clamp(var(--space-m), 6vw, 7.5rem);
	}
	@media (width >= 80rem) {
		.sitemap-page { padding-inline: 0; }
	}
	.sitemap-page__inner {
		max-width: var(--container);
		margin-inline: auto;
	}

	/* ---- Hero: mismo truco full-bleed de borde inferior que legal-hero/contact-hero. ---- */
	.sitemap-hero {
		position: relative;
		padding-block: 3rem;
	}
	.sitemap-hero::after {
		content: "";
		position: absolute;
		left: 50%; width: 100vw; margin-left: -50vw;
		bottom: 0;
		border-bottom: 1px solid #e5e5e5;
	}
	.sitemap-hero__inner {
		max-width: 586px;
	}
	.sitemap-hero__desc {
		margin-top: 16px;
		max-width: 585px;
	}
	@media (width < 48rem) {
		.sitemap-hero { padding-block: 1.5rem; }
	}

	/* ---- Columnas: 3 grids servidos por PHP (page-sitemap.php), uno visible a la vez por
	   breakpoint — NO un solo grid con CSS `columns`/reflow. Un agrupamiento de 4 columnas
	   (dia_sitemap_columns($sections, 4)) no cabe limpio en un grid de 3 en tablet: "Explore" caía
	   a una 2ª fila dejando huecos enormes debajo de columnas cortas — mismo bug que motivó dejar
	   de usar CSS `columns` (ver el docblock de dia_sitemap_columns() en helpers.php), reaparecido
	   en tablet (bug real reportado 2026-07-31 con screenshot). Cada breakpoint calcula su propio
	   agrupamiento balanceado (dia_sitemap_columns($sections, 4|3), o lista plana sin agrupar en
	   mobile) — display:none en los 2 grids que no aplican al viewport actual. */
	.sitemap-grid {
		padding-block: clamp(2.5rem, 2rem + 2vw, var(--space-xl));
	}
	.sitemap-grid--tablet,
	.sitemap-grid--mobile {
		display: none;
	}
	.sitemap-grid--desktop {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: var(--space-xl) var(--space-l);
	}
	@media (48rem <= width < 80rem) {
		.sitemap-grid--desktop { display: none; }
		.sitemap-grid--tablet {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: var(--space-xl) var(--space-l);
		}
	}
	@media (width < 48rem) {
		.sitemap-grid--desktop { display: none; }
		/* Sin columnas que agrupar (lista plana de dia_sitemap_sections(), sin
		   dia_sitemap_columns()) — sin `gap` a propósito: el espaciado entre bloques ya lo da el
		   margin/padding de .sitemap-section, un gap encima duplicaba el espacio (pedido explícito
		   2026-07-31). */
		.sitemap-grid--mobile { display: block; }
	}

	.sitemap-column {
		display: flex;
		flex-direction: column;
	}

	.sitemap-section {
		/* padding-bottom y margin-bottom AL MISMO valor a propósito — simetría visual del espacio
		   arriba/abajo del borde divisor (pedido explícito 2026-07-31; antes usaban --space-l/
		   --space-xl distintos y se veía asimétrico). */
		margin-bottom: var(--space-l);
		padding-bottom: var(--space-l);
		/* Mismo literal #e5e5e5 que legal.css/news.css/archive-*.css (§12) — divisor estándar del
		   tema, no un color propio de esta vista. Solo entre secciones de la MISMA columna — el
		   último bloque de cada columna (sin nada debajo en esa columna) no lo lleva. */
		border-bottom: 1px solid #e5e5e5;
	}
	.sitemap-section:last-child {
		margin-bottom: 0;
		padding-bottom: 0;
		border-bottom: none;
	}

	.sitemap-section__heading {
		margin: 0 0 var(--space-s);
		font-family: var(--font-sans);
		font-weight: 700;
		font-size: 14px;
		line-height: 20px;
		letter-spacing: .5px;
		text-transform: uppercase;
		color: var(--dia-color-text-primary, #121212);
	}
	.sitemap-section__list {
		display: flex;
		flex-direction: column;
		gap: var(--space-xs);
		margin: 0;
		padding: 0;
		list-style: none;
	}
	.sitemap-section__list a {
		font-family: var(--font-sans);
		font-size: 15px;
		line-height: 22px;
		color: var(--dia-color-text-primary, #121212);
		text-decoration: none;
	}
	.sitemap-section__list a:hover {
		color: var(--dia-color-brand-secondary, #3e8391);
		text-decoration: underline;
	}
}