/* =========================================================
 * PRESS 365 — Behind The News
 * Version: 1.1.0
 * =========================================================
 *
 * Typography aligned with PRESS 365 Core Design System.
 * Layout and visual structure preserved.
 * ======================================================= */


/* =========================================================
 * 1. Module
 * ======================================================= */

.p365-behind {
	position: relative;

	width: 100%;
}


/* =========================================================
 * 2. Shell
 * ======================================================= */

.p365-behind__shell {
	overflow: hidden;

	border-radius:
		var(--p365-radius-lg);

	background:
		var(--p365-dark);

	color:
		var(--p365-white);

	box-shadow:
		var(--p365-shadow-xs);
}


/* =========================================================
 * 3. Header
 * ======================================================= */

.p365-behind__head {
	display: flex;

	align-items: center;

	justify-content:
		space-between;

	gap:
		18px;

	min-height:
		52px;

	padding:
		0 18px;

	border-bottom:
		1px solid rgba(255,255,255,.10);
}


.p365-behind__title {
	position: relative;

	margin:
		0;

	padding-right:
		13px;

	color:
		var(--p365-white);

	font-size:
		22px;

	font-weight:
		var(--p365-weight-black);

	line-height:
		1.2;
}


.p365-behind__title::before {
	content: "";

	position: absolute;

	top:
		50%;

	right:
		0;

	width:
		4px;

	height:
		21px;

	border-radius:
		20px;

	background:
		var(--p365-orange);

	transform:
		translateY(-50%);
}


.p365-behind__more {
	display: inline-flex;

	align-items: center;

	gap:
		6px;

	color:
		rgba(255,255,255,.62);

	font-size:
		11px;

	font-weight:
		var(--p365-weight-extrabold);

	line-height:
		1.4;
}


.p365-behind__more:hover {
	color:
		var(--p365-orange);
}


/* =========================================================
 * 4. Main Layout
 * ======================================================= */

.p365-behind__content {
	display: grid;

	grid-template-columns:
		minmax(0, 1fr)
		220px;

	min-height:
		190px;
}


/* =========================================================
 * 5. Main Story
 * ======================================================= */

.p365-behind-main {
	min-width:
		0;
}


.p365-behind-main__link {
	display: grid;

	grid-template-columns:
		minmax(190px, .75fr)
		minmax(0, 1fr);

	height:
		100%;

	color:
		var(--p365-white);
}


/* =========================================================
 * 6. Main Media
 * ======================================================= */

.p365-behind-main__media {
	position: relative;

	overflow:
		hidden;

	background:
		#063f44;
}


.p365-behind-main__media img {
	width:
		100%;

	height:
		100%;

	object-fit:
		cover;

	transition:
		transform var(--p365-transition);
}


.p365-behind-main__link:hover
.p365-behind-main__media img {
	transform:
		scale(1.025);
}


.p365-behind-main__media.is-placeholder {
	background:
		radial-gradient(
			circle at 35% 30%,
			rgba(243,154,34,.16),
			transparent 30%
		),
		linear-gradient(
			135deg,
			#0c5c62,
			#04373b 50%,
			#021f22
		);
}


/* =========================================================
 * 7. Main Body
 * ======================================================= */

.p365-behind-main__body {
	display: flex;

	flex-direction:
		column;

	justify-content:
		center;

	padding:
		20px 24px;
}


/* =========================================================
 * 8. Main Label
 * ======================================================= */

.p365-behind-main__label {
	width:
		fit-content;

	margin-bottom:
		7px;

	color:
		var(--p365-orange);

	font-size:
		11px;

	font-weight:
		var(--p365-weight-extrabold);

	line-height:
		1.4;
}


/* =========================================================
 * 9. Main Title
 * ======================================================= */

.p365-behind-main__title {
	margin:
		0 0 8px;

	color:
		var(--p365-white);

	font-size:
		20px;

	font-weight:
		var(--p365-weight-extrabold);

	line-height:
		1.5;
}


/* =========================================================
 * 10. Main Excerpt
 * ======================================================= */

.p365-behind-main__excerpt {
	display:
		-webkit-box;

	overflow:
		hidden;

	margin:
		0 0 9px;

	color:
		rgba(255,255,255,.62);

	font-size:
		13px;

	font-weight:
		var(--p365-weight-medium);

	line-height:
		1.8;

	-webkit-box-orient:
		vertical;

	-webkit-line-clamp:
		2;
}


/* =========================================================
 * 11. Main Time
 * ======================================================= */

.p365-behind-main__time {
	color:
		rgba(255,255,255,.42);

	font-size:
		10px;

	font-weight:
		var(--p365-weight-medium);

	line-height:
		1.4;
}


/* =========================================================
 * 12. Secondary
 * ======================================================= */

.p365-behind__secondary {
	border-right:
		1px solid rgba(255,255,255,.10);
}


.p365-behind-side {
	height:
		100%;
}


.p365-behind-side__link {
	display: flex;

	flex-direction:
		column;

	height:
		100%;

	padding:
		10px;

	color:
		var(--p365-white);

	transition:
		background-color var(--p365-transition-fast);
}


.p365-behind-side__link:hover {
	background:
		rgba(255,255,255,.035);
}


/* =========================================================
 * 13. Secondary Media
 * ======================================================= */

.p365-behind-side__media {
	width:
		100%;

	aspect-ratio:
		16 / 8.5;

	overflow:
		hidden;

	margin-bottom:
		9px;

	border-radius:
		7px;

	background:
		#075258;
}


.p365-behind-side__media img {
	width:
		100%;

	height:
		100%;

	object-fit:
		cover;

	transition:
		transform var(--p365-transition);
}


.p365-behind-side__link:hover
.p365-behind-side__media img {
	transform:
		scale(1.025);
}


.p365-behind-side__media.is-placeholder {
	background:
		linear-gradient(
			135deg,
			#12636a,
			#063b40,
			#02272a
		);
}


/* =========================================================
 * 14. Secondary Title
 * ======================================================= */

.p365-behind-side__title {
	display:
		-webkit-box;

	overflow:
		hidden;

	margin:
		0;

	color:
		rgba(255,255,255,.90);

	font-size:
		14px;

	font-weight:
		var(--p365-weight-extrabold);

	line-height:
		1.55;

	-webkit-box-orient:
		vertical;

	-webkit-line-clamp:
		3;

	transition:
		color var(--p365-transition-fast);
}


.p365-behind-side__link:hover
.p365-behind-side__title {
	color:
		var(--p365-white);
}


/* =========================================================
 * 15. Responsive — Tablet
 * ======================================================= */

@media (max-width: 1000px) {

	.p365-behind__content {
		grid-template-columns:
			1fr;
	}


	.p365-behind__secondary {
		display:
			none;
	}


	.p365-behind-main__title {
		font-size:
			20px;
	}
}


/* =========================================================
 * 16. Responsive — Mobile
 * ======================================================= */

@media (max-width: 600px) {

	.p365-behind__head {
		gap:
			12px;
	}


	.p365-behind__title {
		font-size:
			21px;

		font-weight:
			var(--p365-weight-black);
	}


	.p365-behind__more {
		font-size:
			11px;
	}


	.p365-behind-main__link {
		display:
			block;
	}


	.p365-behind-main__media {
		aspect-ratio:
			16 / 8;
	}


	.p365-behind-main__body {
		padding:
			18px;
	}


	.p365-behind-main__label {
		font-size:
			10px;
	}


	.p365-behind-main__title {
		font-size:
			18px;

		font-weight:
			var(--p365-weight-extrabold);

		line-height:
			1.55;
	}


	.p365-behind-main__excerpt {
		font-size:
			13px;

		font-weight:
			var(--p365-weight-medium);

		line-height:
			1.8;
	}


	.p365-behind-main__time {
		font-size:
			10px;
	}
}