/*
 * "Event announcements" on mobile: one slider instead of nested tabs
 * (see events-tabs-mobile.js). Cards from the programs, hotels and
 * events sliders are moved into a single track and styled here through
 * the shared events-tabs-mobile__* prefix plus each card's original BEM
 * classes, which are unique per block and so never clash.
 */
@media (max-width: 767px) {
	/* Tabs and the original panels hide only once JS has actually built
	   the merged slider, so the native tabs keep working if it did not. */
	.elementor-widget-n-tabs.events-tabs-mobile-active .e-n-tabs-heading,
	.elementor-widget-n-tabs.events-tabs-mobile-active .e-n-tabs-content {
		display: none;
	}

	.events-tabs-mobile {
		width: 100%;
	}

	.events-tabs-mobile__viewport {
		overflow: hidden;
	}

	.events-tabs-mobile__track {
		display: flex;
		gap: 20px;
		will-change: transform;
		transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
	}

	/* Card is 280px wide so the next one peeks in. */
	.events-tabs-mobile__track > .programs-slider__card,
	.events-tabs-mobile__track > .hotels-slider__card,
	.events-tabs-mobile__track > .events-slider__slide {
		position: relative;
		flex: 0 0 280px;
		width: 280px;
		min-width: 0;
		min-height: 0;
		gap: 0;
		border-radius: 6px;
		overflow: hidden;
	}

	/* Category badge carries the source tab's name. */
	.events-tabs-mobile__badge {
		position: absolute;
		top: 14px;
		left: 14px;
		z-index: 2;
		background: #323439;
		color: #fff;
		font-family: "TikTok Sans", sans-serif;
		font-size: 12px;
		line-height: 16px;
		padding: 4px 8px;
		border-radius: 100px;
	}

	/* Photo on top, rounded at the top only. */
	.events-tabs-mobile__track .programs-slider__image,
	.events-tabs-mobile__track .hotels-slider__image,
	.events-tabs-mobile__track .events-slider__image {
		flex: 0 0 auto;
		width: 100%;
		height: 200px;
		aspect-ratio: unset;
		min-height: 0;
		border-radius: 6px 6px 0 0;
	}

	/* Card body: light panel, rounded at the bottom only. */
	.events-tabs-mobile__track .programs-slider__body,
	.events-tabs-mobile__track .hotels-slider__body,
	.events-tabs-mobile__track .events-slider__panel {
		background: #F3F2F1;
		border-radius: 0 0 6px 6px;
		padding: 30px 20px;
		align-items: center;
		text-align: center;
		aspect-ratio: unset;
		max-width: none;
		width: 100%;
	}

	/* Date and location. */
	.events-tabs-mobile__track .programs-slider__dates,
	.events-tabs-mobile__track .hotels-slider__location,
	.events-tabs-mobile__track .events-slider__date {
		font-family: "TikTok Sans", sans-serif;
		font-size: 11px;
		line-height: 14px;
		letter-spacing: 1px;
		text-transform: uppercase;
		color: #414141;
		margin: 0 0 12px;
	}

	/* Title. */
	.events-tabs-mobile__track .programs-slider__title,
	.events-tabs-mobile__track .hotels-slider__title,
	.events-tabs-mobile__track .events-slider__title {
		width: auto;
		max-width: 100%;
		font-family: "Ahellya", Georgia, "Times New Roman", serif;
		font-style: italic;
		font-weight: 400;
		font-size: 18px;
		line-height: 135%;
		color: #323439;
		margin: 0 0 8px;
	}

	/* Description. */
	.events-tabs-mobile__track .programs-slider__text,
	.events-tabs-mobile__track .hotels-slider__text,
	.events-tabs-mobile__track .events-slider__text {
		font-family: "TikTok Sans", sans-serif;
		font-size: 14px;
		line-height: 145%;
		color: #414141;
		max-width: none;
		margin: 0 0 20px;
	}

	/* CTA: outlined accent button. */
	.events-tabs-mobile__track .programs-slider__cta,
	.events-tabs-mobile__track .hotels-slider__cta,
	.events-tabs-mobile__track .events-slider__cta {
		min-width: 0;
		height: 46px;
		padding: 14px 34px;
		border: 1px solid #960A19;
		border-radius: 6px;
		font-family: "TikTok Sans", sans-serif;
		font-size: 14px;
		line-height: 18px;
		font-weight: 400;
		letter-spacing: normal;
		text-transform: none;
		color: #960A19;
		background: transparent;
	}

	/*
	 * Pressed state mirrors the desktop hover (accent fill, white text).
	 *
	 * It lives here rather than in the three slider stylesheets because
	 * on mobile the cards are moved out of their sliders: the
	 * --ps-accent / --hs-accent / --es-accent variables are declared on
	 * the slider roots and no longer inherit, and the rule above has the
	 * same specificity as `.*__cta:active` while killing the background
	 * with a `background` shorthand. Hence the literal colour.
	 *
	 * The transition comes from the sliders' base rules, so the press
	 * feels the same as the hover on desktop.
	 */
	.events-tabs-mobile__track .programs-slider__cta:active,
	.events-tabs-mobile__track .hotels-slider__cta:active,
	.events-tabs-mobile__track .events-slider__cta:active {
		background: #960A19;
		color: #fff;
	}
}