/* =========================================================================
   Mathilde — layout.css
   Containers, grid system, section rhythm, the post+sidebar shell.
   ========================================================================= */

.container {
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.container--wide { max-width: var(--container-wide); }
.container--narrow { max-width: var(--container-narrow); }
.container--flush { padding-inline: 0; }

/* Vertical section rhythm */
.section {
	padding-block: var(--space-9);
}

.section--tight { padding-block: var(--space-7); }
.section--cream { background: var(--c-cream); }
.section--blush { background: var(--c-blush); }
.section--surface-alt { background: var(--c-surface-alt); }

.section__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-4);
	margin-bottom: var(--space-6);
}

.section__head .m-link-all {
	font-family: var(--font-eyebrow);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--c-text-soft);
	white-space: nowrap;
}

.section__head .m-link-all:hover { color: var(--c-accent); }

/* Generic responsive auto-grid */
.grid {
	display: grid;
	gap: var(--gutter);
}

.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--5 { grid-template-columns: repeat(5, 1fr); }

.grid--auto {
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

/* Archive grid: 3-up within the content column, then degrades gracefully */
.archive-grid { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 1200px) { .archive-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .archive-grid { grid-template-columns: 1fr; } }

/* Main shell: content + sticky sidebar (archive & single) */
.shell {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	gap: var(--space-8);
	align-items: start;
}

.shell--narrow-content {
	grid-template-columns: minmax(0, 1fr) 360px;
}

.shell__content { min-width: 0; }

.shell__sidebar {
	position: sticky;
	top: calc(var(--header-h) + 20px);
}

/* Single post uses a centered article with optional sticky share rail */
.article-shell {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 360px;
	gap: var(--space-8);
	align-items: start;
}

.article-rail {
	position: sticky;
	top: calc(var(--header-h) + 20px);
}

/* Full-bleed helper */
.full-bleed {
	width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
}

/* Site wrapper to push footer down */
.site {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.site-main {
	flex: 1 0 auto;
}

/* A horizontal scroller used by the post sliders */
.h-scroll {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(220px, 1fr);
	gap: var(--gutter);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	padding-bottom: var(--space-2);
}

.h-scroll::-webkit-scrollbar { display: none; }
.h-scroll > * { scroll-snap-align: start; }

/* When used as a 5-up slider on desktop */
.h-scroll--5 { grid-auto-columns: calc((100% - 4 * var(--gutter)) / 5); }
.h-scroll--4 { grid-auto-columns: calc((100% - 3 * var(--gutter)) / 4); }