/* =========================================================
 * PRESS 365 — Homepage Hero
 * Version: 1.3.0
 * =========================================================
 *
 * Typography aligned with PRESS 365 Core Design System.
 * Layout and visual structure preserved.
 * ======================================================= */


/* =========================================================
 * 1. Section
 * ======================================================= */

.p365-home-hero {
	position: relative;

	padding-top:
		18px;
}


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

.p365-home-hero__shell {
	display: grid;

	grid-template-columns:
		minmax(0, 2.2fr)
		minmax(280px, 0.8fr);

	gap: 0;

	min-height:
		560px;

	overflow:
		hidden;

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

	background:
		var(--p365-dark);

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


/* =========================================================
 * 3. Main Story
 * ======================================================= */

.p365-home-hero__main {
	position: relative;

	min-width: 0;
	min-height: 560px;

	overflow:
		hidden;

	background:
		var(--p365-dark);
}


.p365-home-hero__main-link {
	position: absolute;

	inset: 0;

	display: block;

	width: 100%;
	height: 100%;

	overflow:
		hidden;

	background:
		var(--p365-dark);

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


/* =========================================================
 * 4. Main Image
 * Real <img> for LCP Performance
 * ======================================================= */

.p365-home-hero__main-media {
	position: absolute;

	inset: 0;

	z-index: 0;

	display: block;

	width: 100%;
	height: 100%;

	overflow:
		hidden;

	pointer-events:
		none;
}


.p365-home-hero__main-image {
	position: absolute;

	inset: 0;

	display: block;

	width: 100%;
	height: 100%;

	max-width: none;

	margin: 0;
	padding: 0;

	border: 0;

	object-fit:
		cover;

	object-position:
		center;
}


/* =========================================================
 * 5. Temporary Visual Fallback
 * ======================================================= */

.p365-home-hero__main.is-placeholder
.p365-home-hero__main-link {
	background:
		radial-gradient(
			circle at 24% 30%,
			rgba(243, 154, 34, 0.18),
			transparent 28%
		),
		linear-gradient(
			135deg,
			#0c5b61 0%,
			#063d42 34%,
			#032f33 66%,
			#021f22 100%
		);
}


/* =========================================================
 * 6. Main Overlay
 * ======================================================= */

.p365-home-hero__main-overlay {
	position: absolute;

	inset: 0;

	z-index: 1;

	display: block;

	pointer-events:
		none;

	background:
		linear-gradient(
			to top,
			rgba(2, 31, 34, 0.98) 0%,
			rgba(2, 31, 34, 0.88) 22%,
			rgba(2, 31, 34, 0.42) 56%,
			rgba(2, 31, 34, 0.06) 100%
		);
}


/*
 * Extra side shading.
 */

.p365-home-hero__main::after {
	content: "";

	position: absolute;

	inset: 0;

	z-index: 2;

	pointer-events:
		none;

	background:
		linear-gradient(
			to left,
			rgba(2, 31, 34, 0.48),
			transparent 48%
		);
}


/* =========================================================
 * 7. Main Content
 * ======================================================= */

.p365-home-hero__main-content {
	position: absolute;

	z-index: 3;

	right: 0;
	bottom: 0;

	width:
		min(86%, 820px);

	padding:
		clamp(34px, 5vw, 70px);
}


/* =========================================================
 * 8. Category
 * ======================================================= */

.p365-home-hero__category {
	display: inline-flex;

	align-items: center;

	min-height:
		28px;

	margin-bottom:
		16px;

	padding:
		5px 11px;

	border-radius:
		5px;

	background:
		var(--p365-orange);

	color:
		var(--p365-white);

	font-size:
		12px;

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

	line-height:
		1;
}


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

.p365-home-hero__title {
	max-width:
		780px;

	margin:
		0 0 18px;

	color:
		var(--p365-white);

	font-size:
		var(--p365-title-xl);

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

	line-height:
		1.25;

	letter-spacing:
		0;
}


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

.p365-home-hero__excerpt {
	max-width:
		700px;

	margin:
		0 0 20px;

	color:
		rgba(255, 255, 255, 0.78);

	font-size:
		17px;

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

	line-height:
		1.85;
}


/* =========================================================
 * 11. Main Meta
 * ======================================================= */

.p365-home-hero__meta {
	display: flex;

	align-items: center;

	flex-wrap: wrap;

	gap: 10px;

	margin-bottom:
		22px;

	color:
		rgba(255, 255, 255, 0.58);

	font-size:
		12px;

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

	line-height:
		1.5;
}


.p365-home-hero__meta-dot {
	width: 4px;
	height: 4px;

	flex:
		0 0 4px;

	border-radius:
		50%;

	background:
		var(--p365-orange);
}


/* =========================================================
 * 12. CTA
 * ======================================================= */

.p365-home-hero__cta {
	display: inline-flex;

	align-items: center;

	gap: 10px;

	min-height:
		42px;

	padding:
		9px 18px;

	border:
		1px solid rgba(255, 255, 255, 0.22);

	border-radius:
		7px;

	background:
		rgba(255, 255, 255, 0.06);

	color:
		var(--p365-white);

	font-size:
		14px;

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

	line-height:
		1;

	backdrop-filter:
		blur(10px);

	transition:
		background-color var(--p365-transition),
		border-color var(--p365-transition),
		transform var(--p365-transition);
}


.p365-home-hero__main-link:hover
.p365-home-hero__cta {
	border-color:
		var(--p365-orange);

	background:
		var(--p365-orange);

	transform:
		translateX(-3px);
}


/* =========================================================
 * 13. Secondary Rail
 * ======================================================= */

.p365-home-hero__rail {
	display: grid;

	grid-template-rows:
		repeat(3, 1fr);

	min-width: 0;

	background:
		#04373b;

	border-right:
		1px solid rgba(255, 255, 255, 0.08);
}


/* =========================================================
 * 14. Secondary Story
 * ======================================================= */

.p365-home-hero__secondary {
	position: relative;

	min-width: 0;

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


.p365-home-hero__secondary:last-child {
	border-bottom:
		0;
}


.p365-home-hero__secondary-link {
	display: grid;

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

	align-items: center;

	gap: 18px;

	height: 100%;

	padding:
		18px;

	color:
		var(--p365-white);

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


.p365-home-hero__secondary-link:hover {
	background:
		rgba(255, 255, 255, 0.035);
}


/* =========================================================
 * 15. Secondary Image
 * ======================================================= */

.p365-home-hero__secondary-media {
	aspect-ratio:
		1 / 0.82;

	overflow:
		hidden;

	border-radius:
		9px;

	background-color:
		var(--p365-teal);

	background-position:
		center;

	background-repeat:
		no-repeat;

	background-size:
		cover;

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


.p365-home-hero__secondary-media.is-placeholder {
	background:
		linear-gradient(
			135deg,
			#0c6268,
			#053f44 55%,
			#032f33
		);
}


.p365-home-hero__secondary-link:hover
.p365-home-hero__secondary-media {
	transform:
		scale(1.025);
}


/* =========================================================
 * 16. Secondary Content
 * ======================================================= */

.p365-home-hero__secondary-content {
	min-width: 0;
}


.p365-home-hero__secondary-category {
	display: block;

	margin-bottom:
		8px;

	color:
		var(--p365-orange);

	font-size:
		12px;

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

	line-height:
		1.4;
}


.p365-home-hero__secondary-title {
	display:
		-webkit-box;

	overflow:
		hidden;

	margin:
		0 0 11px;

	color:
		var(--p365-white);

	font-size:
		17px;

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

	line-height:
		1.55;

	-webkit-box-orient:
		vertical;

	-webkit-line-clamp:
		3;
}


.p365-home-hero__secondary-time {
	color:
		rgba(255, 255, 255, 0.46);

	font-size:
		11px;

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

	line-height:
		1.4;
}


/* =========================================================
 * 17. Tablet
 * ======================================================= */

@media (max-width: 1050px) {

	.p365-home-hero__shell {
		grid-template-columns:
			minmax(0, 1.75fr)
			minmax(250px, 0.75fr);
	}


	.p365-home-hero__main-content {
		width:
			92%;
	}


	.p365-home-hero__title {
		font-size:
			38px;
	}


	.p365-home-hero__excerpt {
		font-size:
			16px;
	}


	.p365-home-hero__secondary-link {
		grid-template-columns:
			92px minmax(0, 1fr);

		gap:
			13px;

		padding:
			14px;
	}


	.p365-home-hero__secondary-category {
		font-size:
			11px;
	}


	.p365-home-hero__secondary-title {
		font-size:
			16px;
	}


	.p365-home-hero__secondary-time {
		font-size:
			10px;
	}
}


/* =========================================================
 * 18. Mobile / Small Tablet
 * ======================================================= */

@media (max-width: 850px) {

	.p365-home-hero {
		padding-top:
			14px;
	}


	.p365-home-hero__shell {
		display:
			block;

		min-height:
			0;

		border-radius:
			15px;
	}


	.p365-home-hero__main {
		min-height:
			500px;
	}


	.p365-home-hero__main-content {
		right: 0;
		bottom: 0;

		width:
			100%;

		padding:
			28px 24px;
	}


	.p365-home-hero__category {
		font-size:
			11px;
	}


	.p365-home-hero__title {
		font-size:
			32px;

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

		line-height:
			1.28;
	}


	.p365-home-hero__excerpt {
		font-size:
			15px;

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

		line-height:
			1.85;
	}


	.p365-home-hero__meta {
		font-size:
			11px;
	}


	.p365-home-hero__cta {
		font-size:
			13px;
	}


	.p365-home-hero__rail {
		grid-template-rows:
			none;

		border-right:
			0;

		border-top:
			1px solid rgba(255, 255, 255, 0.09);
	}


	.p365-home-hero__secondary-link {
		grid-template-columns:
			110px minmax(0, 1fr);

		min-height:
			132px;

		padding:
			16px;
	}


	.p365-home-hero__secondary-category {
		font-size:
			11px;
	}


	.p365-home-hero__secondary-title {
		font-size:
			15px;

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

		line-height:
			1.55;
	}


	.p365-home-hero__secondary-time {
		font-size:
			10px;
	}
}


/* =========================================================
 * 19. Small Mobile
 * ======================================================= */

@media (max-width: 520px) {

	.p365-home-hero__main {
		min-height:
			450px;
	}


	.p365-home-hero__main-content {
		right: 0;
		bottom: 0;

		width:
			100%;

		padding:
			24px 19px;
	}


	.p365-home-hero__category {
		margin-bottom:
			12px;

		font-size:
			11px;
	}


	.p365-home-hero__title {
		margin-bottom:
			13px;

		font-size:
			30px;

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

		line-height:
			1.30;

		letter-spacing:
			0;
	}


	.p365-home-hero__excerpt {
		display:
			-webkit-box;

		overflow:
			hidden;

		font-size:
			14px;

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

		line-height:
			1.80;

		-webkit-box-orient:
			vertical;

		-webkit-line-clamp:
			3;
	}


	.p365-home-hero__secondary-link {
		grid-template-columns:
			92px minmax(0, 1fr);

		gap:
			13px;
	}


	.p365-home-hero__secondary-title {
		font-size:
			14px;

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

		line-height:
			1.55;

		-webkit-line-clamp:
			2;
	}
}