/*
 * La Galga Gris · section-categories-asymmetric-grid.css
 * Spacing y header decorations específicos del wrapper de categorías.
 * El grid en sí vive en category-card.css; aquí solo añadimos el contexto editorial.
 */

.lgg-categories-section {
	position: relative;
}

.lgg-categories-section__title {
	max-width: 22ch;
	margin: 0;
}
.lgg-categories-section__lead {
	max-width: 56ch;
	margin: 0;
}

.lgg-categories-section__cta {
	display: flex;
	justify-content: center;
	margin-top: var(--sp-6);
}

/* Marca de número decorativa en grandes pantallas */
@media (min-width: 1024px) {
	.lgg-categories-section::before {
		content: "04";
		position: absolute;
		top: clamp(2rem, 5vw, 3rem);
		right: var(--container-pad-x);
		font-family: var(--font-display);
		font-size: clamp(4rem, 8vw, 7rem);
		font-weight: var(--fw-medium);
		color: color-mix(in srgb, var(--color-accent) 18%, transparent);
		letter-spacing: -0.04em;
		line-height: 1;
		pointer-events: none;
		user-select: none;
	}
}

/* Refuerzo del grid asimétrico: aire entre cards y respiración con la siguiente sección */
.lgg-categories-section .lgg-ccard-grid {
	margin-top: var(--sp-6);
}
@media (min-width: 1024px) {
	.lgg-categories-section .lgg-ccard-grid { margin-top: var(--sp-7); }
}

/* En el primer item (lg) escalamos el padding interior para que respire */
.lgg-categories-section .lgg-ccard--lg .lgg-ccard__body {
	padding: clamp(1.25rem, 2.5vw, 2rem);
}