/* =========================================================
   ISKA Québec — VOD Page Premium
   Fichier : assets/css/iska-vod.css
========================================================= */

.iska-vod-page {
	background:
		radial-gradient(circle at top left, rgba(21,87,255,.18), transparent 34%),
		radial-gradient(circle at bottom right, rgba(212,175,55,.16), transparent 32%),
		linear-gradient(135deg, #05070b, #071126 52%, #05070b) !important;
	color: #ffffff !important;
	padding: 50px 24px !important;
	border-radius: 0 !important;
}

.iska-vod-page * {
	box-sizing: border-box;
}

.iska-vod-hero {
	max-width: 960px;
	margin: 0 auto;
	text-align: center;
	padding: 10px 0 30px;
}

.iska-vod-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 22px;
	padding: 10px 18px;
	border-radius: 999px;
	border: 1px solid rgba(212,175,55,.42);
	background:
		linear-gradient(
			135deg,
			rgba(212,175,55,.12),
			rgba(212,175,55,.04)
		);
	box-shadow: 0 0 30px rgba(212,175,55,.12);
	color: #f6d56b;
	font-size: 12px;
	font-weight: 900;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.iska-vod-hero h1,
.iska-vod-hero h2,
.iska-vod-hero h3,
.iska-vod-featured-head h2 {
	color: #ffffff !important;
	margin: 0 0 24px;
	font-size: clamp(42px, 6vw, 76px);
	line-height: .95;
	font-weight: 950;
	text-transform: uppercase;
	letter-spacing: -.04em;
}

.iska-vod-hero h1::after {
	content: '';
	display: block;
	width: 120px;
	height: 4px;
	margin: 25px auto 0;
	border-radius: 999px;
	background: linear-gradient(
		90deg,
		transparent,
		#d4af37,
		transparent
	);
}

.iska-vod-hero p {
	max-width: 860px;
	margin: 0 auto 18px;
	color: rgba(255,255,255,.82) !important;
	font-size: 18px;
	line-height: 1.8;
}

.iska-vod-hero strong {
	color: #d4af37 !important;
}

.iska-vod-signature {
	margin-top: 28px !important;
	color: #ffffff !important;
	font-weight: 800;
}

/* =========================================================
   VOD Stats
========================================================= */

.iska-vod-stats {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 90px;
	margin: 40px auto 28px;
	max-width: 900px;
	flex-wrap: wrap;
}

.iska-vod-stats div {
	text-align: center;
	min-width: 120px;
}

.iska-vod-stats strong {
	display: block;
	color: #d4af37;
	font-size: 42px;
	line-height: 1;
	font-weight: 950;
	letter-spacing: -.03em;
	margin-bottom: 10px;
	text-shadow: 0 0 20px rgba(212,175,55,.15);
}

.iska-vod-stats span {
	display: block;
	color: rgba(255,255,255,.75);
	font-size: 13px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .12em;
	line-height: 1.2;
}

/* =========================================================
   VOD Actions
========================================================= */

.iska-vod-actions {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 15px;
}

.iska-vod-actions .iska-news-btn {
	margin: 0 !important;
}

/* =========================================================
   Featured Video
========================================================= */

.iska-vod-featured-section {
	padding-top: 60px !important;
}

.iska-vod-featured-head {
	max-width: 960px;
	margin: 0 auto 20px;
	text-align: center;
}

.iska-vod-featured-head span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 14px;
	color: #f6d56b;
	font-size: 12px;
	font-weight: 900;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.iska-vod-featured-video {
	overflow: hidden;
	border-radius: 28px;
	border: 1px solid rgba(212,175,55,.28);
	box-shadow: 0 28px 80px rgba(0,0,0,.50);
	background: #000;
}

/* =========================================================
   YouTube Feed Wrapper
========================================================= */

.iska-vod-page .yotu-wrap,
.iska-vod-page .youtube-feed,
.iska-vod-page iframe {
	max-width: 100%;
}

.iska-vod-page .yotu-wrap,
.iska-vod-page .youtube-feed {
	background: rgba(255,255,255,.04) !important;
	border: 1px solid rgba(255,255,255,.10);
	border-radius: 28px;
	padding: 24px;
	box-shadow: 0 24px 70px rgba(0,0,0,.35);
}

/* =========================================================
   Panels Inside VOD
========================================================= */

.iska-vod-page .iska-news-panel {
	height: 100%;
	background:
		linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.035));
	border: 1px solid rgba(255,255,255,.13);
	border-radius: 26px;
	padding: 32px;
	box-shadow: 0 18px 55px rgba(0,0,0,.25);
}

.iska-vod-page .iska-news-panel h2 {
	color: #ffffff !important;
	margin: 16px 0;
	font-size: clamp(30px, 4vw, 46px);
	line-height: 1.02;
	text-transform: uppercase;
	letter-spacing: -.03em;
}

.iska-vod-page .iska-news-panel p {
	color: rgba(255,255,255,.74) !important;
	line-height: 1.7;
}

/* =========================================================
   Force readable text inside plugin
========================================================= */

.iska-vod-page,
.iska-vod-page p,
.iska-vod-page span,
.iska-vod-page div,
.iska-vod-page h1,
.iska-vod-page h2,
.iska-vod-page h3,
.iska-vod-page h4,
.iska-vod-page a {
	color: #ffffff;
}

.iska-vod-page a {
	color: #f6d56b !important;
}

.iska-vod-page .iska-news-btn.primary,
.iska-vod-page a.iska-news-btn.primary {
	color: #ffffff !important;
}

.iska-vod-page .iska-news-btn.gold,
.iska-vod-page a.iska-news-btn.gold {
	color: #090909 !important;
}

/* =========================================================
   Responsive
========================================================= */

@media (max-width: 768px) {

	.iska-vod-page {
		padding: 48px 18px !important;
	}

	.iska-vod-hero {
		padding: 28px 0;
	}

	.iska-vod-hero h1,
	.iska-vod-hero h2,
	.iska-vod-hero h3,
	.iska-vod-featured-head h2 {
		font-size: 42px;
	}

	.iska-vod-hero p {
		font-size: 16px;
	}

	.iska-vod-stats {
		gap: 24px;
		margin: 28px auto 22px;
	}

	.iska-vod-stats div {
		min-width: 90px;
	}

	.iska-vod-stats strong {
		font-size: 28px;
	}

	.iska-vod-stats span {
		font-size: 11px;
	}

	.iska-vod-actions {
		flex-direction: column;
		gap: 12px;
		margin-top: 18px;
	}

	.iska-vod-actions .iska-news-btn {
		width: 100%;
		max-width: 320px;
	}

	.iska-vod-page .yotu-wrap,
	.iska-vod-page .youtube-feed {
		padding: 16px;
		border-radius: 20px;
	}

	.iska-vod-featured-video {
		border-radius: 20px;
	}

	.iska-vod-page .iska-news-panel {
		padding: 24px;
		border-radius: 22px;
	}
}