/* ═══════════════════════════════════════════════════════════════
   LAYOUT
   ═══════════════════════════════════════════════════════════════ */

/* ── Container ── */
.container {
	max-width: var(--no-grid-max);
	margin-inline: auto;
	padding-inline: var(--s4);
}

.container--wide   { max-width: var(--no-grid-wide); }
.container--narrow { max-width: var(--no-grid-narrow); }

/* ── Content + sidebar ── */
.content-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--s6);
}

@media (min-width: 900px) {
	.content-grid { grid-template-columns: 1fr var(--no-sidebar); }
}

/* ── Story block: 7fr / 5fr ── */
.story-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--s5);
}

@media (min-width: 600px) {
	.story-grid { grid-template-columns: 7fr 5fr; }
}

/* ── Card grid ── */
.card-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--s5);
}

@media (min-width: 600px) {
	.card-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
	.card-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ── Headline grid (NYT dense 3-col) ── */
.headline-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
}

@media (min-width: 600px) {
	.headline-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
	.headline-grid { grid-template-columns: repeat(3, 1fr); }
}

.headline-grid > * {
	padding: var(--s4);
	border-bottom: 1px solid var(--no-rule);
}

@media (min-width: 600px) {
	.headline-grid > * {
		border-right: 1px solid var(--no-rule);
	}
	.headline-grid > *:nth-child(2n) { border-right: none; }
}

@media (min-width: 900px) {
	.headline-grid > *:nth-child(2n) { border-right: 1px solid var(--no-rule); }
	.headline-grid > *:nth-child(3n) { border-right: none; }
}

/* ── Dividers (NYT-style hairline rules) ── */
.rule {
	border: none;
	border-top: 1px solid var(--no-rule);
}

.rule--bold {
	border-top: 2px solid var(--no-rule-bold);
}

.rule--thick {
	border-top: 4px solid var(--no-rule-bold);
}

.rule--accent {
	border-top: 3px solid var(--no-brand);
}

/* ── Stack utilities ── */
.stack > * + *       { margin-top: var(--s4); }
.stack--tight > * + * { margin-top: var(--s2); }
.stack--loose > * + * { margin-top: var(--s6); }

/* ── Section spacing ── */
.section {
	padding-block: var(--s7);
}

.section + .section {
	border-top: 1px solid var(--no-rule);
}