/**
 * News & Insights listing and single article.
 *
 * Kept out of style.css deliberately: that file is shared with the rest of the
 * team and appending to it makes every change here collide with theirs. Same
 * reasoning footer.css and animations.css are already separate.
 *
 * Loaded by dm-article.php after salient-child-style, so these rules build on
 * the brand tokens defined there.
 *
 * Measured off workspace/figma/News and Insights.png: a 1432px content band of
 * three 467px tiles with a 16px gutter and a 531px row pitch, twelve to a page.
 */

/* ==========================================================================
   Toolbar — filter pills and sort, shared shape with the team listing
   ========================================================================== */

.dm-news-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	margin-top: 64px;
	margin-bottom: 13px;
}

.dm-news-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.dm-news-filter {
	font-family: var(--dm-font-body);
	font-size: 15px;
	line-height: 1;
	color: var(--dm-admiralty);
	background: transparent;
	border: 1px solid var(--dm-mist);
	border-radius: 999px;
	padding: 13px 22px;
	cursor: pointer;
	transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.dm-news-filter:hover {
	border-color: var(--dm-straw);
}

.dm-news-filter.is-active {
	background: var(--dm-straw);
	border-color: var(--dm-straw);
	color: var(--dm-admiralty);
}

.dm-news-sort {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 0 0 auto;
}

.dm-news-sort label {
	font-family: var(--dm-font-body);
	font-size: 15px;
	color: var(--dm-body-text);
	margin: 0;
	white-space: nowrap;
}

/* Salient styles bare selects heavily; reset to the design's plain control
   with its own chevron rather than fighting each inherited rule. */
.dm-news-sort-select {
	font-family: var(--dm-font-body);
	font-size: 15px;
	color: var(--dm-admiralty);
	background: transparent;
	border: 0;
	box-shadow: none;
	padding: 0 26px 0 0;
	margin: 0;
	height: auto;
	min-height: 0;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%231E2438' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right center;
	background-size: 16px 16px;
}

/* ==========================================================================
   Tile grid
   ========================================================================== */

.dm-news-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}

.dm-news-card[hidden] {
	display: none;
}

/* Author rules beat the UA stylesheet's [hidden]{display:none}, so the display
   below would otherwise keep filtered-out and off-page cards on screen. */
.dm-news-card {
	display: flex;
	flex-direction: column;
	background: var(--dm-parchment-50);
	border-left: 3px solid var(--dm-straw);
	padding: 24px;
	/* The mockup's cards are a uniform 515px regardless of title length —
	   the meta row is pinned to the foot and the slack sits above it.
	   `height: auto` is deliberate: style.css carries a .dm-news-card of its
	   own (the Home page tiles, with .dm-news-photo) that hard-sets
	   height: 516px. Same class name, different component — without this the
	   listing card can never grow past it and its content spills out. */
	min-height: 515px;
	box-sizing: border-box;
	color: inherit;
	text-decoration: none;
	transition: box-shadow 0.25s ease;
}

/* style.css carries a .dm-news-card of its own — the Home tiles, paired with
   .dm-news-photo — that hard-sets height: 516px. Same class name, different
   component. Scoping through .dm-news-grid both wins the cascade on
   specificity rather than load order, and leaves their card untouched. */
.dm-news-grid .dm-news-card {
	height: auto;
}

.dm-news-card:hover {
	box-shadow: 0 6px 24px rgba(30, 36, 56, 0.09);
}

.dm-news-thumb {
	width: 100%;
	/* The design's card image is 467 x 274. That height only gives the right
	   shape at the design's own 467px column; the built grid's columns run
	   262-386px, so the ratio drives the box and the height follows it.
	   Desktop only — see the <=999px block, where the stacked card is full
	   width and the design crops squarer. */
	aspect-ratio: 467 / 274;
	overflow: hidden;
	margin-bottom: 31px;
}

/* Salient's `.row .col img { height: auto }` is (0,2,1) and outranks a
   single-class rule, so the qualifier is needed for the height to stick. */
.dm-news-grid .dm-news-card .dm-news-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.dm-news-thumb-empty {
	background: var(--dm-mist);
}

.dm-news-title {
	font-family: var(--dm-font-heading);
	font-size: 22px !important;
	line-height: 31px !important;
	color: var(--dm-admiralty) !important;
	/* Salient styles h1-h6 with !important, so a plain margin here loses and
	   the card grows past its 515px. Zero it and pin the meta row from its
	   own side instead. */
	margin: 0 !important;
	padding-bottom: 0;
	/* Clamped to three lines, as the mockup shows — one of its tiles ends in
	   an ellipsis, and the uniform card height depends on it. */
	/* The card is a flex column, so the title is shrinkable by default: once
	   the image takes its proper share it collapses to nothing and clips
	   against the clamp. Holding it lets the card grow instead. */
	flex: none;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Meta row pinned to the card foot so titles of different lengths still line
   their dates up across a row. */
/* margin-top:auto pushes the row to the card foot; the padding keeps a
   minimum gap when the title is long enough to fill the space. */
.dm-news-meta {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: auto;
	padding-top: 26px;
	font-family: var(--dm-font-body);
	font-size: 14px;
	color: var(--dm-body-text);
}

.dm-news-cat {
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.dm-news-sep {
	opacity: 0.6;
}

.dm-news-arrow {
	margin-left: auto;
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border: 1px solid var(--dm-mist);
	color: var(--dm-admiralty);
	transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.dm-news-arrow svg {
	width: 16px;
	height: 16px;
}

.dm-news-card:hover .dm-news-arrow {
	background: var(--dm-admiralty);
	border-color: var(--dm-admiralty);
	color: var(--dm-white);
}

.dm-news-empty {
	font-family: var(--dm-font-body);
	color: var(--dm-body-text);
	text-align: center;
	padding: 40px 0;
}

/* ==========================================================================
   Pagination
   ========================================================================== */

.dm-news-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 72px;
}

.dm-news-page {
	font-family: var(--dm-font-body);
	font-size: 15px;
	line-height: 1;
	color: var(--dm-admiralty);
	background: transparent;
	border: 0;
	padding: 8px 12px;
	cursor: pointer;
	transition: color 0.25s ease;
}

.dm-news-page:hover,
.dm-news-page.is-active {
	color: var(--dm-straw);
}

.dm-news-page-gap {
	font-family: var(--dm-font-body);
	font-size: 15px;
	color: var(--dm-body-text);
	padding: 0 4px;
}

.dm-news-next {
	margin-left: 12px;
}

/* ==========================================================================
   Single article
   ========================================================================== */

.dm-article-wrap {
	background: var(--dm-parchment-light);
	padding-top: 100px;
	padding-bottom: 120px;
}

/* A 996px left-aligned column, not centred — measured off the mockup. */
.dm-article-body {
	max-width: 996px;
}

.dm-article-eyebrow,
.dm-article-eyebrow p {
	font-family: var(--dm-font-body);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--dm-straw);
	margin: 0 0 14px;
	padding-bottom: 0;
}

.dm-article-title {
	font-family: var(--dm-font-heading);
	font-size: 46px !important;
	line-height: 1 !important;
	color: var(--dm-admiralty) !important;
	margin: 0 0 38px;
}

.dm-article-content p {
	font-family: var(--dm-font-body);
	color: var(--dm-body-text);
	margin: 0 0 22px;
	padding-bottom: 0;
}

.dm-article-content h2,
.dm-article-content h3,
.dm-article-content h4 {
	margin: 34px 0 14px;
}

.dm-article-content ul,
.dm-article-content ol {
	font-family: var(--dm-font-body);
	color: var(--dm-body-text);
	margin: 0 0 22px 20px;
}

.dm-article-share {
	margin-top: 46px;
}

.dm-article-back {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	margin-top: 48px;
	font-family: var(--dm-font-body);
	font-size: 16px;
	color: var(--dm-admiralty);
	text-decoration: none;
	transition: color 0.25s ease;
}

.dm-article-back:hover {
	color: var(--dm-straw);
}

.dm-article-back svg {
	width: 20px;
	height: 20px;
}

/* ==========================================================================
   Mobile
   ========================================================================== */

@media only screen and (min-width: 1000px) and (max-width: 1300px) {
	.dm-news-thumb {
		margin-bottom: 24px;
	}
}

@media only screen and (max-width: 999px) {

	.dm-news-toolbar {
		display: block;
		margin-top: 36px;
		margin-bottom: 20px;
	}

	/* The pill row is wider than a phone; scrolling it keeps the sort control
	   from being pushed far down the page. */
	.dm-news-filters {
		flex-wrap: nowrap;
		overflow-x: auto;
		gap: 10px;
		margin-bottom: 16px;
		scrollbar-width: none;
	}

	.dm-news-filters::-webkit-scrollbar {
		display: none;
	}

	.dm-news-filter {
		flex: 0 0 auto;
		font-size: 14px;
		padding: 11px 18px;
	}

	.dm-news-grid {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.dm-news-thumb {
		/* The mobile frame crops squarer than the desktop one: 350 x 250. */
		aspect-ratio: 7 / 5;
		height: auto;
		/* The card is a flex column, so the thumb is shrinkable by default and
		   gives back the height the ratio just granted it. */
		flex: none;
		margin-bottom: 18px;
	}

	/* Single column here, so the grid earns nothing — and it actively hurts:
	   a ratio-sized box contributes almost no height while the grid measures
	   its rows, so the row resolves shorter than the image and clips the card.
	   Block flow knows each card's width up front, so the ratio resolves and
	   the height simply follows. */
	.dm-news-grid {
		display: block;
	}

	/* The uniform 515px card keeps meta rows aligned across the 3-up grid.
	   Stacked there is no row to align to. */
	.dm-news-grid .dm-news-card {
		height: auto;
		min-height: 0;
		margin-bottom: 16px;
	}

	.dm-news-title {
		font-size: 20px !important;
		line-height: 27px !important;
	}

	.dm-news-pagination {
		margin-top: 40px;
	}

	.dm-article-wrap {
		padding-top: 40px;
		padding-bottom: 60px;
	}

	.dm-article-title {
		font-size: 32px !important;
	}
}

/* ==========================================================================
   Hero — same 400px band the rest of the site uses, restated here rather than
   borrowing the team page's class so this stylesheet stands alone.
   ========================================================================== */

.dm-news-hero,
.dm-article-hero {
	min-height: 400px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	position: relative;
}

.dm-article-hero .dm-breadcrumbs,
.dm-article-hero .dm-breadcrumbs a {
	color: rgba(255, 255, 255, 0.7);
}

.dm-article-hero .dm-breadcrumbs span {
	color: var(--dm-white);
}

.dm-article-hero-title {
	font-family: var(--dm-font-heading);
	font-size: 64px !important;
	line-height: 1 !important;
	color: var(--dm-white) !important;
	margin: 0;
}

@media only screen and (max-width: 999px) {

	.dm-news-hero,
	.dm-article-hero {
		min-height: 260px;
	}

	.dm-article-hero-title {
		font-size: 32px !important;
	}
}