/*
 * Theme bug: ".lte-arrows-right-top" (a selectable arrow-position style for
 * any LTE-Ext swiper slider - e.g. tickets-extend's Events widget uses it,
 * and LTE-Ext's own Gallery widget offers it too) hardcodes "left: 1470px"
 * for both arrows (style.css, "@media (min-width: 768px)") - a fixed pixel
 * offset from their positioning ancestor's LEFT edge, sized for one
 * specific wide desktop layout. At any narrower width (down to the 768px
 * this same media query still claims to support - i.e. tablets too), that
 * pushes both arrows far outside the visible viewport, causing real
 * horizontal page overflow. What looks like "the whole page is too narrow,
 * with blank space on the right" is actually this overflow pushing/
 * clipping everything else, not the content itself shrinking.
 *
 * Fixed by anchoring from the ancestor's RIGHT edge instead - naturally
 * responsive regardless of that ancestor's actual width, unlike a fixed
 * left offset, so it can't overflow at any screen size. Keeps the same
 * visual gap the original design used: the base arrow is 62px wide
 * (style.css: ".lte-arrow-left, .lte-arrow-right { width: 62px; }"), and
 * the original rule's left-arrow "margin-left: -80px" (relative to the
 * right arrow's "left: 1470px" anchor) worked out to 80px = 62px arrow +
 * 18px gap between them - reproduced here as "right: 80px" instead.
 *
 * The extra repeated class on each selector matches this codebase's own
 * established technique (see e.g. football-extend's frontend.css) for
 * reliably out-specifying a theme rule regardless of stylesheet load
 * order, instead of relying on it or reaching for !important.
 */
@media (min-width: 768px) {

	.lte-swiper-slider + .lte-arrows.lte-arrows-right-top .lte-arrow-left.lte-arrow-left,
	.lte-swiper-slider + .lte-arrows.lte-arrows-right-top .lte-arrow-right.lte-arrow-right {
		left: auto;
	}

	.lte-swiper-slider + .lte-arrows.lte-arrows-right-top .lte-arrow-right.lte-arrow-right {
		right: 0;
	}

	.lte-swiper-slider + .lte-arrows.lte-arrows-right-top .lte-arrow-left.lte-arrow-left {
		right: 80px;
		margin-left: 0;
	}
}