/*
 * Event slider: a sideways row of event cards in the grid view's card style (design.css),
 * ending in a link to the programme. Slides line up with the site grid and run out to the
 * screen edges. Before Swiper starts (and in the editor) the row is a native scroll-snap
 * strip; src/event-slider.ts reads the gap from --ts-slider-gap, so widths stay here.
 */
.ts-slider {
	--ts-slider-gap: 0.75rem;
	--ts-slider-bleed: max(var(--gutter), (100vw - var(--wrap)) / 2);
	padding-block: var(--space-section);
	overflow-x: clip;
}
@media (min-width: 700px) { .ts-slider { --ts-slider-gap: 1.25rem; } }
@media (min-width: 1100px) { .ts-slider { --ts-slider-gap: 1.5rem; } }

.ts-slider .swiper { overflow: visible; column-gap: var(--ts-slider-gap); }
.ts-slider .swiper-wrapper { display: flex; }
.ts-slider .swiper-slide { display: flex; flex: none; width: min(85%, 21rem); height: auto; }
@media (min-width: 700px) { .ts-slider .swiper-slide { width: calc((100% - var(--ts-slider-gap)) / 2); } }
@media (min-width: 1100px) { .ts-slider .swiper-slide { width: calc((100% - 2 * var(--ts-slider-gap)) / 3); } }
.ts-slider .swiper-slide > * { flex: 1; min-width: 0; }

/* Without Swiper: native scrolling across the full screen width, snapping to the grid. */
.ts-slider .swiper:not(.swiper-initialized) .swiper-wrapper {
	gap: var(--ts-slider-gap);
	width: auto;
	margin-inline: calc(-1 * var(--ts-slider-bleed));
	padding-inline: var(--ts-slider-bleed);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--ts-slider-bleed);
	scrollbar-width: none;
}
.ts-slider .swiper:not(.swiper-initialized) .swiper-wrapper::-webkit-scrollbar { display: none; }
.ts-slider .swiper:not(.swiper-initialized) .swiper-slide { scroll-snap-align: start; }

/* Closing slide: the way on to the full programme, on the brand blue. */
.ts-slider__more a {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 1.5rem;
	height: 100%;
	padding: clamp(1.25rem, 1rem + 1vw, 2rem);
	background: var(--blue);
	color: #fff;
	text-decoration: none;
	transition: background-color 0.2s;
}
.ts-slider__more a:hover { background: var(--blue-deep); }
.ts-slider__more-text { font: 800 var(--fs-h2)/0.95 var(--font-display); text-wrap: balance; }
.ts-slider__more a::before { content: ""; width: 2.5rem; height: var(--bar); background: #fff; }
.ts-slider__more-link { display: inline-flex; align-items: center; gap: 0.55rem; font: 700 1.125rem/1 var(--font-display); letter-spacing: 0.01em; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }

/* Progress bar, like the logo's bars, and the previous/next buttons. */
.ts-slider__controls { display: flex; align-items: center; gap: 0.5rem; margin-top: var(--space-3); }
.ts-slider__controls[hidden], .ts-slider__controls:has(.swiper-button-lock) { display: none; }
.ts-slider__progress { position: relative; flex: 1; height: var(--bar); margin-right: 1rem; overflow: hidden; background: var(--line); }
.ts-slider__progress .swiper-pagination-progressbar-fill { position: absolute; inset: 0; background: var(--blue); transform: scaleX(0); transform-origin: left top; }
.ts-slider__button {
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	padding: 0;
	border: 2px solid rgba(255, 255, 255, 0.3);
	background: transparent;
	color: #fff;
	cursor: pointer;
	transition: border-color 0.15s, opacity 0.15s;
}
.ts-slider__button:hover { border-color: #fff; }
.ts-slider__button:disabled { opacity: 0.35; cursor: default; }
.ts-slider__button:disabled:hover { border-color: rgba(255, 255, 255, 0.3); }
.ts-slider__button svg { width: 1.25rem; height: 1.25rem; fill: currentColor; }

/* On the event page the slider closes the page below the description. */
.ts-event-single .ts-slider { padding-block: var(--space-sub) 0; }