/**
 * Containers, grids and section rhythm.
 */

/* ------------------------------------------------------- containers */

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

.yka-container--wide {
	max-width: var(--yka-width-wide);
}

.yka-container--narrow {
	max-width: var(--yka-width-narrow);
}

.yka-main {
	display: block;
	min-height: 50vh;
}

/* --------------------------------------------------------- sections */

.yka-section {
	padding-block: var(--yka-section-gap);
}

.yka-section--tight {
	padding-block: clamp(var(--yka-space-6), 4vw, var(--yka-space-7));
}

.yka-section--cream {
	background: var(--yka-bg-alt);
}

.yka-section--ink {
	background: var(--yka-bg-invert);
	color: var(--yka-text-invert);
}

.yka-section--ink h1,
.yka-section--ink h2,
.yka-section--ink h3 {
	color: var(--yka-white);
}

.yka-section--ink a {
	color: var(--yka-white);
}

/* Section headings carry a short gold rule instead of a decorative icon. */
.yka-section-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--yka-space-3) var(--yka-space-5);
	margin-bottom: var(--yka-space-6);
	padding-top: var(--yka-space-3);
	border-top: 2px solid var(--yka-green-900);
}

.yka-section-head__title {
	margin: 0;
	font-size: var(--yka-text-xl);
	line-height: var(--yka-leading-snug);
}

.yka-section-head__note {
	margin: 0;
	max-width: 46ch;
	font-size: var(--yka-text-sm);
	color: var(--yka-text-muted);
}

.yka-section--ink .yka-section-head {
	border-top-color: var(--yka-gold);
}

.yka-section--ink .yka-section-head__note {
	color: #b9c9bf;
}

.yka-section-head__link {
	font-size: var(--yka-text-sm);
	font-weight: var(--yka-weight-semibold);
	letter-spacing: var(--yka-tracking-label);
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
}

.yka-section-head__link::after {
	content: " →";
}

.yka-section-head__link:hover {
	text-decoration: underline;
}

/* ------------------------------------------------------------ grids */

.yka-grid {
	display: grid;
	gap: var(--yka-space-6) var(--yka-space-5);
}

.yka-grid--2 {
	grid-template-columns: 1fr;
}

.yka-grid--3 {
	grid-template-columns: 1fr;
}

.yka-grid--4 {
	grid-template-columns: 1fr;
}

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

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

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

/*
 * The newsroom grid: one lead story, a stack of secondary stories, and a
 * ruled column of headlines. Deliberately asymmetric — a row of identical
 * cards would read as a template, not as a newsroom.
 */
.yka-newsgrid {
	display: grid;
	gap: var(--yka-space-6);
	grid-template-columns: 1fr;
}

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

	.yka-newsgrid__lead {
		grid-column: 1 / -1;
	}
}

@media (min-width: 1040px) {
	.yka-newsgrid {
		grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr) minmax(0, 0.85fr);
		column-gap: var(--yka-space-7);
	}

	.yka-newsgrid__lead {
		grid-column: 1;
		grid-row: 1;
	}

	.yka-newsgrid__secondary {
		grid-column: 2;
		grid-row: 1;
		display: flex;
		flex-direction: column;
		gap: var(--yka-space-6);
	}

	/* A hairline divides the headline column, like a printed bulletin. */
	.yka-newsgrid__headlines {
		grid-column: 3;
		grid-row: 1;
		padding-left: var(--yka-space-6);
		border-left: var(--yka-border-width) solid var(--yka-rule);
	}
}

.yka-newsgrid__secondary {
	display: flex;
	flex-direction: column;
	gap: var(--yka-space-6);
}

/* ------------------------------------------------- article + sidebar */

.yka-article-layout {
	display: grid;
	gap: var(--yka-space-7);
	grid-template-columns: 1fr;
}

@media (min-width: 1040px) {
	.yka-article-layout {
		grid-template-columns: minmax(0, 1fr) 280px;
		column-gap: var(--yka-space-8);
		align-items: start;
	}

	.yka-article-layout__aside {
		position: sticky;
		top: calc(var(--yka-header-height) + var(--yka-admin-bar, 0px) + var(--yka-space-5));
	}
}

/* ------------------------------------------------------- prose width */

.yka-prose {
	max-width: var(--yka-width-prose);
}

/* ---------------------------------------------------------- full bleed */

.yka-bleed {
	width: 100vw;
	max-width: 100vw;
	margin-left: 50%;
	transform: translateX(-50%);
}

/* ----------------------------------------------------------- stacks */

.yka-stack > * + * {
	margin-top: var(--yka-space-4);
}

.yka-stack--loose > * + * {
	margin-top: var(--yka-space-6);
}

.yka-divided-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.yka-divided-list > li {
	margin: 0;
	padding-block: var(--yka-space-4);
	border-top: var(--yka-border-width) solid var(--yka-rule);
}

.yka-divided-list > li:first-child {
	padding-top: 0;
	border-top: 0;
}

.yka-divided-list > li:last-child {
	padding-bottom: 0;
}