/**
 * Airline Logo Carousel — shared structural CSS.
 *
 * Loaded on both the front end and inside the block editor (block.json
 * "style") on purpose: the editor preview is meant to look like the real
 * layout, so the flex/grid geometry below applies in both places. The one
 * thing that must NOT run by default inside Gutenberg is the continuous
 * animation itself — that only activates via the ".alc-carousel--animate"
 * modifier class, which the editor only adds when the block's own
 * "Preview animation" toggle is on, and which the front end always adds.
 * Every selector is scoped under ".alc-carousel" (this block's own wrapper),
 * never a WP core/editor class.
 */

.alc-carousel {
	--logo-count: 4;
	--logo-height: 70px;
	--logo-gap: 60px;
	--logo-speed: 30s;
	/* Actual number of logos, not the "visible" setting — overridden per
	   instance via the inline <style> block in render.php. Needed to
	   calculate --logo-set-width below. */
	--logo-real-count: 1;
	overflow: hidden;
}

/*
 * container-type: inline-size turns this element into a CSS container-query
 * container, so descendants can size themselves in "cqw" units — a
 * percentage of *this* element's own width specifically — no matter how
 * many flex/intrinsic-sizing layers sit between them. That's what item
 * width (below) is anchored to, instead of a percentage of its immediate
 * parent (".alc-carousel__set"). It has to be: a set's own width can't be a
 * fixed fraction of the track, because the number of *real* logos and the
 * configured "visible count" are independent — e.g. 5 logos with
 * "visible: 2" on mobile means each item is sized as one-half of the
 * viewport, but a set still has to lay out all 5 of them, so the set ends
 * up 2.5 viewports wide. A set fixed at exactly "50% of a 200%-wide track"
 * (one viewport) couldn't hold that without its content overflowing into
 * where the next (duplicated) set begins — which is exactly the overlap
 * this replaces. Anchoring to the viewport's real width via cqw sidesteps
 * the question entirely: items are always sized correctly regardless of
 * how wide their set ends up, and the set/track can go back to intrinsic
 * ("max-content") sizing since summing already-correctly-sized items no
 * longer runs into the percent-in-intrinsic-context ambiguity that caused
 * the very first version of this file to leave a gap at the seam.
 *
 * --logo-item-width / --logo-set-width / --logo-loop-distance are computed
 * here (not on the ".alc-carousel" root) because "cqw" only resolves
 * against the nearest container-query ancestor — this element. The
 * animation below reads --logo-loop-distance to move the track by exactly
 * "one set's width plus one gap", instead of a generic "-50%" of the
 * track's own total width. Those aren't the same distance: the track only
 * ever renders ONE gap total, between its two ".alc-carousel__set"
 * children (see the "gap" on ".alc-carousel__track" below) — "-50%" of
 * (set + gap + set) under- or over-shoots by half a gap, which is exactly
 * what made the seam between the two sets visually inconsistent with
 * every other (correctly, fully gapped) pair of logos.
 */
.alc-carousel__viewport {
	container-type: inline-size;
	overflow: hidden;
	width: 100%;
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
	mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
	--logo-item-width: calc((100cqw - (var(--logo-count) - 1) * var(--logo-gap)) / var(--logo-count));
	--logo-set-width: calc(var(--logo-real-count) * var(--logo-item-width) + (var(--logo-real-count) - 1) * var(--logo-gap));
	--logo-loop-distance: calc(var(--logo-set-width) + var(--logo-gap));
}

.alc-carousel__track {
	display: flex;
	align-items: center;
	gap: var(--logo-gap);
	width: max-content;
	will-change: transform;
}

.alc-carousel__set {
	display: flex;
	align-items: center;
	gap: var(--logo-gap);
}

.alc-carousel--align-left .alc-carousel__set {
	justify-content: flex-start;
}

.alc-carousel--align-center .alc-carousel__set {
	justify-content: center;
}

.alc-carousel--align-right .alc-carousel__set {
	justify-content: flex-end;
}

.alc-carousel__set[aria-hidden="true"] {
	/* The duplicated copy exists only so the animation has something to
	   scroll into; assistive tech should only ever see the real set. */
	pointer-events: none;
}

.alc-carousel__item {
	flex: 0 0 auto;
	width: var(--logo-item-width);
	display: flex;
	justify-content: center;
	box-sizing: border-box;
}

.alc-carousel--valign-top .alc-carousel__item {
	align-items: flex-start;
}

.alc-carousel--valign-center .alc-carousel__item {
	align-items: center;
}

.alc-carousel--valign-bottom .alc-carousel__item {
	align-items: flex-end;
}

.alc-carousel__item img {
	display: block;
	height: var(--logo-height);
	width: auto;
	max-width: 100%;
	object-fit: contain;
}

.alc-carousel__empty {
	padding: 24px;
	text-align: center;
	opacity: 0.6;
	font-size: 13px;
}

/* --------------------------------------------------------------------
   Animation — only when ".alc-carousel--animate" is present (frontend
   always has it; the editor only adds it via the Preview Animation toggle).
   -------------------------------------------------------------------- */

@keyframes alc-marquee-scroll {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(calc(-1 * var(--logo-loop-distance)));
	}
}

.alc-carousel--animate .alc-carousel__track {
	animation-name: alc-marquee-scroll;
	animation-duration: var(--logo-speed);
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

.alc-carousel--direction-right .alc-carousel__track {
	animation-direction: reverse;
}

.alc-carousel--pause-on-hover .alc-carousel__viewport:hover .alc-carousel__track,
.alc-carousel--pause-on-hover .alc-carousel__viewport:focus-within .alc-carousel__track {
	animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
	.alc-carousel--animate .alc-carousel__track {
		animation: none;
		transform: none;
	}
}

/* --------------------------------------------------------------------
   Responsive — tablet/mobile values are injected per block instance via
   an inline <style> block (render.php), scoped to that instance's unique
   class, redefining these same custom properties at each breakpoint.
   -------------------------------------------------------------------- */