/* ============================================================
 * page-news-v4.css
 *
 * News blog template (separate from Press). Loaded only when this
 * page template is active.
 *
 * Per MDR-OCA-News-v3:
 *   Hero            440 px tall, photo bg, NO overlay, bottom-aligned title
 *   Search          Single underline-only input, 424 x 49, centered
 *   Grid            3 cols desktop / 2 tablet / 1 mobile
 *   Card            Light Gray #F4F4F4 bg, 25 px padding, 16 px gap
 *     Image         Square 1:1 aspect ratio
 *     Title         Montserrat 600 / 21 / 31 / Prussian Blue
 *     Divider       1 px line, full card width
 *     Excerpt       Montserrat 400 / 17 / 27 / Brand Black #18020C
 *     Read More     Montserrat 500 / 16 / 24 / uppercase / Gold (bottom)
 *   Load More       Gold button .mdl-btn--gold
 *   Strategic CTA   Reused from home-v4.css
 * ============================================================ */

/* ---------- HERO ----------------------------------------- *
 * Bottom-aligned title + subtitle, no overlay tint. */
.mdl-news-v4 .mdl-news-hero {
	position: relative;
	min-height: 440px;
	background: #243952 center center / cover no-repeat;
	color: #fff;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	text-align: center;
	padding: 80px 32px 56px;
}
.mdl-news-v4 .mdl-news-hero__inner {
	position: relative;
	z-index: 1;
	max-width: 920px;
	margin: 0 auto;
}
.mdl-news-v4 .mdl-news-hero__title {
	font-family: "Montserrat", sans-serif;
	font-weight: 700;                /* Bold per Figma */
	font-size: 46px;
	line-height: 1.25;
	letter-spacing: 0;
	text-transform: uppercase;
	color: #fff;
	margin: 0 0 16px;
}
.mdl-news-v4 .mdl-news-hero__sub {
	font-family: "Montserrat", sans-serif;
	font-weight: 600;                /* SemiBold per Figma */
	font-size: 21px;
	line-height: 31px;
	color: #fff;
	margin: 0;
}

/* ---------- SEARCH (underline-only, centered) ----------- */
.mdl-news-v4 .mdl-news-controls {
	max-width: 600px;
	margin: 48px auto 32px;
	padding: 0 32px;
}
.mdl-news-v4 .mdl-news-controls__form {
	display: flex;
	justify-content: center;
}
.mdl-news-v4 .mdl-news-controls__field {
	position: relative;
	width: 424px;
	max-width: 100%;
}
.mdl-news-v4 .mdl-news-controls__field input {
	width: 100%;
	height: 49px;
	padding: 0 36px 0 0;
	border: 0;
	border-bottom: 1px solid #506272;
	background: transparent;
	color: #15071E;
	font-family: "Montserrat", sans-serif;
	font-size: 16px;
	line-height: 20px;
	font-weight: 400;
	box-sizing: border-box;
	border-radius: 0;
	outline: none;
	box-shadow: none;
	transition: border-color .15s ease;
}
.mdl-news-v4 .mdl-news-controls__field input::placeholder {
	color: #15071E;
	opacity: 0.85;
}
.mdl-news-v4 .mdl-news-controls__field input:focus {
	border-bottom-color: var(--mdl-gold, #CAA45D);
}

/* === Specificity beat-down for parent-theme button rules ====================
 * Same trick as on the Press template - parent theme has a (0, 7, 1) button
 * rule that wins over our class-based selector. Target by ID (1, 0, 0). */
#mdl-news-search-submit,
#mdl-news-search-submit:hover,
#mdl-news-search-submit:focus,
#mdl-news-search-submit:active,
#mdl-news-search-submit:focus-visible,
.mdl-news-v4 .mdl-news-controls__submit,
.mdl-news-v4 .mdl-news-controls__submit:hover,
.mdl-news-v4 .mdl-news-controls__submit:focus,
.mdl-news-v4 .mdl-news-controls__submit:active,
.mdl-news-v4 .mdl-news-controls__submit:focus-visible {
	position: absolute !important;
	top: 50% !important;
	right: 0 !important;
	left: auto !important;
	bottom: auto !important;
	transform: translateY(-50%) !important;
	background-color: transparent !important;
	background-repeat: no-repeat !important;
	background-position: center center !important;
	background-size: 18px 18px !important;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none'><path d='M17.0987 17.1002L13.19 13.1915M13.19 13.1915C13.8585 12.5229 14.3888 11.7292 14.7507 10.8556C15.1125 9.98201 15.2988 9.04574 15.2988 8.10021C15.2988 7.15466 15.1125 6.21839 14.7507 5.34482C14.3888 4.47125 13.8585 3.67751 13.19 3.00891C12.5213 2.34031 11.7275 1.80995 10.854 1.44811C9.98047 1.08626 9.0442 0.900024 8.09862 0.900024C7.15308 0.900024 6.2168 1.08626 5.34324 1.44811C4.46967 1.80995 3.67592 2.34031 3.00732 3.00891C1.65702 4.35921 0.898438 6.1906 0.898438 8.10021C0.898438 10.0098 1.65702 11.8412 3.00732 13.1915C4.35762 14.5418 6.18902 15.3004 8.09862 15.3004C10.0082 15.3004 11.8396 14.5418 13.19 13.1915Z' stroke='%23506272' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
	border: 0 !important;
	border-radius: 0 !important;
	outline: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin: 0 !important;
	min-width: 0 !important;
	min-height: 0 !important;
	max-width: 30px !important;
	width: 30px !important;
	height: 30px !important;
	cursor: pointer !important;
	font-size: 0 !important;
	line-height: 0 !important;
	color: transparent !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	flex: 0 0 auto !important;
	text-shadow: none !important;
}
#mdl-news-search-submit:hover,
.mdl-news-v4 .mdl-news-controls__submit:hover {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none'><path d='M17.0987 17.1002L13.19 13.1915M13.19 13.1915C13.8585 12.5229 14.3888 11.7292 14.7507 10.8556C15.1125 9.98201 15.2988 9.04574 15.2988 8.10021C15.2988 7.15466 15.1125 6.21839 14.7507 5.34482C14.3888 4.47125 13.8585 3.67751 13.19 3.00891C12.5213 2.34031 11.7275 1.80995 10.854 1.44811C9.98047 1.08626 9.0442 0.900024 8.09862 0.900024C7.15308 0.900024 6.2168 1.08626 5.34324 1.44811C4.46967 1.80995 3.67592 2.34031 3.00732 3.00891C1.65702 4.35921 0.898438 6.1906 0.898438 8.10021C0.898438 10.0098 1.65702 11.8412 3.00732 13.1915C4.35762 14.5418 6.18902 15.3004 8.09862 15.3004C10.0082 15.3004 11.8396 14.5418 13.19 13.1915Z' stroke='%23CAA45D' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
}
#mdl-news-search-submit > svg,
.mdl-news-v4 .mdl-news-controls__submit > svg { display: none !important; }

.mdl-news-v4 .mdl-news-controls__summary {
	text-align: center;
	margin: 20px 0 0;
	font-family: "Montserrat", sans-serif;
	font-size: 15px;
	color: #506272;
}
.mdl-news-v4 .mdl-news-controls__reset {
	margin-left: 12px;
	color: var(--mdl-gold, #CAA45D);
	text-decoration: none;
	font-weight: 500;
}
.mdl-news-v4 .mdl-news-controls__reset:hover { text-decoration: underline; }

/* ---------- CARD GRID ----------------------------------- */
.mdl-news-v4 .mdl-news-list {
	padding: 32px 0 80px;
}
.mdl-news-v4 .mdl-news-list__wrap {
	max-width: 1366px;
	margin: 0 auto;
	padding: 0 32px;
}
.mdl-news-v4 .mdl-news-grid {
	/* Switched from grid to flex so an incomplete last row (1 or 2 cards)
	 * centers horizontally instead of left-aligning. Each card is sized to
	 * (100% - 48px) / 3 to keep the 3-up desktop layout identical to the
	 * old grid display. */
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 24px;
}
.mdl-news-v4 .mdl-news-grid > .mdl-news-card {
	flex: 0 0 calc((100% - 48px) / 3);
	max-width: calc((100% - 48px) / 3);
}

/* ---------- CARD (Figma exact spec) ---------------------- *
 * Container: Light Gray #F4F4F4, 25 px padding, 16 px gap, flex column.
 * Image 1:1 square at the top. Title -> Divider -> Excerpt -> Read More.
 * Read More pinned to the BOTTOM (margin-top: auto) so all cards in a
 * row have their Read More on the same baseline. */
.mdl-news-v4 .mdl-news-card {
	background: #F4F4F4;
	padding: 25px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	box-sizing: border-box;
	height: 100%;
}

/* Image area - 377 x 377 square in Figma, here fluid via aspect-ratio. */
.mdl-news-v4 .mdl-news-card__media {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: #DDE3E8;
	align-self: stretch;
}
.mdl-news-v4 .mdl-news-card__media--placeholder {
	background: linear-gradient(135deg, #4E6072 0%, #243952 100%);
}
.mdl-news-v4 .mdl-news-card__img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	transition: transform .4s ease;
}
.mdl-news-v4 .mdl-news-card__media:hover .mdl-news-card__img {
	transform: scale(1.04);
}

/* Title  -  Figma: Montserrat 600 / 21 / 31 / Prussian Blue */
/* Title - Figma: Montserrat 600 / 21 / 31. Same lock-in as press cards
 * to defeat parent theme h2 rules (32px bold uppercase). */
.mdl-news-v4 .mdl-news-card__title,
.mdl-news-v4 h2.mdl-news-card__title {
	font-family: "Montserrat", sans-serif !important;
	font-weight: 600 !important;
	font-size: 21px !important;
	line-height: 31px !important;
	letter-spacing: 0 !important;
	color: #243952 !important;
	margin: 0 !important;
	text-transform: none !important;
}
.mdl-news-v4 .mdl-news-card__title a {
	color: inherit;
	text-decoration: none;
}
.mdl-news-v4 .mdl-news-card__title a:hover {
	color: var(--mdl-gold, #CAA45D);
}

/* Horizontal divider - full card width.
 * Parent theme has `hr { border: 0; display: none }` which makes the
 * divider invisible. We force every property with !important so the
 * line shows under every news card title. */
.mdl-news-v4 .mdl-news-card__rule,
.mdl-news-v4 hr.mdl-news-card__rule {
	width: 100% !important;
	height: 0 !important;
	border: 0 !important;
	border-top: 1px solid #C9D1D9 !important;
	margin: 0 !important;
	padding: 0 !important;
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
	background: transparent !important;
	align-self: stretch !important;
}

/* Excerpt  -  Figma: Montserrat 400 / 17 / 27 / Brand Black */
.mdl-news-v4 .mdl-news-card__excerpt {
	font-family: "Montserrat", sans-serif;
	font-weight: 400;
	font-size: 17px;
	line-height: 27px;
	color: #18020C;
	margin: 0;
	align-self: stretch;
	display: -webkit-box;
	-webkit-line-clamp: 6;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Read More - Figma: Montserrat 500 / 16 / 24 / uppercase / Gold.
 * `margin-top: auto` anchors it at the bottom of the flex column.
 * Parent theme adds a `→` arrow via `::after { content: "→" }` on
 * card links - we kill that pseudo so the label stands alone. */
.mdl-news-v4 .mdl-news-card__more,
.mdl-news-v4 a.mdl-news-card__more {
	display: inline-flex !important;
	align-items: center !important;
	font-family: "Montserrat", sans-serif !important;
	font-weight: 500 !important;
	font-size: 16px !important;
	line-height: 24px !important;
	letter-spacing: 1px !important;
	text-transform: uppercase !important;
	color: var(--mdl-gold, #CAA45D) !important;
	text-decoration: none !important;
	margin-top: auto !important;
}
.mdl-news-v4 .mdl-news-card__more:hover {
	color: var(--mdl-gold-dark, #B5903F) !important;
}
/* Kill parent-theme arrow pseudo elements on news card "Read More" links. */
.mdl-news-v4 .mdl-news-card__more::after,
.mdl-news-v4 .mdl-news-card__more::before,
.mdl-news-v4 a.mdl-news-card__more::after,
.mdl-news-v4 a.mdl-news-card__more::before {
	content: none !important;
	display: none !important;
	background: none !important;
	border: 0 !important;
	width: 0 !important;
	height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* ---------- LOAD MORE + EMPTY ---------------------------- */
.mdl-news-v4 .mdl-news-load {
	display: flex;
	justify-content: center;
	margin: 56px 0 0;
}
.mdl-news-v4 .mdl-news-empty {
	text-align: center;
	padding: 64px 24px;
	background: #F4F4F4;
}
.mdl-news-v4 .mdl-news-empty p {
	font-family: "Montserrat", sans-serif;
	font-size: 18px;
	color: #506272;
	margin: 0 0 24px;
}

.mdl-news-v4 .mdl-screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	position: absolute !important;
	height: 1px;
	width: 1px;
	overflow: hidden;
	word-wrap: normal !important;
}

/* ---------- Responsive ----------------------------------- */
@media (max-width: 1024px) {
	.mdl-news-v4 .mdl-news-grid {
		gap: 20px;
	}
	.mdl-news-v4 .mdl-news-grid > .mdl-news-card {
		flex: 0 0 calc((100% - 20px) / 2);
		max-width: calc((100% - 20px) / 2);
	}
}
@media (max-width: 640px) {
	.mdl-news-v4 .mdl-news-grid > .mdl-news-card {
		flex: 0 0 100%;
		max-width: 100%;
	}
}
@media (max-width: 768px) {
	.mdl-news-v4 .mdl-news-hero { min-height: 320px; padding: 60px 24px 40px; }
	.mdl-news-v4 .mdl-news-hero__title { font-size: 34px; line-height: 1.2; }
	.mdl-news-v4 .mdl-news-hero__sub   { font-size: 17px; line-height: 26px; }
	.mdl-news-v4 .mdl-news-controls__field { width: 100%; }
}
@media (max-width: 560px) {
	.mdl-news-v4 .mdl-news-grid {
		grid-template-columns: 1fr;
		gap: 16px;
	}
	.mdl-news-v4 .mdl-news-card { padding: 20px; }
	.mdl-news-v4 .mdl-news-card__title { font-size: 18px; line-height: 26px; }
	.mdl-news-v4 .mdl-news-card__excerpt { font-size: 15px; line-height: 24px; }
}