/**
 * gk-carousel-mobile.css
 *
 * Composant carrousel mobile partagé (TDN / KP / PS).
 * Activation : @media (max-width: 767px) uniquement. Tablette/desktop = layout natif intact.
 *
 * Architecture :
 *   - Scroll natif horizontal piloté par CSS scroll-snap (snap mandatory + stop normal)
 *   - JS purement observationnel (IntersectionObserver) : ne traduit jamais le track
 *   - Variables CSS exposees pour adapter chaque section (card width, gap, peek)
 *   - Modificateurs : --peek-large, --peek-small, --card-narrow, --card-mini,
 *     --gap-small, --no-arrows, --auto-rotate (signal CSS uniquement), --inert
 *
 * A11y : nav arrows focus-visible, dots avec aria-current, reduce-motion supporte,
 *        pause/play auto-rotate (WCAG 2.2.2), touch targets 44x44 (WCAG 2.5.5),
 *        aria-live polite via .gk-carousel__sr-status.
 *
 * Phase C.6 — Carrousels mobiles unifies (12 sections TDN ciblees).
 */

.gk-carousel {
	--gk-carousel-card-width: 300px;
	--gk-carousel-gap: 24px;
	--gk-carousel-peek: 24px;
	--gk-carousel-edge-padding: 16px;
	--gk-carousel-arrow-size: 48px;
	--gk-carousel-arrow-color: var(--tdn-color-pink-500, #c2185b);
	--gk-carousel-arrow-bg: transparent;
	--gk-carousel-dot-size: 8px;
	--gk-carousel-dot-color: var(--tdn-color-pink-100, #f8bbd0);

	position: relative;
	width: 100%;
}

/* === Screen-reader-only utility (scope au composant) === */
.gk-carousel .sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* === Mode inerte (1 seule card : on neutralise la mecanique carrousel) === */
.gk-carousel--inert .gk-carousel__nav,
.gk-carousel--inert .gk-carousel__indicators,
.gk-carousel--inert .gk-carousel__pause {
	display: none;
}

.gk-carousel--inert .gk-carousel__viewport {
	overflow-x: visible;
}

.gk-carousel--inert .gk-carousel__track {
	padding-inline-end: var(--gk-carousel-edge-padding);
}

/* === Desktop : composant inerte, layout parent reprend la main === */
/* display: contents fait remonter visuellement les cards aux children du parent
 * (.tdn-cards-quad__cards, .tdn-values-grid, etc.) → leur grille/flex layout
 * desktop continue à fonctionner sans modification. */
@media (min-width: 768px) {
	.gk-carousel__viewport,
	.gk-carousel__track {
		display: contents;
	}

	.gk-carousel__nav,
	.gk-carousel__indicators,
	.gk-carousel__pause,
	.gk-carousel__sr-status {
		display: none;
	}
}

/* === Mobile : activation carrousel === */
@media (max-width: 767px) {
	/* Card par défaut = quasi pleine largeur viewport, peek de la suivante visible à droite.
	 * Comportement style Instagram/Apple App Store : 1 card domine l'écran, l'aperçu suivant
	 * confirme qu'il y a plus. Override possible par section via --gk-carousel-card-width. */
	.gk-carousel {
		--gk-carousel-card-width: calc(100vw - var(--gk-carousel-edge-padding) - var(--gk-carousel-peek));
	}

	.gk-carousel__viewport {
		display: flex;
		gap: var(--gk-carousel-gap);
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		scroll-behavior: smooth;
		scroll-padding-inline-start: var(--gk-carousel-edge-padding);
		padding-inline: var(--gk-carousel-edge-padding) calc(var(--gk-carousel-edge-padding) + var(--gk-carousel-peek));
		padding-block: 4px 12px;
		scrollbar-width: none;
		-ms-overflow-style: none;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior-x: contain;
	}

	.gk-carousel__viewport::-webkit-scrollbar {
		display: none;
		width: 0;
		height: 0;
	}

	.gk-carousel__viewport:focus-visible {
		outline: 2px solid var(--gk-carousel-arrow-color);
		outline-offset: -2px;
		border-radius: 8px;
	}

	.gk-carousel__track {
		display: contents;
	}

	.gk-carousel__card {
		flex: 0 0 var(--gk-carousel-card-width);
		max-width: var(--gk-carousel-card-width);
		scroll-snap-align: start;
		scroll-snap-stop: normal;
	}

	.gk-carousel__card:focus-visible {
		outline: 2px solid var(--gk-carousel-arrow-color);
		outline-offset: 3px;
		border-radius: 8px;
	}

	/* === Nav arrows === */
	.gk-carousel__nav {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 32px;
		margin-block-start: 24px;
	}

	.gk-carousel__btn {
		width: var(--gk-carousel-arrow-size);
		height: var(--gk-carousel-arrow-size);
		display: inline-flex;
		align-items: center;
		justify-content: center;
		border: 2px solid var(--gk-carousel-arrow-color);
		background: var(--gk-carousel-arrow-bg);
		color: var(--gk-carousel-arrow-color);
		border-radius: 50%;
		cursor: pointer;
		padding: 0;
		transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
	}

	.gk-carousel__btn:hover:not([disabled]),
	.gk-carousel__btn:focus-visible:not([disabled]) {
		background-color: var(--gk-carousel-arrow-color);
		color: #fff;
	}

	.gk-carousel__btn:focus-visible {
		outline: 2px solid var(--gk-carousel-arrow-color);
		outline-offset: 3px;
	}

	.gk-carousel__btn[disabled] {
		opacity: 0.35;
		cursor: not-allowed;
	}

	.gk-carousel__btn svg {
		width: 24px;
		height: 24px;
	}

	/* Pas de flip CSS : le markup HTML utilise déjà 2 SVG path distincts (prev = M15→9, next = M9→15). */

	/* === Pause/Play auto-rotate (WCAG 2.2.2) === */
	.gk-carousel__pause {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		margin-block-start: 16px;
		margin-inline: auto;
		padding: 0;
		border: 2px solid var(--gk-carousel-arrow-color);
		background: var(--gk-carousel-arrow-bg);
		color: var(--gk-carousel-arrow-color);
		border-radius: 50%;
		cursor: pointer;
		transition: background-color 0.2s ease, color 0.2s ease;
	}

	.gk-carousel__pause:hover,
	.gk-carousel__pause:focus-visible {
		background-color: var(--gk-carousel-arrow-color);
		color: #fff;
	}

	.gk-carousel__pause:focus-visible {
		outline: 2px solid var(--gk-carousel-arrow-color);
		outline-offset: 3px;
	}

	.gk-carousel__pause svg {
		width: 18px;
		height: 18px;
	}

	/* === Indicators (dots dynamiques) — hitbox 44x44 (WCAG 2.5.5) === */
	.gk-carousel__indicators {
		display: flex;
		justify-content: center;
		gap: 4px;
		margin-block-start: 16px;
		padding: 0;
		list-style: none;
	}

	.gk-carousel__dot {
		width: 44px;
		height: 44px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		background: transparent;
		border: none;
		padding: 0;
		cursor: pointer;
	}

	.gk-carousel__dot::before {
		content: '';
		display: block;
		width: var(--gk-carousel-dot-size);
		height: var(--gk-carousel-dot-size);
		border-radius: 50%;
		background: var(--gk-carousel-dot-color);
		transition: background-color 0.2s ease, transform 0.2s ease;
	}

	.gk-carousel__dot[aria-current="true"]::before {
		background: var(--gk-carousel-arrow-color);
		transform: scale(1.3);
	}

	.gk-carousel__dot:focus-visible {
		outline: 2px solid var(--gk-carousel-arrow-color);
		outline-offset: -2px;
		border-radius: 50%;
	}

	/* === Modificateurs === */
	.gk-carousel--peek-large {
		--gk-carousel-peek: 92px;
	}

	.gk-carousel--peek-small {
		--gk-carousel-peek: 16px;
	}

	.gk-carousel--card-narrow {
		--gk-carousel-card-width: 250px;
	}

	.gk-carousel--card-mini {
		--gk-carousel-card-width: 180px;
	}

	.gk-carousel--gap-small {
		--gk-carousel-gap: 16px;
	}

	.gk-carousel--no-arrows .gk-carousel__nav {
		display: none;
	}

	/* === Reduce motion === */
	@media (prefers-reduced-motion: reduce) {
		.gk-carousel__viewport {
			scroll-behavior: auto;
		}

		.gk-carousel__btn,
		.gk-carousel__dot,
		.gk-carousel__dot::before,
		.gk-carousel__pause {
			transition: none;
		}
	}

	/* === Indicators AU-DESSUS des arrows (Morgan 2026-06-28) ===
	 * Le parent commun (généralement __inner) de nav + indicators passe en flex
	 * column via :has(), puis order CSS place indicators avant nav. Marche pour
	 * tous les patterns CAR0 sans toucher au markup. */
	*:has(> .gk-carousel__nav):has(> .gk-carousel__indicators) {
		display: flex;
		flex-direction: column;
	}

	.gk-carousel__indicators {
		order: 1;
	}

	.gk-carousel__nav {
		order: 2;
	}
}