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


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

.p365-latest-news {
	position: relative;

	padding-top:
		24px;
}


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

.p365-latest-news__shell {
	overflow:
		hidden;

	border:
		1px solid var(--p365-border);

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

	background:
		var(--p365-white);

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


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

.p365-latest-news__header {
	position: relative;

	display: flex;

	align-items: center;

	justify-content:
		space-between;

	gap:
		20px;

	min-height:
		76px;

	padding:
		15px 24px;

	border-bottom:
		1px solid var(--p365-border);
}


.p365-latest-news__header::before {
	content: "";

	position: absolute;

	top: 18px;
	right: 0;

	width: 4px;
	height: 40px;

	border-radius:
		4px 0 0 4px;

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


/* =========================================================
 * 4. Heading
 * ======================================================= */

.p365-latest-news__heading {
	min-width:
		0;
}


.p365-latest-news__eyebrow {
	display: flex;

	align-items: center;

	gap:
		6px;

	margin-bottom:
		3px;

	color:
		var(--p365-teal);

	font-size:
		12px;

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

	line-height:
		1.4;
}


.p365-latest-news__live-dot {
	display: block;

	width: 6px;
	height: 6px;

	flex:
		0 0 6px;

	border-radius:
		50%;

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


.p365-latest-news__title {
	margin:
		0;

	color:
		var(--p365-dark);

	font-size:
		34px;

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

	line-height:
		1.25;
}


/* =========================================================
 * 5. More
 * ======================================================= */

.p365-latest-news__more {
	display: inline-flex;

	align-items: center;

	gap:
		8px;

	color:
		var(--p365-muted);

	font-size:
		13px;

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

	line-height:
		1.4;

	white-space:
		nowrap;

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


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


/* =========================================================
 * 6. Grid
 * ======================================================= */

.p365-latest-news__grid {
	display: grid;

	grid-template-columns:
		repeat(
			4,
			minmax(0, 1fr)
		);
}


/* =========================================================
 * 7. Item
 * ======================================================= */

.p365-latest-news__item {
	position: relative;

	min-width:
		0;

	border-left:
		1px solid var(--p365-border);
}


.p365-latest-news__item:last-child {
	border-left:
		0;
}


/* =========================================================
 * 8. Link
 * ======================================================= */

.p365-latest-news__link {
	display: block;

	height:
		100%;

	color:
		inherit;

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


.p365-latest-news__link:hover {
	background:
		#fffaf3;
}


/* =========================================================
 * 9. Media
 * ======================================================= */

.p365-latest-news__media {
	position: relative;

	aspect-ratio:
		16 / 9;

	overflow:
		hidden;

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


.p365-latest-news__media.is-placeholder {
	background:
		linear-gradient(
			135deg,
			#dce9e6 0%,
			#bfd4d0 100%
		);
}


.p365-latest-news__image {
	display: block;

	width:
		100%;

	height:
		100%;

	object-fit:
		cover;

	transition:
		transform .4s ease;
}


.p365-latest-news__link:hover
.p365-latest-news__image {
	transform:
		scale(1.025);
}


/* =========================================================
 * 10. Category
 * ======================================================= */

.p365-latest-news__category {
	position: absolute;

	right: 12px;
	bottom: 11px;

	display: inline-flex;

	align-items: center;

	min-height:
		25px;

	padding:
		4px 9px;

	border-radius:
		4px;

	background:
		var(--p365-orange);

	color:
		var(--p365-white);

	font-size:
		11px;

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

	line-height:
		1;
}


/* =========================================================
 * 11. Content
 * ======================================================= */

.p365-latest-news__content {
	padding:
		15px 17px 17px;
}


/* =========================================================
 * 12. Story Title
 * ======================================================= */

.p365-latest-news__item-title {
	display:
		-webkit-box;

	overflow:
		hidden;

	min-height:
		54px;

	margin:
		0 0 11px;

	color:
		var(--p365-text-dark);

	font-size:
		17px;

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

	line-height:
		1.55;

	-webkit-box-orient:
		vertical;

	-webkit-line-clamp:
		2;

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


.p365-latest-news__link:hover
.p365-latest-news__item-title {
	color:
		var(--p365-teal);
}


/* =========================================================
 * 13. Meta
 * ======================================================= */

.p365-latest-news__meta {
	display: flex;

	align-items: center;

	gap:
		6px;

	color:
		var(--p365-muted);

	font-size:
		11px;

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

	line-height:
		1.5;
}


.p365-latest-news__meta-dot {
	display: block;

	width: 4px;
	height: 4px;

	flex:
		0 0 4px;

	border-radius:
		50%;

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


/* =========================================================
 * 14. Desktop Hover Accent
 * ======================================================= */

.p365-latest-news__item::after {
	content: "";

	position: absolute;

	right: 0;
	bottom: 0;

	width: 0;
	height: 3px;

	background:
		var(--p365-orange);

	transition:
		width .3s ease;

	pointer-events:
		none;
}


.p365-latest-news__item:hover::after {
	width:
		100%;
}


/* =========================================================
 * 15. Tablet
 * ======================================================= */

@media (max-width: 1050px) {

	.p365-latest-news__title {
		font-size:
			30px;
	}


	.p365-latest-news__grid {
		grid-template-columns:
			repeat(
				2,
				minmax(0, 1fr)
			);
	}


	.p365-latest-news__item {
		border-bottom:
			1px solid var(--p365-border);
	}


	.p365-latest-news__item:nth-child(2n) {
		border-left:
			0;
	}


	.p365-latest-news__item:nth-last-child(-n + 2) {
		border-bottom:
			0;
	}


	.p365-latest-news__item-title {
		font-size:
			16px;

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

		line-height:
			1.55;
	}
}


/* =========================================================
 * 16. Mobile
 * ======================================================= */

@media (max-width: 680px) {

	.p365-latest-news {
		padding-top:
			18px;
	}


	.p365-latest-news__header {
		min-height:
			70px;

		padding:
			14px 18px;
	}


	.p365-latest-news__header::before {
		top:
			17px;

		height:
			36px;
	}


	.p365-latest-news__eyebrow {
		font-size:
			11px;

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


	.p365-latest-news__title {
		font-size:
			28px;

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

		line-height:
			1.28;
	}


	.p365-latest-news__more {
		font-size:
			12px;

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


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


	.p365-latest-news__item,
	.p365-latest-news__item:nth-child(2n),
	.p365-latest-news__item:nth-last-child(-n + 2) {
		border-left:
			0;

		border-bottom:
			1px solid var(--p365-border);
	}


	.p365-latest-news__item:last-child {
		border-bottom:
			0;
	}


	.p365-latest-news__link {
		display: grid;

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

		align-items:
			stretch;
	}


	.p365-latest-news__media {
		aspect-ratio:
			auto;

		min-height:
			118px;
	}


	.p365-latest-news__category {
		right:
			7px;

		bottom:
			7px;

		font-size:
			10px;

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


	.p365-latest-news__content {
		display: flex;

		flex-direction:
			column;

		justify-content:
			center;

		padding:
			13px 15px;
	}


	.p365-latest-news__item-title {
		min-height:
			0;

		font-size:
			15px;

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

		line-height:
			1.55;
	}


	.p365-latest-news__meta {
		font-size:
			10px;

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


/* =========================================================
 * 17. Small Mobile
 * ======================================================= */

@media (max-width: 420px) {

	.p365-latest-news__more {
		display:
			none;
	}


	.p365-latest-news__link {
		grid-template-columns:
			105px minmax(0, 1fr);
	}


	.p365-latest-news__media {
		min-height:
			105px;
	}


	.p365-latest-news__content {
		padding:
			11px 12px;
	}


	.p365-latest-news__item-title {
		font-size:
			14px;

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

		line-height:
			1.55;
	}
}