/**
 * Oktimus Carousel (oktimus/carousel + oktimus/slide).
 *
 * Layout is driven by two custom properties set inline on the root:
 *   --oktimus-carousel-per-view : number of slides visible
 *   --oktimus-carousel-gap      : space between slides
 * Colors reference theme.json presets with neutral fallbacks so the block stays
 * correct under a third-party theme (design-system preset contract).
 */

.oktimus-carousel {
	position: relative;
}

.oktimus-carousel__viewport {
	overflow: hidden;
}

.oktimus-carousel__container {
	display: flex;
	align-items: stretch;
}

/* Embla treats every direct child of the container as a slide, so every direct
   child must carry the slide width — not just oktimus/slide. This covers slides
   added directly as core/image, core/cover or core/group (see ALLOWED_BLOCKS). */
.oktimus-carousel__container > * {
	flex: 0 0
		calc(
			(
					100% - ( var( --oktimus-carousel-per-view, 1 ) - 1 ) *
						var( --oktimus-carousel-gap, 1rem )
				) / var( --oktimus-carousel-per-view, 1 )
		);
	min-width: 0;
	/* L'écart est porté par une margin de fin (et NON `gap` flex) : en mode loop,
	   Embla lit la margin de fin de la DERNIÈRE slide comme « endGap » et la
	   reporte au point de boucle — un `gap` flex y resterait nul, collant la
	   première slide à la dernière. La largeur des slides est inchangée (la marge
	   de la dernière déborde simplement hors du viewport, masquée par overflow). */
	margin-inline-end: var( --oktimus-carousel-gap, 1rem );
}

/* Hors loop, la dernière slide ne porte pas de marge de fin (sinon un vide en
   fin de course) ; en loop on la garde, c'est elle qui reporte l'écart à la
   boucle. `data-loop` est posé sur la racine par CarouselShell::data_attributes. */
.oktimus-carousel[data-loop='false'] .oktimus-carousel__container > *:last-child {
	margin-inline-end: 0;
}

/* Arrows ------------------------------------------------------------------ */

/* Le CHROME (taille, couleurs, rayon, ombre, glyphe) vient du composant partagé
   `assets/css/arrow.css` — réglé par `settings.custom.arrow` du thème et posé par
   Support\Arrow. Ici on ne fait que POSITIONNER les flèches par-dessus les
   diapositives. Ne pas y redéclarer de design : ce sont les deux mêmes boutons que
   ceux du bloc autonome, et ils doivent le rester. */

.oktimus-carousel__prev,
.oktimus-carousel__next {
	position: absolute;
	top: 50%;
	transform: translateY( -50% );

	/* Ces flèches-ci SURPLOMBENT le contenu : en fin de course elles s'effacent
	   complètement plutôt que de rester en surimpression sur une diapositive — d'où
	   un token distinct de `arrow.disabledOpacity` (qui régit les flèches inline).
	   Le thème garde la main sur les deux séparément. */
	--okt-arrow-disabled-opacity: var( --wp--custom--arrow--overlay--disabled-opacity, 0 );
}

.oktimus-carousel__prev {
	left: var( --wp--custom--arrow--overlay--inset, 0.5rem );
}

.oktimus-carousel__next {
	right: var( --wp--custom--arrow--overlay--inset, 0.5rem );
}

/* Dots -------------------------------------------------------------------- */

.oktimus-carousel__dots {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
	margin-top: var( --wp--preset--spacing--small, 1rem );
}

.oktimus-carousel__dot {
	width: 0.625rem;
	height: 0.625rem;
	padding: 0;
	border: 0;
	border-radius: var( --wp--preset--border-radius--full, 100rem );
	background: var( --wp--preset--color--line, #cfcfcf );
	cursor: pointer;
	transition: background 0.2s ease, transform 0.2s ease;
}

.oktimus-carousel__dot.is-selected {
	background: var( --wp--preset--color--primary, #1a1a1a );
	transform: scale( 1.25 );
}

/* Thumbnails --------------------------------------------------------------- */

.oktimus-carousel__thumbs {
	margin-top: var( --wp--preset--spacing--small, 1rem );
}

.oktimus-carousel__thumbs-viewport {
	overflow: hidden;
}

.oktimus-carousel__thumbs-container {
	display: flex;
	gap: 0.5rem;
}

.oktimus-carousel__thumb {
	flex: 0 0 auto;
	width: 5rem;
	height: 3.5rem;
	padding: 0;
	border: 2px solid transparent;
	border-radius: var( --wp--preset--border-radius--small, 0.5rem );
	background: var( --wp--preset--color--tint, #f2f2f2 );
	cursor: pointer;
	overflow: hidden;
	opacity: 0.55;
	transition: opacity 0.2s ease, border-color 0.2s ease;
}

.oktimus-carousel__thumb:hover {
	opacity: 0.85;
}

.oktimus-carousel__thumb.is-selected {
	opacity: 1;
	border-color: var( --wp--preset--color--primary, #1a1a1a );
}

.oktimus-carousel__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.oktimus-carousel__thumb-num {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	font-size: 0.875rem;
	color: var( --wp--preset--color--contrast, #1a1a1a );
}

/* Editor ------------------------------------------------------------------ */

.oktimus-carousel.is-editor .oktimus-carousel__viewport {
	/* Embla is not running in the editor: let all slides be visible/scrollable. */
	overflow-x: auto;
}

.oktimus-carousel.is-editor .oktimus-carousel__prev,
.oktimus-carousel.is-editor .oktimus-carousel__next {
	pointer-events: none;
	opacity: 0.6;
}

/* The inner-blocks appender is a direct child of the container in the editor
   only: keep it intrinsically sized so it doesn't claim a full slide slot. */
.oktimus-carousel__container > .block-list-appender {
	flex: 0 0 auto;
	margin-inline-end: 0;
}

/* Nav (dots + play/pause) -------------------------------------------------- */

.oktimus-carousel__nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	margin-top: var( --wp--preset--spacing--small, 1rem );
}

.oktimus-carousel__nav .oktimus-carousel__dots {
	margin-top: 0;
}

.oktimus-carousel__playpause {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	padding: 0;
	border: 1px solid var( --wp--preset--color--line, #e0e0e0 );
	border-radius: var( --wp--preset--border-radius--full, 100rem );
	background: var( --wp--preset--color--base, #fff );
	color: var( --wp--preset--color--contrast, #1a1a1a );
	cursor: pointer;
}

.oktimus-carousel__playpause:hover {
	background: var( --wp--preset--color--tint, #f2f2f2 );
}

/* Progress bar ------------------------------------------------------------- */

.oktimus-carousel__progress {
	position: relative;
	height: 3px;
	margin-top: var( --wp--preset--spacing--small, 1rem );
	background: var( --wp--preset--color--line, #e0e0e0 );
	border-radius: 100rem;
	overflow: hidden;
}

.oktimus-carousel__progress-bar {
	position: absolute;
	inset: 0;
	transform-origin: left center;
	transform: scaleX( 0 );
	background: var( --wp--preset--color--primary, #1a1a1a );
}

/* Linked slide ------------------------------------------------------------- */

a.oktimus-carousel__slide {
	display: block;
	color: inherit;
	text-decoration: none;
}

/* Fade transition (Embla Fade overlaps slides) ----------------------------- */

.oktimus-carousel.is-fade .oktimus-carousel__container > * {
	margin-inline-end: 0;
}

/* Vertical axis (axis: 'y') ------------------------------------------------- */
/* Support moteur générique : piste en colonne, écart porté par la
   `margin-block-end` (miroir vertical de l'astuce « endGap » horizontale : en
   loop, Embla lit cette marge de fin et la reporte au point de boucle), viewport
   à hauteur bornée et flèches recentrées haut/bas. Les slides gardent leur
   hauteur naturelle (on défile au travers, pas de « slides par vue » vertical). */
.oktimus-carousel[data-axis='y'] .oktimus-carousel__container {
	flex-direction: column;
	/* The bounded height goes on the CONTAINER, not the viewport: Embla reads the
	   axis viewSize from the container (`axis.measureSize(containerRect)`), so a
	   container left at content height would equal the content size → no scroll.
	   Slides overflow it and are clipped by the viewport's overflow:hidden. */
	height: var( --oktimus-carousel-viewport-h, 32rem );
}

.oktimus-carousel[data-axis='y'] .oktimus-carousel__container > * {
	flex: 0 0 auto;
	min-height: 0;
	margin-inline-end: 0;
	margin-block-end: var( --oktimus-carousel-gap, 1rem );
}

.oktimus-carousel[data-axis='y'][data-loop='false']
	.oktimus-carousel__container
	> *:last-child {
	margin-block-end: 0;
}

.oktimus-carousel[data-axis='y'] .oktimus-carousel__prev,
.oktimus-carousel[data-axis='y'] .oktimus-carousel__next {
	top: auto;
	bottom: auto;
	left: 50%;
	right: auto;
	transform: translateX( -50% );
}

.oktimus-carousel[data-axis='y'] .oktimus-carousel__prev {
	top: 0.5rem;
}

.oktimus-carousel[data-axis='y'] .oktimus-carousel__next {
	bottom: 0.5rem;
}

/* Les chevrons (gauche/droite) pointent haut/bas une fois tournés. Le glyphe est un
   masque porté par `.oktimus-arrow__glyph` (plus un `<svg>`) : on tourne l'élément. */
.oktimus-carousel[data-axis='y'] .oktimus-carousel__prev .oktimus-arrow__glyph,
.oktimus-carousel[data-axis='y'] .oktimus-carousel__next .oktimus-arrow__glyph {
	transform: rotate( 90deg );
}

/* Fade edges (scroll-aware) ------------------------------------------------ */
/* Estompe les diapositives vers le fond aux extrémités de l'axe. Le view script
   pose `is-edge-start`/`is-edge-end` selon le sens où il reste du contenu, donc
   la 1re/dernière diapo n'est pas estompée sans raison (en loop, les deux bords
   restent estompés). Masque en linear-gradient (pas d'url() → aucun souci
   safecss), porté par le viewport ; n'affecte pas flèches/points (hors viewport).
   Largeur du fondu = var `--oktimus-carousel-fade` (posée par l'instance via le
   Style Engine ; repli responsive `clamp()`). NE PAS la *déclarer* ici : une
   déclaration locale gagnerait sur la valeur héritée de l'instance. */
.oktimus-carousel[data-fade-edges='true'] .oktimus-carousel__viewport {
	--okt-fade-start: 0px;
	--okt-fade-end: 0px;
	--okt-fade-dir: to right;
	-webkit-mask-image: linear-gradient(
		var( --okt-fade-dir ),
		transparent 0,
		#000 var( --okt-fade-start ),
		#000 calc( 100% - var( --okt-fade-end ) ),
		transparent 100%
	);
	mask-image: linear-gradient(
		var( --okt-fade-dir ),
		transparent 0,
		#000 var( --okt-fade-start ),
		#000 calc( 100% - var( --okt-fade-end ) ),
		transparent 100%
	);
}

.oktimus-carousel[data-fade-edges='true'][data-axis='y']
	.oktimus-carousel__viewport {
	--okt-fade-dir: to bottom;
}

.oktimus-carousel[data-fade-edges='true'].is-edge-start
	.oktimus-carousel__viewport {
	--okt-fade-start: var( --oktimus-carousel-fade, clamp( 1.5rem, 6%, 4rem ) );
}

.oktimus-carousel[data-fade-edges='true'].is-edge-end
	.oktimus-carousel__viewport {
	--okt-fade-end: var( --oktimus-carousel-fade, clamp( 1.5rem, 6%, 4rem ) );
}

/* Container blocks turned into carousels ----------------------------------- */
/* Query Loop, Gallery and product grids (woocommerce/product-collection reuses
   `.wc-block-product-template`, une <ul> de cartes produit). The native container element becomes the Embla container:
   override its default layout (grid/flow + list/gap reset) so each direct child
   is a flex slide. The extra `.oktimus-carousel` ancestor lifts specificity above
   core's `.wp-block-*.is-layout-*` rules. */
.oktimus-carousel .oktimus-carousel__container.wp-block-post-template,
.oktimus-carousel .oktimus-carousel__container.wc-block-product-template,
.oktimus-carousel .oktimus-carousel__container.wp-block-gallery,
.oktimus-carousel .oktimus-carousel__container.wp-block-columns {
	display: flex;
	flex-wrap: nowrap;
	grid-template-columns: none;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Columns carousel: each column is a slide; drop its responsive flex-basis so
   the carousel slide width takes over (and never stack in carousel mode). */
.oktimus-carousel .oktimus-carousel__container.wp-block-columns > .wp-block-column {
	flex-basis: auto;
}

/* Gallery images: drop the gallery's own per-item width so the carousel slide
   width (from `.oktimus-carousel__container > *`) takes over. */
.oktimus-carousel .oktimus-carousel__container.wp-block-gallery > .wp-block-image {
	width: auto;
	/* Annule les marges propres de la galerie SAUF la margin de fin (= l'écart
	   entre slides, hérité de `.oktimus-carousel__container > *`). */
	margin-block: 0;
	margin-inline-start: 0;
}

/* Grid or carousel by screen (block-carousel `oktimusCarouselOn`) --------------- */
/* Hors des régions « carousel », le bloc reste une grille native : pas de flèches,
   points, barre de progression ni région live. Le view script pose
   `.is-carousel-active` (et les rôles ARIA) quand Embla est monté ; la mise en page
   des régions elle-même vient du CSS serveur (BlockCarousel::region_css). */
.oktimus-carousel--responsive:not( .is-carousel-active ) :is(
	.oktimus-carousel__prev,
	.oktimus-carousel__next,
	.oktimus-carousel__nav,
	.oktimus-carousel__progress,
	.oktimus-carousel__live
) {
	display: none;
}