/* =========================================================
   News page layout
   Consolidates the page-specific styling that previously
   depended on the architecture skin file.
========================================================= */

:root {
	--news-accent-green: #4dbb6d;
}

.news-list-section {
	position: relative;
	z-index: 1;
	margin-top: clamp(48px, 6vw, 72px);
	padding: 0 0 56px;
}

/* Keep the original article layout, only normalize some spacing */
.news-list-section .blog-post {
	min-width: 0;
}

.news-list-section .blog-post .row {
	align-items: flex-start;
}

.news-list-section .blog-post-image-wrapper {
	position: relative;
	min-width: 0;
	width: 95%;
	aspect-ratio: 16 / 10;
	overflow: hidden;
}

.news-list-section .blog-post-image-wrapper > a {
	display: block;
	width: 100%;
	height: 100%;
}

.news-list-section .blog-post-image-wrapper img {
	display: block;
	width: 100% !important;
	height: 100%;
	margin-bottom: 0 !important;
	object-fit: cover;
	object-position: center;
}

.news-list-section .blog-post-date {
	position: absolute;
	top: 65%;
	right: 10px;
	z-index: 2;
	margin-top: 0 !important;
	padding: 20px 13px;
	font-size: 2.4em;
	line-height: 1;
	text-align: center;
	transform: translateY(-50%);
	color: #fff !important;
	background-color: var(--news-accent-green) !important;
}

.news-list-section .blog-post-date .month-year {
	display: block;
	font-size: 0.4em;
	color: #fff !important;
}

.news-list-section .blog-post h2,
.news-list-section .blog-post p,
.news-list-section .post-infos,
.news-list-section .blog-post .btn {
	word-break: break-word;
}

.news-list-section .post-infos {
	flex-wrap: wrap;
	row-gap: 6px;
}

.news-list-section .blog-post .btn {
	white-space: normal;
}

.news-list-section .custom-border-radius {
	border-radius: 0 !important;
}

#header .header-btn-collapse-nav {
	border-color: var(--news-accent-green) !important;
	color: #fff !important;
}

.news-list-section .btn-outline.btn-primary {
	color: var(--news-accent-green);
	border-color: var(--news-accent-green);
}

.news-list-section .btn-outline.btn-primary:hover,
.news-list-section .btn-outline.btn-primary.hover,
.news-list-section .btn-outline.btn-primary:active,
.news-list-section .btn-outline.btn-primary.active,
.news-list-section .show > .btn-outline.btn-primary.dropdown-toggle {
	color: #fff !important;
	background-color: var(--news-accent-green) !important;
	border-color: var(--news-accent-green) !important;
}

.news-list-section .btn-outline.btn-primary:focus,
.news-list-section .btn-outline.btn-primary.focus {
	box-shadow: 0 0 0 3px rgba(77, 187, 109, 0.2);
}

.news-list-section .btn-outline.btn-primary[target="_blank"]:focus,
.news-list-section .btn-outline.btn-primary[target="_blank"]:focus-visible,
.news-list-section .btn-outline.btn-primary[target="_blank"]:active,
.news-list-section .btn-outline.btn-primary[target="_blank"].active {
	color: var(--news-accent-green) !important;
	background-color: transparent !important;
	border-color: var(--news-accent-green) !important;
	box-shadow: none !important;
}

/* ---------------------------------------------------------
   Large tablets / smaller desktops
--------------------------------------------------------- */
@media (max-width: 1199px) {
	.news-list-section {
		padding-bottom: 52px;
	}
}

/* ---------------------------------------------------------
   Tablet
--------------------------------------------------------- */
@media (max-width: 991px) {
	.news-list-section {
		padding-bottom: 48px;
	}

	.news-list-section .blog-post-image-wrapper {
		width: 100%;
		margin-bottom: 18px;
	}

	.news-list-section .blog-post .btn {
		margin-top: 24px !important;
	}
}

/* ---------------------------------------------------------
   Mobile
--------------------------------------------------------- */
@media (max-width: 767px) {
	.news-list-section {
		padding-bottom: 42px;
	}

	.news-list-section .row.mt-2.mb-2 {
		margin-top: 0 !important;
		margin-bottom: 0 !important;
	}

	.news-list-section .blog-post-date {
		top: 62%;
		right: 8px;
		padding: 14px 9px;
		font-size: 1.8rem;
	}

	.news-list-section .blog-post h2 {
		line-height: 1.35;
		word-break: break-word;
	}

	.news-list-section .blog-post p {
		word-break: break-word;
	}

	.news-list-section .blog-post .btn {
		width: 100%;
		text-align: center;
		margin-top: 20px !important;
	}

	.news-list-section hr.solid.tall.mt-5 {
		margin-top: 2rem !important;
	}
}

/* ---------------------------------------------------------
   Small mobile
--------------------------------------------------------- */
@media (max-width: 575px) {
	.news-list-section {
		padding-bottom: 36px;
	}

	.news-list-section .blog-post-date {
		top: 60%;
		right: 6px;
		padding: 10px 7px;
		font-size: 1.35rem;
	}

	.news-list-section hr.solid.tall.mt-5 {
		margin-top: 1.75rem !important;
	}
}