/**
 * Styles applied both on the frontend and in the editor.
 *
 * Layout is CSS-first: the scroll effect uses native scroll-snap, the fade
 * effect uses stacked grid areas. The view script only toggles classes.
 */

.wp-block-oacs-slider {
	position: relative;

	.isb-track {
		list-style: none;
		margin: 0;
		padding: 0;
		position: relative;
	}

	.isb-slide {
		margin: 0;

		figure {
			margin: 0;
			height: 100%;
			position: relative;
		}

		a {
			display: block;
			height: 100%;
		}

		img {
			display: block;
			width: 100%;
			height: auto;
		}
	}

	// Scroll effect: native scroll-snap. Works without JavaScript.
	&.effect-scroll .isb-track {
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		overscroll-behavior-x: contain;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;

		&::-webkit-scrollbar {
			display: none;
		}

		.isb-slide {
			flex: 0 0 100%;
			min-width: 100%;
			scroll-snap-align: start;
			scroll-snap-stop: always;
		}
	}

	// Fade effect: slides stacked on one grid area, toggled via opacity.
	&.effect-fade .isb-track {
		display: grid;

		.isb-slide {
			grid-area: 1 / 1;
			opacity: 0;
			transition: opacity 300ms linear;
			pointer-events: none;

			&.is-active {
				opacity: 1;
				pointer-events: auto;
				z-index: 1;
			}
		}
	}

	// Before the view script runs (or without JS), show the first slide.
	&.effect-fade:not(.is-initialized) .isb-slide:first-child {
		opacity: 1;
		pointer-events: auto;
	}

	// Cropped: the track gets the first image's aspect ratio (inline style),
	// slides fill it and images cover.
	&.is-cropped .isb-track.has-fixed-ratio {

		.isb-slide {
			height: 100%;
			overflow: hidden;
		}

		figure,
		a {
			height: 100%;
		}

		img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}

	// Adaptive height: the view script sets the track height per slide.
	&[data-adaptive-height] {

		.isb-track {
			transition-property: height;
			transition-timing-function: ease;
		}

		.isb-slide {
			align-self: flex-start;
		}

		&.effect-scroll .isb-track {
			overflow-y: hidden;
		}

		&.effect-fade .isb-track {
			overflow: hidden;
		}
	}

	figcaption {
		position: absolute;
		bottom: 0;
		right: 0;
		left: 0;
		max-height: 100%;
		overflow: auto;
		padding: 40px 10px 5px;
		color: #fff;
		text-align: center;
		font-size: 13px;
		background:
 linear-gradient(0deg, rgba(0, 0, 0, 0.7) 0, rgba(0, 0, 0, 0.3) 60%, transparent);

		img {
			display: inline;
		}

		a {
			display: inline;
			height: auto;
			color: #fff;
		}
	}

	// Controls (injected by the view script).
	.isb-arrow,
	.isb-pause {
		position: absolute;
		z-index: 2;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		padding: 0;
		border: 0;
		border-radius: 50%;
		background: rgba(0, 0, 0, 0.5);
		color: #fff;
		cursor: pointer;

		svg {
			width: 24px;
			height: 24px;
			fill: currentcolor;
		}

		&:hover,
		&:focus {
			background: rgba(0, 0, 0, 0.75);
		}

		&:focus-visible {
			outline: 2px solid #fff;
			outline-offset: 2px;
		}
	}

	.isb-arrow {
		top: 50%;
		transform: translateY(-50%);

		&--prev {
			left: 12px;
		}

		&--next {
			right: 12px;
		}

		&:disabled {
			opacity: 0.4;
			cursor: default;
		}
	}

	.isb-pause {
		right: 12px;
		bottom: 12px;
		width: 32px;
		height: 32px;

		svg {
			width: 16px;
			height: 16px;
		}
	}

	.isb-dots {
		position: absolute;
		right: 0;
		bottom: 8px;
		left: 0;
		z-index: 2;
		display: flex;
		justify-content: center;
		gap: 8px;

		button {
			width: 12px;
			height: 12px;
			padding: 0;
			border: 0;
			border-radius: 50%;
			background: rgba(255, 255, 255, 0.6);
			box-shadow: 0 0 2px rgba(0, 0, 0, 0.4);
			cursor: pointer;

			&[aria-current="true"] {
				background: #fff;
			}

			&:focus-visible {
				outline: 2px solid #fff;
				outline-offset: 2px;
			}
		}
	}

	@media (prefers-reduced-motion: reduce) {

		.isb-track,
		.isb-slide {
			transition: none !important;
			scroll-behavior: auto !important;
		}
	}
}

// Legacy 2.x markup (block root is the <ul> itself), before the view script
// normalizes it: show the first slide, hide the rest.
ul.wp-block-oacs-slider {
	display: flex;
	overflow: hidden;
	list-style: none;
	margin: 0;
	padding: 0;

	> li {
		flex: 0 0 100%;
		min-width: 100%;
		margin: 0;

		figure {
			margin: 0;
			position: relative;
		}

		img {
			display: block;
			width: 100%;
			height: auto;
		}
	}
}