/**
 * Hero Slider Section - MOCKUP SECTION SLIDE.jpg Implementation
 * 3-column RTL layout: News Ticker | Main Slider | Widgets
 */

/* Override parent wrapper constraints with maximum specificity */
html body.home.front-page > .site-main.front-page > .home-hero-zone.container {
	padding: 0 !important;
	margin: 0 !important;
	max-width: 100% !important;
}

html body.home.front-page .home-hero-zone .home-three-col.home-hero-zone-grid {
	display: block !important;
	grid-template-columns: unset !important;
	gap: 0 !important;
	padding: 0 !important;
}

html body.home.front-page .home-hero-zone .home-hero-zone-grid .home-center {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
	min-width: unset !important;
}

/* Hide original sidebars - hero slider has its own layout */
html body.home.front-page .home-hero-zone .home-sidebar.home-sidebar-left,
html body.home.front-page .home-hero-zone .home-sidebar.home-sidebar-right {
	display: none !important;
	visibility: hidden !important;
	opacity: 0 !important;
	height: 0 !important;
	overflow: hidden !important;
	position: absolute !important;
	left: -9999px !important;
}

.hero-section-slider {
	width: 100%;
	max-width: 100%;
	padding: clamp(16px, 2vw, 20px) 0;
	margin: 0 auto;
	direction: rtl;
}

.hero-section-grid {
	display: grid;
	grid-template-columns: 260px 1fr 300px;
	max-width: var(--np-container, 1280px);
	margin: 0 auto;
	padding: 0 clamp(14px, 3vw, 20px);
	gap: clamp(16px, 2vw, 20px);
	align-items: start;
}

/* ===== RIGHT COLUMN: News Ticker (24 ساعة) ===== */
.hero-news-ticker {
	background: var(--news-surface, #ffffff);
	border-radius: var(--news-radius-md, 12px);
	box-shadow: var(--news-shadow, 0 2px 8px rgba(0,0,0,0.08));
	overflow: hidden;
	height: 600px;
	display: flex;
	flex-direction: column;
}

.ticker-header {
	background: var(--brand-red, #001D83);
	padding: 14px 18px;
	text-align: center;
}

.ticker-title {
	color: #ffffff;
	font-size: clamp(16px, 1.4vw, 18px);
	font-weight: 800;
	margin: 0;
}

.ticker-list {
	list-style: none;
	margin: 0;
	padding: 0;
	overflow-y: auto;
	flex: 1;
	scrollbar-width: thin;
	scrollbar-color: rgba(0, 29, 131, 0.3) transparent;
}

.ticker-list::-webkit-scrollbar {
	width: 5px;
}

.ticker-list::-webkit-scrollbar-track {
	background: transparent;
}

.ticker-list::-webkit-scrollbar-thumb {
	background: rgba(0, 29, 131, 0.3);
	border-radius: 3px;
}

.ticker-item {
	position: relative;
	padding: 14px 18px 14px 32px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
	transition: background-color 0.2s ease;
}

.ticker-item:hover {
	background: rgba(0, 29, 131, 0.04);
}

/* Red timeline indicator */
.ticker-item::before {
	content: '';
	position: absolute;
	right: 18px;
	top: 20px;
	width: 8px;
	height: 8px;
	background: var(--brand-red, #001D83);
	border-radius: 50%;
	box-shadow: 0 0 0 3px rgba(0, 29, 131, 0.15);
}

/* Vertical line connecting dots */
.ticker-item::after {
	content: '';
	position: absolute;
	right: 21px;
	top: 28px;
	width: 2px;
	height: calc(100% - 8px);
	background: rgba(0, 29, 131, 0.15);
}

.ticker-item:last-child::after {
	display: none;
}

.ticker-time {
	display: inline-block;
	color: #ffffff;
	background: var(--brand-red, #001D83);
	font-size: clamp(11px, 1vw, 12px);
	font-weight: 800;
	margin-bottom: 6px;
	padding: 2px 8px;
	border-radius: 4px;
	font-family: 'Tajawal', sans-serif;
	direction: ltr;
}

.ticker-content {
	margin: 0;
}

.ticker-link {
	color: var(--news-ink, #1a1a1a);
	font-size: clamp(13px, 1.1vw, 14px);
	font-weight: 600;
	line-height: 1.5;
	text-decoration: none;
	display: block;
	transition: color 0.2s ease;
}

.ticker-link:hover {
	color: var(--brand-red, #001D83);
}

/* ===== CENTER COLUMN: Main Slider ===== */
.hero-main-slider {
	position: relative;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}

.hero-slides-container {
	position: relative;
	width: 100%;
	height: 600px;
	background: var(--news-ink, #1a1a1a);
}

.hero-slides-wrapper {
	position: relative;
	width: 100%;
	height: 100%;
}

.hero-slide {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.7s ease, transform 0.7s ease, visibility 0.7s ease;
	transform: scale(1.02);
}

.hero-slide.is-active {
	opacity: 1;
	visibility: visible;
	z-index: 1;
	transform: scale(1);
}

.hero-slide-media {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.hero-slide-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 8s ease;
}

.hero-slide.is-active .hero-slide-img {
	transform: scale(1.08);
}

/* Gradient overlay */
.hero-slide-overlay {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 60%;
	background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.5) 40%, rgba(0,0,0,0.1) 70%, transparent 100%);
	pointer-events: none;
}

/* Category badge on slide */
.hero-slide-cat {
	position: absolute;
	top: 20px;
	right: 20px;
	background: var(--brand-red, #001D83);
	color: #fff;
	font-size: 11px;
	font-weight: 800;
	padding: 4px 14px;
	border-radius: 20px;
	z-index: 3;
	letter-spacing: 0.03em;
	box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.hero-slide-caption {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: clamp(24px, 3.5vw, 44px);
	z-index: 2;
}

.hero-slide-title {
	margin: 0;
	font-size: clamp(20px, 2.5vw, 30px);
	font-weight: 800;
	line-height: 1.35;
	max-width: 90%;
}

.hero-slide-title a {
	color: #ffffff;
	text-decoration: none;
	text-shadow: 0 2px 16px rgba(0, 0, 0, 0.5);
	transition: opacity 0.2s ease;
}

.hero-slide-title a:hover {
	opacity: 0.9;
}

/* Slide counter */
.hero-slide-counter {
	position: absolute;
	top: 20px;
	left: 20px;
	background: rgba(0,0,0,0.5);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	padding: 6px 14px;
	border-radius: 20px;
	z-index: 3;
	font-family: 'Tajawal', sans-serif;
	direction: ltr;
	backdrop-filter: blur(4px);
}

/* Progress bar */
.hero-progress {
	position: absolute;
	bottom: 0;
	left: 0;
	height: 3px;
	background: var(--brand-red, #001D83);
	z-index: 3;
	width: 0%;
}

.hero-slide.is-active .hero-progress {
	animation: heroProgress 5s linear forwards;
}

@keyframes heroProgress {
	from { width: 0%; }
	to { width: 100%; }
}

/* Navigation Arrows - hidden by default, show on hover */
.hero-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	background: rgba(255, 255, 255, 0.9);
	border: none;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 10;
	transition: all 0.3s ease;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
	backdrop-filter: blur(4px);
	opacity: 0;
}

.hero-main-slider:hover .hero-nav {
	opacity: 1;
}

.hero-nav:hover {
	background: #ffffff;
	transform: translateY(-50%) scale(1.1);
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

.hero-nav svg {
	color: var(--brand-red, #001D83);
	width: 22px;
	height: 22px;
}

.hero-nav-prev {
	left: 16px;
}

.hero-nav-next {
	right: 16px;
}

/* ===== LEFT COLUMN: Widgets / Ads ===== */
.hero-widgets-column {
	display: flex;
	flex-direction: column;
	gap: clamp(16px, 2vw, 20px);
}

.hero-widget-ad {
	background: var(--news-canvas, #f5f6f8);
	border-radius: 12px;
	min-height: 250px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}

.hero-ad-img {
	max-width: 100%;
	height: auto;
}

/* Weather Widget */
.hero-widget-weather {
	background: var(--news-surface, #ffffff);
	border-radius: 12px;
	box-shadow: 0 2px 12px rgba(0,0,0,0.08);
	overflow: hidden;
}

.weather-header {
	background: linear-gradient(135deg, #001D83 0%, #0026A8 100%);
	padding: 14px 18px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.weather-title {
	color: #ffffff;
	font-size: clamp(15px, 1.3vw, 17px);
	font-weight: 800;
	margin: 0;
}

.weather-city-select {
	background: rgba(255, 255, 255, 0.15);
	color: #ffffff;
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 6px;
	padding: 6px 10px;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	direction: rtl;
	outline: none;
}

.weather-city-select:focus {
	background: rgba(255, 255, 255, 0.25);
}

.weather-city-select option {
	background: #001D83;
	color: #ffffff;
}

.weather-current {
	padding: 20px 18px;
	text-align: center;
	border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.weather-temp {
	font-size: clamp(36px, 4vw, 46px);
	font-weight: 800;
	color: var(--brand-red, #001D83);
	line-height: 1;
	margin-bottom: 6px;
}

.weather-desc {
	font-size: clamp(13px, 1.1vw, 14px);
	font-weight: 600;
	color: var(--news-text, #2c3e50);
	margin-bottom: 4px;
}

.weather-humidity {
	font-size: clamp(11px, 1vw, 12px);
	color: var(--news-muted, #5c6670);
	font-weight: 500;
}

.weather-humidity span {
	font-weight: 700;
	color: var(--news-text, #2c3e50);
}

.weather-forecast {
	list-style: none;
	margin: 0;
	padding: 0;
}

.forecast-day {
	padding: 11px 18px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.04);
	display: flex;
	align-items: center;
	justify-content: space-between;
	transition: background-color 0.2s ease;
}

.forecast-day:hover {
	background: rgba(0, 29, 131, 0.04);
}

.forecast-day:last-child {
	border-bottom: none;
}

.forecast-label {
	font-size: clamp(12px, 1vw, 13px);
	font-weight: 600;
	color: var(--news-ink, #1a1a1a);
}

.forecast-temp {
	font-size: clamp(11px, 1vw, 12px);
	font-weight: 700;
	color: var(--news-muted, #5c6670);
}

/* ===== RESPONSIVE BREAKPOINTS ===== */

@media (max-width: 1200px) {
	.hero-section-grid {
		grid-template-columns: 220px 1fr 280px;
		padding: 0 clamp(12px, 2vw, 16px);
		gap: 14px;
	}

	.hero-news-ticker,
	.hero-slides-container {
		height: 520px;
	}
}

@media (max-width: 1024px) {
	.hero-section-grid {
		grid-template-columns: 1fr;
		gap: 18px;
	}

	.hero-section-grid {
		padding: 0 clamp(10px, 2vw, 14px);
	}

	.hero-news-ticker {
		order: 2;
		height: 380px;
	}

	.hero-main-slider {
		order: 1;
	}

	.hero-slides-container {
		height: 420px;
	}

	.hero-widgets-column {
		order: 3;
	}

	.hero-nav {
		opacity: 1;
	}
}

@media (max-width: 768px) {
	.hero-section-slider {
		padding: 12px;
	}

	.hero-slides-container {
		height: 380px;
	}

	.hero-nav {
		width: 38px;
		height: 38px;
		opacity: 1;
	}

	.hero-nav svg {
		width: 18px;
		height: 18px;
	}

	.hero-slide-title {
		font-size: clamp(16px, 4vw, 20px) !important;
	}

	.hero-slide-cat {
		top: 12px;
		right: 12px;
		font-size: 10px;
		padding: 3px 10px;
	}

	.hero-slide-counter {
		top: 12px;
		left: 12px;
		font-size: 11px;
		padding: 4px 10px;
	}

	.ticker-item {
		padding: 12px 14px 12px 24px;
	}

	.weather-current {
		padding: 16px;
	}

	.forecast-day {
		padding: 10px 14px;
	}

	.hero-nav-prev {
		left: 10px;
	}

	.hero-nav-next {
		right: 10px;
	}

	.front-page .home-hero-zone .hero-section-slider .hero-slide-img {
		object-fit: cover !important;
	}

	.front-page .home-hero-zone .hero-section-slider .hero-slide-media {
		max-height: none !important;
		height: 100% !important;
		border-radius: 0 !important;
	}

	.front-page .home-hero-zone .hero-section-slider .hero-slide-title {
		font-size: clamp(16px, 4vw, 20px) !important;
	}
}

@media (max-width: 480px) {
	.hero-slides-container {
		height: 320px;
	}

	.hero-slide-caption {
		padding: 14px;
	}

	.weather-temp {
		font-size: 32px;
	}

	.front-page .home-hero-zone .hero-section-slider .hero-slide-img {
		object-fit: cover !important;
		object-position: center center !important;
	}

	.front-page .home-hero-zone .hero-section-slider .hero-slide-media {
		max-height: none !important;
		min-height: 0 !important;
		height: 100% !important;
		border-radius: 0 !important;
	}

	.front-page .home-hero-zone .hero-section-slider .hero-slide-title {
		font-size: clamp(16px, 4vw, 20px) !important;
	}

	.front-page .home-hero-zone .hero-section-slider .hero-slide-media::after {
		display: none !important;
	}
}

/* ================================================================
   OVERRIDES — Contrer les conflits des fichiers chargés après
   (images-full.css, site-fixes.css, premium-max.css,
    premium-magazine.css, home-reference.css, site-breathe.css,
    reader-ux.css, launch-optimization.css, layout.css)
   ================================================================ */

/* --- Parent container: forcer display:block et cacher sidebars --- */
.front-page .home-hero-zone .home-hero-zone-grid {
	display: block !important;
	grid-template-columns: unset !important;
	gap: 0 !important;
	padding: 0 !important;
}

.front-page .home-hero-zone .home-center {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
}

.front-page .home-hero-zone .home-sidebar-left,
.front-page .home-hero-zone .home-sidebar-right {
	display: none !important;
}

/* --- Contrer site-fixes.css à ≤991px --- */
@media (max-width: 991px) {
	.front-page .home-hero-zone .home-hero-zone-grid {
		display: block !important;
	}

	.front-page .home-hero-zone .home-sidebar-left,
	.front-page .home-hero-zone .home-sidebar-right {
		display: none !important;
	}
}

/* --- Contrer home-reference.css: slide/media height --- */
.front-page .home-hero-zone .hero-section-slider .hero-slide-media {
	max-height: none !important;
	min-height: 0 !important;
	height: 100% !important;
	aspect-ratio: unset !important;
	border-radius: 0 !important;
}

/* --- Contrer images-full.css: object-fit: contain → cover --- */
.front-page .home-hero-zone .hero-section-slider .hero-slide-img {
	width: 100% !important;
	height: 100% !important;
	min-height: 0 !important;
	object-fit: cover !important;
	object-position: center center !important;
}

/* --- Contrer layout.css: display:none → opacity/visibility --- */
.front-page .home-hero-zone .hero-section-slider .hero-slide {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	opacity: 0 !important;
	visibility: hidden !important;
	pointer-events: none !important;
}

.front-page .home-hero-zone .hero-section-slider .hero-slide.is-active {
	position: relative !important;
	opacity: 1 !important;
	visibility: visible !important;
	pointer-events: auto !important;
	z-index: 1 !important;
}

/* --- Contrer premium-max.css: double overlay ::after --- */
.front-page .home-hero-zone .hero-section-slider .hero-slide-media::after {
	display: none !important;
}

/* --- Contrer premium-magazine.css: border-radius sur media --- */
.front-page .home-hero-zone .hero-section-slider .hero-slide-media {
	border-radius: 0 !important;
}

/* --- Contrer la cascade de font-size sur .hero-slide-title --- */
.front-page .home-hero-zone .hero-section-slider .hero-slide-title {
	font-size: clamp(20px, 2.5vw, 32px) !important;
	font-weight: 800 !important;
	line-height: 1.35 !important;
}

.front-page .home-hero-zone .hero-section-slider .hero-slide-title a {
	color: #ffffff !important;
}

/* Dark Mode Support */
body.dark-mode .hero-news-ticker,
body.dark-mode .hero-widget-weather {
	background: var(--news-surface, #1a1a1a);
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}

body.dark-mode .ticker-link {
	color: var(--news-text, #e4e4e7);
}

body.dark-mode .ticker-link:hover {
	color: var(--brand-red, #001D83);
}

body.dark-mode .forecast-label {
	color: var(--news-text, #e4e4e7);
}

body.dark-mode .hero-nav {
	background: rgba(26, 26, 26, 0.92);
}

body.dark-mode .hero-nav:hover {
	background: rgba(26, 26, 26, 1);
}