/*
 * News index (prototype 1013–1041) and article (1043–1071).
 * Every value below is the prototype's inline style; base.css supplies the tokens, .section,
 * .page-title, .kicker, .card, .placeholder-hatch, .breadcrumb and .pagination.
 *
 *   .news …            the index: header, the two-column band, the list rows
 *   .news-subscribe …  the dark "Product bulletins by email" box (both routes; --compact on an article)
 *   .news-press …      the "Press & trade media" box (index only)
 *   .article …         the article: breadcrumb, meta, title, lede, figure, body, quote, share row
 *   .article-box …     the sidebar boxes (Related, More news) and their rows
 */

/* ---------------------------------------------------------------------------
 * News index
 * ------------------------------------------------------------------------ */
.news__title { margin: 6px 0 32px; }

.news__body {
	display: flex;
	flex-wrap: wrap;
	gap: 32px 48px;
	align-items: flex-start;
}
.news__list {
	flex: 999 1 480px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	border-top: 1px solid var(--line);
}
.news__aside {
	flex: 1 1 280px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.news__empty { margin: 24px 0; color: var(--text-2); }

/* One post: the whole row is the link (prototype <div onClick>) */
.news-row {
	display: grid;
	grid-template-columns: minmax(110px, 140px) minmax(0, 1fr);
	gap: 8px 24px;
	padding: 24px 0;
	border-bottom: 1px solid var(--line);
	color: var(--ink);
}
.news-row:hover { background: var(--panel); color: var(--ink); }
.news-row__meta { display: flex; flex-direction: column; gap: 6px; }
.news-row__date { font: 12px var(--font-mono); color: var(--text-2); }
.news-row__tag { font: 600 10px var(--font-mono); color: var(--orange-text); letter-spacing: .14em; }
.news-row__text { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.news-row__title { font: 600 24px/1.1 var(--font-display); text-transform: uppercase; text-wrap: pretty; }
.news-row__excerpt { color: var(--text-2); text-wrap: pretty; }
.news-row__read { font-size: 13px; font-weight: 600; color: var(--orange-text); }

.news .pagination { margin-top: 28px; }
.news .pagination .nav-links { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------------------------------------------------------------------------
 * Subscribe box (index 1029–1033; article 1105–1108)
 * ------------------------------------------------------------------------ */
.news-subscribe {
	background: var(--navy);
	color: #fff;
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.news-subscribe--compact { padding: 20px; }
.news-subscribe__title { font: 600 20px var(--font-display); text-transform: uppercase; }
.news-subscribe__text { font-size: 13px; color: var(--dark-text); text-wrap: pretty; }
.news-subscribe__form { display: flex; gap: 8px; margin-top: 4px; }
.news-subscribe--compact .news-subscribe__form { margin-top: 0; }
.news-subscribe__input {
	flex: 1;
	min-width: 0;
	padding: 11px 12px;
	border: 1px solid var(--tag-t);
	background: #fff;
	color: var(--ink);
	font: inherit;
	font-size: 14px;
	border-radius: 2px;
	margin: 0;
	-webkit-appearance: none;
	appearance: none;
}
/* The prototype's Subscribe chip is the one orange button that does NOT declare its own colour: it is a
   bare <div> inside the navy box, so it inherits #fff (unlike .btn--primary, which sets #16191d). It also
   carries no `style-hover`, so it keeps its background on hover — both copied verbatim here. */
.news-subscribe__button {
	padding: 11px 16px;
	/* Prototype: white on var(--orange) #c8731f = 3.54:1, below WCAG AA. #ad6319 is the smallest darkening
	   that clears 4.5:1 for 13px/600 white text (4.59:1). */
	background: #ad6319;
	color: #fff;
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	border: 0;
	border-radius: 2px;
	cursor: pointer;
	white-space: nowrap;
}
.news-subscribe__sent { margin: 4px 0 0; font-size: 13px; font-weight: 600; color: #fff; }
.news-subscribe__error { margin: 0; font-size: 13px; color: var(--orange-dark); }

/* ---------------------------------------------------------------------------
 * Press box (1034–1038)
 * ------------------------------------------------------------------------ */
.news-press { padding: 20px; display: flex; flex-direction: column; gap: 6px; }
.news-press__title { font: 600 18px var(--font-display); text-transform: uppercase; }
.news-press__text { font-size: 13px; color: var(--text-2); }
.news-press__email { font-size: 13px; font-weight: 600; color: var(--orange-text); }
.news-press__email:hover { color: var(--orange-text); text-decoration: underline; }

/* ---------------------------------------------------------------------------
 * Article
 * ------------------------------------------------------------------------ */
.article__crumbs { padding: 20px var(--gutter) 0; }

.article__body {
	padding: 24px var(--gutter) 72px;
	display: flex;
	flex-wrap: wrap;
	gap: 40px 64px;
	align-items: flex-start;
}
.article { flex: 999 1 480px; min-width: 0; max-width: 760px; }
.article__aside {
	flex: 1 1 280px;
	min-width: 0;
	max-width: 400px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.article__meta {
	display: flex;
	gap: 8px 18px;
	flex-wrap: wrap;
	font: 12px var(--font-mono);
	color: var(--text-2);
}
.article__tag { color: var(--orange-text); font-weight: 600; letter-spacing: .14em; }
.article__date { font: inherit; color: inherit; }

.article__title {
	margin: 10px 0 18px;
	font: 700 clamp(32px, 5.5vw, 56px)/1 var(--font-display);
	text-transform: uppercase;
	text-wrap: pretty;
}
.article__lede {
	margin: 0 0 24px;
	font-size: 19px;
	line-height: 1.45;
	color: var(--text);
	text-wrap: pretty;
}

.article__figure {
	margin: 0 0 28px;
	aspect-ratio: 16 / 8;
	border: 1px solid var(--line);
	display: grid;
	place-items: center;
	overflow: hidden;
	position: relative;
}
.article__figure--empty { display: grid; }
.article__image { width: 100%; height: 100%; object-fit: cover; display: block; }
.article__caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 8px 12px;
	background: rgba(22, 25, 29, .72);
	font: 11px var(--font-mono);
	color: #fff;
}

/* Editor paragraphs (16px/1.65) and the closing paragraphs after the quote */
.article__content { max-width: none; color: var(--text); }
.article__content > :first-child { margin-top: 0; }
.article__content p,
.article__para {
	margin: 0 0 18px;
	font-size: 16px;
	line-height: 1.65;
	color: var(--text);
	text-wrap: pretty;
}
.article__content ul, .article__content ol { font-size: 16px; line-height: 1.65; color: var(--text); }

.article__quote {
	margin: 28px 0;
	padding: 6px 0 6px 24px;
	border-left: 3px solid var(--orange);
}
.article__quote-text {
	display: block;
	font: 600 26px/1.2 var(--font-display);
	color: var(--ink);
	text-wrap: pretty;
}
.article__quote-by {
	display: block;
	margin-top: 8px;
	font: 11px var(--font-mono);
	color: var(--muted);
	letter-spacing: .12em;
}

/* Share row + newer/older */
.article__share {
	margin-top: 32px;
	padding-top: 20px;
	border-top: 1px solid var(--line);
	display: flex;
	justify-content: space-between;
	gap: 12px 24px;
	flex-wrap: wrap;
	align-items: center;
}
.article-share { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.article-share__btn {
	display: inline-flex;
	align-items: center;
	padding: 9px 14px;
	border: 1.5px solid var(--navy);
	background: transparent;
	color: var(--ink);
	font: inherit;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.5;
	border-radius: 2px;
	cursor: pointer;
	white-space: nowrap;
}
.article-share__btn:hover { background: var(--navy); color: #fff; }
.article-share__copy.is-copied { background: var(--navy); color: #fff; }

.article-nav { display: flex; gap: 18px; font-size: 13px; font-weight: 600; }
.article-nav__link { color: var(--ink); white-space: nowrap; }
.article-nav__link:hover { color: var(--orange-text); }
.article-nav__link--off { visibility: hidden; }

/* ---------------------------------------------------------------------------
 * Article sidebar boxes (Related 1084–1090, More news 1091–1097)
 * ------------------------------------------------------------------------ */
.article-box__head {
	padding: 14px 18px;
	border-bottom: 1px solid var(--line);
	font: 600 18px var(--font-display);
	text-transform: uppercase;
}
.article-link {
	padding: 12px 18px;
	border-bottom: 1px solid var(--line-2);
	display: flex;
	justify-content: space-between;
	gap: 12px;
	font-size: 14px;
	font-weight: 500;
	color: var(--ink);
}
.article-link:hover { background: #fff; color: var(--ink); }
.article-link__arrow { color: var(--orange-text); }
.article-more {
	padding: 12px 18px;
	border-bottom: 1px solid var(--line-2);
	display: flex;
	flex-direction: column;
	gap: 4px;
	color: var(--ink);
}
.article-more:hover { background: #fff; color: var(--ink); }
.article-more__meta { font: 11px var(--font-mono); color: var(--muted); }
.article-more__title { font: 600 17px/1.15 var(--font-display); text-transform: uppercase; text-wrap: pretty; }

/* Mobile (≤ 899px): iOS Safari zooms the page when a focused control is under 16px. */
@media (max-width: 899.98px) {
	.news-subscribe__input { font-size: 16px; }
}

/* Mobile (≤ 899px): 44px tap box on the press e-mail link. */
@media (max-width: 899.98px) {
	.news-press__email { display: inline-block; padding: 13px 0; margin: -13px 0; }
}

/* Mobile: below 600px the date column would leave the title 179px wide — date and tag sit on one line
   above the title instead. Article share buttons and the older / newer links are 44px targets below 900px. */
@media (max-width: 899.98px) {
	.article-share__btn { min-height: 44px; }
	.article-nav__link { display: inline-block; padding: 13px 0; margin: -13px 0; }
}
@media (max-width: 599.98px) {
	.news-row { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 20px 0; }
	.news-row__meta { flex-direction: row; align-items: baseline; gap: 12px; }
	.news-row__tag { font-size: 11px; }
}