/*
Theme Name: Business Alliance for Global Development
Theme URI:
Author: Future Advocacy
Author URI: https://futureadvocacy.com
Description: Custom WordPress theme for the Business Alliance for Global Development site.
Version: 0.9.4
Requires at least: 6.4
Requires PHP: 8.1
Tested up to: 6.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: bagd
*/

/* -------------------------------------------------------------------------
   Base reset + variables
   Real design tokens (colour, type, spacing) land once Figma files arrive.
   ------------------------------------------------------------------------- */

:root {
	--bagd-color-navy: #002b3c;
	--bagd-color-navy-mid: #1c4a63;
	--bagd-color-navy-light: #4a7f9e;
	--bagd-color-navy-border: #c0d8e4;
	--bagd-color-text: var(--bagd-color-navy);
	--bagd-color-background: #ffffff;
	--bagd-color-link: var(--bagd-color-navy);
	--bagd-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--bagd-content-width: 1200px;
}

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

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	color: var(--bagd-color-text);
	background: var(--bagd-color-background);
	font-family: var(--bagd-font-body);
	font-size: 1.0625rem;
	line-height: 1.5;
}

img {
	max-width: 100%;
	height: auto;
}

a {
	color: var(--bagd-color-link);
}

.site-container {
	max-width: var(--bagd-content-width);
	margin-inline: auto;
	padding-inline: clamp(1.5rem, 4vw, 3rem);
}

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.button {
	display: inline-block;
	background: var(--bagd-color-navy);
	color: #fff;
	font-weight: 800;
	font-size: 1.1rem;
	text-align: center;
	text-decoration: none;
	border: 5px solid var(--bagd-color-navy-border);
	border-radius: 80px;
	padding: 0.9rem 2.5rem;
}

.button:hover,
.button:focus {
	color: #fff;
	opacity: 0.9;
}

.button--outline {
	background: transparent;
	border-color: #fff;
}

/* -------------------------------------------------------------------------
   Site header
   ------------------------------------------------------------------------- */

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--bagd-color-background);
	border-bottom: 3px solid var(--bagd-color-navy);
}

.site-header .site-container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	padding-block: 1.25rem;
}

.site-branding img {
	display: block;
	max-height: 70px;
	width: auto;
}

.site-branding .site-title {
	margin: 0;
	font-size: 1.25rem;
}

.site-branding .site-title a {
	text-decoration: none;
	color: var(--bagd-color-navy);
}

.primary-navigation {
	display: flex;
	align-items: center;
	gap: 1.5rem;
}

.primary-navigation ul {
	display: flex;
	align-items: center;
	gap: 2rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.primary-navigation a {
	text-decoration: none;
	color: var(--bagd-color-navy);
	font-size: 1.125rem;
}

.social-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--bagd-color-navy);
}

.social-icon:hover,
.social-icon:focus {
	opacity: 0.75;
}

.menu-toggle {
	display: none;
	background: none;
	border: 0;
	padding: 0.5rem;
	cursor: pointer;
}

.menu-toggle__bars,
.menu-toggle__bars::before,
.menu-toggle__bars::after {
	display: block;
	width: 24px;
	height: 2px;
	background: var(--bagd-color-navy);
}

.menu-toggle__bars {
	position: relative;
}

.menu-toggle__bars::before,
.menu-toggle__bars::after {
	content: "";
	position: absolute;
	left: 0;
}

.menu-toggle__bars::before {
	top: -8px;
}

.menu-toggle__bars::after {
	top: 8px;
}

.logo-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 70px;
	width: 242px;
	border: 1px dashed var(--bagd-color-navy-border);
	border-radius: 4px;
	color: var(--bagd-color-navy);
	font-size: 0.75rem;
	text-align: center;
}

/* -------------------------------------------------------------------------
   Homepage — hero
   ------------------------------------------------------------------------- */

.hero {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 684px;
	color: #fff;
	text-align: center;
	background: var(--bagd-color-navy);
	overflow: hidden;
}

.hero__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hero__overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
}

.hero__heading {
	position: relative;
	max-width: 900px;
	margin: 0 auto;
	padding-inline: 1.5rem;
	font-size: 2.75rem;
	line-height: 1.1;
	font-weight: 600;
}

.hero__heading em {
	font-style: italic;
	font-weight: 800;
}

.hero__intro {
	padding-block: 4rem;
	max-width: var(--bagd-content-width);
	margin-inline: auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 3rem;
	align-items: start;
}

.hero__intro-heading {
	font-size: 1.9rem;
	line-height: 1.2;
	margin: 0;
}

.hero__intro-body {
	font-size: 1.15rem;
	line-height: 1.5;
	margin: 0;
}

.hero__cta {
	grid-column: 1 / -1;
	text-align: center;
}

@media (max-width: 782px) {
	.hero__intro {
		grid-template-columns: 1fr;
	}

	.hero__heading {
		font-size: 1.8rem;
	}

	.menu-toggle {
		display: block;
	}

	.primary-navigation {
		display: none;
		position: absolute;
		inset-inline: 0;
		top: 100%;
		flex-direction: column;
		align-items: flex-start;
		gap: 1.5rem;
		background: var(--bagd-color-background);
		padding: 1.5rem;
		box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
	}

	.primary-navigation.is-open {
		display: flex;
	}

	.primary-navigation ul {
		flex-direction: column;
		align-items: flex-start;
		gap: 1rem;
	}
}

/* -------------------------------------------------------------------------
   Site footer
   ------------------------------------------------------------------------- */

.site-footer {
	border-top: 1px solid var(--bagd-color-navy-border);
	padding-block: 2rem;
}

.site-footer .site-container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	flex-wrap: wrap;
}

.site-footer .site-tagline {
	max-width: 400px;
	text-align: right;
	font-size: 1.05rem;
}

.site-footer .site-tagline p {
	margin: 0;
}

.site-footer .site-tagline p + p {
	margin-top: 0.75rem;
}

@media (max-width: 600px) {
	.site-footer .site-container {
		flex-direction: column;
		text-align: center;
	}

	.site-footer .site-tagline {
		text-align: center;
	}
}

/* -------------------------------------------------------------------------
   Homepage — development impact (video background)
   A single looping 16:9 background video (or its poster/fallback image),
   with the overlay/text layer on top. Simplified from an earlier 5-tile
   mosaic — same 16:9 ratio the mosaic's own top-row tiles used.
   ------------------------------------------------------------------------- */

.development-impact {
	position: relative;
	overflow: hidden;
	color: #fff;
	aspect-ratio: 16 / 9;
}

.development-impact__media,
.development-impact__video,
.development-impact__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	background: var(--bagd-color-navy);
}

.development-impact__overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.55);
}

.development-impact__text {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding-block: 2rem;
}

.development-impact__lead {
	font-size: 2.25rem;
	font-weight: 600;
	margin: 0 0 0.5rem;
}

.development-impact__rotator {
	position: relative;
	margin: 0;
	min-height: 2.5em;
}

.development-impact__statement {
	position: absolute;
	inset-inline: 0;
	font-size: 2.25rem;
	font-weight: 800;
	font-style: italic;
	opacity: 0;
	transform: translateY(0.5rem);
	transition: opacity 0.4s ease, transform 0.4s ease;
}

.development-impact__statement.is-active {
	position: relative;
	opacity: 1;
	transform: translateY(0);
}

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

@media (max-width: 600px) {
	.development-impact__lead,
	.development-impact__statement {
		font-size: 1.5rem;
	}
}

/* -------------------------------------------------------------------------
   "Sign the Principles" page — header image + overlay heading
   The heading is pinned to fill the section (inset: 0) and centred with
   flex, independent of the image's own box — so it sits reliably on top
   of the photo instead of depending on paint order/stacking quirks. The
   overlay is a top-to-bottom gradient (subtle near the top, darker toward
   the middle where the heading sits) rather than a flat scrim, so the
   photo still reads at the edges while the text stays legible.
   ------------------------------------------------------------------------- */

.sop-header {
	position: relative;
	min-height: 460px;
	color: #fff;
	text-align: center;
	background: var(--bagd-color-navy);
	overflow: hidden;
}

.sop-header__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sop-header__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 12, 20, 0.25) 0%, rgba(0, 12, 20, 0.55) 100%);
}

.sop-header__heading {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding-inline: 1.5rem;
	font-size: 2.25rem;
	line-height: 1.25;
	font-weight: 800;
}

.sop-header__heading span {
	max-width: 800px;
}

@media (max-width: 782px) {
	.sop-header {
		min-height: 320px;
	}

	.sop-header__heading {
		font-size: 1.6rem;
	}
}

/* -------------------------------------------------------------------------
   Homepage — Statement of Principles
   ------------------------------------------------------------------------- */

.statement-of-principles {
	background: var(--bagd-color-navy);
	color: #fff;
	padding-block: 4rem;
	text-align: center;
}

.statement-of-principles h1,
.statement-of-principles h2 {
	margin-top: 0;
}

.statement-of-principles__intro,
.statement-of-principles__more,
.statement-of-principles__full-text {
	max-width: 70ch;
	margin-inline: auto;
	text-align: left;
}

/* Fades the bottom of the always-visible text into the block's own
   background colour when there's more to reveal, hinting at the "Read
   more" toggle below it — purely decorative, so it's only added when an
   "Additional text" field is actually set (see the template). */
.statement-of-principles__intro--fades {
	-webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
	mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
}

/* Collapsed by default via the [hidden] attribute (see template); JS in
   main.js flips it and the toggle button's aria-expanded state. The
   button always sits after this block in the DOM, so it naturally moves
   to the bottom of the revealed text once expanded, rather than staying
   pinned between the intro and the extra content. */
.statement-of-principles__more {
	margin-top: 1.5rem;
}

.statement-of-principles__toggle {
	display: block;
	margin: 1.5rem auto 0;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	color: #fff;
	font: inherit;
	font-weight: 700;
	text-decoration: underline;
}

.statement-of-principles__toggle[aria-expanded="true"] .statement-of-principles__label-more,
.statement-of-principles__toggle[aria-expanded="false"] .statement-of-principles__label-less {
	display: none;
}

.statement-of-principles__list {
	padding-left: 1.25rem;
}

.statement-of-principles__list li {
	margin-bottom: 1rem;
}

/* Headings/lists an editor adds inside the free-text WYSIWYG fields (e.g.
   the "Sign the Principles" page's single Intro field, which holds the
   whole statement including the numbered principles) get the same
   spacing the old dedicated principles-list markup had. */
.statement-of-principles__intro h3 {
	margin-top: 2rem;
	margin-bottom: 1rem;
}

.statement-of-principles__intro ol,
.statement-of-principles__intro ul {
	padding-left: 1.25rem;
}

.statement-of-principles__intro li {
	margin-bottom: 1rem;
}

/* -------------------------------------------------------------------------
   About Us page
   ------------------------------------------------------------------------- */

.about-us-page__intro {
	padding-block: 4rem;
}

.about-us-page__intro h1,
.about-us-page__intro h2 {
	font-size: 2rem;
	line-height: 1.25;
	font-weight: 700;
	margin-top: 0;
}

.about-us-page__intro p {
	font-size: 1.15rem;
	line-height: 1.6;
}

.founding-members {
	background: var(--bagd-color-navy);
	color: #fff;
	padding-block: 4rem;
}

.founding-members h2 {
	font-size: 2.25rem;
	line-height: 1.2;
	margin-top: 0;
}

.founding-members__intro {
	max-width: 70ch;
	font-size: 1.15rem;
}

.latest-articles {
	padding-block: 4rem;
}

.founding-members__grid {
	display: flex;
	flex-direction: column;
	gap: 2rem;
	margin-top: 2rem;
}

.founding-member-card {
	display: flex;
	align-items: stretch;
	background: #fff;
	color: var(--bagd-color-text);
	border-radius: 16px;
	overflow: hidden;
}

.founding-member-card:nth-child(even) {
	flex-direction: row-reverse;
}

.founding-member-card__media {
	flex: 0 0 38%;
}

.founding-member-card__media img,
.founding-member-card__photo-placeholder {
	width: 100%;
	height: 100%;
	min-height: 280px;
	object-fit: cover;
	background: var(--bagd-color-navy-border);
	display: block;
}

.founding-member-card__body {
	flex: 1;
	padding: 2.5rem 3rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.founding-member-card__body h3 {
	font-size: 1.375rem;
	margin-bottom: 0.25rem;
}

.founding-member-card__role {
	font-weight: 700;
	margin-top: 0;
}

.founding-member-card__bio {
	font-size: 1.05rem;
	line-height: 1.6;
}

@media (max-width: 782px) {
	.founding-member-card,
	.founding-member-card:nth-child(even) {
		flex-direction: column;
	}

	.founding-member-card__media img,
	.founding-member-card__photo-placeholder {
		min-height: 0;
		aspect-ratio: 1 / 1;
	}

	.founding-member-card__body {
		padding: 1.5rem;
	}
}

.latest-articles__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 2rem;
	margin-top: 2rem;
}

@media (max-width: 900px) {
	.latest-articles__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.latest-articles__grid {
		grid-template-columns: 1fr;
	}
}

.latest-articles__header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
}

.latest-articles h2 {
	font-size: 2rem;
	margin: 0;
}

.latest-articles__read-more {
	color: var(--bagd-color-navy);
	font-weight: 700;
	text-decoration: underline;
	white-space: nowrap;
}

/* -------------------------------------------------------------------------
   Homepage — CTA text
   ------------------------------------------------------------------------- */

.cta-text {
	padding-block: 4rem;
	text-align: center;
}

.cta-text__heading {
	max-width: 40ch;
	margin-inline: auto;
	font-size: 2rem;
	line-height: 1.25;
	font-weight: 700;
}

.cta-text__body {
	max-width: 60ch;
	margin-inline: auto;
	font-size: 1.15rem;
}

/* -------------------------------------------------------------------------
   Homepage — signup form
   The form itself is rendered by Fluent Forms via shortcode. Selectors here
   are verified against this site's actual rendered form markup (form id 3):
   fields are `.ff-el-group` > `.ff-el-input--label label` + `.ff-el-input
   --content` > `input.ff-el-form-control`; checkboxes are `.ff-el-form-check`
   > `label.ff-el-form-check-label` wrapping the input and its own "Yes"
   text as one inline label — kept flex/inline rather than the block/bold
   treatment used for field labels above it, or the checkbox's own caption
   would stack under the tickbox instead of sitting beside it. Bare
   input/textarea/select/button selectors are kept alongside as a fallback
   for any field type not covered above.

   Border/radius/colour/padding on the input and submit-button rules carry
   !important: Fluent Forms' own stylesheet chains more classes on those
   elements than we do (e.g. `.ff-btn.ff-btn-submit.ff-btn-md.ff_btn_style`),
   which otherwise wins on specificity regardless of stylesheet load order.
   ------------------------------------------------------------------------- */

.signup-form {
	padding-block: 4rem;
}

.signup-form h2 {
	margin-bottom: 2rem;
}

.signup-form .ff-el-input--label label {
	display: block;
	font-weight: 700;
	margin-bottom: 0.5rem;
}

.signup-form input[type="text"],
.signup-form input[type="email"],
.signup-form input[type="tel"],
.signup-form input[type="number"],
.signup-form textarea,
.signup-form select,
.signup-form .ff-el-form-control {
	display: block;
	width: 100%;
	font: inherit;
	font-size: 1rem;
	padding: 0.85rem 1.5rem;
	border: 2px solid var(--bagd-color-navy) !important;
	border-radius: 80px !important;
	background: #fff;
	color: var(--bagd-color-text);
}

.signup-form textarea {
	border-radius: 24px !important;
}

.signup-form .ff-el-group {
	margin-bottom: 1.5rem;
}

.signup-form input[type="checkbox"],
.signup-form input[type="radio"] {
	width: 1.1em;
	height: 1.1em;
	accent-color: var(--bagd-color-navy);
}

.signup-form .ff-el-form-check-label {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	font-weight: 400;
	cursor: pointer;
}

.signup-form button,
.signup-form input[type="submit"],
.signup-form .ff-btn-submit {
	display: inline-block !important;
	width: auto !important;
	background: var(--bagd-color-navy) !important;
	color: #fff !important;
	font-weight: 800 !important;
	font-size: 1.1rem !important;
	text-align: center !important;
	border: 5px solid var(--bagd-color-navy-border) !important;
	border-radius: 80px !important;
	padding: 0.9rem 2.5rem !important;
	cursor: pointer;
}

.signup-form button:hover,
.signup-form input[type="submit"]:hover,
.signup-form .ff-btn-submit:hover {
	opacity: 0.9;
}

/* -------------------------------------------------------------------------
   Homepage — About teaser + member logos
   These two sections share one continuous navy-to-steel-blue gradient wash
   (About starts at the solid navy the Statement of Principles section above
   it ends on; member logos picks up where About leaves off), per Figma.
   ------------------------------------------------------------------------- */

.about-teaser {
	background: linear-gradient(180deg, var(--bagd-color-navy) 0%, var(--bagd-color-navy-mid) 100%);
	color: #fff;
	padding-block: 4rem;
}

.about-teaser__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 3rem;
	align-items: center;
}

.about-teaser__graphic {
	aspect-ratio: 4 / 3;
	display: flex;
	align-items: center;
	justify-content: center;
}

.about-teaser__graphic img {
	display: block;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

@media (max-width: 782px) {
	.about-teaser__inner {
		grid-template-columns: 1fr;
	}

	.about-teaser__graphic {
		order: 2;
	}
}

.member-logos {
	padding-block: 4rem;
	background: linear-gradient(180deg, var(--bagd-color-navy-mid) 0%, var(--bagd-color-navy-light) 100%);
	color: #fff;
	text-align: center;
}

.member-logos h2 {
	margin: 0 0 2rem;
}

.member-logos__grid {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 4rem;
}

.member-logos__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
}

.member-logos__image {
	height: 240px;
	width: auto;
	max-width: 100%;
	object-fit: contain;
	filter: brightness(0) invert(1);
}

.member-logos__caption {
	font-weight: 700;
}

.member-logos__notice {
	color: rgba(255, 255, 255, 0.8);
}

/* -------------------------------------------------------------------------
   News & events listing (home.php / archive.php / search.php)
   ------------------------------------------------------------------------- */

.news-listing {
	padding-block: 3rem;
}

.news-listing .page-title {
	margin-bottom: 2rem;
}

.news-listing__controls {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1.5rem;
	margin-bottom: 2rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid var(--bagd-color-navy-border);
}

.news-listing__tabs {
	display: flex;
	gap: 2rem;
}

.news-listing__tab {
	color: var(--bagd-color-navy);
	text-decoration: none;
	font-weight: 700;
	padding-bottom: 0.5rem;
	border-bottom: 2px solid transparent;
}

.news-listing__tab.is-active {
	border-bottom-color: var(--bagd-color-navy);
}

.news-listing__search {
	display: flex;
	align-items: center;
	border: 1px solid var(--bagd-color-navy-border);
	border-radius: 80px;
	padding: 0.4rem 0.4rem 0.4rem 1.25rem;
	gap: 0.5rem;
}

.news-listing__search input {
	border: 0;
	outline: 0;
	font: inherit;
	min-width: 200px;
}

.news-listing__search button {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--bagd-color-navy);
	color: #fff;
	border: 0;
	border-radius: 50%;
	width: 32px;
	height: 32px;
	cursor: pointer;
	flex-shrink: 0;
}

.news-listing__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 2rem;
}

@media (max-width: 900px) {
	.news-listing__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.news-listing__grid {
		grid-template-columns: 1fr;
	}
}

.news-listing__pagination {
	margin-top: 3rem;
}

.news-listing__pagination ul {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.news-listing__pagination a,
.news-listing__pagination span {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 2.25rem;
	height: 2.25rem;
	padding-inline: 0.5rem;
	border: 1px solid var(--bagd-color-navy-border);
	border-radius: 4px;
	color: var(--bagd-color-navy);
	text-decoration: none;
}

.news-listing__pagination .current {
	background: var(--bagd-color-navy);
	color: #fff;
	border-color: var(--bagd-color-navy);
}

@media (max-width: 600px) {
	.news-listing__controls {
		flex-direction: column;
		align-items: stretch;
	}

	.news-listing__search input {
		min-width: 0;
		flex: 1;
	}
}

/* -------------------------------------------------------------------------
   News card (shared: listing, About Us "More on our work", search)
   ------------------------------------------------------------------------- */

.news-card a {
	display: block;
	color: inherit;
	text-decoration: none;
}

.news-card__image {
	aspect-ratio: 16 / 10;
	overflow: hidden;
	border-radius: 8px;
	margin-bottom: 1rem;
}

.news-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.news-card__eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.75rem;
	font-weight: 700;
	margin: 0 0 0.25rem;
}

.news-card__title {
	font-size: 1.15rem;
	margin: 0 0 0.5rem;
}

.news-card__excerpt {
	font-size: 0.95rem;
	line-height: 1.5;
}

.news-card__date {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	font-weight: 700;
	margin-top: 1rem;
}

/* -------------------------------------------------------------------------
   Single article / event
   ------------------------------------------------------------------------- */

.single-article {
	padding-block: 3rem;
}

.single-article__eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.85rem;
	font-weight: 700;
	margin: 0 0 0.5rem;
}

.single-article__byline {
	font-size: 1.1rem;
	margin-top: 0;
}

.single-article__image img {
	width: 100%;
	border-radius: 8px;
	margin-block: 1.5rem;
}

.single-article__content {
	max-width: none;
}

.single-article__content p {
	line-height: 1.6;
}

.single-article__back {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	margin-top: 2rem;
	background: var(--bagd-color-navy);
	color: #fff;
	border-radius: 4px;
}