/* TSF — Scroll Gallery */

.tsf-sg {
	position: relative;
	width: 100%;
	display: flex;
	align-items: center;
	/*
	 * Clipped horizontally, never vertically.
	 *
	 * `width: max-content` on the track is what makes the strip longer than the screen,
	 * and with visible overflow that length is added to the DOCUMENT: the whole page
	 * gained a horizontal scrollbar (measured: a 3471px document in a 1440px viewport).
	 *
	 * `clip` rather than `hidden` on purpose -- hidden makes the element a scroll
	 * container, which would let the strip be scrolled by touch and would also clip the
	 * vertical overflow the rotation needs. clip pairs legally with visible on the other
	 * axis, so the tilted corners still show above and below.
	 */
	overflow: visible;
}

.tsf-sg--edge-bleed,
.tsf-sg--edge-widget {
	overflow-x: clip;
	overflow-y: visible;
}

/* Safari before 16 has no overflow: clip; hidden at least stops the page scrolling. */
@supports not ( overflow-x: clip ) {
	.tsf-sg--edge-bleed,
	.tsf-sg--edge-widget {
		overflow: hidden;
	}
}

/*
 * The whole track is rotated, not the individual items. Rotating items one by one tilts
 * the pictures but leaves them on a horizontal baseline, so they never form a line; one
 * rotation on the track puts every item on the same straight line and gives them all the
 * same angle without repeating it per item.
 *
 * The script writes `rotate(A) translateX(x)` -- rotate FIRST, so the translation runs
 * along the rotated axis and the strip travels along its own line rather than sliding
 * horizontally across it.
 */
.tsf-sg__track {
	display: flex;
	align-items: center;
	gap: 40px;
	width: max-content;      /* as wide as its items, not the section */
	will-change: transform;
	transform-origin: center center;
}

.tsf-sg__item {
	position: relative;
	flex: 0 0 auto;
	overflow: hidden;
	border-radius: 18px;

	/* One shared height for every item: that is what makes it read as a band rather than
	   a scatter. Width is left to the picture unless the item sets one. */
	height: var( --tsf-sg-h, 300px );
	width: auto;

	transform: translateY( var( --tsf-sg-shift, 0px ) );
}

/*
 * Two classes, because Elementor ships `.elementor img { height: auto }` at specificity
 * (0,1,1) — a single class loses to it and the media would keep its intrinsic ratio
 * instead of filling the item box.
 */
.tsf-sg__item > .tsf-sg__media {
	display: block;
	height: 100%;
	width: auto;             /* the picture's own proportions set the item width */
	object-fit: cover;
	max-width: none;
}

/* When the item carries an explicit width, the media fills that box instead. */
.tsf-sg__item.is-fixed-w > .tsf-sg__media {
	width: 100%;
}

@media ( prefers-reduced-motion: reduce ) {
	/*
	 * No scroll-linked travel. The strip keeps the offset that centres the chosen item,
	 * which the script sets once, so the composition still reads as intended.
	 */
	.tsf-sg__track {
		transition: none !important;
	}
}