/*
 * News & Guides: the listing, the category pills, and the article itself.
 * Also carries the generic fallback (search results, 404) that index.php uses.
 *
 * Derived from the HILO tokens in base.css — the design bundle covers no
 * editorial pages.
 */

/* ---------------------------------------------------------------------
   Listing
   --------------------------------------------------------------------- */
.hl-journal__head {
	padding: clamp(28px, 4vw, 48px) 0 clamp(20px, 3vw, 32px);
	border-bottom: 1px solid var(--hl-line-2);
	background:
		radial-gradient(720px 380px at 20% 0%, rgba(23, 231, 220, 0.08), transparent 70%),
		var(--hl-black);
}

.hl-journal__heading {
	margin: 14px 0 0;
	font: 700 clamp(32px, 4.4vw, 54px)/1.02 var(--hl-font-head);
	text-transform: uppercase;
	letter-spacing: -0.01em;
}

.hl-journal__intro {
	margin: 16px 0 0;
	max-width: 62ch;
	font: 400 16px/1.65 var(--hl-font-body);
	color: var(--hl-body);
	text-wrap: pretty;
}

.hl-journal__filters { margin: 24px 0 0; }
.hl-journal__filters ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Shared with the Range filter bar in range.css; defined here too because a
   News page can load without range.css. Keep the two in step. */
.hl-pill {
	display: inline-block;
	padding: 8px 16px;
	border: 1px solid var(--hl-line-3);
	border-radius: 999px;
	font: 500 11px/1 var(--hl-font-mono);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--hl-body);
	transition: border-color 0.18s, color 0.18s;
}
.hl-pill:hover { border-color: var(--hl-cyan-border); color: #fff; }
.hl-pill.is-active {
	border-color: var(--hl-cyan-border-strong);
	background: var(--hl-cyan-wash);
	color: var(--hl-cyan);
}

/* padding-block, not the `padding` shorthand: this element also carries
   .hl-container, and the shorthand would reset its padding-inline to 0 —
   which is exactly what pushed the cards to the screen edge on a phone. */
.hl-journal__body { padding-block: clamp(28px, 4vw, 48px) clamp(48px, 6vw, 80px); }

.hl-journal__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
	gap: clamp(18px, 2.4vw, 28px);
}

.hl-journal__empty {
	font: 400 16px/1.6 var(--hl-font-body);
	color: var(--hl-body);
}
.hl-journal__empty a { color: var(--hl-cyan); }

/* ---------------------------------------------------------------------
   Article card
   --------------------------------------------------------------------- */
.hl-post-card {
	display: flex;
	flex-direction: column;
	min-width: 0;
	background: var(--hl-surface);
	border: 1px solid var(--hl-line-2);
	border-radius: var(--hl-radius-card);
	overflow: hidden;
	transition: border-color 0.18s;
}
.hl-post-card:hover { border-color: var(--hl-cyan-border); }

.hl-post-card__media {
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--hl-black-2);
}
.hl-post-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}
.hl-post-card:hover .hl-post-card__media img { transform: scale(1.03); }

.hl-post-card__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 20px;
}

.hl-post-card__cat { margin: 0; }

.hl-post-card__title {
	/* Headings inherit a browser margin; the flex gap already spaces these. */
	margin: 0;
	font: 600 19px/1.28 var(--hl-font-head);
}
.hl-post-card__title a {
	color: #fff;
	text-decoration: none;
}
.hl-post-card__title a:hover { color: var(--hl-cyan); }

.hl-post-card__date {
	font: 500 10px/1 var(--hl-font-mono);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--hl-muted);
}

.hl-post-card__excerpt {
	margin: 0;
	font: 400 14px/1.6 var(--hl-font-body);
	color: var(--hl-body);
	text-wrap: pretty;
}

/* ---------------------------------------------------------------------
   Article
   --------------------------------------------------------------------- */
/* Long-form prose needs a much narrower measure than the 1320px product grid.
   The header can run wider than the body — a headline is scanned, not read in
   lines — so the two are set separately. */
.hl-article__measure { max-width: 720px; }

.hl-article__head {
	padding: clamp(28px, 4vw, 48px) 0 clamp(20px, 3vw, 28px);
	background:
		radial-gradient(680px 340px at 18% 0%, rgba(23, 231, 220, 0.08), transparent 70%),
		var(--hl-black);
}

.hl-article__cat { margin: 16px 0 0; color: var(--hl-cyan); }

.hl-article__heading {
	margin: 12px 0 0;
	font: 700 clamp(28px, 3.6vw, 44px)/1.12 var(--hl-font-head);
	text-wrap: balance;
}

.hl-article__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 16px 0 0;
	font: 500 10px/1 var(--hl-font-mono);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--hl-muted);
}

.hl-article__figure { margin: clamp(20px, 3vw, 32px) auto 0; }
.hl-article__figure img {
	width: 100%;
	height: auto;
	border-radius: var(--hl-radius-card);
}

/* --- Body copy --- */
.hl-article__body {
	/* ch tracks the font, so the measure stays put if the type scale changes.
	   At 720px this ran to 85 characters a line, well past the 50-75 that is
	   comfortable to read. */
	max-width: 62ch;
	margin-top: clamp(24px, 3vw, 36px);
	padding-bottom: clamp(32px, 4vw, 48px);
	font: 400 17px/1.75 var(--hl-font-body);
	color: var(--hl-body);
	text-wrap: pretty;
}
.hl-article__body > * + * { margin-top: 1.1em; }

.hl-article__body h2 {
	margin-top: 1.9em;
	font: 700 clamp(21px, 2.2vw, 27px)/1.25 var(--hl-font-head);
	color: #fff;
}
.hl-article__body h3 {
	margin-top: 1.6em;
	font: 600 18px/1.35 var(--hl-font-head);
	color: #fff;
}

.hl-article__body a {
	color: var(--hl-cyan);
	text-underline-offset: 3px;
}
.hl-article__body a:hover { color: var(--hl-cyan-hover); }

.hl-article__body ul,
.hl-article__body ol { padding-left: 1.3em; }
.hl-article__body li + li { margin-top: 0.45em; }

.hl-article__body blockquote {
	margin-left: 0;
	padding: 4px 0 4px 20px;
	border-left: 2px solid var(--hl-cyan-border);
	color: #fff;
	font-style: normal;
}

.hl-article__body img {
	max-width: 100%;
	height: auto;
	border-radius: var(--hl-radius-card);
}

.hl-article__body code {
	padding: 2px 6px;
	border-radius: 3px;
	background: rgba(255, 255, 255, 0.06);
	font: 400 0.88em/1 var(--hl-font-mono);
}

/* A guide explaining load index or size markings will carry a table; it has to
   survive a phone the same way the spec tables do. */
.hl-article__body table {
	display: block;
	overflow-x: auto;
	width: 100%;
	border-collapse: collapse;
	font: 400 14px/1.5 var(--hl-font-body);
}
.hl-article__body th,
.hl-article__body td {
	padding: 10px 14px;
	border-bottom: 1px solid var(--hl-line-2);
	text-align: left;
	white-space: nowrap;
}
.hl-article__body th {
	font: 500 10px/1 var(--hl-font-mono);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--hl-muted);
}

/* --- Tail --- */
.hl-article__tail {
	padding: clamp(32px, 4vw, 52px) 0 clamp(48px, 6vw, 80px);
	border-top: 1px solid var(--hl-line-2);
	background: var(--hl-black-2);
}

.hl-article__back { margin: 0; }
.hl-article__back a {
	font: 500 11px/1 var(--hl-font-mono);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--hl-cyan);
	text-decoration: none;
}
.hl-article__back a:hover { color: var(--hl-cyan-hover); }

.hl-article__tail-heading {
	margin: 28px 0 18px;
	font: 700 clamp(19px, 2vw, 24px)/1.2 var(--hl-font-head);
	text-transform: uppercase;
}

.hl-article__patterns {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
	gap: clamp(14px, 2vw, 22px);
}

/* ---------------------------------------------------------------------
   Generic fallback (index.php: search results, 404)
   --------------------------------------------------------------------- */
.hl-content {
	max-width: 720px;
	margin: 0 auto;
	padding: clamp(32px, 5vw, 64px) 20px clamp(48px, 6vw, 80px);
}
.hl-content__head { margin-bottom: 28px; }
.hl-content__list { display: grid; gap: 26px; }
.hl-content__item-title {
	margin: 0 0 6px;
	font: 600 20px/1.3 var(--hl-font-head);
}
.hl-content__item-title a { color: #fff; text-decoration: none; }
.hl-content__item-title a:hover { color: var(--hl-cyan); }
.hl-content__excerpt,
.hl-content__body {
	font: 400 16px/1.7 var(--hl-font-body);
	color: var(--hl-body);
}
.hl-content__body a { color: var(--hl-cyan); }
.hl-content__empty { font: 400 16px/1.6 var(--hl-font-body); color: var(--hl-body); }
.hl-content__empty a { color: var(--hl-cyan); }

/* ---------------------------------------------------------------------
   Pagination — shared by the listing and the fallback
   --------------------------------------------------------------------- */
.pagination { margin-top: clamp(32px, 4vw, 48px); }
.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}
.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	padding: 0 12px;
	border: 1px solid var(--hl-line-3);
	border-radius: var(--hl-radius-btn);
	font: 500 12px/1 var(--hl-font-mono);
	color: var(--hl-body);
	text-decoration: none;
}
.pagination .page-numbers:hover { border-color: var(--hl-cyan-border); color: #fff; }
.pagination .page-numbers.current {
	border-color: var(--hl-cyan-border-strong);
	background: var(--hl-cyan-wash);
	color: var(--hl-cyan);
}

@media (max-width: 640px) {
	.hl-article__body { font-size: 16px; }
}