/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */

/* Click-to-play featured videos. */
[data-elim-video] {
	position: relative;
}

.elim-video-facade__play {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
}

.elim-video-facade__play::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 76px;
	height: 76px;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.6);
	transform: translate(-50%, -50%);
	transition: background-color 0.2s;
}

.elim-video-facade__play::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	border-style: solid;
	border-width: 15px 0 15px 26px;
	border-color: transparent transparent transparent #fff;
	transform: translate(-38%, -50%);
}

.elim-video-facade__play:hover::before,
.elim-video-facade__play:focus-visible::before,
[data-elim-video]:hover .elim-video-facade__play::before {
	background: rgba(0, 0, 0, 0.85);
}

.elim-video-facade__play:focus-visible {
	outline: 3px solid #fff;
	outline-offset: -6px;
}

/* Cards for posts that open with a video: a play badge on the image. */
.elim-video-card > a {
	position: relative;
	display: block;
	align-self: flex-start;
}

.elim-video-card__play {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.6);
	transform: translate(-50%, -50%);
	pointer-events: none;
	transition: background-color 0.2s;
}

.elim-video-card__play::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	border-style: solid;
	border-width: 11px 0 11px 19px;
	border-color: transparent transparent transparent #fff;
	transform: translate(-38%, -50%);
}

.elim-video-card > a:hover .elim-video-card__play,
.elim-video-card > a:focus-visible .elim-video-card__play {
	background: rgba(0, 0, 0, 0.85);
}
/* Elim TV pages (templates wrapped in .variant--elim-tv): James's web style guide, made from the identity
   manual. Heavitas headings at their one weight (no faux bold), Avenir Next text, and links in the text
   colour (black on white) rather than purple. Sizes and buttons already match through theme.json and the
   variant's colours. The site header and footer keep the main Elim brand. */
.variant--elim-tv > :not(header):not(footer) {
	font-family: var(--wp--preset--font-family--avenir-next);
}

.variant--elim-tv > :not(header):not(footer) :is(h1, h2, h3, h4, h5, h6) {
	font-family: var(--wp--preset--font-family--heavitas);
	font-weight: 400;
}

/* Plain text links only: buttons and styled links (cards, the hero's buttons) carry a class. */
.variant--elim-tv > :where(:not(header):not(footer)) a:where(:not([class])) {
	color: inherit;
}

/* Elim TV hero: a billboard. The week's most watched video fills it edge to edge and fades into the
   purple (a mask, so it meets the template's own gradient), its title block headed by the station logo
   on the faded side (below it on phones), and the ranked rail riding up over its foot. "Ver ahora" plays
   the video across the whole billboard. The template's group paints the purple.
   Colours, logo and type from the Elim TV identity manual (2016) and the web style guide made from it:
   green #40dd7f and purple #500993 on the deep purples #27004c / #100435, Heavitas titles, Avenir Next text. */
.elim-tv-hero {
	--elim-tv-green: #40dd7f;
	--elim-tv-purple: #500993;
	--elim-tv-deep: #27004c;
	--elim-tv-hero-gutter: max(var(--wp--style--root--padding-left, 1.25rem), calc((100% - var(--wp--style--global--wide-size, 1250px)) / 2));
	margin-block: 0;
	padding-top: 0;
	color: #fff;
	font-family: var(--wp--preset--font-family--avenir-next);
}

.elim-tv-hero__slide {
	display: grid;
	gap: 1.5rem;
	padding: 0 var(--elim-tv-hero-gutter);
	scroll-margin-top: 6rem;
}

.elim-tv-hero__slide[hidden] {
	display: none;
}

.elim-tv-hero__logo {
	display: block;
	width: 150px;
	height: auto;
	margin: 0 0 1.5rem;
}

.elim-tv-hero__screen {
	position: relative;
	aspect-ratio: 16 / 9;
	margin: 0 calc(-1 * var(--elim-tv-hero-gutter));
	overflow: hidden;
	-webkit-mask-image: linear-gradient(to top, transparent, #000 40%);
	mask-image: linear-gradient(to top, transparent, #000 40%);
}

.elim-tv-hero__backdrop {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
}

.elim-tv-hero__eyebrow {
	display: inline-block;
	margin: 0 0 1rem;
	padding: 0.3rem 0.85rem;
	border: 2px solid var(--elim-tv-green);
	border-radius: 999px;
	color: var(--elim-tv-green);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1.2;
	text-transform: uppercase;
}

.elim-tv-hero__info {
	text-shadow: 0 2px 16px rgba(16, 4, 53, 0.5);
}

.elim-tv-hero__title {
	margin: 0;
	color: #fff;
	font-family: var(--wp--preset--font-family--heavitas);
	font-size: clamp(2rem, 4.2vw, 4rem);
	font-weight: 400;
	line-height: 1.1;
	text-wrap: balance;
}

.elim-tv-hero__meta {
	margin: 0.75rem 0 0;
	color: rgba(255, 255, 255, 0.85);
	font-size: var(--wp--preset--font-size--small);
}

.elim-tv-hero__meta a,
.elim-tv-hero__meta a:hover {
	color: #fff;
	font-weight: 700;
}

.elim-tv-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 1.5rem 0 0;
}

.elim-tv-hero__play,
.elim-tv-hero__more,
.elim-tv-hero__subscribe {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem 1.5rem;
	border-radius: var(--wp--custom--radius, 8px);
	font: inherit;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
}

/* The style guide's button: purple with white text, green with black text on hover. */
.elim-tv-hero__play {
	border: 0;
	background: var(--elim-tv-purple);
	color: #fff;
}

.elim-tv-hero__play:hover,
.elim-tv-hero__play:focus-visible {
	background: var(--elim-tv-green);
	color: #000;
}

.elim-tv-hero__more,
.elim-tv-hero__more:hover,
.elim-tv-hero__subscribe {
	border: 1px solid rgba(255, 255, 255, 0.6);
	background: transparent;
	color: #fff;
}

.elim-tv-hero__more:hover,
.elim-tv-hero__more:focus-visible,
.elim-tv-hero__subscribe:hover,
.elim-tv-hero__subscribe:focus-visible {
	border-color: var(--elim-tv-green);
	background: var(--elim-tv-green);
	color: #000;
}

@media (min-width: 782px) {
	.elim-tv-hero {
		--elim-tv-hero-overlap: clamp(3rem, 6vw, 6rem);
	}

	.elim-tv-hero__slide {
		position: relative;
		display: flex;
		align-items: center;
		height: min(56.25vw, 75vh);
		min-height: 28rem;
		padding-bottom: var(--elim-tv-hero-overlap);
	}

	.elim-tv-hero__logo {
		width: clamp(160px, 16vw, 220px);
		margin-bottom: 2rem;
	}

	/* The right two thirds, cropped into the artwork's right side so the lettering thumbnails carry on
	   their left fades out behind the title block, and fading into the rail below. */
	.elim-tv-hero__screen {
		position: absolute;
		inset: 0 0 0 auto;
		width: 68%;
		margin: 0;
		aspect-ratio: auto;
		-webkit-mask-image: linear-gradient(to right, transparent 35%, #000 70%), linear-gradient(to top, transparent, #000 35%);
		-webkit-mask-composite: source-in;
		mask-image: linear-gradient(to right, transparent 35%, #000 70%), linear-gradient(to top, transparent, #000 35%);
		mask-composite: intersect;
	}

	.elim-tv-hero__backdrop {
		object-position: 85% center;
	}

	.elim-tv-hero__info {
		position: relative;
		z-index: 1;
		max-width: 36rem;
	}

	.elim-tv-hero__rail {
		position: relative;
		z-index: 1;
		margin-top: calc(-1 * var(--elim-tv-hero-overlap));
		padding-top: 0;
	}
}

.elim-tv-hero__rail {
	padding: var(--wp--preset--spacing--60, 3rem) var(--elim-tv-hero-gutter) 3rem;
}

.elim-tv-hero__heading {
	margin: 0 0 1rem;
	color: #fff;
	font-family: var(--wp--preset--font-family--heavitas);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 400;
}

.elim-tv-hero__list {
	display: grid;
	grid-auto-columns: 72%;
	grid-auto-flow: column;
	gap: 1rem;
	margin: 0;
	padding: 0 0 0.5rem;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	list-style: none;
}

.elim-tv-hero__list > li {
	scroll-snap-align: start;
}

@media (min-width: 782px) {
	.elim-tv-hero__list {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		grid-auto-flow: row;
		overflow: visible;
	}
}

/* Top-ten style: a big outlined rank tucked behind the thumbnail. */
.elim-tv-hero__item {
	display: grid;
	grid-template-columns: 3rem minmax(0, 1fr);
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.elim-tv-hero__rank {
	grid-row: 1;
	grid-column: 1;
	align-self: end;
	margin-right: -1rem;
	color: transparent;
	font-family: var(--wp--preset--font-family--heavitas);
	font-size: 5rem;
	font-weight: 400;
	line-height: 0.75;
	-webkit-text-stroke: 2px rgba(255, 255, 255, 0.55);
}

.elim-tv-hero__item img {
	position: relative;
	grid-row: 1;
	grid-column: 2;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 6px;
	outline: 3px solid transparent;
	outline-offset: 2px;
}

.elim-tv-hero__item:hover img {
	outline-color: rgba(255, 255, 255, 0.5);
}

.elim-tv-hero__item[aria-pressed="true"] img {
	outline-color: var(--elim-tv-green);
}

.elim-tv-hero__item[aria-pressed="true"] .elim-tv-hero__rank {
	-webkit-text-stroke-color: var(--elim-tv-green);
}

.elim-tv-hero__name {
	display: -webkit-box;
	grid-column: 2;
	margin-top: 0.6rem;
	overflow: hidden;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	line-height: 1.3;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.elim-tv-hero__views {
	grid-column: 2;
	font-size: var(--wp--preset--font-size--x-small);
	opacity: 0.7;
}

/* Station pages ([elim_station]): the hero and live player, made like the Radios Elim app
   (app.elim.org.sv). Each station paints it in its own colours, set inline as --station-a (deep) to
   --station-c (light), with --station-ink for the play icon and --station-button behind it. Radio
   waves ripple out from behind the player. */
.elim-station {
	--station-button: #fff;
	--elim-station-gutter: max(var(--wp--style--root--padding-left, 1.25rem), calc((100% - var(--wp--style--global--wide-size, 1250px)) / 2));
	position: relative;
	isolation: isolate;
	overflow: hidden;
	margin-block: 0;
	padding: clamp(2.5rem, 6vw, 5rem) var(--elim-station-gutter) 2rem;
	background:
		radial-gradient(50rem 30rem at 80% 15%, color-mix(in srgb, var(--station-c) 45%, transparent), transparent 70%),
		linear-gradient(135deg, var(--station-a) 10%, var(--station-b) 60%, var(--station-c) 130%);
	color: #fff;
}

.elim-station::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: 50%;
	right: calc(var(--elim-station-gutter) + 190px);
	width: 1400px;
	aspect-ratio: 1;
	background: repeating-radial-gradient(circle, transparent 0 58px, rgba(255, 255, 255, 0.07) 59px 60px);
	-webkit-mask-image: radial-gradient(circle, #000 15%, transparent 60%);
	mask-image: radial-gradient(circle, #000 15%, transparent 60%);
	transform: translate(50%, -50%);
	pointer-events: none;
}

.elim-station [hidden] {
	display: none !important;
}

/* Phones: the player straight after the station's line, then the rest. Wide screens: the player
   beside it all. */
.elim-station__inner {
	display: grid;
	gap: 2.5rem;
}

.elim-station__more {
	order: 1;
}

@media (min-width: 900px) {
	.elim-station__inner {
		grid-template-columns: minmax(0, 1fr) minmax(320px, 380px);
		column-gap: clamp(3rem, 6vw, 6rem);
		row-gap: 0;
	}

	.elim-station__head {
		grid-row: 1;
		grid-column: 1;
		align-self: end;
	}

	.elim-station__more {
		grid-row: 2;
		grid-column: 1;
	}

	.elim-station__lede {
		margin-top: 1.25rem;
	}

	.elim-station__player {
		grid-row: 1 / span 2;
		grid-column: 2;
		align-self: center;
	}
}

.elim-station__name {
	margin: 0;
	line-height: 0;
}

.elim-station__logo {
	width: auto;
	max-width: min(100%, 420px);
	height: clamp(64px, 9vw, 104px);
	object-fit: contain;
	object-position: left center;
}

.elim-station__eyebrow {
	display: inline-block;
	margin: 1.75rem 0 0;
	padding: 0.35rem 0.9rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.14);
	font-size: var(--wp--preset--font-size--x-small, 0.8rem);
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.3;
	text-transform: uppercase;
}

.elim-station__tagline {
	max-width: 22ch;
	margin: 1rem 0 0;
	font-size: clamp(1.9rem, 3.6vw, 3.1rem);
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -0.01em;
	text-wrap: balance;
}

.elim-station__lede {
	max-width: 36rem;
	margin: 0;
	color: rgba(255, 255, 255, 0.85);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
}

.elim-station__apps {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 2rem;
}

.elim-station__apps p {
	flex-basis: 100%;
	margin: 0;
	font-size: var(--wp--preset--font-size--x-small, 0.8rem);
	font-weight: 700;
	letter-spacing: 0.08em;
	opacity: 0.75;
	text-transform: uppercase;
}

.elim-station__store,
.elim-station__store:hover {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.55rem 1.15rem 0.55rem 0.9rem;
	border: 1px solid rgba(255, 255, 255, 0.45);
	border-radius: 12px;
	background: rgba(0, 0, 0, 0.18);
	color: #fff;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.1;
	text-decoration: none;
	transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

@media (max-width: 480px) {
	.elim-station__store,
	.elim-station__store:hover {
		padding: 0.5rem 0.8rem 0.5rem 0.65rem;
		font-size: 0.9rem;
	}
}

.elim-station__store small {
	display: block;
	font-size: 0.68rem;
	font-weight: 400;
	opacity: 0.8;
}

.elim-station__store:hover,
.elim-station__store:focus-visible {
	border-color: #fff;
	background: #fff;
	color: var(--station-ink);
}

/* The player: a frosted card, like the app's player screen. */
.elim-station__player {
	padding: 2rem 1.75rem 1.75rem;
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 28px;
	background: rgba(255, 255, 255, 0.1);
	box-shadow: 0 30px 60px -25px rgba(0, 0, 0, 0.5);
	-webkit-backdrop-filter: blur(18px);
	backdrop-filter: blur(18px);
	text-align: center;
}

.elim-station__disc {
	position: relative;
	display: grid;
	place-items: center;
	width: 168px;
	aspect-ratio: 1;
	margin: 0 auto;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.12), 0 18px 40px -12px rgba(0, 0, 0, 0.45);
}

.elim-station__disc img {
	width: 74%;
	height: 60%;
	object-fit: contain;
}

.elim-station__pulse {
	position: absolute;
	inset: -10px;
	border: 2px solid rgba(255, 255, 255, 0.7);
	border-radius: 50%;
	animation: elim-station-pulse 1.4s var(--wp--custom--ease, cubic-bezier(0.22, 1, 0.36, 1)) infinite;
}

@keyframes elim-station-pulse {
	from {
		opacity: 0.9;
		transform: scale(1);
	}

	to {
		opacity: 0;
		transform: scale(1.3);
	}
}

.elim-station__live {
	margin: 1.5rem 0 0;
	font-size: var(--wp--preset--font-size--x-small, 0.8rem);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.elim-station__dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	margin-right: 0.5rem;
	border-radius: 50%;
	background: #ff4d4d;
	box-shadow: 0 0 0 0 rgba(255, 77, 77, 0.6);
	vertical-align: 1px;
	animation: elim-station-live 2s infinite;
}

@keyframes elim-station-live {
	70% {
		box-shadow: 0 0 0 7px rgba(255, 77, 77, 0);
	}

	100% {
		box-shadow: 0 0 0 0 rgba(255, 77, 77, 0);
	}
}

.elim-station__song {
	display: -webkit-box;
	margin: 0.4rem 0 0;
	overflow: hidden;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.35;
	opacity: 0.9;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.elim-station__play {
	display: grid;
	place-items: center;
	width: 80px;
	height: 80px;
	margin: 1.25rem auto 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--station-button);
	color: var(--station-ink);
	box-shadow: 0 14px 30px -10px rgba(0, 0, 0, 0.5);
	cursor: pointer;
	transition: transform 0.2s var(--wp--custom--ease, cubic-bezier(0.22, 1, 0.36, 1));
}

.elim-station__play:hover {
	transform: scale(1.06);
}

.elim-station__play:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 4px;
}

.elim-station__status {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0.5rem;
	min-height: 1.5em;
	margin: 0.9rem 0 0;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
}

/* The app's equalizer, while a station plays. */
.elim-station__bars {
	display: inline-flex;
	align-items: flex-end;
	gap: 2px;
	height: 14px;
}

.elim-station__bars i {
	width: 3px;
	height: 100%;
	border-radius: 2px;
	background: currentColor;
	transform-origin: bottom;
	animation: elim-station-bar 0.9s ease-in-out infinite alternate;
}

.elim-station__bars i:nth-child(2) {
	animation-delay: -0.3s;
}

.elim-station__bars i:nth-child(3) {
	animation-delay: -0.6s;
}

.elim-station__bars i:nth-child(4) {
	animation-delay: -0.15s;
}

@keyframes elim-station-bar {
	from {
		transform: scaleY(0.25);
	}

	to {
		transform: scaleY(1);
	}
}

@media (prefers-reduced-motion: reduce) {
	.elim-station__pulse,
	.elim-station__dot,
	.elim-station__bars i {
		animation: none;
	}
}

/* The app's "Calidad de sonido" switch. */
.elim-station__quality {
	margin: 1.5rem 0 0;
	padding: 0;
	border: 0;
}

.elim-station__quality legend {
	margin: 0 auto 0.6rem;
	padding: 0;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	opacity: 0.75;
	text-transform: uppercase;
}

.elim-station__quality div {
	display: flex;
	padding: 4px;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.22);
}

.elim-station__quality label {
	position: relative;
	flex: 1;
	cursor: pointer;
}

.elim-station__quality input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.elim-station__quality span {
	display: block;
	padding: 0.45rem 0.5rem;
	border-radius: 999px;
	font-size: var(--wp--preset--font-size--x-small, 0.8rem);
	font-weight: 700;
	white-space: nowrap;
	transition: background-color 0.2s, color 0.2s;
}

.elim-station__quality input:checked + span {
	background: #fff;
	color: var(--station-ink);
}

.elim-station__quality input:focus-visible + span {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

/* The other stations, by their logos. */
.elim-station__others {
	margin-top: clamp(2.5rem, 5vw, 4rem);
	padding-top: 1.5rem;
	border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.elim-station__others h2 {
	margin: 0 0 1rem;
	color: #fff;
	font-size: var(--wp--preset--font-size--x-small, 0.8rem);
	letter-spacing: 0.1em;
	opacity: 0.75;
	text-transform: uppercase;
}

.elim-station__others ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.elim-station__other {
	display: flex;
	align-items: center;
	height: 52px;
	padding: 0 1.1rem;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 10px 24px -14px rgba(0, 0, 0, 0.6);
	transition: transform 0.2s var(--wp--custom--ease, cubic-bezier(0.22, 1, 0.36, 1));
}

.elim-station__other:hover,
.elim-station__other:focus-visible {
	transform: translateY(-3px);
}

.elim-station__other img {
	width: auto;
	max-width: 130px;
	height: 30px;
	object-fit: contain;
}