/* Radio Jasper — global styles. Design tokens live in the Elementor Kit (--e-global-*). */

/* --------------------------------------------------------------------------
 * Tokens: aliases of the Kit globals (edit values in the Kit, not here)
 *
 * Declared on body, not :root: Elementor scopes the Kit variables to
 * body.elementor-kit-{id}, so they are undefined on :root.
 * Elementor semantics: Primary = headings, Accent = buttons/links.
 * Logo palette: blue = actions, pink = decoration (pink-aa for labels with
 * white text), anthracite = text.
 * ----------------------------------------------------------------------- */
body {
	--rj-color-primary: var(--e-global-color-primary);
	--rj-color-secondary: var(--e-global-color-secondary);
	--rj-color-text: var(--e-global-color-text);
	/* Anthracite for text on coloured fills (the "dark" fills are blue since 2026-10-28). */
	--rj-color-ink: var(--e-global-color-text);
	--rj-color-accent: var(--e-global-color-accent);
	--rj-color-pink: var(--e-global-color-secondary);
	--rj-color-pink-aa: var(--e-global-color-rjpink);
	--rj-color-blue-on-dark: var(--e-global-color-rjblueondark);
	--rj-color-pink-on-dark: var(--e-global-color-rjpinkondark);
	--rj-color-fuchsia: var(--e-global-color-rjfuchsia);
	--rj-color-dark: var(--e-global-color-rjdark);
	--rj-color-white: var(--e-global-color-rjwhite);
	--rj-color-alt: var(--e-global-color-rjalt);
	--rj-color-border: var(--e-global-color-rjborder);
	--rj-color-muted: var(--e-global-color-rjmuted);
	--rj-color-on-dark: var(--e-global-color-rjondark);

	--rj-font-heading: var(--e-global-typography-primary-font-family), sans-serif;
	--rj-font-label: var(--e-global-typography-secondary-font-family), sans-serif;

	--rj-space-xs: 8px;
	--rj-space-s: 16px;
	--rj-space-m: 24px;
	--rj-space-l: 40px;
	--rj-space-xl: 64px;

	/* Sounder section head: offset of the pink band behind the title */
	--rj-band-offset: 24px;
}

@media (min-width: 768px) {
	body {
		--rj-space-l: 56px;
		--rj-space-xl: 96px;
		--rj-band-offset: 40px;
	}
}

/* --------------------------------------------------------------------------
 * Accessibility
 * ----------------------------------------------------------------------- */

/* Two-tone focus ring: dark outline on light backgrounds, pink halo on dark ones. */
body :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--rj-color-dark);
	outline-offset: 2px;
	box-shadow: 0 0 0 5px var(--rj-color-pink);
}

.skip-link.screen-reader-text:focus {
	z-index: 100000;
	top: var(--rj-space-xs);
	left: var(--rj-space-xs);
	padding: var(--rj-space-s) var(--rj-space-m);
	background: var(--rj-color-accent);
	color: var(--rj-color-white);
	font-family: var(--rj-font-label);
	font-weight: 600;
	text-transform: uppercase;
	text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/*
 * Elementor's breakpoint probe prints "desktop"/"mobile" in a ::after inside a
 * screen-reader-only span, so screen readers announce it. display:none keeps
 * the computed content readable by elementorFrontend.getCurrentDeviceMode().
 */
#elementor-device-mode {
	display: none !important;
}

/* --------------------------------------------------------------------------
 * Sounder section head
 *
 * Elementor usage: a Container with class "rj-section-head" holding two
 * Heading widgets with classes "rj-section-head__title" (h2) and
 * "rj-section-head__label" (p). Typography comes from the Kit globals
 * "Titolo sezione" and "Sottotitolo sezione".
 * ----------------------------------------------------------------------- */
.e-con.rj-section-head {
	--align-items: flex-start;
	padding-top: var(--rj-band-offset);
}

.rj-section-head__title {
	position: relative;
	isolation: isolate;
}

/* Pink band: from the viewport's left edge to just past the title, peeking above it. */
.rj-section-head__title::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: calc(var(--rj-band-offset) * -1);
	right: calc(var(--rj-band-offset) * -1);
	bottom: 0;
	left: -100vw;
	background: var(--rj-color-pink);
	pointer-events: none;
}

.elementor-widget.rj-section-head__title .elementor-heading-title {
	display: inline-block;
	padding: 0.3em 0.5em;
	background: var(--rj-color-dark);
	color: var(--rj-color-white);
}

/* Logo fuchsia with anthracite text (4.5:1; white on it is only 3.4:1). */
.elementor-widget.rj-section-head__label .elementor-heading-title {
	display: inline-block;
	padding: 0.55em 1.5em;
	background: var(--rj-color-fuchsia);
	color: var(--rj-color-ink);
}

/* Right-aligned variant (band runs to the viewport's right edge). */
.e-con.rj-section-head--right {
	--align-items: flex-end;
}

.rj-section-head--right .rj-section-head__title::before {
	right: -100vw;
	left: calc(var(--rj-band-offset) * -1);
}

/*
 * The bands run past the viewport on purpose: clip them on the Elementor
 * document wrapper (clip, not hidden, so position: sticky keeps working).
 */
.elementor:has(.rj-section-head) {
	overflow-x: clip;
}


/* --------------------------------------------------------------------------
 * Header (Theme Builder template "Radio Jasper – Header")
 * ----------------------------------------------------------------------- */
.rj-logo {
	display: block;
	line-height: 0;
}

.rj-logo__img {
	width: 72px;
	height: auto;
}

@media (min-width: 1024px) {
	.rj-logo__img {
		width: var(--rj-logo-width, 104px);
	}
}

/* Mobile/tablet order: logo | listen | search | burger. */
@media (max-width: 1023px) {
	.rj-header .rj-nav {
		order: 3;
		flex-grow: 0 !important;
	}

	.rj-header .rj-header__listen {
		order: 1;
		margin-left: auto;
	}

	.rj-header .rj-header__search {
		order: 2;
	}
}

/* Mobile dropdown: full width under the header, scrollable when long. */
.rj-nav .elementor-nav-menu--dropdown.elementor-nav-menu__container {
	max-height: calc(100vh - 96px);
	overflow-y: auto;
	overscroll-behavior: contain;
}

/* Menu and submenus always uppercase (client request 2026-10-27), whatever the
   case typed in Appearance → Menus. */
.rj-nav .elementor-nav-menu a {
	text-transform: uppercase;
}

/*
 * TRASMISSIONI mega panel (desktop): the ~24 programmes of the first submenu
 * in a 4-column grid. Targets the item by its URL so the WP menu stays the
 * single source of truth. SmartMenus sets inline sizes/offsets, hence !important.
 */
@media (min-width: 1024px) {
	.rj-nav .elementor-nav-menu--main > .elementor-nav-menu {
		position: relative;
	}

	.rj-nav .elementor-nav-menu--main > .elementor-nav-menu > li:has(> a[href$="/trasmissioni/"]) {
		position: static;
	}

	.rj-nav .elementor-nav-menu--main > .elementor-nav-menu > li:has(> a[href$="/trasmissioni/"]) > .sub-menu {
		right: 0 !important;
		left: auto !important;
		width: min(880px, calc(100vw - 48px)) !important;
		max-width: none !important;
		padding: var(--rj-space-s);
		border-top: 4px solid var(--rj-color-pink);
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 2px;
	}

	/* SmartMenus toggles display:block/none inline; only switch to grid when open. */
	.rj-nav .elementor-nav-menu--main > .elementor-nav-menu > li:has(> a[href$="/trasmissioni/"]) > .sub-menu[style*="display: block"] {
		display: grid !important;
	}

	.rj-nav .elementor-nav-menu--main > .elementor-nav-menu > li:has(> a[href$="/trasmissioni/"]) > .sub-menu a {
		padding: 8px 12px;
		border-left: 0;
		line-height: 1.3;
		white-space: normal;
	}
}

/* --------------------------------------------------------------------------
 * Splash background (footer, home "In evidenza"): yellow with soft fuchsia/
 * white clouds and a few crisp blue drops (soft blue on yellow turns green).
 * Our own take on the Sounder footer: no image, nothing to download.
 * The yellow itself is the container's background colour (Kit "secondary").
 * ----------------------------------------------------------------------- */
.e-con.rj-splash {
	background-image:
		radial-gradient(circle at 14% 78%, var(--rj-color-accent) 0 7px, transparent 8px),
		radial-gradient(circle at 17% 84%, var(--rj-color-accent) 0 4px, transparent 5px),
		radial-gradient(circle at 88% 16%, var(--rj-color-accent) 0 9px, transparent 10px),
		radial-gradient(circle at 92% 24%, var(--rj-color-accent) 0 5px, transparent 6px),
		radial-gradient(circle at 52% 94%, var(--rj-color-fuchsia) 0 6px, transparent 7px),
		radial-gradient(ellipse 38% 55% at 6% 18%, color-mix(in srgb, var(--rj-color-fuchsia) 55%, transparent), transparent 70%),
		radial-gradient(ellipse 26% 40% at 58% 8%, color-mix(in srgb, var(--rj-color-white) 55%, transparent), transparent 70%),
		radial-gradient(ellipse 34% 50% at 94% 70%, color-mix(in srgb, var(--rj-color-fuchsia) 40%, transparent), transparent 72%),
		radial-gradient(ellipse 22% 35% at 30% 100%, color-mix(in srgb, var(--rj-color-fuchsia) 35%, transparent), transparent 70%),
		radial-gradient(circle at 46% 62%, color-mix(in srgb, var(--rj-color-white) 30%, transparent), transparent 35%);
}

/* On the splash, the yellow band behind the section title turns white. */
.rj-splash .rj-section-head__title::before {
	background: var(--rj-color-white);
}

/* --------------------------------------------------------------------------
 * Footer (Theme Builder template "Radio Jasper – Footer")
 * ----------------------------------------------------------------------- */
.elementor-widget.rj-footer-box__label .elementor-heading-title {
	display: inline-block;
	padding: 0.35em 0.6em;
	background: var(--rj-color-fuchsia);
	color: var(--rj-color-ink);
}

/* Links on the blue boxes: yellow (4.8:1). */
.rj-footer-box__body a,
.rj-footer-box__body a:visited {
	color: var(--rj-color-pink-on-dark);
}

.rj-footer-box__body a:hover,
.rj-footer-box__body a:focus {
	color: var(--rj-color-white);
}

.rj-footer-more a {
	font-family: var(--rj-font-label);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.5px;
	text-transform: uppercase;
}

.rj-footer-more a::after {
	content: " →";
}

.rj-footer-small {
	font-size: 14px;
}

.rj-footer-box__body p:last-child,
.rj-footer-bottom p {
	margin-bottom: 0;
}

/* Bottom bar: Sounder split, blue | yellow (white text on blue, blue on yellow). */
.rj-footer-bottom {
	background: var(--rj-color-dark);
	font-size: 14px;
}

.rj-footer-bottom__legal {
	color: var(--rj-color-white);
}

/*
 * Sticky player bar (radiojasper-player): reserve its space inside the footer's
 * bottom bar instead of a white strip of body padding under the footer.
 */
body.rjp-has-bar {
	padding-bottom: 0;
}

body.rjp-has-bar .e-con.rj-footer-bottom {
	--padding-bottom: calc(18px + var(--rjp-bar-space, 0px)) !important;
}

.rj-footer-bottom a,
.rj-footer-bottom a:visited {
	color: var(--rj-color-white);
}

.rj-footer-bottom a:hover,
.rj-footer-bottom a:focus {
	color: var(--rj-color-pink-on-dark);
}

@media (min-width: 768px) {
	.rj-footer-bottom {
		background: linear-gradient(90deg, var(--rj-color-dark) 0 50%, var(--rj-color-secondary) 50% 100%);
	}

	.rj-footer-bottom__legal,
	.rj-footer-bottom__legal a,
	.rj-footer-bottom__legal a:visited {
		color: var(--rj-color-accent);
	}

	.rj-footer-bottom__legal a:hover,
	.rj-footer-bottom__legal a:focus {
		color: var(--rj-color-accent);
		text-decoration: underline;
	}
}

/* --------------------------------------------------------------------------
 * Home hero (template "Radio Jasper – Home")
 * The photo is a real <img> (LCP, srcset) laid under the content.
 * ----------------------------------------------------------------------- */
.e-con.rj-hero {
	position: relative;
	isolation: isolate;
	min-height: clamp(560px, 80vh, 780px);
	overflow: hidden;
	background: var(--rj-color-dark);
}

.rj-hero__bg {
	position: absolute !important;
	z-index: -2;
	inset: 0;
	margin: 0 !important;
}

.rj-hero__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 35%;
}

/* Light veil (client request 2026-10-28): no tint on the photo, only a short
   anthracite fade at the bottom behind the player; the title has a shadow. */
.e-con.rj-hero::after {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 0;
	background: linear-gradient(to top, color-mix(in srgb, var(--rj-color-ink) 70%, transparent) 0%, color-mix(in srgb, var(--rj-color-ink) 20%, transparent) 35%, transparent 55%);
	pointer-events: none;
}

.e-con.rj-hero > .rj-hero__content {
	flex-grow: 1;
}

.rj-hero__title .elementor-heading-title {
	text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55);
}

.elementor-widget.rj-hero__subtitle .elementor-heading-title {
	display: inline-block;
	padding: 0.5em 1.2em;
	/* Fuchsia like the section labels, anthracite text (4.5:1). */
	background: var(--rj-color-fuchsia);
}

.elementor-widget.rj-hero__player {
	width: 100%;
	max-width: 760px !important;
	margin-top: var(--rj-space-s);
}

/* --------------------------------------------------------------------------
 * Cards (Loop Items "Card" and "Card deejay")
 * The media is a one-cell grid (image and labels stacked) so the only
 * positioned ancestor of the stretched title link is the card itself.
 * ----------------------------------------------------------------------- */
.e-con.rj-card {
	position: relative;
	height: 100%;
}

.e-con.rj-card__media {
	display: grid;
	/* The row is the box itself: an image taller than the box (square or
	   portrait photos) would otherwise push the labels out of it. */
	grid-template-rows: minmax(0, 1fr);
	aspect-ratio: 1;
	overflow: hidden;
	background: var(--rj-color-dark);
}

.rj-card--dj .e-con.rj-card__media {
	aspect-ratio: 1;
	background: var(--rj-color-white);
}

.rj-card__media > * {
	grid-area: 1 / 1;
}

.rj-card__img,
.rj-card__img img {
	width: 100%;
	height: 100%;
}

.rj-card__img {
	min-height: 0;
}

.rj-card__img img {
	object-fit: cover;
	transition: transform 0.4s ease;
}

.rj-card--dj .rj-card__img img {
	object-position: center bottom;
}

/* Deejay photos (home, Speakers): a solid offset block behind each photo, in
   turn yellow / fuchsia / blue, after the Sounder "residents" colour blocks.
   It grows as the photo lifts on hover/focus. */
.rj-card--dj:not(.rj-card--programme) .e-con.rj-card__media {
	--rj-dj-block: var(--rj-color-secondary);
	box-shadow: 10px 10px 0 var(--rj-dj-block);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.e-loop-item:nth-of-type(3n+2) .rj-card--dj .e-con.rj-card__media {
	--rj-dj-block: var(--rj-color-fuchsia);
}

.e-loop-item:nth-of-type(3n) .rj-card--dj .e-con.rj-card__media {
	--rj-dj-block: var(--rj-color-accent);
}

.rj-card--dj:not(.rj-card--programme):is(:hover, :focus-within) .e-con.rj-card__media {
	transform: translate(-4px, -4px);
	box-shadow: 16px 16px 0 var(--rj-dj-block);
}

.rj-card:hover .rj-card__img img,
.rj-card:focus-within .rj-card__img img {
	transform: scale(1.04);
}

.e-con.rj-card__labels {
	z-index: 1;
	align-self: end;
	margin: 16px;
	width: auto;
}

/* Article cards: the labels sit under the image, in a row, not over it. */
.rj-card > .e-con.rj-card__labels {
	--flex-wrap: wrap;
	--align-items: center;
	align-self: auto;
	margin: 0;
	flex-wrap: wrap;
	align-items: center;
}

.rj-card > .e-con.rj-card__labels .rj-card__date .elementor-heading-title {
	border: 1px solid var(--rj-color-border);
}

.elementor-widget.rj-card__date .elementor-heading-title {
	display: inline-block;
	padding: 4px 10px;
	background: var(--rj-color-white);
	color: var(--rj-color-pink-aa);
	font-family: var(--rj-font-label);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.5px;
	line-height: 1.3;
	text-transform: uppercase;
}

.elementor-widget.rj-card__title .elementor-heading-title {
	display: inline;
	padding: 3px 10px;
	background: var(--rj-color-dark);
	color: var(--rj-color-white);
	line-height: 1.6;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

.rj-card__title a,
.rj-card__title a:visited,
.rj-card__heading a,
.rj-card__heading a:visited {
	color: inherit;
}

.rj-card__heading a:hover {
	color: var(--rj-color-accent);
}

/* Title below the image, at most 3 lines. */
.rj-card__heading .elementor-heading-title {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
}

/* Whole card clickable through the title link (one link per card). */
.rj-card__title a::after,
.rj-card__heading a::after {
	content: "";
	position: absolute;
	z-index: 2;
	inset: 0;
}

.rj-card:has(.rj-card__title a:focus-visible),
.rj-card:has(.rj-card__heading a:focus-visible) {
	outline: 3px solid var(--rj-color-dark);
	outline-offset: 3px;
	box-shadow: 0 0 0 6px var(--rj-color-pink);
}

.rj-card__title a:focus-visible,
.rj-card__heading a:focus-visible {
	outline: none;
	box-shadow: none;
}

/* Programme / category chip, under the date chip (Sounder labels). */
.rj-card__label .elementor-shortcode {
	display: inline-block;
	padding: 5px 10px;
	background: var(--rj-color-dark);
	color: var(--rj-color-white);
	font-family: var(--rj-font-label);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.5px;
	line-height: 1.3;
	text-transform: uppercase;
}

.rj-card__label .elementor-shortcode:empty {
	display: none;
}

/* --------------------------------------------------------------------------
 * Sections, "more" links, Loop Grid pagination
 * ----------------------------------------------------------------------- */
.rj-more {
	text-align: right;
}

.rj-more a {
	font-family: var(--rj-font-label);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.5px;
	text-transform: uppercase;
}

.rj-more a::after {
	content: " →";
}

/* Two links in one row (home "News ed eventi"). */
.rj-more a + a {
	margin-left: 24px;
}

.rj-loop .elementor-pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
	margin-top: var(--rj-space-l);
	font-family: var(--rj-font-label);
	font-size: 14px;
	font-weight: 600;
}

.rj-loop .elementor-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	margin: 0;
	padding: 0 12px;
	border: 2px solid var(--rj-color-dark);
	color: var(--rj-color-dark);
	text-decoration: none;
}

.rj-loop .elementor-pagination .page-numbers.current,
.rj-loop .elementor-pagination a.page-numbers:hover {
	border-color: var(--rj-color-accent);
	background: var(--rj-color-accent);
	color: var(--rj-color-white);
}

.rj-loop .elementor-pagination .page-numbers.dots {
	border-color: transparent;
}

/* --------------------------------------------------------------------------
 * Deejay page (template "Radio Jasper – Pagina deejay")
 * ----------------------------------------------------------------------- */
.rj-dj > .e-con-inner > .e-con:first-child {
	flex: 0 0 100%;
}

@media (min-width: 1024px) {
	.rj-dj > .e-con-inner > .e-con:first-child {
		flex-basis: 40%;
	}

	.rj-dj > .e-con-inner > .e-con:last-child {
		flex: 1 1 0;
		min-width: 0;
	}
}

.rj-dj__photo img {
	width: 100%;
	height: auto;
	border-bottom: 6px solid var(--rj-color-pink);
}

.rj-dj__bio {
	font-size: 18px;
}

.rj-dj .rj-more {
	text-align: left;
}

/* Cards without a featured image get the logo (dynamic tag fallback): show it
   small on a logo-palette gradient instead of a full-bleed logo. */
.e-con.rj-card__media:has(img[src*="LOGO_RADIO-JASPER"]) {
	background: linear-gradient(135deg, var(--rj-color-accent), var(--rj-color-fuchsia));
}

/* The logo PNG has a white square background: crop it to its circle. */
.rj-card__img:has(img[src*="LOGO_RADIO-JASPER"]) {
	display: grid;
	place-items: start center;
	padding-top: 9%;
}

.rj-card__img img[src*="LOGO_RADIO-JASPER"] {
	width: 44%;
	height: auto;
	aspect-ratio: 1;
	border-radius: 50%;
	object-fit: cover;
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.2);
}

.rj-card:hover .rj-card__img img[src*="LOGO_RADIO-JASPER"] {
	transform: none;
}

/* On the deejay page the title sits next to the photo: keep the band short. */
.rj-dj .rj-section-head__title::before {
	left: calc(var(--rj-band-offset) * -1);
}

/* "Conduce: …" on the deejay page. */
.rj-dj-programmes {
	margin: 0;
	font-size: 18px;
}

.rj-dj-programmes__label {
	margin-right: 6px;
	color: var(--rj-color-pink-aa);
	font-family: var(--rj-font-label);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.5px;
	text-transform: uppercase;
}

/* --------------------------------------------------------------------------
 * Programme page (template "Radio Jasper – Pagina trasmissione")
 * Head reuses the deejay layout (.rj-dj): logo left, title + intro right.
 * ----------------------------------------------------------------------- */
.rj-programme__logo {
	display: block;
	width: 100%;
	height: auto;
	border-bottom: 6px solid var(--rj-color-pink);
}

/* No programme logo: the site logo, cropped to its circle, on the gradient. */
.rj-programme__logo-wrap:has(.rj-programme__logo--fallback) {
	display: grid;
	place-items: center;
	aspect-ratio: 4 / 3;
	background: linear-gradient(135deg, var(--rj-color-accent), var(--rj-color-fuchsia));
	border-bottom: 6px solid var(--rj-color-pink);
}

.rj-programme__logo--fallback {
	width: 40%;
	aspect-ratio: 1;
	border: 0;
	border-radius: 50%;
	object-fit: cover;
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.2);
}

.rj-programme__intro {
	font-size: 18px;
}

.rj-programme__intro > :last-child {
	margin-bottom: 0;
}

.rj-programme__intro img {
	height: auto;
}

/* Block-editor programme pages: their old buttons take the Kit button look. */
.rj-programme__intro .wp-block-button__link {
	border-radius: 0;
	background: var(--rj-color-secondary);
	color: var(--rj-color-accent);
	font-family: var(--rj-font-label);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.5px;
	text-transform: uppercase;
}

.rj-programme__intro .wp-block-button__link:hover {
	background: var(--rj-color-dark);
	color: var(--rj-color-white);
}

/* Empty shortcode output (no intro / no hosts / no archive): no gaps. */
.rj-programme .elementor-widget-shortcode:has(.elementor-shortcode:empty),
.e-con.rj-section--archive:not(:has(.rj-archive)) {
	display: none;
}

/* Only the old archive (no episodes on the site yet): skip the empty list. */
.elementor:has(.rj-archive) .e-con.rj-section--programme-episodes:has(.e-loop-nothing-found-message) {
	display: none;
}

/* --------------------------------------------------------------------------
 * Episode row (Loop Item "Radio Jasper – Puntata") and player
 * ----------------------------------------------------------------------- */
.rj-loop--episodes .elementor-loop-container {
	gap: 0;
}

.e-con.rj-episode {
	padding: var(--rj-space-m) 0;
	border-bottom: 1px solid var(--rj-color-border);
}

.rj-episode__date .elementor-heading-title {
	color: var(--rj-color-pink-aa);
	font-family: var(--rj-font-label);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.5px;
	text-transform: uppercase;
}

.rj-episode__title .elementor-heading-title a {
	color: inherit;
}

.rj-episode__title .elementor-heading-title a:hover {
	color: var(--rj-color-accent);
}

.rj-episode__player .elementor-shortcode {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px var(--rj-space-s);
}

.rj-episode-player {
	flex: 1 1 280px;
	min-width: 0;
}

.rj-episode-player__audio {
	width: 100%;
}

.rj-episode-player__ui {
	display: none;
	align-items: center;
	gap: 12px;
}

.rj-js .rj-episode-player__audio {
	display: none;
}

.rj-js .rj-episode-player__ui {
	display: flex;
}

.rj-episode-player .rj-episode-player__ui button.rj-episode-player__toggle {
	display: inline-grid;
	flex: none;
	place-items: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--rj-color-accent);
	color: var(--rj-color-white);
	cursor: pointer;
}

.rj-episode-player .rj-episode-player__ui button.rj-episode-player__toggle:hover {
	background: var(--rj-color-dark);
	color: var(--rj-color-white);
}

.rj-episode-player__icon {
	grid-area: 1 / 1;
	width: 24px;
	height: 24px;
	fill: currentColor;
}

.rj-episode-player__icon--pause,
[data-rj-state="playing"] .rj-episode-player__icon--play {
	display: none;
}

[data-rj-state="playing"] .rj-episode-player__icon--pause {
	display: block;
}

[data-rj-state="loading"] .rj-episode-player__toggle {
	animation: rj-pulse 1s ease-in-out infinite alternate;
}

@keyframes rj-pulse {
	to {
		opacity: 0.55;
	}
}

/* Beats the Kit form-field styles (body.elementor-kit-* input…). */
.rj-episode-player .rj-episode-player__ui input.rj-episode-player__seek[type="range"] {
	--rj-progress: 0%;
	flex: 1 1 auto;
	min-width: 80px;
	height: 24px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	cursor: pointer;
	appearance: none;
}

.rj-episode-player__seek:disabled {
	cursor: default;
}

.rj-episode-player__seek::-webkit-slider-runnable-track {
	height: 6px;
	border-radius: 3px;
	background: linear-gradient(to right, var(--rj-color-accent) var(--rj-progress), var(--rj-color-border) var(--rj-progress));
}

.rj-episode-player__seek::-moz-range-track {
	height: 6px;
	border-radius: 3px;
	background: var(--rj-color-border);
}

.rj-episode-player__seek::-moz-range-progress {
	height: 6px;
	border-radius: 3px;
	background: var(--rj-color-accent);
}

.rj-episode-player__seek::-webkit-slider-thumb {
	width: 16px;
	height: 16px;
	margin-top: -5px;
	border: 0;
	border-radius: 50%;
	background: var(--rj-color-dark);
	appearance: none;
}

.rj-episode-player__seek::-moz-range-thumb {
	width: 16px;
	height: 16px;
	border: 0;
	border-radius: 50%;
	background: var(--rj-color-dark);
}

.rj-episode-player__seek:disabled::-webkit-slider-thumb {
	visibility: hidden;
}

.rj-episode-player__seek:disabled::-moz-range-thumb {
	visibility: hidden;
}

.rj-episode-player__time {
	flex: none;
	min-width: 4.5em;
	color: var(--rj-color-muted);
	font-size: 14px;
	font-variant-numeric: tabular-nums;
	text-align: right;
}

.rj-episode__actions {
	flex: none;
}

.rj-episode__download,
.rj-episode__external {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	padding: 0 16px;
	border: 2px solid var(--rj-color-accent);
	color: var(--rj-color-accent);
	font-family: var(--rj-font-label);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.5px;
	text-decoration: none;
	text-transform: uppercase;
}

.rj-episode__download:hover,
.rj-episode__external:hover {
	background: var(--rj-color-accent);
	color: var(--rj-color-white);
}

.rj-episode__download svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
}

.rj-episode__external::after {
	content: " ↗";
}

/* "Carica altre puntate" */
.rj-loop--episodes .e-load-more-anchor + .elementor-button-wrapper,
.rj-loop--episodes .elementor-button-wrapper {
	margin-top: var(--rj-space-l);
	text-align: center;
}

/* --------------------------------------------------------------------------
 * Old episode archive (Mixcloud/Spotify links from the previous layout)
 * ----------------------------------------------------------------------- */
.rj-archive {
	display: grid;
	gap: 0 var(--rj-space-l);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 768px) {
	.rj-archive {
		grid-template-columns: 1fr 1fr;
	}
}

.rj-archive__item {
	padding: 12px 0;
	border-bottom: 1px solid var(--rj-color-border);
}

.rj-archive__link::after {
	content: " ↗";
}

.rj-archive__service {
	color: var(--rj-color-muted);
	font-size: 14px;
}

/* --------------------------------------------------------------------------
 * Institutional pages
 * ----------------------------------------------------------------------- */

/* Generic page: readable measure for the content written in the editor. */
.rj-page__content {
	max-width: 820px;
	font-size: 18px;
}

.rj-page__content img {
	height: auto;
}

/* Box with the title link stretched over it ("La radio" → Speakers, nome). */
.e-con.rj-link-box {
	--width: auto;
	flex: 1 1 0;
	min-width: 0;
	position: relative;
	border-top: 6px solid var(--rj-color-pink);
	transition: box-shadow 0.2s ease;
}

.rj-link-box__title a::after {
	position: absolute;
	inset: 0;
	content: "";
}

.rj-link-box__title a::before {
	content: "→ ";
	color: var(--rj-color-accent);
}

.e-con.rj-link-box:hover {
	box-shadow: 0 8px 24px rgba(38, 36, 32, 0.12);
}

.e-con.rj-link-box:focus-within {
	outline: 3px solid var(--rj-color-dark);
	outline-offset: 2px;
}

/* Contatti: boxes left (35%), form right. */
.rj-contact > .e-con-inner > .e-con:first-child {
	flex: 0 0 100%;
}

@media (min-width: 1024px) {
	.rj-contact > .e-con-inner > .e-con:first-child {
		flex-basis: 35%;
	}

	.rj-contact > .e-con-inner > .e-con:last-child {
		flex: 1 1 0;
		min-width: 0;
	}
}

.rj-contact__box .elementor-widget-text-editor p {
	margin: 0;
	font-size: 18px;
}

.rj-contact__label .elementor-heading-title {
	font-size: 13px;
}

.rj-contact__form .elementor-field-type-acceptance .elementor-field-option label {
	color: var(--rj-color-text);
	font-family: var(--rj-font-heading);
	font-size: 15px;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
}

.rj-contact__form .elementor-field-type-acceptance input {
	width: 20px;
	height: 20px;
	margin-right: 8px;
	vertical-align: middle;
	accent-color: var(--rj-color-accent);
}

.rj-contact__form .elementor-message {
	font-size: 16px;
}

.rj-contact__map iframe {
	display: block;
	filter: grayscale(0.3);
}

/* Programme index: logos are not all square, keep the cards even. */
.rj-card--programme .rj-card__img img:not([src*="LOGO_RADIO-JASPER"]) {
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
}

/* --------------------------------------------------------------------------
 * Single article / episode (template "Radio Jasper – Articolo")
 * ----------------------------------------------------------------------- */

/* Episode titles are long: smaller title block than the section heads. */
.rj-section-head--long .rj-section-head__title .elementor-heading-title {
	max-width: 22ch;
	font-size: clamp(28px, 4.2vw, 46px);
	line-height: 1.15;
}

/* Label from a shortcode tag can be empty (SSP episodes): no pink chip. */
.rj-section-head__label .elementor-heading-title:empty {
	display: none;
}

/* Media column 40% on desktop (as on the deejay page); hidden when the
   article has no image of its own nor of its programme (site logo). */
.rj-single > .e-con-inner > .rj-single__media:has(img[src*="LOGO_RADIO-JASPER"]) {
	display: none;
}

.rj-single__meta {
	margin: 0;
	color: var(--rj-color-muted);
	font-family: var(--rj-font-label);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.5px;
	text-transform: uppercase;
}

.rj-single__category {
	color: var(--rj-color-pink-aa);
}

/* Episode player in the head: on its own light panel. */
.e-con .rj-single__player:has(.rj-episode-player, .rj-episode__actions) {
	padding: var(--rj-space-m);
	background: var(--rj-color-alt);
	border-left: 6px solid var(--rj-color-pink);
}

.rj-single__player .elementor-shortcode:empty,
.rj-single .elementor-widget-shortcode:has(.elementor-shortcode:empty) {
	display: none;
}

/* Tags */
.rj-tags ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.rj-tags a {
	display: inline-block;
	padding: 6px 12px;
	border: 1px solid var(--rj-color-border);
	color: var(--rj-color-text);
	font-size: 14px;
	text-decoration: none;
}

.rj-tags a::before {
	content: "#";
	color: var(--rj-color-pink-aa);
}

.rj-tags a:hover {
	border-color: var(--rj-color-accent);
	color: var(--rj-color-accent);
}

/* --------------------------------------------------------------------------
 * Archives, search, 404
 * ----------------------------------------------------------------------- */
.rj-archive-intro {
	max-width: 820px;
	font-size: 18px;
}

.rj-archive-intro > :last-child {
	margin-bottom: 0;
}

.rj-archive-intro .rj-more {
	text-align: left;
}

.rj-archive-intro__count {
	color: var(--rj-color-muted);
}

.rj-archive-head .elementor-widget-shortcode:has(.elementor-shortcode:empty) {
	display: none;
}

/* Search form (search results, 404): dark field as in the Kit forms. */
.rj-search-form {
	max-width: 640px;
}

.rj-search-form__label {
	display: block;
	margin-bottom: 8px;
	font-family: var(--rj-font-label);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.5px;
	text-transform: uppercase;
}

.rj-search-form__row {
	display: flex;
}

.rj-search-form .rj-search-form__input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 48px;
	padding: 0 16px;
	border: 2px solid var(--rj-color-dark);
	border-radius: 0;
	background: var(--rj-color-dark);
	color: var(--rj-color-white);
	font-size: 16px;
}

.rj-search-form .rj-search-form__input::placeholder {
	color: var(--rj-color-on-dark);
}

.rj-search-form .rj-search-form__submit {
	flex: none;
	min-height: 48px;
	padding: 0 24px;
	border: 0;
	border-radius: 0;
	background: var(--rj-color-secondary);
	color: var(--rj-color-accent);
	font-family: var(--rj-font-label);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	cursor: pointer;
}

.rj-search-form .rj-search-form__submit:hover {
	background: var(--rj-color-dark);
}

/* Programme name next to the date in mixed lists (Tutti i podcast, Ultime
   puntate); redundant on a programme page, so hidden there. */
.e-con.rj-episode__meta > .e-con-inner,
.e-con.rj-episode__meta {
	--width: auto;
}

.rj-episode__programme .elementor-shortcode {
	display: inline-block;
	padding: 2px 8px;
	background: var(--rj-color-secondary);
	color: var(--rj-color-accent);
	font-family: var(--rj-font-label);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.5px;
	text-transform: uppercase;
}

.rj-episode__programme .elementor-shortcode:empty,
.rj-section--programme-episodes .rj-episode__programme {
	display: none;
}

/* <main> is focused by the skip link: no ring on the whole page area. */
.rj-main:focus {
	outline: none;
}

/* "Carica altre puntate": the Loop Grid button ignores the Kit button
   colours; yellow with blue text (4.8:1) like the other buttons. */
.rj-loop .e-loop__load-more .elementor-button,
.rj-loop .e-loop__load-more .elementor-button:visited {
	background-color: var(--rj-color-secondary);
	color: var(--rj-color-accent);
}

.rj-loop .e-loop__load-more .elementor-button:hover,
.rj-loop .e-loop__load-more .elementor-button:focus-visible {
	background-color: var(--rj-color-dark);
	color: var(--rj-color-white);
}

/* Visually hidden, still read by screen readers (e.g. h2 before result grids). */
.rj-sr-only {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* Contact boxes on white with a light border (pink AA label stays ≥ 4.5:1). */
.e-con.rj-contact__box {
	border: 1px solid var(--rj-color-border);
	border-top: 6px solid var(--rj-color-pink);
}

/* Links inside running text must not rely on colour alone (WCAG 1.4.1). */
.rj-page__content p a,
.rj-page__content li a,
.rj-programme__intro a,
.rj-archive-intro p:not(.rj-more) a,
.rj-contact__form .elementor-field-option a {
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

/* --------------------------------------------------------------------------
 * Palinsesto ([radiojasper_schedule]): "on air" box, day tabs, programmes.
 * ----------------------------------------------------------------------- */
.rj-schedule {
	display: grid;
	gap: var(--rj-space-m);
}

.rj-schedule__now {
	display: flex;
	flex-wrap: wrap;
	gap: var(--rj-space-s) var(--rj-space-m);
	align-items: center;
	justify-content: space-between;
	padding: 20px 24px;
	border-left: 6px solid var(--rj-color-pink);
	background: var(--rj-color-dark);
	color: var(--rj-color-white);
}

.rj-schedule__now p {
	margin: 0;
}

.rj-schedule__now-label {
	color: var(--rj-color-pink-on-dark);
	font-family: var(--rj-font-label);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.5px;
	text-transform: uppercase;
}

.rj-schedule__now-title {
	font-family: var(--rj-font-heading);
	font-size: 24px;
	line-height: 1.25;
}

.rj-schedule__now-time {
	color: var(--rj-color-on-dark);
	font-size: 15px;
}

/* Home: link to the Palinsesto page instead of the live button. */
.rj-schedule__now .rj-schedule__now-link a {
	color: var(--rj-color-pink-on-dark);
	font-family: var(--rj-font-label);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.5px;
	text-transform: uppercase;
}

.rj-schedule__now .rj-schedule__now-link a::after {
	content: " →";
}

.rj-schedule__now .rj-schedule__now-link a:hover {
	color: var(--rj-color-white);
}

/* Day tabs: one row, scrolls sideways on small screens. */
.rj-schedule__tabs {
	display: flex;
	overflow-x: auto;
	border-bottom: 3px solid var(--rj-color-dark);
	scrollbar-width: thin;
}

.rj-schedule .rj-schedule__tab {
	flex: 1 0 auto;
	min-height: 48px;
	padding: 12px 16px;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--rj-color-primary);
	font-family: var(--rj-font-label);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	cursor: pointer;
}

/* Focus too: the Kit gives focused buttons the dark "selected" background. */
.rj-schedule .rj-schedule__tab:hover,
.rj-schedule .rj-schedule__tab:focus {
	background: var(--rj-color-border);
	color: var(--rj-color-primary);
}

.rj-schedule .rj-schedule__tab[aria-selected="true"] {
	background: var(--rj-color-dark);
	color: var(--rj-color-white);
}

/* Today: pink bar on top of the tab. */
.rj-schedule .rj-schedule__tab.is-today {
	box-shadow: inset 0 4px 0 var(--rj-color-pink);
}

.rj-schedule__tab-short {
	display: none;
}

@media (max-width: 767px) {
	.rj-schedule__tab-long {
		display: none;
	}

	.rj-schedule__tab-short {
		display: inline;
	}
}

.rj-schedule__day[hidden] {
	display: none;
}

.rj-schedule__list {
	display: grid;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.rj-schedule__item {
	display: grid;
	grid-template-columns: 56px 56px 1fr;
	gap: 12px;
	align-items: center;
	padding: 12px;
	border: 1px solid var(--rj-color-border);
	border-left: 6px solid transparent;
	background: var(--rj-color-white);
}

@media (min-width: 768px) {
	.rj-schedule__item {
		grid-template-columns: 72px 72px 1fr;
		gap: 20px;
		padding: 14px 20px;
	}
}

.rj-schedule__item.is-live {
	border-left-color: var(--rj-color-pink);
	box-shadow: 0 6px 24px rgba(38, 36, 32, 0.08);
}

.rj-schedule__time {
	color: var(--rj-color-primary);
	font-family: var(--rj-font-label);
	font-size: 16px;
	font-weight: 600;
}

.rj-schedule__item.is-live .rj-schedule__time::after {
	content: "In onda";
	display: block;
	width: max-content;
	margin-top: 6px;
	padding: 2px 6px;
	background: var(--rj-color-secondary);
	color: var(--rj-color-accent);
	font-size: 10px;
	letter-spacing: 0.5px;
	text-transform: uppercase;
}

.rj-schedule__logo {
	display: grid;
	place-items: center;
	aspect-ratio: 1;
	overflow: hidden;
	background: var(--rj-color-alt);
}

.rj-schedule__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* No programme page/logo: the site logo, cropped to its circle, on the gradient. */
.rj-schedule__logo:has(.rj-schedule__img--fallback) {
	background: linear-gradient(135deg, var(--rj-color-accent), var(--rj-color-fuchsia));
}

.rj-schedule .rj-schedule__img--fallback {
	width: 62%;
	height: auto;
	aspect-ratio: 1;
	border-radius: 50%;
	object-fit: cover;
}

.rj-schedule__body {
	min-width: 0;
}

/* Beats the Kit h3 size (body.elementor-kit-* h3). */
.rj-schedule .rj-schedule__title {
	margin: 0;
	font-family: var(--rj-font-heading);
	font-size: 18px;
	line-height: 1.3;
}

@media (min-width: 768px) {
	.rj-schedule .rj-schedule__title {
		font-size: 22px;
	}
}

.rj-schedule__title a {
	color: var(--rj-color-primary);
}

.rj-schedule__title a:hover {
	color: var(--rj-color-accent);
	text-decoration: underline;
}

.rj-schedule__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 12px;
	align-items: center;
	margin: 6px 0 0;
	color: var(--rj-color-muted);
	font-size: 14px;
}

.rj-schedule__rerun {
	padding: 2px 8px;
	background: var(--rj-color-dark);
	color: var(--rj-color-white);
	font-family: var(--rj-font-label);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.5px;
	text-transform: uppercase;
}

.rj-schedule__hosts-label {
	color: var(--rj-color-pink-aa);
	font-family: var(--rj-font-label);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.5px;
	text-transform: uppercase;
}

.rj-schedule__hosts a {
	color: var(--rj-color-accent);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

/* --------------------------------------------------------------------------
 * Trasmissioni ([radiojasper_programme_index]): status filter, A–Z letters,
 * grid of square covers (after radiopopolare.it/trasmissioni).
 * Buttons: .rj-programmes prefix beats the Kit button styles.
 * ----------------------------------------------------------------------- */
.rj-programmes {
	display: grid;
	gap: var(--rj-space-m);
}

.rj-programmes__filters {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 32px;
}

.rj-programmes .rj-programmes__status {
	min-height: 44px;
	padding: 8px 0;
	border: 0;
	border-bottom: 4px solid transparent;
	border-radius: 0;
	background: transparent;
	color: var(--rj-color-primary);
	font-family: var(--rj-font-label);
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	cursor: pointer;
}

.rj-programmes .rj-programmes__status:hover,
.rj-programmes .rj-programmes__status:focus {
	background: transparent;
	color: var(--rj-color-accent);
}

.rj-programmes .rj-programmes__status[aria-pressed="true"] {
	border-bottom-color: var(--rj-color-pink);
	color: var(--rj-color-accent);
}

.rj-programmes__count {
	display: inline-block;
	min-width: 24px;
	margin-left: 6px;
	padding: 2px 6px;
	background: var(--rj-color-dark);
	color: var(--rj-color-white);
	font-size: 12px;
	text-align: center;
}

.rj-programmes__letters {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.rj-programmes .rj-programmes__letter {
	min-width: 44px;
	height: 44px;
	padding: 0 10px;
	border: 1px solid var(--rj-color-border);
	border-radius: 0;
	background: var(--rj-color-white);
	color: var(--rj-color-primary);
	font-family: var(--rj-font-label);
	font-size: 15px;
	font-weight: 600;
	text-transform: uppercase;
	cursor: pointer;
}

.rj-programmes .rj-programmes__letter:hover,
.rj-programmes .rj-programmes__letter:focus {
	border-color: var(--rj-color-dark);
	background: var(--rj-color-alt);
	color: var(--rj-color-primary);
}

.rj-programmes .rj-programmes__letter[aria-pressed="true"] {
	border-color: var(--rj-color-dark);
	background: var(--rj-color-dark);
	color: var(--rj-color-white);
}

.rj-programmes .rj-programmes__letter:disabled {
	border-color: var(--rj-color-border);
	background: transparent;
	color: var(--rj-color-muted);
	opacity: 0.45;
	cursor: default;
}

.rj-programmes__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 768px) {
	.rj-programmes__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 32px 24px;
	}
}

@media (min-width: 1024px) {
	.rj-programmes__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (min-width: 1280px) {
	.rj-programmes__grid {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}
}

.rj-programmes__item[hidden] {
	display: none;
}

/* Beats the Kit link colour. */
.rj-programmes .rj-programmes__card {
	display: grid;
	gap: 10px;
	color: var(--rj-color-primary);
	text-decoration: none;
}

.rj-programmes__cover {
	display: grid;
	place-items: center;
	aspect-ratio: 1;
	overflow: hidden;
	border-bottom: 6px solid var(--rj-color-pink);
	background: var(--rj-color-alt);
}

.rj-programmes .rj-programmes__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.rj-programmes__card:hover .rj-programmes__img:not(.rj-programmes__img--fallback) {
	transform: scale(1.04);
}

/* No programme logo: the site logo, cropped to its circle, on the gradient. */
.rj-programmes__cover:has(.rj-programmes__img--fallback) {
	background: linear-gradient(135deg, var(--rj-color-accent), var(--rj-color-fuchsia));
}

.rj-programmes .rj-programmes__img--fallback {
	width: 50%;
	height: auto;
	aspect-ratio: 1;
	border-radius: 50%;
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.2);
}

.rj-programmes__name {
	font-family: var(--rj-font-heading);
	font-size: 17px;
	line-height: 1.3;
}

.rj-programmes__card:hover .rj-programmes__name,
.rj-programmes__card:focus-visible .rj-programmes__name {
	color: var(--rj-color-accent);
	text-decoration: underline;
}