/* Classick Olympic — Latest News epic layout */
.ol-news-epic {
	--ol-gold: #e8c547;
	--ol-gold-dim: #b8942e;
	--ol-blue: #1a4a7a;
	--ol-blue-deep: #0b1f38;
	--ol-blue-glow: #2d7dd2;
	--ol-ice: #7ec8ff;
	--ol-text: #d4e4f7;
	--ol-muted: #8aa8c8;
	max-width: 1180px;
	margin: 0 auto 32px;
	padding: 0 8px;
	font-family: Verdana, Geneva, sans-serif;
}

.ol-news-grid {
	display: grid;
	grid-template-columns: 1fr 340px;
	gap: 22px;
	align-items: start;
}

@media (max-width: 960px) {
	.ol-news-grid {
		grid-template-columns: 1fr;
	}
}

/* ── Header ── */
.ol-news-hero-head {
	margin-bottom: 20px;
}

.ol-news-hero-head h1 {
	margin: 0 0 6px;
	font-size: 32px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ol-gold);
	text-shadow: 0 0 24px rgba(232, 197, 71, 0.35), 0 2px 4px rgba(0, 0, 0, 0.8);
}

.ol-news-hero-head p {
	margin: 0;
	color: var(--ol-muted);
	font-size: 13px;
	line-height: 1.5;
}

/* ── Featured card ── */
.ol-featured {
	position: relative;
	border-radius: 14px;
	overflow: hidden;
	border: 1px solid rgba(126, 200, 255, 0.25);
	background: linear-gradient(145deg, rgba(26, 74, 122, 0.55) 0%, rgba(11, 31, 56, 0.95) 60%);
	box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(126, 200, 255, 0.12);
	margin-bottom: 18px;
}

.ol-featured-badge {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 2;
	background: linear-gradient(180deg, #3d9ae8 0%, #1a5a9e 100%);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.14em;
	padding: 5px 12px;
	border-radius: 4px;
	box-shadow: 0 4px 12px rgba(45, 125, 210, 0.5);
}

.ol-featured-visual {
	position: relative;
	height: 200px;
	background:
		radial-gradient(ellipse 80% 60% at 50% 100%, rgba(45, 125, 210, 0.45) 0%, transparent 70%),
		linear-gradient(180deg, #0d2848 0%, #061220 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.ol-featured-visual::before {
	content: '';
	position: absolute;
	inset: 0;
	background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="40" fill="none" stroke="%232d7dd2" stroke-width="0.3" opacity="0.3"/></svg>') center/120px repeat;
	opacity: 0.4;
	animation: ol-pulse-bg 8s ease-in-out infinite;
}

@keyframes ol-pulse-bg {
	0%, 100% { opacity: 0.25; }
	50% { opacity: 0.5; }
}

.ol-featured-sword {
	font-size: 72px;
	filter: drop-shadow(0 0 20px rgba(126, 200, 255, 0.8)) drop-shadow(0 0 40px rgba(45, 125, 210, 0.5));
	animation: ol-float 3s ease-in-out infinite;
}

@keyframes ol-float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-8px); }
}

.ol-featured-title-overlay {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 24px 20px 16px;
	background: linear-gradient(transparent, rgba(6, 18, 32, 0.95));
	text-align: center;
}

.ol-featured-title-overlay span {
	display: block;
	font-size: 11px;
	letter-spacing: 0.2em;
	color: var(--ol-ice);
	text-transform: uppercase;
}

.ol-featured-title-overlay strong {
	display: block;
	font-size: 22px;
	color: var(--ol-gold);
	letter-spacing: 0.08em;
	text-shadow: 0 0 16px rgba(232, 197, 71, 0.4);
}

.ol-featured-body {
	padding: 18px 20px 20px;
}

.ol-featured-date {
	font-size: 11px;
	color: var(--ol-blue-glow);
	margin-bottom: 8px;
}

.ol-featured-body h2 {
	margin: 0 0 10px;
	font-size: 18px;
	color: var(--ol-gold);
}

.ol-featured-body p {
	margin: 0 0 14px;
	font-size: 12px;
	line-height: 1.65;
	color: var(--ol-text);
}

.ol-feature-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px 16px;
	margin-bottom: 16px;
}

.ol-feature-grid li {
	list-style: none;
	font-size: 11px;
	color: var(--ol-muted);
	padding-left: 18px;
	position: relative;
}

.ol-feature-grid li::before {
	content: '◆';
	position: absolute;
	left: 0;
	color: var(--ol-blue-glow);
	font-size: 8px;
	top: 2px;
}

.ol-btn-read {
	display: inline-block;
	padding: 10px 22px;
	border-radius: 6px;
	border: 1px solid rgba(126, 200, 255, 0.45);
	background: linear-gradient(180deg, rgba(45, 125, 210, 0.35) 0%, rgba(26, 74, 122, 0.6) 100%);
	color: var(--ol-ice);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-decoration: none;
	transition: all 0.2s ease;
}

.ol-btn-read:hover {
	background: linear-gradient(180deg, rgba(61, 154, 232, 0.5) 0%, rgba(26, 74, 122, 0.8) 100%);
	box-shadow: 0 0 20px rgba(45, 125, 210, 0.35);
	color: #fff;
}

/* ── News list ── */
.ol-news-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.ol-news-row {
	display: grid;
	grid-template-columns: 52px 1fr auto;
	gap: 12px;
	align-items: center;
	padding: 12px 14px;
	border-radius: 10px;
	border: 1px solid rgba(126, 200, 255, 0.12);
	background: linear-gradient(90deg, rgba(11, 31, 56, 0.85) 0%, rgba(6, 18, 32, 0.6) 100%);
	transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
	text-decoration: none;
	color: inherit;
}

.ol-news-row:hover {
	border-color: rgba(232, 197, 71, 0.35);
	transform: translateX(4px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.ol-news-icon {
	width: 52px;
	height: 52px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	background: linear-gradient(145deg, rgba(26, 74, 122, 0.8), rgba(11, 31, 56, 0.9));
	border: 1px solid rgba(126, 200, 255, 0.2);
	flex-shrink: 0;
}

.ol-news-row h3 {
	margin: 0 0 4px;
	font-size: 13px;
	color: var(--ol-gold);
	font-weight: 700;
}

.ol-news-row p {
	margin: 0;
	font-size: 11px;
	line-height: 1.45;
	color: var(--ol-muted);
}

.ol-news-date {
	font-size: 10px;
	color: var(--ol-blue-glow);
	white-space: nowrap;
	text-align: right;
	min-width: 72px;
}

.ol-view-all {
	display: block;
	text-align: center;
	margin-top: 14px;
	padding: 12px;
	border-radius: 8px;
	border: 1px dashed rgba(126, 200, 255, 0.25);
	color: var(--ol-muted);
	font-size: 11px;
	letter-spacing: 0.1em;
	text-decoration: none;
	transition: all 0.2s;
}

.ol-view-all:hover {
	border-color: var(--ol-gold-dim);
	color: var(--ol-gold);
}

/* ── Launch sidebar ── */
.ol-launch-panel {
	position: sticky;
	top: 12px;
}

.ol-launch-banner {
	position: relative;
	border-radius: 14px;
	overflow: hidden;
	border: 2px solid rgba(232, 197, 71, 0.45);
	box-shadow:
		0 0 40px rgba(45, 125, 210, 0.25),
		0 20px 50px rgba(0, 0, 0, 0.5),
		inset 0 1px 0 rgba(255, 255, 255, 0.08);
	background: linear-gradient(180deg, #0d2848 0%, #061220 50%, #0a1e35 100%);
}

.ol-launch-banner::before {
	content: '';
	position: absolute;
	top: -50%;
	left: -50%;
	width: 200%;
	height: 200%;
	background: conic-gradient(from 0deg, transparent, rgba(126, 200, 255, 0.08), transparent, rgba(232, 197, 71, 0.06), transparent);
	animation: ol-spin-glow 12s linear infinite;
	pointer-events: none;
}

@keyframes ol-spin-glow {
	to { transform: rotate(360deg); }
}

.ol-launch-inner {
	position: relative;
	padding: 22px 18px 20px;
	text-align: center;
}

.ol-launch-eyebrow {
	font-size: 10px;
	letter-spacing: 0.22em;
	color: var(--ol-ice);
	text-transform: uppercase;
	margin-bottom: 6px;
}

.ol-launch-brand {
	font-size: 26px;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--ol-gold);
	text-shadow: 0 0 20px rgba(232, 197, 71, 0.45);
	line-height: 1.15;
	margin-bottom: 4px;
}

.ol-launch-tagline {
	font-size: 11px;
	color: var(--ol-muted);
	margin-bottom: 18px;
	line-height: 1.4;
}

/* Countdown */
.ol-countdown {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 8px;
	margin-bottom: 18px;
}

.ol-cd-block {
	background: rgba(0, 0, 0, 0.45);
	border: 1px solid rgba(126, 200, 255, 0.2);
	border-radius: 8px;
	padding: 10px 4px;
	position: relative;
	overflow: hidden;
}

.ol-cd-block::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--ol-blue-glow), transparent);
	opacity: 0.6;
}

.ol-cd-num {
	display: block;
	font-size: 26px;
	font-weight: 700;
	color: #fff;
	line-height: 1;
	text-shadow: 0 0 12px rgba(126, 200, 255, 0.5);
	font-variant-numeric: tabular-nums;
}

.ol-cd-label {
	display: block;
	font-size: 9px;
	letter-spacing: 0.12em;
	color: var(--ol-muted);
	text-transform: uppercase;
	margin-top: 4px;
}

.ol-launch-cta {
	display: block;
	width: 100%;
	padding: 14px 16px;
	border: none;
	border-radius: 8px;
	background: linear-gradient(180deg, #f0d060 0%, #c9a227 45%, #8b6914 100%);
	color: #1a1200;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-decoration: none;
	text-align: center;
	box-shadow: 0 6px 20px rgba(201, 162, 39, 0.4);
	transition: transform 0.15s, box-shadow 0.15s, filter 0.15s;
}

.ol-launch-cta:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 28px rgba(201, 162, 39, 0.55);
	filter: brightness(1.06);
	color: #1a1200;
}

.ol-launch-footer {
	margin-top: 14px;
	font-size: 10px;
	color: var(--ol-muted);
	letter-spacing: 0.08em;
	line-height: 1.5;
}

.ol-launch-torches {
	display: flex;
	justify-content: space-between;
	padding: 0 12px 8px;
	font-size: 20px;
	opacity: 0.85;
	filter: drop-shadow(0 0 8px rgba(255, 140, 0, 0.6));
}

/* Chips under countdown */
.ol-launch-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	justify-content: center;
	margin-bottom: 14px;
}

.ol-chip {
	font-size: 9px;
	padding: 4px 8px;
	border-radius: 20px;
	background: rgba(45, 125, 210, 0.2);
	border: 1px solid rgba(126, 200, 255, 0.2);
	color: var(--ol-ice);
	letter-spacing: 0.06em;
}
