/* ==========================================================================
   Long-form layout: article column + sidebar (condition pages, single posts,
   blog index / archives / search). Loaded on the keys listed in
   bethree_child_longform_keys() (inc/enqueue.php).

   1. Layout    2. Article sections    3. Sidebar    4. Post list + pagination
   ========================================================================== */


/* 1. Layout --------------------------------------------------------------- */
.be_article-layout {
	display: flex;
	gap: 10px;
	padding-top: 65px;
	padding-bottom: 80px;
}

.be_article {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: 20px;
	min-width: 0;
}

.be_sidebar {
	display: flex;
	flex: 0 0 30%;
	flex-direction: column;
	gap: 20px;
	max-width: 30%;
	padding: 20px;
}

@media (max-width: 767px) {
	.be_article-layout {
		display: block;
	}

	.be_sidebar {
		max-width: none;
		padding: 10px;
	}
}


/* 2. Article sections ----------------------------------------------------- */
.be_article-section {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 10px;
}

.be_article-heading {
	margin: 40px 0 0;
	color: #000000;
	font: 300 30px/1 var(--be-font);
}

.be_article-section .be_prose > :last-child {
	margin-bottom: 0.9rem;
}

.be_article-figure {
	margin: 0;
}

.be_article-figure img {
	display: block;
	width: 100%;
	height: auto;
}

.be_article-video {
	width: 100%;
}

.be_article-video-file {
	display: block;
	width: 100%;
	height: auto;
	background: #000000;
}

.be_article-carousel .be_carousel-track {
	gap: 10px;
}

.be_article-slide {
	flex: 0 0 calc((100% - 10px) / 2);
	display: block;
	aspect-ratio: 3 / 2;
	overflow: hidden;
}

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

@media (max-width: 767px) {
	.be_article-slide {
		flex-basis: 100%;
	}
}


/* 3. Sidebar -------------------------------------------------------------- */
.be_sidebar-title {
	margin: 0;
	padding: 15px;
	border: 1px solid var(--be-line);
	border-bottom: 0;
	background: var(--be-navy);
	color: var(--be-white);
	font: 500 20px/28px var(--be-font);
}

.be_sidebar-links {
	padding: 20px 15px 40px;
	border: 1px solid #dddddd;
}

.be_sidebar-links li {
	padding-bottom: 10px;
}

.be_sidebar-links li + li {
	padding-top: 10px;
	border-top: 1px solid var(--be-line);
}

.be_sidebar-links a {
	display: flex;
	align-items: center;
	gap: 14px;
	color: #192431;
	font: 500 15px/1.5 var(--be-font);
	transition: color 0.3s;
}

.be_sidebar-links .be_icon {
	width: 16px;
	height: 16px;
	fill: var(--be-slate);
	transition: fill 0.3s;
}

.be_sidebar-links a:hover,
.be_sidebar-links a:focus,
.be_sidebar-links a[aria-current="page"] {
	color: #3055ab;
}

.be_sidebar-links a:hover .be_icon,
.be_sidebar-links a[aria-current="page"] .be_icon {
	fill: #3055ab;
}

.be_sidebar-posts {
	display: flex;
	flex-direction: column;
	gap: 33px;
	padding-top: 20px;
}

.be_sidebar-post {
	display: flex;
}

.be_sidebar-post-thumb {
	position: relative;
	flex: 0 0 42%;
	margin-right: 8px;
	aspect-ratio: 1 / 1.05;
	overflow: hidden;
	background: var(--be-line);
}

.be_sidebar-post-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.be_sidebar-post-text {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	min-width: 0;
}

.be_sidebar-post-title {
	margin: 0 0 5px;
	font: 300 16px/1.2 var(--be-font);
}

.be_sidebar-post-title a {
	color: var(--be-navy);
}

.be_sidebar-post-more {
	color: var(--be-navy);
	font: 700 12px/1.5 var(--be-font-sys);
}

.be_sidebar-post-title a:hover,
.be_sidebar-post-more:hover {
	color: var(--be-red);
}

.be_sidebar-contact {
	padding-top: 20px;
}

.be_sidebar-contact li,
.be_sidebar-contact a {
	display: flex;
	align-items: center;
	gap: 26px;
	color: #192431;
	font: 400 14px/22px var(--be-font);
}

.be_sidebar-contact li {
	padding-bottom: 10px;
}

.be_sidebar-contact .be_icon {
	width: 21px;
	height: 21px;
	fill: var(--be-navy);
}

.be_sidebar-contact a:hover {
	color: var(--be-red);
}

.be_sidebar-search {
	display: flex;
}

.be_sidebar-search input {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 56px;
	padding: 16px;
	border: 1px solid #cdcdcd;
	border-right: 0;
	border-radius: 0;
	background: var(--be-white);
	color: #515962;
	font: 400 16px/24px var(--be-font-sys);
}

.be_sidebar-search button {
	display: flex;
	flex: 0 0 88px;
	align-items: center;
	justify-content: center;
	background: var(--be-navy);
	color: var(--be-white);
	font-size: 18px;
	transition: background-color 0.3s;
}

.be_sidebar-search button:hover,
.be_sidebar-search button:focus {
	background: var(--be-sky);
}


/* 4. Post list (blog index, archives, search) + pagination ---------------- */
.be_bloglist {
	display: flex;
	padding-block: 10px;
}

.be_bloglist-main {
	display: flex;
	flex: 0 0 75%;
	flex-direction: column;
	gap: 20px;
	max-width: 75%;
	padding: 10px;
}

.be_bloglist .be_sidebar {
	flex-basis: 25%;
	max-width: 25%;
	padding: 10px;
}

.be_bloglist .be_sidebar-links {
	padding-bottom: 20px;
}

.be_bloglist .be_sidebar-links li {
	padding-bottom: 7.5px;
}

.be_bloglist .be_sidebar-links li + li {
	padding-top: 7.5px;
}

.be_bloglist-title {
	margin: 40px 0 0;
	color: #000000;
	font: 300 30px/1 var(--be-font);
}

.be_bloglist-items {
	display: flex;
	flex-direction: column;
	gap: 30px;
}

.be_postrow {
	display: flex;
	padding: 10px;
}

.be_postrow-image {
	flex: 0 0 40%;
	max-width: 40%;
	padding: 10px;
}

.be_postrow-image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.be_postrow-text {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: 20px;
	min-width: 0;
	padding: 10px;
}

.be_postrow-title {
	margin: 0;
	font: 300 24px/31px var(--be-font-sys);
}

.be_postrow-title a {
	color: var(--be-navy);
}

.be_postrow-title a:hover {
	color: var(--be-red);
}

.be_postrow-excerpt {
	margin: 0 0 0.9rem;
	color: var(--be-grey);
	font: 400 16px/24px var(--be-font-sys);
}

.be_bloglist-empty {
	color: var(--be-grey);
	font: 300 16px/24px var(--be-font);
}

.be_pagination {
	display: flex;
	justify-content: center;
	gap: 0;
	text-align: center;
}

.be_pagination .page-numbers {
	margin-right: 5px;
	padding: 0 5px;
	color: var(--be-navy);
	font: 400 16px/1.5 var(--be-font-sys);
}

.be_pagination .page-numbers.current {
	font-weight: 700;
}

.be_pagination a.page-numbers:hover {
	color: var(--be-red);
}

@media (max-width: 1024px) {
	.be_bloglist-main {
		flex-basis: 66%;
		max-width: 66%;
	}

	.be_bloglist .be_sidebar {
		flex-basis: 34%;
		max-width: 34%;
	}
}

@media (max-width: 767px) {
	.be_bloglist {
		display: block;
	}

	.be_bloglist-main,
	.be_bloglist .be_sidebar {
		max-width: none;
	}

	.be_postrow {
		display: block;
	}

	.be_postrow-image {
		display: block;
		max-width: none;
	}
}