/**
 * Hero slider event slides on phones (≤767px).
 *
 * On a phone the flyer and the text card used to share the same space: the poster was laid out in the
 * top two-thirds and the full desktop card sat over most of it, so the flyer's title was hidden and the
 * hero ended in an empty band. Here they get a zone each: the whole poster in the top part of the hero,
 * and a compact card under it (eyebrow, title, date, button; the description is left to the flyer and
 * the event page).
 *
 * Kept in its own file because widget-styles.css (where the rest of the hero lives) carries other work
 * in progress. Every selector is four classes deep (.kv-hero-slider .kv-hero-slider__slide.--event .x)
 * so it outranks the widget-styles.css rules -- the deepest there are three, e.g.
 * `.kv-hero-slider__slide:has(.kv-hero-slider__event-meta) .x` (:has() counts as a class) -- whichever
 * file the browser reads first.
 *
 * The 310px poster cut-out leaves room for a two-line title: card (≈231px with two lines) + 70px for
 * the dots below it.
 */
@media (max-width: 767px) {
	.kv-hero-slider .kv-hero-slider__slide.kv-hero-slider__slide--event .kv-hero-slider__flyer {
		top: 0 !important;
		bottom: auto !important;
		height: calc(100% - 310px) !important;
		padding: 16px 16px 0 !important;
	}

	.kv-hero-slider .kv-hero-slider__slide.kv-hero-slider__slide--event .kv-hero-slider__content {
		align-items: flex-end;
		padding: 0 0 70px; /* clears the slide dots */
	}
	.kv-hero-slider .kv-hero-slider__slide.kv-hero-slider__slide--event .kv-hero-slider__content > .kv-container {
		padding-top: 0;
		padding-bottom: 0;
	}

	.kv-hero-slider .kv-hero-slider__slide.kv-hero-slider__slide--event .kv-hero-slider__text-wrap { padding: 16px 18px; }
	.kv-hero-slider .kv-hero-slider__slide.kv-hero-slider__slide--event .kv-hero-slider__accent { display: none; }
	.kv-hero-slider .kv-hero-slider__slide.kv-hero-slider__slide--event .kv-hero-slider__subheading {
		margin-bottom: 4px;
		font-size: 0.6875rem;
	}
	.kv-hero-slider .kv-hero-slider__slide.kv-hero-slider__slide--event .kv-hero-slider__heading {
		font-size: 1.5rem;
		line-height: 1.15;
		margin-bottom: 0;
		/* A long title stops at two lines rather than pushing the card up into the poster. */
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
	.kv-hero-slider .kv-hero-slider__slide.kv-hero-slider__slide--event .kv-hero-slider__desc { display: none; }

	/* Date beside its badge on one line, without the inner panel; the button full width below. */
	.kv-hero-slider .kv-hero-slider__slide.kv-hero-slider__slide--event .kv-hero-slider__event-footer {
		margin-top: 12px;
		gap: 12px;
	}
	.kv-hero-slider .kv-hero-slider__slide.kv-hero-slider__slide--event .kv-hero-slider__event-meta {
		width: 100%;
		padding: 0;
		gap: 12px;
		background: none;
		border: 0;
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}
	.kv-hero-slider .kv-hero-slider__slide.kv-hero-slider__slide--event .kv-hero-slider__event-badge {
		padding: 6px 10px;
		min-width: 48px;
	}
	.kv-hero-slider .kv-hero-slider__slide.kv-hero-slider__slide--event .kv-hero-slider__event-month { font-size: 0.625rem; }
	.kv-hero-slider .kv-hero-slider__slide.kv-hero-slider__slide--event .kv-hero-slider__event-day { font-size: 1.3rem; }
	.kv-hero-slider .kv-hero-slider__slide.kv-hero-slider__slide--event .kv-hero-slider__event-date-text { font-size: 0.875rem; }
	.kv-hero-slider .kv-hero-slider__slide.kv-hero-slider__slide--event .kv-hero-slider__cta { width: 100%; }
	.kv-hero-slider .kv-hero-slider__slide.kv-hero-slider__slide--event .kv-hero-slider__cta .kv-btn {
		padding-top: 12px;
		padding-bottom: 12px;
	}
}