/* ==========================================================================
   Spark Schedule – spark-schedule.css
   Card-based programme schedule for radio station sites.
   All selectors scoped to .spark-schedule-* to avoid theme conflicts.
   ========================================================================== */

/* ── Outer wrapper ─────────────────────────────────────────────────────────── */

.spark-schedule-wrap {
	display: flex;
	flex-direction: column;
	gap: 10px;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
	max-width: 100%;
}

/* ── Card ──────────────────────────────────────────────────────────────────── */

.spark-schedule-item {
	display: flex;
	align-items: stretch;
	background: #1c1e2a;
	border: 1px solid #2d3050;
	border-radius: 8px;
	overflow: hidden;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.spark-schedule-item:hover {
	border-color: #3d4270;
}

.spark-schedule-item.is-live {
	border-color: #4ade80;
	box-shadow: 0 0 0 1px rgba(74, 222, 128, 0.12), 0 2px 12px rgba(74, 222, 128, 0.08);
}

/* ── Time column ───────────────────────────────────────────────────────────── */

.spark-schedule-time-col {
	flex: 0 0 90px;
	background: #13151f;
	border-right: 1px solid #2d3050;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 16px 8px;
	gap: 4px;
	text-align: center;
}

.spark-schedule-time-start {
	display: block;
	font-size: 0.95rem;
	font-weight: 700;
	color: #ff6b35;
	line-height: 1.2;
	white-space: nowrap;
}

.spark-schedule-time-sep {
	display: block;
	font-size: 0.58rem;
	color: #4a4e6a;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	line-height: 1;
}

.spark-schedule-time-end {
	display: block;
	font-size: 0.8rem;
	color: #7a7f9a;
	line-height: 1.2;
	white-space: nowrap;
}

/* ── Content column ────────────────────────────────────────────────────────── */

.spark-schedule-content {
	flex: 1;
	padding: 14px 18px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.spark-schedule-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.spark-schedule-show {
	font-size: 1rem !important;
	font-weight: 700 !important;
	color: #e8eaf6 !important;
	margin: 0 !important;
	padding: 0 !important;
	line-height: 1.35 !important;
	border: none !important;
}

/* ── Live badge ────────────────────────────────────────────────────────────── */

.spark-schedule-live-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	flex-shrink: 0;
	background: #4ade80;
	color: #032b12;
	font-size: 0.58rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	padding: 3px 9px;
	border-radius: 20px;
	text-transform: uppercase;
	white-space: nowrap;
}

.spark-schedule-live-dot {
	display: inline-block;
	width: 6px;
	height: 6px;
	background: #032b12;
	border-radius: 50%;
	animation: spark-pulse 1.4s ease-in-out infinite;
}

@keyframes spark-pulse {
	0%, 100% { opacity: 1;    transform: scale(1);    }
	50%       { opacity: 0.4; transform: scale(0.72); }
}

/* ── Show details ──────────────────────────────────────────────────────────── */

.spark-schedule-host {
	font-size: 0.8rem;
	color: #6b7096;
	font-style: italic;
	line-height: 1.3;
}

.spark-schedule-desc {
	font-size: 0.875rem;
	color: #bbbfd8;
	line-height: 1.5;
	margin-top: 2px;
}

.spark-schedule-footer {
	display: flex;
	justify-content: flex-end;
	margin-top: 6px;
}

.spark-schedule-genre {
	display: inline-block;
	background: #232538;
	color: #6b7096;
	font-size: 0.63rem;
	font-weight: 600;
	letter-spacing: 0.07em;
	padding: 3px 10px;
	border-radius: 20px;
	text-transform: uppercase;
	border: 1px solid #2d3050;
}

/* ── Error / empty states ──────────────────────────────────────────────────── */

.spark-schedule-error,
.spark-schedule-empty {
	padding: 14px 18px;
	border-radius: 8px;
	font-size: 0.875rem;
	line-height: 1.5;
}

.spark-schedule-error {
	background: rgba(220, 50, 50, 0.08);
	border: 1px solid rgba(220, 50, 50, 0.35);
	color: #ff8888;
}

.spark-schedule-empty {
	background: #1c1e2a;
	border: 1px solid #2d3050;
	color: #6b7096;
}

/* ── Responsive ────────────────────────────────────────────────────────────── */

@media (max-width: 520px) {
	.spark-schedule-time-col {
		flex: 0 0 68px;
		padding: 12px 4px;
	}
	.spark-schedule-time-start {
		font-size: 0.8rem;
	}
	.spark-schedule-time-end {
		font-size: 0.7rem;
	}
	.spark-schedule-content {
		padding: 10px 12px;
	}
	.spark-schedule-show {
		font-size: 0.9rem !important;
	}
	.spark-schedule-desc {
		font-size: 0.82rem;
	}
	.spark-schedule-live-badge {
		font-size: 0.55rem;
		padding: 2px 7px;
	}
}