/**
 * article.css — single post and static page.
 *
 * Body copy is the one place this theme uses a serif and a wider measure:
 * everything else is dense UI, but long-form reading needs room.
 */

.ils-main--single,
.ils-main--page {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--ils-sp-6);
	padding-top: var(--ils-sp-5);
	padding-bottom: var(--ils-sp-7);
}

.ils-article,
.ils-page {
	min-width: 0;
}

/* ---------- Header ---------- */

.ils-article__header {
	margin-bottom: var(--ils-sp-5);
}

.ils-article__title,
.ils-page__title {
	margin-bottom: var(--ils-sp-3);
	font-size: var(--ils-fs-xl);
	line-height: var(--ils-lh-tight);
}

.ils-article__deck {
	margin-bottom: var(--ils-sp-4);
	color: var(--ils-gray-600);
	font-size: var(--ils-fs-md);
	line-height: var(--ils-lh-normal);
}

/* ---------- Byline ---------- */

.ils-article-meta {
	display: flex;
	gap: var(--ils-sp-4);
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	padding: var(--ils-sp-3) 0;
	border-top: var(--ils-border-hairline);
	border-bottom: var(--ils-border-hairline);
	font-size: var(--ils-fs-sm);
}

.ils-article-meta__byline {
	display: flex;
	gap: var(--ils-sp-2);
	align-items: center;
	flex-wrap: wrap;
	color: var(--ils-gray-600);
}

.ils-article-meta__author a {
	font-weight: 700;
}

.ils-article-meta__updated {
	color: var(--ils-red);
	font-weight: 600;
}

.ils-article-meta__sep {
	color: var(--ils-gray-300);
}

.ils-article-meta__share {
	display: flex;
	gap: var(--ils-sp-2);
	align-items: center;
}

.ils-article-meta__share-label {
	color: var(--ils-fg-muted);
	font-size: var(--ils-fs-xs);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.ils-share {
	display: grid;
	place-items: center;
	width: 2rem;
	height: 2rem;
	border: var(--ils-border-hairline);
	color: var(--ils-gray-600);
}

.ils-share:hover {
	border-color: var(--ils-red);
	color: var(--ils-red);
}

/* ---------- Lead image ---------- */

.ils-article__lead,
.ils-page__lead {
	margin: 0 0 var(--ils-sp-5);
}

.ils-article__lead-caption {
	padding-top: var(--ils-sp-2);
	color: var(--ils-fg-muted);
	font-size: var(--ils-fs-xs);
	line-height: var(--ils-lh-normal);
}

.ils-article__caption-credit {
	display: inline-block;
	margin-left: var(--ils-sp-2);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

/* ---------- Body copy ---------- */

.ils-article__body,
.ils-page__body {
	max-width: 42rem;
	font-family: var(--ils-font-serif);
	font-size: var(--ils-fs-md);
	line-height: var(--ils-lh-relaxed);
}

.ils-article__body p,
.ils-page__body p {
	margin: 0 0 var(--ils-sp-5);
}

.ils-article__body h2,
.ils-article__body h3 {
	margin: var(--ils-sp-6) 0 var(--ils-sp-3);
	font-family: var(--ils-font-sans);
}

.ils-article__body h2 { font-size: var(--ils-fs-lg); }
.ils-article__body h3 { font-size: var(--ils-fs-md); }

.ils-article__body a {
	color: var(--ils-red);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.ils-article__body blockquote {
	margin: var(--ils-sp-5) 0;
	padding-left: var(--ils-sp-4);
	border-left: var(--ils-accent-line);
	color: var(--ils-gray-700);
	font-style: italic;
}

.ils-article__body ul,
.ils-article__body ol {
	margin: 0 0 var(--ils-sp-5) var(--ils-sp-5);
}

.ils-article__body li {
	list-style: disc;
	margin-bottom: var(--ils-sp-2);
}

.ils-article__body ol li {
	list-style: decimal;
}

.ils-article__body figure {
	margin: var(--ils-sp-5) 0;
}

.ils-article__body figcaption {
	padding-top: var(--ils-sp-2);
	color: var(--ils-fg-muted);
	font-family: var(--ils-font-sans);
	font-size: var(--ils-fs-xs);
}

/* ---------- Tags ---------- */

.ils-article__tags {
	display: flex;
	gap: var(--ils-sp-3);
	align-items: center;
	flex-wrap: wrap;
	margin-top: var(--ils-sp-6);
	padding-top: var(--ils-sp-4);
	border-top: var(--ils-border-hairline);
}

.ils-article__tags-label {
	color: var(--ils-fg-muted);
	font-size: var(--ils-fs-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.ils-article__tag-list {
	display: flex;
	gap: var(--ils-sp-2);
	flex-wrap: wrap;
}

.ils-article__tag-list a {
	display: inline-block;
	padding: var(--ils-sp-1) var(--ils-sp-3);
	background: var(--ils-gray-100);
	font-size: var(--ils-fs-xs);
}

.ils-article__tag-list a:hover {
	background: var(--ils-red);
	color: var(--ils-white);
	text-decoration: none;
}

/* ---------- Related ---------- */

.ils-related {
	grid-column: 1 / -1;
	margin-top: var(--ils-sp-7);
}

.ils-related__heading {
	margin-bottom: var(--ils-sp-4);
	padding: var(--ils-sp-3) 0;
	border-top: var(--ils-accent-line);
	font-family: var(--ils-font-sans);
	font-size: var(--ils-fs-xs);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.ils-related__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--ils-sp-4);
}

/* ---------- Sidebar ---------- */

.ils-sidebar {
	min-width: 0;
}

.ils-widget {
	margin-bottom: var(--ils-sp-6);
}

.ils-widget__title,
.ils-sidebar-module__heading {
	margin-bottom: var(--ils-sp-3);
	padding: var(--ils-sp-3) 0;
	border-top: var(--ils-accent-line);
	font-family: var(--ils-font-sans);
	font-size: var(--ils-fs-xs);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.ils-sidebar-module__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ils-sidebar-module__item {
	display: grid;
	grid-template-columns: 80px 1fr;
	gap: var(--ils-sp-3);
	padding: var(--ils-sp-3) 0;
	border-bottom: var(--ils-border-hairline);
}

.ils-sidebar-module__item--no-thumb {
	grid-template-columns: 1fr;
}

.ils-sidebar-module__item:last-child {
	border-bottom: 0;
}

.ils-sidebar-module__thumb {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.ils-sidebar-module__headline {
	font-size: var(--ils-fs-sm);
	line-height: var(--ils-lh-snug);
}

.ils-sidebar-module__time {
	display: block;
	margin-top: var(--ils-sp-1);
	color: var(--ils-fg-muted);
	font-size: var(--ils-fs-xs);
}

/* ---------- Sidebar tab switcher (ILS Story Module, type = tabs) ---------- */

.ils-tabs__list {
	display: flex;
	gap: var(--ils-sp-4);
	margin-bottom: var(--ils-sp-3);
	border-bottom: 1px solid var(--ils-rule);
}

.ils-tabs__tab {
	margin-bottom: -1px;
	padding: 0 0 var(--ils-sp-2);
	border: 0;
	border-bottom: 2px solid transparent;
	background: none;
	color: var(--ils-fg-muted);
	font-family: inherit;
	font-size: var(--ils-fs-sm);
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	cursor: pointer;
	transition: color var(--ils-transition);
}

.ils-tabs__tab:hover {
	color: var(--ils-fg);
}

.ils-tabs__tab[aria-selected="true"] {
	border-bottom-color: var(--ils-red);
	color: var(--ils-fg);
}

/*
 * The panel heading is suppressed: the tab label already names the category, so
 * repeating it inside the panel would announce it twice to a screen reader.
 */
.ils-tabs__panel .ils-sidebar-module__heading {
	display: none;
}

/* ---------- Tablet ---------- */

@media (min-width: 48em) {
	.ils-article__title,
	.ils-page__title {
		font-size: var(--ils-fs-2xl);
	}

	.ils-related__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ---------- Desktop ---------- */

@media (min-width: 64em) {
	.ils-main--single,
	.ils-main--page {
		grid-template-columns: minmax(0, 1fr) var(--ils-sidebar-width);
	}

	/*
	 * The article column carries its own max measure. Body copy set across a
	 * full 980px column is unreadable regardless of how wide the screen is —
	 * around 70 characters per line is the limit, and this is what enforces it
	 * without narrowing the lead image or the headline.
	 */
	.ils-article-column {
		min-width: 0;
	}

	.ils-article__body {
		max-width: 44rem;
	}

	.ils-article__title {
		font-size: var(--ils-fs-3xl);
	}

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