/**
 * Newsroom — the posts index.
 *
 * Values from Doral Renewables Design V1, node 735:907. The base token block is the one
 * projects-map.css opens with, repeated for the reason careers.css gives: the three
 * stylesheets are never on a page together, and extracting them would mean editing a working
 * page to no benefit here.
 *
 * The design adds four values the earlier pages had no use for — a warm card ground, a hairline
 * rule, a 16px card radius, and the wider spacing steps — so those are declared here.
 */

.doral-newsroom {
	/* colour */
	--doral-primary: #005050;
	--doral-primary-light: #007373;
	--doral-primary-800: #002828;
	--doral-ink: #0e1a1a;
	--doral-ink-2: #2a3838;
	--doral-ink-3: #5a6a6a;
	--doral-paper: #fff;

	/* design v1 ink tints — a warm neutral, distinct from the teal --doral-tint-* ramp */
	--doral-ink-50: #f4f4f1;
	--doral-ink-200: #d4d6d3;

	/* spacing scale */
	--doral-s1: 8px;
	--doral-s2: 16px;
	--doral-s3: 24px;
	--doral-s4: 32px;
	--doral-s5: 40px;
	--doral-s7: 56px;
	--doral-s8: 64px;
	--doral-s10: 80px;
	--doral-s21: 148px;

	/* cards here are 16px, not the 8px the project grid uses */
	--doral-radius-card-2: 16px;
	--doral-radius-input: 8px;
	--doral-gutter: 80px;
	--doral-maxw: 1440px;

	--doral-font: "proxima-nova", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		"Helvetica Neue", Arial, sans-serif;

	font-family: var(--doral-font);
	color: var(--doral-ink);
	background: var(--doral-paper);
}

.doral-newsroom *,
.doral-newsroom *::before,
.doral-newsroom *::after {
	box-sizing: border-box;
}

.doral-newsroom__inner {
	max-width: var(--doral-maxw);
	margin-inline: auto;
	padding-inline: var(--doral-gutter);
	/*
	 * The design opens on 148px of white. On this template the site header is opaque and sits
	 * in flow above it — body.doral-header-solid — so this is clear space under the header
	 * rather than room made for one overlapping.
	 */
	padding-block: var(--doral-s21);
	display: flex;
	flex-direction: column;
	gap: var(--doral-s10);
}

/* ------------------------------------------------------------------ head */

.doral-newsroom__head {
	display: flex;
	flex-direction: column;
	gap: var(--doral-s4);
}

/*
 * Scoped to the template. Unscoped, these also caught the doral/eyebrow block in the page
 * content below it ("In Good Company"), which sits outside .doral-newsroom where --doral-s2 is
 * undefined — so its gap collapsed to nothing and the mark sat against the text.
 */
.doral-newsroom .doral-eyebrow {
	display: flex;
	align-items: center;
	gap: var(--doral-s2);
	margin: 0;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.3;
	/* 5.2px at 13px */
	letter-spacing: 0.4em;
	text-transform: uppercase;
	color: var(--doral-ink);
}

.doral-newsroom .doral-eyebrow__mark {
	display: inline-flex;
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
}

.doral-newsroom .doral-eyebrow__mark svg {
	width: 100%;
	height: 100%;
	display: block;
}

.doral-newsroom__title {
	margin: 0;
	font-size: 48px;
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: -0.01em;
	color: var(--doral-ink-2);
}

.doral-newsroom__page {
	margin-inline-start: var(--doral-s2);
	font-size: 20px;
	color: var(--doral-ink-3);
	letter-spacing: 0;
}

.doral-newsroom__empty {
	margin: 0;
	font-size: 20px;
	line-height: 1.5;
	color: var(--doral-ink-2);
}

/* the small uppercase line above a title, and the date below it */

.doral-kicker {
	margin: 0;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: 0.4em;
	text-transform: uppercase;
	color: var(--doral-ink-2);
}

/* ------------------------------------------------------------------ lead row */

.doral-newsroom__lead {
	display: flex;
	gap: var(--doral-s4);
	align-items: flex-start;
}

/* the lead story: fixed at the design's width, the headline list takes the rest */
.doral-feature {
	flex: 0 0 624px;
	max-width: 624px;
	min-width: 0;
}

.doral-feature__media {
	display: block;
	height: 360px;
	border-radius: var(--doral-radius-card-2);
	overflow: hidden;
}

/*
 * DR-243 — "I can't figure out how to fix the heads being cut off in the title picture."
 *
 * The frame is a fixed 360px tall with a fluid width, so a portrait photograph has to lose a
 * lot of its height: the 768x1024 shot on page two scales to 832px tall inside a 360px window,
 * and centring that window throws away 236px top and bottom. Heads live in the top third of a
 * portrait, so the top is exactly the wrong place to cut.
 *
 * Biasing the window upwards costs nothing on the photographs that are already fine. A
 * landscape image is scaled to cover by its height, so it overflows sideways and the vertical
 * position has no effect at all; only images taller than the frame are repositioned, which is
 * precisely the set that was losing heads.
 *
 * Not centred on faces, because nothing here knows where the faces are — a quarter down is the
 * usual compromise. A photograph that still crops badly wants a different crop, not a different
 * number here.
 */
.doral-feature__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 25%;
	display: block;
}

.doral-feature__body {
	display: flex;
	flex-direction: column;
	gap: var(--doral-s3);
	/* vertical only — the lead sits on the page ground, not on a card */
	padding-block: var(--doral-s4);
}

.doral-feature__title {
	margin: 0;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.2;
}

.doral-feature__title a {
	color: var(--doral-ink);
	text-decoration: none;
}

.doral-feature__title a:hover,
.doral-feature__title a:focus-visible {
	color: var(--doral-primary);
	text-decoration: underline;
}

/* ------------------------------------------------------------------ headline list */

.doral-headlines {
	flex: 1 1 0;
	min-width: 0;
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--doral-s5);
}

.doral-headline {
	display: flex;
	flex-direction: column;
	gap: var(--doral-s1);
	padding-block-end: var(--doral-s4);
	border-block-end: 1px solid var(--doral-ink-200);
}

.doral-headline__title {
	margin: 0;
	font-size: 22px;
	font-weight: 600;
	line-height: 1.2;
}

.doral-headline__title a {
	display: flex;
	align-items: center;
	gap: var(--doral-s2);
	color: var(--doral-ink);
	text-decoration: none;
}

.doral-headline__text {
	flex: 1 1 auto;
	min-width: 0;
}

.doral-headline__icon {
	display: inline-flex;
	width: 32px;
	height: 32px;
	flex: 0 0 auto;
	color: var(--doral-primary);
	transition: transform 0.15s ease;
}

.doral-headline__icon svg {
	width: 100%;
	height: 100%;
	display: block;
}

.doral-headline__title a:hover,
.doral-headline__title a:focus-visible {
	color: var(--doral-primary);
}

.doral-headline__title a:hover .doral-headline__text,
.doral-headline__title a:focus-visible .doral-headline__text {
	text-decoration: underline;
}

.doral-headline__title a:hover .doral-headline__icon {
	transform: translateX(3px);
}

.doral-headline__excerpt {
	margin: 0;
	font-size: 20px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--doral-ink-2);
}

@media (prefers-reduced-motion: reduce) {
	.doral-headline__icon {
		transition: none;
	}

	.doral-headline__title a:hover .doral-headline__icon {
		transform: none;
	}
}

/* ------------------------------------------------------------------ card row */

.doral-newsgrid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 33px;
}

.doral-newscard {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.doral-newscard__media {
	display: block;
	height: 220px;
	border-start-start-radius: var(--doral-radius-card-2);
	border-start-end-radius: var(--doral-radius-card-2);
	overflow: hidden;
}

.doral-newscard__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.doral-newscard__body {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	/*
	 * The design sets a 56px gap between the title block and the date. space-between holds the
	 * date to the bottom instead, so cards in a row line their dates up however long the
	 * titles run — the gap alone leaves them ragged.
	 */
	justify-content: space-between;
	gap: var(--doral-s7);
	padding: var(--doral-s4);
	background: var(--doral-ink-50);
	border-end-start-radius: var(--doral-radius-card-2);
	border-end-end-radius: var(--doral-radius-card-2);
}

/* a card with no image is a rounded box on its own */
.doral-newscard:not(:has(.doral-newscard__media)) .doral-newscard__body {
	border-radius: var(--doral-radius-card-2);
}

.doral-newscard__head {
	display: flex;
	flex-direction: column;
	gap: var(--doral-s2);
}

.doral-newscard__title {
	margin: 0;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.2;
}

.doral-newscard__title a {
	color: var(--doral-ink);
	text-decoration: none;
}

.doral-newscard__title a:hover,
.doral-newscard__title a:focus-visible {
	color: var(--doral-primary);
	text-decoration: underline;
}

/* ------------------------------------------------------------------ pagination */

.doral-pagination__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--doral-s1);
	align-items: center;
}

.doral-pagination a,
.doral-pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding-inline: 12px;
	border-radius: 4px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
}

.doral-pagination a {
	color: var(--doral-primary);
	border: 1px solid var(--doral-ink-200);
}

.doral-pagination a:hover,
.doral-pagination a:focus-visible {
	color: var(--doral-paper);
	background: var(--doral-primary);
	border-color: var(--doral-primary);
}

.doral-pagination .current {
	color: var(--doral-paper);
	background: var(--doral-primary-800);
}

.doral-pagination .dots {
	color: var(--doral-ink-3);
}

/* ------------------------------------------------------------------ responsive */

@media (max-width: 1200px) {
	.doral-newsroom {
		--doral-gutter: 40px;
		--doral-s21: 96px;
	}

	/*
	 * Below the design's width the lead can no longer hold 624px and leave the headline list a
	 * readable column, so the two share the row evenly until there is not room for two.
	 */
	.doral-feature {
		flex: 1 1 0;
		max-width: none;
	}

	.doral-newsgrid {
		gap: var(--doral-s3);
	}
}

@media (max-width: 900px) {
	.doral-newsroom__lead {
		flex-direction: column;
	}

	.doral-feature {
		flex: 0 0 auto;
		width: 100%;
	}

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

@media (max-width: 782px) {
	.doral-newsroom {
		--doral-gutter: 20px;
		--doral-s21: 64px;
	}

	.doral-newsroom__inner {
		gap: var(--doral-s8);
	}

	.doral-newsroom__title {
		font-size: 34px;
	}

	.doral-feature__media {
		height: 240px;
	}

	.doral-headline__title {
		font-size: 19px;
	}

	.doral-headline__excerpt {
		font-size: 17px;
	}

	.doral-headline__icon {
		width: 24px;
		height: 24px;
	}

	.doral-newsgrid {
		grid-template-columns: 1fr;
	}

	.doral-newscard__body {
		gap: var(--doral-s4);
	}
}

/* ------------------------------------------------------------- filter bar
 *
 * DR-243. The class names are the ones the Our Projects bar uses, because the client asked
 * for the two to match and a later extraction into one component should not have to rename
 * anything. The rules are repeated rather than shared for the reason given at the top of this
 * file: the two stylesheets are never on a page together.
 *
 * What is not repeated is the behaviour. Projects filters in the browser; this submits. See
 * the note in home.php.
 */

.doral-newsroom__controls {
	display: flex;
	flex-direction: column;
	gap: var(--doral-s3);
	/*
	 * __inner spaces its children 80px apart, which is right between sections and too much
	 * between a heading and the control that belongs to it. This pulls the bar up to 40.
	 */
	margin-block-start: calc(var(--doral-s5) - var(--doral-s10));
}

.doral-filters__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	gap: var(--doral-s2);
	padding-block: var(--doral-s3);
	border-block: 1px solid var(--doral-ink-200);
}

.doral-filters__selects {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--doral-s2);
}

.doral-select select {
	appearance: none;
	border: 1px solid var(--doral-ink-200);
	border-radius: var(--doral-radius-input);
	background: var(--doral-paper);
	/* the same two-triangle chevron the projects bar draws, so the controls match exactly */
	background-image:
		linear-gradient(45deg, transparent 50%, var(--doral-ink-3) 50%),
		linear-gradient(135deg, var(--doral-ink-3) 50%, transparent 50%);
	background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
	padding: var(--doral-s1) var(--doral-s4) var(--doral-s1) 12px;
	font: inherit;
	font-size: 13px;
	line-height: 1.3;
	color: var(--doral-ink-2);
	cursor: pointer;
	min-height: 36px;
}

.doral-select select:focus-visible {
	outline: 2px solid var(--doral-primary-light);
	outline-offset: 2px;
}

.doral-filters__apply {
	appearance: none;
	border: 1px solid var(--doral-primary);
	border-radius: var(--doral-radius-input);
	background: var(--doral-primary);
	padding: var(--doral-s1) var(--doral-s3);
	min-height: 36px;
	font: inherit;
	font-size: 13px;
	line-height: 1.3;
	color: var(--doral-paper);
	cursor: pointer;
}

.doral-filters__apply:hover {
	background: var(--doral-primary-800);
	border-color: var(--doral-primary-800);
}

.doral-filters__apply:focus-visible {
	outline: 2px solid var(--doral-primary-light);
	outline-offset: 2px;
}

.doral-clear {
	appearance: none;
	border: 0;
	background: none;
	padding: 0;
	font: inherit;
	font-size: 13px;
	color: var(--doral-ink-3);
	text-decoration: underline;
	cursor: pointer;
}

.doral-clear:hover {
	color: var(--doral-primary);
}

.doral-clear:focus-visible {
	/* it is an <a> inside a teal-link theme, so the colour is restated rather than inherited */
	background: none;
	color: var(--doral-primary-light);
	outline: 2px solid var(--doral-primary-light);
	outline-offset: 2px;
}

.doral-newsroom__count {
	margin: 0;
	font-size: 13px;
	color: var(--doral-ink-3);
}

/* the clear link sits inside the sentence when nothing matched */
.doral-newsroom__empty .doral-clear {
	font-size: inherit;
	margin-inline-start: var(--doral-s1);
}

@media (max-width: 782px) {

	.doral-filters__selects {
		width: 100%;
	}

	.doral-select {
		flex: 1 1 140px;
	}

	.doral-select select {
		width: 100%;
	}
}