/* ==========================================================================
   Blog – templates/page-blog.php (Figma 316:7269 / mobile 316:7841)
   Top row on 1720: lead photo 672 · 24 · text 561 · 52 · side 411.
   ========================================================================== */

.be_blog {
	display: flex;
	flex-direction: column;
	gap: calc(50 * var(--u));
	padding-top: calc(50 * var(--u));
}

.be_blog-cat {
	display: flex;
	align-items: center;
	gap: calc(8 * var(--u));
	color: var(--be-gold);
}

.be_blog-cat::before {
	content: "";
	flex: none;
	width: calc(12 * var(--u));
	height: calc(12 * var(--u));
	background: var(--be-gold);
}




/* Figma Enter 316:7632 / cards main 316:8939, News 316:7750, top-image 316:8953 (639ms gentle):
   the plus turns into a gold ×, the black-and-white photo takes its colours. */
.be_blog-main:hover .be_blog-enter,
.be_blog-side:hover .be_blog-enter,
.be_blog-card:hover .be_blog-enter,
.be_blog-enter:focus-visible {
	color: var(--be-gold);
	transform: rotate(45deg);
}

.be_blog-top {
	display: grid;
	grid-template-columns: minmax(0, 1257fr) minmax(0, 411fr);
	justify-content: space-between;
	gap: calc(52 * var(--u));
}

.be_blog-main {
	display: grid;
	grid-template-columns: minmax(0, 672fr) minmax(0, 561fr);
	gap: calc(24 * var(--u));
}

.be_blog-main-photo,
.be_blog-side-photo,
.be_blog-card-photo {
	display: block;
	overflow: hidden;
	background: var(--be-navy);
}

.be_blog-main-photo {
	aspect-ratio: 672 / 404;
}

.be_blog-side-photo {
	aspect-ratio: 411 / 243;
}

.be_blog-card-photo {
	aspect-ratio: 557 / 144;
}

.be_blog-main-photo img,
.be_blog-side-photo img,
.be_blog-card-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(1);
	transition: filter var(--be-t-btn);
}

.be_blog-main:hover img,
.be_blog-side:hover img,
.be_blog-card:hover img {
	filter: grayscale(0);
}

.be_blog-main-body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: calc(24 * var(--u));
}

.be_blog-main-title,
.be_blog-side-title {
	font: var(--be-h3);
}

.be_blog-main-title a:hover,
.be_blog-side-title a:hover,
.be_blog-card-title a:hover {
	color: var(--be-gold);
}

.be_blog-side {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: calc(12 * var(--u));
}

.be_blog-side-photo {
	width: 100%;
	margin-bottom: calc(12 * var(--u));
}

.be_blog-all {
	display: flex;
	flex-direction: column;
	gap: calc(24 * var(--u));
}

.be_blog-track {
	gap: calc(24 * var(--u));
	list-style: none;
}

.be_blog-track .be_blog-card {
	width: calc((100% - calc(48 * var(--u))) / 3);
}





.be_blog-arrows {
	display: flex;
	gap: calc(24 * var(--u));
}

@media (max-width: 1280px) {
	.be_blog-top {
		grid-template-columns: 1fr;
	}

	.be_blog-side {
		display: grid;
		grid-template-columns: 300px 1fr;
		column-gap: 24px;
	}

	.be_blog-side-photo {
		grid-row: 1 / span 3;
		margin: 0;
	}
}

@media (max-width: 1024px) {
	.be_blog-card {
		width: calc((100% - 24px) / 2);
	}
}

@media (max-width: 700px) {
	.be_blog {
		gap: 32px;
		padding-top: 24px;
	}

	.be_blog-main {
		grid-template-columns: 1fr;
	}

	.be_blog-side {
		display: flex;
	}

	.be_blog-card {
		width: 100%;
	}

	.be_blog-card-photo {
		aspect-ratio: 335 / 160;
	}
}