/* =========================================================
 * PRESS 365 — Latest / الآن
 * Sidebar Version
 * Version: 2.1.0
 * =========================================================
 *
 * Typography aligned with PRESS 365 Core Design System.
 * Sidebar layout and visual structure preserved.
 * ======================================================= */


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

.p365-latest {
	position: relative;

	width: 100%;
	height: 100%;

	padding: 0;
}


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

.p365-latest__shell {
	position: relative;

	display: flex;

	flex-direction: column;

	height: 100%;

	overflow: hidden;

	border: 0;

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

	background:
		var(--p365-dark);

	color:
		var(--p365-white);

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


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

.p365-latest__head {
	display: flex;

	align-items: center;

	justify-content:
		space-between;

	gap:
		10px;

	min-height:
		58px;

	padding:
		0 18px;

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

	background:
		rgba(255,255,255,.025);
}


.p365-latest__title-wrap {
	display: flex;

	align-items: center;

	gap:
		8px;
}


.p365-latest__pulse {
	position: relative;

	display: block;

	width: 8px;
	height: 8px;

	flex:
		0 0 8px;

	border-radius:
		50%;

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


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

	position: absolute;

	inset:
		-5px;

	border:
		1px solid rgba(243,154,34,.35);

	border-radius:
		50%;

	animation:
		p365-latest-pulse 1.8s ease-out infinite;
}


@keyframes p365-latest-pulse {

	0% {
		transform:
			scale(.65);

		opacity:
			1;
	}

	100% {
		transform:
			scale(1.55);

		opacity:
			0;
	}
}


.p365-latest__title {
	margin:
		0;

	color:
		var(--p365-white);

	font-size:
		22px;

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

	line-height:
		1.2;
}


/* =========================================================
 * 4. Status
 * ======================================================= */

.p365-latest__status {
	display: inline-flex;

	align-items: center;

	gap:
		5px;

	padding:
		0;

	border:
		0;

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

	font-size:
		9px;

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

	line-height:
		1.4;

	white-space:
		nowrap;
}


.p365-latest__status-dot {
	width:
		5px;

	height:
		5px;

	flex:
		0 0 5px;

	border-radius:
		50%;

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


/* =========================================================
 * 5. Stream
 * ======================================================= */

.p365-latest__stream {
	position: relative;

	flex:
		1;

	padding:
		6px 0;
}


/* =========================================================
 * 6. Item
 * ======================================================= */

.p365-latest__item {
	position: relative;

	display: grid;

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

	align-items:
		start;

	gap:
		9px;

	min-height:
		76px;

	padding:
		12px 16px;

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

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


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


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


/* =========================================================
 * 7. Time
 * ======================================================= */

.p365-latest__time {
	direction:
		ltr;

	padding-top:
		4px;

	color:
		var(--p365-orange);

	font-size:
		11px;

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

	line-height:
		1.4;

	font-variant-numeric:
		tabular-nums;
}


/* =========================================================
 * 8. Timeline
 * ======================================================= */

.p365-latest__marker {
	position: relative;

	display: flex;

	justify-content:
		center;

	height:
		100%;
}


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

	position: absolute;

	top:
		-12px;

	bottom:
		-24px;

	width:
		1px;

	background:
		rgba(255,255,255,.20);
}


.p365-latest__item:first-child
.p365-latest__marker::before {
	top:
		7px;
}


.p365-latest__item:last-child
.p365-latest__marker::before {
	bottom:
		calc(100% - 8px);
}


.p365-latest__marker span {
	position: relative;

	z-index:
		2;

	display: block;

	width:
		7px;

	height:
		7px;

	margin-top:
		7px;

	border:
		2px solid var(--p365-orange);

	border-radius:
		50%;

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


/* =========================================================
 * 9. Content
 * ======================================================= */

.p365-latest__content {
	min-width:
		0;
}


.p365-latest__category {
	display: block;

	margin-bottom:
		4px;

	color:
		var(--p365-orange);

	font-size:
		10px;

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

	line-height:
		1.4;
}


.p365-latest__item-title {
	margin:
		0;

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

	font-size:
		13px;

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

	line-height:
		1.65;
}


.p365-latest__item-title a {
	color:
		inherit;
}


.p365-latest__item:hover
.p365-latest__item-title {
	color:
		var(--p365-white);
}


/* =========================================================
 * 10. Arrow
 * ======================================================= */

/*
 * Sidebar does not need a separate arrow per story.
 */

.p365-latest__arrow {
	display:
		none;
}


/* =========================================================
 * 11. Footer
 * ======================================================= */

.p365-latest__footer {
	display: flex;

	align-items: center;

	justify-content:
		center;

	min-height:
		57px;

	padding:
		10px 14px;

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

	background:
		rgba(0,0,0,.08);
}


.p365-latest__more {
	display: flex;

	align-items: center;

	justify-content:
		space-between;

	gap:
		12px;

	width:
		100%;

	min-height:
		35px;

	padding:
		0 13px;

	border:
		1px solid rgba(243,154,34,.60);

	border-radius:
		6px;

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

	font-size:
		11px;

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

	line-height:
		1.4;
}


.p365-latest__more:hover {
	border-color:
		var(--p365-orange);

	background:
		var(--p365-orange);

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


/* =========================================================
 * 12. Mobile
 * ======================================================= */

@media (max-width: 820px) {

	.p365-latest__shell {
		height:
			auto;
	}


	.p365-latest__title {
		font-size:
			22px;

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


	.p365-latest__status {
		font-size:
			9px;
	}


	.p365-latest__item {
		grid-template-columns:
			48px 14px minmax(0,1fr);

		min-height:
			82px;

		padding:
			13px 18px;
	}


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


	.p365-latest__category {
		font-size:
			10px;
	}


	.p365-latest__item-title {
		font-size:
			14px;

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

		line-height:
			1.65;
	}


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


/* =========================================================
 * 13. Reduced Motion
 * ======================================================= */

@media (prefers-reduced-motion: reduce) {

	.p365-latest__pulse::before {
		animation:
			none;
	}
}