/* Belfast 89FM — weekly schedule widget (day tabs + slot list). */

.b89-day-tabs {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	padding: 0 0 6px;
}

.b89-day-tab {
	font-family: var(--b89-font-display);
	font-weight: 600;
	font-size: .95rem;
	background: var(--b89-paper);
	color: var(--b89-ink);
	border: 3px solid var(--b89-ink);
	border-radius: 999px;
	padding: 8px 18px;
	cursor: pointer;
	box-shadow: var(--b89-shadow-pop);
	transition: transform .12s ease;
}

.b89-day-tab:hover { transform: translateY(-2px); }

.b89-day-tab[aria-selected="true"] {
	background: var(--b89-ink);
	color: var(--b89-yellow);
}

.b89-day-tab .b89-today-dot {
	display: inline-block;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--b89-red);
	margin-left: 7px;
	vertical-align: 2px;
}

.b89-day-tab[aria-selected="true"] .b89-today-dot { background: var(--b89-yellow); }

.b89-sched-list {
	list-style: none;
	margin: 26px 0 0;
	padding: 0;
	border: 3px solid var(--b89-ink);
	border-radius: 14px;
	overflow: hidden;
	box-shadow: var(--b89-shadow-pop);
	background: var(--b89-paper);
}

.b89-sched-panel[hidden] { display: none; }

.b89-sched-list li {
	display: grid;
	grid-template-columns: 190px 56px 1fr auto;
	gap: 18px;
	align-items: center;
	padding: 16px 22px;
	border-bottom: 2px solid rgba(23, 18, 13, .15);
}

.b89-sched-list li:last-child { border-bottom: none; }

.b89-sched-list li.b89-live-row { background: var(--b89-yellow); }

.b89-sl-time {
	font-family: var(--b89-font-body);
	font-weight: 700;
	font-size: .78rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--b89-gold);
}

.b89-live-row .b89-sl-time { color: var(--b89-red-deep); }

/* Compound selectors so theme/Elementor img resets can't strip the
   circle radius and border from the avatar image. */
.b89-sched-list .b89-sl-avatar,
.b89-sched-list img.b89-sl-avatar {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	border: 2.5px solid var(--b89-ink);
	object-fit: cover;
	background: var(--b89-yellow);
}

.b89-sched-list .b89-sl-avatar.b89-ph {
	display: grid;
	place-items: center;
	font-family: var(--b89-font-display);
	font-weight: 700;
	font-size: 1.1rem;
	background: var(--b89-cream);
	color: var(--b89-ink);
	flex-shrink: 0;
}

/* The slot on air now swaps its badge for a spinning record, drawn in CSS
   so the markup (and the live-refresh class toggle) stays the same. */
@keyframes b89-sl-spin {
	to { transform: rotate(360deg); }
}

.b89-sched-list .b89-live-row .b89-sl-avatar.b89-ph {
	color: transparent;
	background:
		radial-gradient(circle,
			var(--b89-ink) 0 8%,
			var(--b89-yellow) 8.5% 30%,
			var(--b89-ink) 30.5% 34%,
			transparent 34.5%),
		repeating-radial-gradient(circle, #1c1712 0 2px, #2c2521 2px 4px);
	animation: b89-sl-spin 3s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
	.b89-sched-list .b89-live-row .b89-sl-avatar.b89-ph { animation: none; }
}

.b89-sl-show {
	font-family: var(--b89-font-display);
	font-weight: 600;
	font-size: 1.2rem;
	line-height: 1.15;
	color: var(--b89-ink);
}

.b89-sl-show small {
	display: block;
	font-family: var(--b89-font-body);
	font-weight: 500;
	font-size: .86rem;
	color: rgba(23, 18, 13, .72);
	margin-top: 2px;
}

.b89-tbc-chip {
	background: var(--b89-paper);
	border: 2px solid var(--b89-ink);
	border-radius: 999px;
	font-family: var(--b89-font-body);
	font-size: .62rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	padding: 3px 10px;
	white-space: nowrap;
	color: var(--b89-ink);
}

@media (max-width: 760px) {
	.b89-sched-list li {
		grid-template-columns: 56px 1fr auto;
		grid-template-areas: "av head chip" "time time time";
	}

	.b89-sl-time { grid-area: time; }
	.b89-sl-avatar { grid-area: av; }
	.b89-sl-show { grid-area: head; }
	.b89-sched-list .b89-live-chip,
	.b89-sched-list .b89-tbc-chip { grid-area: chip; }
}