/* ==========================================================================
   News section — index, archives and single articles.
   Tokens mirror dist/main.css: ink #1f2232, slate #313548, page #f3f8ef,
   plum #a582ab, Zodiak display / Plus Jakarta Sans body, 30px card radius,
   .comm-btn arrow links, Bootstrap 4 grid (container max 1380px).
   Loaded after main.css via inc/news.php.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero (used when the Posts page has no ACF banner block, on archives, singles)
   -------------------------------------------------------------------------- */
.news-hero {
	background-color: #313548;
}
.news-hero .title-section h1 {
	color: #fff;
}
.news-hero--plain {
	height: 38vh;
	min-height: 320px;
	background-image: none;
}
.news-hero--plain .banner-tint {
	display: none;
}
.news-hero--single {
	align-items: flex-end;
	height: 65vh;
	min-height: 480px;
	padding-bottom: 70px;
}
/* Index/archive header with a featured image inherits .inner-page-comm-header's
   65vh from the theme; trim it to a shorter banner (the plain, no-image variant
   keeps its own height above). */
.news-index .news-hero:not(.news-hero--plain) {
	height: 38vh;
	min-height: 300px;
}
.news-hero--single.news-hero--plain {
	height: auto;
	min-height: 0;
	padding: 90px 0 70px;
}
/* Darker, bottom-weighted tint so a white title stays legible over any photo */
.news-hero--single .banner-tint {
	display: block;
	background: linear-gradient(180deg, rgba(31, 34, 50, 0.15) 0%, rgba(31, 34, 50, 0.45) 45%, rgba(31, 34, 50, 0.8) 100%);
}
.news-hero--single .news-article__eyebrow,
.news-hero--single .news-article__eyebrow a {
	color: #fff;
}
.news-hero--single .news-article__eyebrow a:hover {
	border-bottom-color: #fff;
}
.news-hero--single .news-article__title {
	margin-bottom: 0;
	color: #fff;
	text-wrap: balance;
}
/* header.php (Twenty Seventeen base) prints the post's featured image as a top
   banner — .single-featured-image-header — on every single post. The news
   single template already uses that image as its hero, so suppress the theme's
   duplicate on news articles. (news.css only loads on news views, and .single
   scopes it to posts, leaving pages untouched.) */
.single .single-featured-image-header {
	display: none;
}

/* --------------------------------------------------------------------------
   Listing wrapper, toolbar, filters
   -------------------------------------------------------------------------- */
.news-listing,
.news-related {
	padding: 100px 0 110px;
}
.news-listing__toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px 40px;
	margin-bottom: 50px;
}
.news-listing__toolbar-main {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px 30px;
}
.news-listing__toolbar .comm-title,
.news-listing__heading {
	margin-bottom: 0;
}
.news-listing__toolbar .comm-btn a {
	font-size: 18px;
}

/* Search box — sits to the right of the category filters */
.news-listing__search {
	margin-left: auto;
}
.news-search {
	position: relative;
	display: flex;
	align-items: center;
}
.news-search__field {
	width: 280px;
	max-width: 100%;
	height: 46px;
	padding: 0 48px 0 22px;
	border: 1px solid #1f2232;
	border-radius: 30px;
	background-color: #fff;
	color: #1f2232;
	font-family: "Plus Jakarta Sans", sans-serif;
	font-size: 15px;
	line-height: 44px;
	appearance: none;
	-webkit-appearance: none;
}
.news-search__field::placeholder {
	color: #6b6f7d;
	opacity: 1;
}
.news-search__field:focus {
	outline: none;
	border-color: #313548;
	box-shadow: 0 0 0 3px rgba(49, 53, 72, 0.12);
}
.news-search__submit {
	position: absolute;
	right: 5px;
	top: 50%;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: transparent;
	color: #1f2232;
	cursor: pointer;
	transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}
.news-search__submit:hover,
.news-search__submit:focus-visible {
	background-color: #1f2232;
	color: #fff;
	outline: none;
}
.news-search__submit svg {
	display: block;
}
@media only screen and (max-width: 991px) {
	.news-listing__search {
		margin-left: 0;
		width: 100%;
	}
	.news-search__field {
		width: 100%;
	}
}
.news-filters ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}
.news-filters a {
	display: inline-block;
	padding: 11px 22px 12px;
	border: 1px solid #1f2232;
	border-radius: 30px;
	color: #1f2232;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}
.news-filters a:hover,
.news-filters a:focus-visible {
	background-color: #1f2232;
	color: #fff;
	text-decoration: none;
}
.news-filters a.is-active {
	background-color: #1f2232;
	color: #fff;
}

/* --------------------------------------------------------------------------
   Card
   -------------------------------------------------------------------------- */
.news-grid {
	margin-top: -30px;
}
.news-grid__item {
	margin-top: 30px;
	display: flex;
}
.news-card {
	display: flex;
	flex-direction: column;
	width: 100%;
	background-color: #fff;
	border-radius: 30px;
	overflow: hidden;
	transition: transform 0.25s ease-in-out, box-shadow 0.25s ease-in-out;
}
.news-card:hover,
.news-card:focus-within {
	transform: translateY(-4px);
	box-shadow: 0 18px 40px rgba(31, 34, 50, 0.1);
}
.news-card__media {
	display: block;
	position: relative;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background-color: #e6ede1;
}
.news-card__media img,
.news-card__placeholder {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.news-card__placeholder {
	background: linear-gradient(135deg, #e6ede1 0%, #cfdac7 100%);
}
.news-card__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 38px 40px 40px;
}
.news-card__meta,
.news-article__eyebrow {
	margin-bottom: 14px;
	color: #313548;
	font-size: 14px;
	font-weight: 600;
	line-height: 22px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.news-card__meta a,
.news-article__eyebrow a {
	color: #313548;
	text-decoration: none;
	border-bottom: 1px solid transparent;
}
.news-card__meta a:hover,
.news-article__eyebrow a:hover {
	border-bottom-color: #313548;
	text-decoration: none;
}
.news-card__sep {
	margin: 0 8px;
}
.news-card__title {
	margin-bottom: 14px;
	color: #1f2232;
	font-family: "Plus Jakarta Sans", sans-serif !important;
	font-size: 24px !important;
	font-weight: 600;
	line-height: 32px !important;
}
.news-card__title a {
	color: inherit;
	text-decoration: none;
}
.news-card__title a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}
.news-card__excerpt p {
	margin-bottom: 0;
	color: #1f2232;
	font-size: 16px;
	line-height: 26px;
}
.news-card .comm-btn {
	margin-top: auto;
	padding-top: 30px;
}
.news-card .comm-btn a {
	justify-content: space-between;
	font-size: 16px;
}
.news-card .comm-btn a svg {
	flex: 0 0 44px;
	max-width: 44px;
	width: 44px;
	height: 44px;
	margin-left: 20px;
}

/* --------------------------------------------------------------------------
   Featured story (page 1 of the index)
   -------------------------------------------------------------------------- */
.news-feature {
	margin-bottom: 60px;
	background-color: #fff;
	border-radius: 30px;
	overflow: hidden;
}
.news-feature__media {
	display: block;
	height: 100%;
	min-height: 420px;
	background-color: #e6ede1;
}
.news-feature__media img,
.news-feature__media .news-card__placeholder {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.news-feature__body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 100%;
	padding: 70px 70px 70px 65px;
}
.news-feature__flag {
	display: inline-block;
	padding: 4px 10px 5px;
	border-radius: 20px;
	background-color: #a582ab;
	color: #fff;
	font-size: 12px;
	line-height: 1;
}
.news-feature__title {
	margin-bottom: 22px;
	color: #1f2232;
	font-family: Zodiak-Extrabold, Zodiak, Georgia, serif;
	font-size: 42px;
	line-height: 50px;
}
.news-feature__title a {
	color: inherit;
	text-decoration: none;
}
.news-feature__title a:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
}
.news-feature__excerpt p {
	color: #1f2232;
	font-size: 18px;
	line-height: 28px;
}
.news-feature .comm-btn {
	margin-top: 20px;
}

/* --------------------------------------------------------------------------
   Pagination
   -------------------------------------------------------------------------- */
.news-pagination {
	margin-top: 70px;
}
.news-pagination .screen-reader-text + h2,
.news-pagination > h2 {
	position: absolute;
	clip: rect(1px, 1px, 1px, 1px);
	height: 1px;
	width: 1px;
	overflow: hidden;
}
.news-pagination .nav-links {
	display: flex !important;
	flex-wrap: wrap;
	justify-content: center !important;
	gap: 10px;
	float: none;
	width: 100%;
}
.news-pagination .nav-links:before,
.news-pagination .nav-links:after {
	display: none;
}
.news-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 50px;
	height: 50px;
	padding: 0 14px;
	border: 1px solid #1f2232;
	border-radius: 30px;
	color: #1f2232;
	font-size: 16px;
	font-weight: 600;
	text-decoration: none;
	transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}
.news-pagination a.page-numbers:hover,
.news-pagination a.page-numbers:focus-visible {
	background-color: #1f2232;
	color: #fff;
	text-decoration: none;
}
.news-pagination .page-numbers.current {
	background-color: #1f2232;
	color: #fff;
}
.news-pagination .page-numbers.dots {
	border-color: transparent;
}

/* --------------------------------------------------------------------------
   Empty state
   -------------------------------------------------------------------------- */
.news-empty {
	padding: 70px 50px;
	background-color: #fff;
	border-radius: 30px;
	text-align: center;
}
.news-empty h2 {
	margin-bottom: 12px;
	color: #1f2232;
	font-family: "Plus Jakarta Sans", sans-serif !important;
	font-size: 28px;
	font-weight: 600;
	line-height: 38px;
}
.news-empty p {
	margin-bottom: 0;
	color: #1f2232;
	font-size: 18px;
	line-height: 28px;
}
.news-empty .comm-btn {
	margin-top: 30px;
}
.news-empty .comm-btn a {
	justify-content: center;
}

/* --------------------------------------------------------------------------
   Single article
   -------------------------------------------------------------------------- */
.news-article {
	padding: 70px 0 90px;
}
.news-article__eyebrow {
	margin-bottom: 22px;
}
.news-article__title {
	margin-bottom: 25px;
	color: #1f2232;
	font-family: Zodiak-Bold, Zodiak, Georgia, serif;
	font-size: 60px;
	line-height: 66px;
}
.news-article__standfirst {
	margin-bottom: 40px;
	color: #313548;
	font-size: 22px;
	font-weight: 500;
	line-height: 34px;
}

/* Body copy — matches the two-column block typography */
.news-article__content > * {
	max-width: 100%;
}
.news-article__content p,
.news-article__content li {
	color: #1f2232;
	font-size: 18px;
	line-height: 28px;
}
.news-article__content p {
	margin-bottom: 24px;
}
.news-article__content a {
	color: #1f2232;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.news-article__content h2,
.news-article__content h3,
.news-article__content h4 {
	margin: 48px 0 18px;
	color: #1f2232;
	font-family: "Plus Jakarta Sans", sans-serif !important;
	font-weight: 600;
}
.news-article__content h2 {
	font-size: 32px !important;
	line-height: 42px !important;
}
.news-article__content h3 {
	font-size: 24px !important;
	line-height: 34px !important;
}
.news-article__content h4 {
	font-size: 20px;
	line-height: 30px;
}
.news-article__content ul,
.news-article__content ol {
	margin: 0 0 28px 20px;
	padding: 0;
}
.news-article__content li {
	margin-bottom: 10px;
}
.news-article__content blockquote {
	margin: 40px 0;
	padding: 6px 0 6px 30px;
	border-left: 4px solid #a582ab;
}
.news-article__content blockquote p {
	font-family: Zodiak, Georgia, serif;
	font-size: 26px;
	font-style: italic;
	line-height: 38px;
}
.news-article__content blockquote cite {
	display: block;
	font-family: "Plus Jakarta Sans", sans-serif;
	font-size: 14px;
	font-style: normal;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.news-article__content img,
.news-article__content figure img {
	max-width: 100%;
	height: auto;
	border-radius: 20px;
}
.news-article__content figure {
	margin: 40px 0;
}
.news-article__content figcaption {
	margin-top: 12px;
	color: #313548;
	font-size: 14px;
	line-height: 22px;
}

/* Inline galleries. Both the classic [gallery] shortcode and the block gallery
   need laying out here: without this each item is a full-width figure with the
   40px margin above, so they stack raggedly. Normalise to an even grid with
   equal-height, hard-cropped thumbnails and the theme's rounded corners. */
.news-article__content .gallery {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	margin: 40px 0;
}
.news-article__content .gallery-columns-1 { grid-template-columns: 1fr; }
.news-article__content .gallery-columns-2 { grid-template-columns: repeat(2, 1fr); }
.news-article__content .gallery-columns-4 { grid-template-columns: repeat(4, 1fr); }
.news-article__content .gallery-columns-5 { grid-template-columns: repeat(5, 1fr); }
.news-article__content .gallery-columns-6 { grid-template-columns: repeat(6, 1fr); }
.news-article__content .gallery-item {
	width: auto !important;   /* override WordPress's inline per-column widths */
	max-width: none !important;
	margin: 0 !important;     /* cancel the .news-article__content figure margin */
	float: none;
	text-align: left;
}
.news-article__content .gallery-icon {
	margin: 0;
	overflow: hidden;
	border-radius: 16px;
	aspect-ratio: 3 / 2;      /* even grid regardless of original image ratios */
	background-color: #e6ede1;
}
.news-article__content .gallery-icon img {
	width: 100% !important;
	height: 100% !important;
	margin: 0;
	object-fit: cover;
	border: 0 !important;     /* WordPress adds a 1px border on gallery thumbs */
	border-radius: 16px;
	transition: transform 0.4s ease;
}
.news-article__content .gallery-item a:hover .gallery-icon img {
	transform: scale(1.03);
}
.news-article__content .gallery-caption,
.news-article__content .wp-caption-text {
	display: block;
	margin-top: 8px;
	color: #313548;
	font-size: 13px;
	line-height: 20px;
}
/* Block editor gallery (if a post is built with the block editor instead) */
.news-article__content .wp-block-gallery {
	margin: 40px 0;
}
.news-article__content .wp-block-gallery figure {
	margin: 0;
}
.news-article__content .wp-block-gallery img {
	border-radius: 16px;
}
@media only screen and (max-width: 767px) {
	.news-article__content .gallery,
	.news-article__content .gallery-columns-3,
	.news-article__content .gallery-columns-4,
	.news-article__content .gallery-columns-5,
	.news-article__content .gallery-columns-6 {
		grid-template-columns: repeat(2, 1fr);
	}
}
.news-article__content .wp-block-embed__wrapper iframe,
.news-article__content iframe {
	max-width: 100%;
	border-radius: 20px;
}
.news-article__content hr {
	margin: 48px 0;
	border: 0;
	border-top: 1px solid #1f2232;
}
.news-article__pages {
	margin-top: 30px;
	font-weight: 600;
}

/* Article footer: back link + share */
.news-article__footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 25px;
	margin-top: 60px;
	padding-top: 30px;
	border-top: 1px solid #1f2232;
}
.news-article__share {
	display: flex;
	align-items: center;
	gap: 12px;
}
.news-article__share-label {
	margin-right: 6px;
	color: #1f2232;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.news-article__share a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid #1f2232;
	border-radius: 50%;
	color: #1f2232;
	font-size: 16px;
	text-decoration: none;
	transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}
.news-article__share a:hover,
.news-article__share a:focus-visible {
	background-color: #1f2232;
	color: #fff;
}

/* "More news" strip */
.news-related {
	padding-top: 0;
}
.news-related .news-listing__toolbar {
	padding-top: 80px;
	border-top: 1px solid rgba(31, 34, 50, 0.15);
}

/* --------------------------------------------------------------------------
   Responsive — breakpoints follow main.css
   -------------------------------------------------------------------------- */
@media only screen and (max-width: 1200px) {
	.news-feature__body {
		padding: 50px 45px;
	}
	.news-feature__title {
		font-size: 36px;
		line-height: 44px;
	}
	.news-article__title {
		font-size: 50px;
		line-height: 56px;
	}
}

@media only screen and (max-width: 991px) {
	.news-listing,
	.news-related {
		padding: 70px 0 80px;
	}
	.news-feature__media {
		min-height: 0;
		aspect-ratio: 3 / 2;
	}
	.news-card__body {
		padding: 30px 30px 32px;
	}
}

@media only screen and (max-width: 767px) {
	.news-hero--plain {
		height: auto;
		min-height: 0;
		padding: 70px 0 50px;
	}
	.news-hero--single {
		height: auto;
		min-height: 320px;
		padding: 120px 0 40px;
	}
	.news-hero--single .news-article__title {
		font-size: 34px;
		line-height: 40px;
	}
	.news-listing,
	.news-related {
		padding: 50px 0 60px;
	}
	.news-listing__toolbar {
		margin-bottom: 30px;
	}
	.news-feature {
		margin-bottom: 40px;
	}
	.news-feature__body {
		padding: 32px 28px 36px;
	}
	.news-feature__title {
		font-size: 30px;
		line-height: 38px;
	}
	.news-card {
		border-radius: 20px;
	}
	.news-article {
		padding: 50px 0 60px;
	}
	.news-article__title {
		font-size: 36px;
		line-height: 42px;
	}
	.news-article__standfirst {
		font-size: 19px;
		line-height: 29px;
	}
	.news-article__content h2 {
		font-size: 26px !important;
		line-height: 34px !important;
	}
	.news-article__content blockquote p {
		font-size: 22px;
		line-height: 32px;
	}
	.news-pagination {
		margin-top: 40px;
	}
}


/* ---------------------------------------------------------------------------
   Gallery lightbox
   Scoped overlay opened by assets/js/news.js. Without JS nothing here applies
   and the gallery links open the image directly.
   --------------------------------------------------------------------------- */

.news-article__content .gallery.has-lightbox .gallery-icon,
.news-article__content .wp-block-gallery.has-lightbox figure {
	cursor: zoom-in;
}

/* This theme scrolls on <html> (html overflow-y:auto, body overflow hidden), so
   locking body alone does nothing. Lock both while the lightbox is open. */
html:has(body.news-lightbox-open),
body.news-lightbox-open {
	overflow: hidden;
}

.news-lightbox {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 80px 24px 96px;
	background: rgba(31, 34, 50, 0.94);
}

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

.news-lightbox__figure {
	margin: 0;
	max-width: 100%;
	max-height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.news-lightbox__img {
	display: block;
	max-width: 100%;
	max-height: calc(100vh - 220px);
	width: auto;
	height: auto;
	border-radius: 16px;
	background-color: #313548;
	opacity: 1;
	transition: opacity 0.25s ease;
}

.news-lightbox.is-loading .news-lightbox__img {
	opacity: 0;
}

.news-lightbox__caption {
	margin: 16px 0 0;
	max-width: 760px;
	color: #ffffff;
	font-size: 15px;
	line-height: 23px;
	text-align: center;
}

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

.news-lightbox__counter {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 32px;
	margin: 0;
	color: rgba(255, 255, 255, 0.7);
	font-size: 13px;
	letter-spacing: 0.08em;
	text-align: center;
	text-transform: uppercase;
}

.news-lightbox__close,
.news-lightbox__nav {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.12);
	color: #ffffff;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.news-lightbox__close:hover,
.news-lightbox__nav:hover,
.news-lightbox__close:focus-visible,
.news-lightbox__nav:focus-visible {
	background: rgba(255, 255, 255, 0.26);
}

.news-lightbox__close:focus-visible,
.news-lightbox__nav:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 3px;
}

.news-lightbox__close svg,
.news-lightbox__nav svg {
	width: 22px;
	height: 22px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.news-lightbox__close {
	top: 24px;
	right: 24px;
}

.news-lightbox__nav--prev {
	top: 50%;
	left: 24px;
	transform: translateY(-50%);
}

.news-lightbox__nav--next {
	top: 50%;
	right: 24px;
	transform: translateY(-50%);
}

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

@media only screen and (max-width: 767px) {
	.news-lightbox {
		padding: 72px 12px 104px;
	}
	.news-lightbox__img {
		max-height: calc(100vh - 230px);
	}
	.news-lightbox__close {
		top: 12px;
		right: 12px;
	}
	.news-lightbox__nav {
		top: auto;
		bottom: 64px;
		transform: none;
	}
	.news-lightbox__nav--prev {
		left: calc(50% - 60px);
	}
	.news-lightbox__nav--next {
		right: calc(50% - 60px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.news-lightbox__img,
	.news-lightbox__close,
	.news-lightbox__nav {
		transition: none;
	}
}