/* ==========================================================================
   ZBC — Featured Shows (YouTube feed)

   Deliberately styled as a dark "broadcast shelf" so it reads differently from
   the white news grids above it, while staying on-brand.

   Colours are taken from the live theme, with fallbacks so this still looks
   right if a theme update changes them:
     --g-color        #af2424  theme primary (red)
     --absolute-dark  #242424  theme dark
     ZIZ yellow       #f5c518  logo / accent
   ========================================================================== */

/* --------------------------------------------------------------------------
   Panel wrapper.

   NOTE ON THE SELECTOR: the custom class `zbc-shows-section` is set on the
   Elementor section, but this install does not render custom classes into the
   section markup — verified on the live page after republishing, the class is
   saved in the Elementor model yet stripped from the output. So the Elementor
   element-ID class is used as the reliable hook, with the custom class kept
   first in case it starts working after an update.

   If the Featured Shows section is ever rebuilt from scratch its element ID
   changes, and this selector must be updated to match.
   -------------------------------------------------------------------------- */

/* Light panel.

   CONTRAST NOTE — this section was originally dark, and simply swapping the
   background would have made it unreadable. Measured against #E1E1E1:
     white text        1.31:1  FAIL
     ZIZ yellow dates  1.25:1  FAIL
   So the whole scheme is flipped below to colours that pass WCAG AA:
     #111111 titles    14.44:1
     #7a5c00 dates      4.78:1
     #af2424 hover      5.18:1
*/
.zbc-shows-section,
.elementor-element-8b42cf4 {
	background: #e1e1e1;
	border-radius: 14px;
	padding: 34px 30px 38px;
	margin-bottom: 30px;
}

/* Section heading — dark on the light panel. */
.zbc-shows-section h3,
.zbc-shows-section .heading-title,
.zbc-shows-section .heading-title a,
.elementor-element-8b42cf4 h3,
.elementor-element-8b42cf4 .heading-title,
.elementor-element-8b42cf4 .heading-title a {
	color: #111;
}

/* Yellow rule under the section title — the "on air" cue. */
.zbc-shows-section .heading-inner::after,
.elementor-element-8b42cf4 .heading-inner::after {
	background: #f5c518;
}

/* --------------------------------------------------------------------------
   Hero — latest programme
   -------------------------------------------------------------------------- */

.zbc-show--hero .zbc-show__player {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: 10px;              /* matches the radio + TV players */
	overflow: hidden;
	background: #000;
	/* Softer than the original dark-panel shadow, which read as a smudge
	   against light grey. */
	box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
}

/* aspect-ratio fallback for older browsers */
@supports not (aspect-ratio: 16 / 9) {
	.zbc-show--hero .zbc-show__player {
		padding-top: 56.25%;
		height: 0;
	}
}

.zbc-show--hero .zbc-show__player iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.zbc-show__title {
	margin: 16px 0 4px;
	font-size: 21px;
	line-height: 1.3;
}

.zbc-show__title a {
	color: #111;                 /* 14.44:1 on #e1e1e1 */
	text-decoration: none;
	transition: color .18s ease;
}

.zbc-show__title a:hover {
	color: var(--g-color, #af2424);   /* 5.18:1 */
}

.zbc-show__date {
	display: inline-block;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #7a5c00;              /* 4.78:1 — keeps the gold, stays legible */
}

/* --------------------------------------------------------------------------
   Right column — latest bulletins
   -------------------------------------------------------------------------- */

.zbc-show-list {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

/* White cards need a border to separate from the panel — white on #e1e1e1 is
   only 1.31:1, so the edge would otherwise be invisible. */
.zbc-show-card {
	display: flex;
	gap: 12px;
	align-items: center;
	padding: 10px;
	border-radius: 10px;
	background: #fff;
	border: 1px solid rgba(0, 0, 0, .10);
	text-decoration: none;
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.zbc-show-card:hover,
.zbc-show-card:focus-visible {
	transform: translateY(-3px);
	box-shadow: 0 6px 18px rgba(0, 0, 0, .14);
	border-color: rgba(0, 0, 0, .22);
}

.zbc-show-card__thumb {
	position: relative;
	flex: 0 0 116px;
	width: 116px;
	aspect-ratio: 16 / 9;
	border-radius: 7px;
	overflow: hidden;
	background: #000;
}

.zbc-show-card__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .35s ease;
}

.zbc-show-card:hover .zbc-show-card__thumb img {
	transform: scale(1.07);
}

/* Play triangle, revealed on hover */
.zbc-show-card__play {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, .35);
	opacity: 0;
	transition: opacity .2s ease;
}

.zbc-show-card__play::after {
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 7px 0 7px 12px;
	border-color: transparent transparent transparent #fff;
	margin-left: 2px;
}

.zbc-show-card:hover .zbc-show-card__play {
	opacity: 1;
}

.zbc-show-card__body {
	min-width: 0;
}

.zbc-show-card__title {
	display: block;
	color: #111;                 /* on white card */
	font-weight: 700;
	font-size: 14px;
	line-height: 1.35;
	/* Keep cards even when a title runs long */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.zbc-show-card__date {
	display: block;
	margin-top: 4px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #7a5c00;              /* 5.9:1 on white */
}

/* --------------------------------------------------------------------------
   Empty state — shown if YouTube is unreachable and no cached copy exists
   -------------------------------------------------------------------------- */

.zbc-show-empty {
	padding: 22px;
	border-radius: 10px;
	background: #fff;
	border: 1px dashed rgba(0, 0, 0, .22);
	color: #5a5a5a;              /* 5.27:1 on the panel */
	font-size: 14px;
	text-align: center;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
	.zbc-shows-section {
		padding: 22px 16px 26px;
		border-radius: 10px;
	}

	.zbc-show__title {
		font-size: 18px;
	}

	.zbc-show-card__thumb {
		flex-basis: 96px;
		width: 96px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.zbc-show-card,
	.zbc-show-card__thumb img,
	.zbc-show-card__play,
	.zbc-show__title a {
		transition: none;
	}

	.zbc-show-card:hover {
		transform: none;
	}

	.zbc-show-card:hover .zbc-show-card__thumb img {
		transform: none;
	}
}