/*
 * La Galga Gris · layout.css
 * Containers, grids genéricos, section rhythms. Sin componentes específicos (esos en components.css o por item).
 */

/* ── Containers ─────────────────────────────────────────────────── */
.lgg-container {
	width: 100%;
	max-width: var(--container-default);
	margin-inline: auto;
	padding-inline: var(--container-pad-x);
}
.lgg-container--narrow { max-width: var(--container-narrow); }
.lgg-container--wide   { max-width: var(--container-wide); }
.lgg-container--bleed  { max-width: 100%; padding-inline: 0; }

/* ── Section rhythm ─────────────────────────────────────────────── */
.lgg-section {
	padding-block: clamp(3rem, 8vw, 6rem);
}
.lgg-section--lg { padding-block: clamp(4rem, 10vw, 8rem); }
.lgg-section--sm { padding-block: clamp(2rem, 5vw, 3rem); }
.lgg-section--flush-top { padding-top: 0; }
.lgg-section--flush-bottom { padding-bottom: 0; }

.lgg-section--inverse {
	background: var(--color-bg-inverse);
	color: var(--color-ink-inverse);
}
.lgg-section--inverse :is(h1, h2, h3, h4, h5, h6) { color: var(--color-ink-inverse); }
.lgg-section--inverse .lgg-prose { color: color-mix(in srgb, var(--color-ink-inverse) 80%, transparent); }
.lgg-section--inverse .lgg-eyebrow { color: var(--color-accent); }

.lgg-section--subtle { background: var(--color-bg-subtle); }

/* ── Section headers ────────────────────────────────────────────── */
.lgg-section__head {
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
	margin-bottom: var(--sp-7);
	max-width: 56ch;
}
.lgg-section__head--center {
	margin-inline: auto;
	text-align: center;
	align-items: center;
}

/* ── Grids ──────────────────────────────────────────────────────── */
.lgg-grid {
	display: grid;
	gap: var(--sp-5);
}
.lgg-grid--2 { grid-template-columns: 1fr; }
.lgg-grid--3 { grid-template-columns: 1fr; }
.lgg-grid--4 { grid-template-columns: 1fr; }
.lgg-grid--auto { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

@media (min-width: 640px) {
	.lgg-grid--2 { grid-template-columns: repeat(2, 1fr); }
	.lgg-grid--3 { grid-template-columns: repeat(2, 1fr); }
	.lgg-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
	.lgg-grid--3 { grid-template-columns: repeat(3, 1fr); }
	.lgg-grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* Split editorial 60/40 (hero, materials, etc.) */
.lgg-split {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(2rem, 6vw, 5rem);
	align-items: center;
}
@media (min-width: 960px) {
	.lgg-split { grid-template-columns: 1.4fr 1fr; }
	.lgg-split--reverse { grid-template-columns: 1fr 1.4fr; }
	.lgg-split--equal   { grid-template-columns: 1fr 1fr; }
}
.lgg-split__content { display: flex; flex-direction: column; gap: var(--sp-5); }

/* ── Stacks ─────────────────────────────────────────────────────── */
.lgg-stack { display: flex; flex-direction: column; gap: var(--sp-4); }
.lgg-stack--sm { gap: var(--sp-2); }
.lgg-stack--lg { gap: var(--sp-6); }

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

/* ── Aspect ratios (image-slot frames) ──────────────────────────── */
.lgg-ratio { position: relative; overflow: hidden; background: var(--color-bg-subtle); border-radius: var(--radius-md); }
.lgg-ratio > img, .lgg-ratio > video, .lgg-ratio > picture > img {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
}
.lgg-ratio--4x5  { aspect-ratio: 4 / 5; }
.lgg-ratio--3x4  { aspect-ratio: 3 / 4; }
.lgg-ratio--1x1  { aspect-ratio: 1 / 1; }
.lgg-ratio--16x9 { aspect-ratio: 16 / 9; }
.lgg-ratio--21x9 { aspect-ratio: 21 / 9; }

/* ── Helpers de visibilidad por breakpoint ───────────────────────── */
.lgg-hide-mobile { display: none; }
.lgg-hide-desktop { display: initial; }
@media (min-width: 768px) {
	.lgg-hide-mobile { display: initial; }
	.lgg-hide-desktop { display: none; }
}