/* Content Carousel Yolo */

.beekom-content-carousel {
	--cc-gap:    24px;
	--cc-radius: 16px;
	--cc-nav-bg: #5A4DFF;
	--cc-nav-color: #ffffff;
	--cc-nav-size: 48px;
	--cc-spv-d: 3; /* défaut slides desktop — surcharge depuis PHP via style inline */

	display: flex;
	flex-direction: column;
	gap: 20px;
}

/* ── Navigation ─────────────────────────────────── */
.cc__nav { display: flex; gap: 10px; justify-content: flex-end; }

.cc__btn {
	width: var(--cc-nav-size);
	height: var(--cc-nav-size);
	border-radius: 50%;
	background: var(--cc-nav-bg);
	color: var(--cc-nav-color);
	border: none;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.22,1,0.36,1);
}
.cc__btn:hover:not(:disabled) { transform: scale(1.1); }
.cc__btn:disabled { opacity: .3; cursor: default; }

/* Taille des flèches SVG custom dans le cercle */
.cc__btn svg {
	width: 20px;
	height: auto;
	display: block;
}

/* ── Viewport + Track ───────────────────────────── */
.cc__viewport { overflow: hidden; }

.cc__track {
	display: flex;
	transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	will-change: transform;
}

/* ── Slide ──────────────────────────────────────── */
.cc__slide { flex-shrink: 0; }

/* ── Card ───────────────────────────────────────── */
.cc__card {
	background: #FAF3EB;
	border-radius: var(--cc-radius);
	overflow: hidden;
	height: 100%;
	display: flex;
	flex-direction: column;
	/* Pas de shadow au hover */
	transition: transform 0.4s cubic-bezier(0.22,1,0.36,1);
}
.cc__card:hover { transform: translateY(-4px); }

/* ── Image ──────────────────────────────────────── */
.cc__image-wrap {
	align-self: stretch;   /* remplit la largeur dispo en respectant les marges */
	overflow: hidden;
	aspect-ratio: 3/2;
	border-radius: var(--cc-radius) var(--cc-radius) 0 0;
	flex-shrink: 0;
	box-sizing: border-box;
}
.cc__image-wrap img {
	width: 100%; height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.55s cubic-bezier(0.22,1,0.36,1);
}
.cc__card:hover .cc__image-wrap img { transform: scale(1.04); }

/* ── Contenu ────────────────────────────────────── */
.cc__content {
	padding: 20px 20px 24px;
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: 10px;
}

.cc__title {
	font-size: clamp(1.1rem, 1.6vw, 1.35rem);
	font-weight: 600;
	color: var(--c-navy, #1A0B4D);
	margin: 0;
	line-height: 1.25;
}

.cc__desc {
	font-size: 0.9rem;
	line-height: 1.65;
	color: var(--c-text-muted, #5C5C5C);
	margin: 0;
}

.cc__link { margin-top: auto; padding-top: 12px; }
.cc__link a {
	font-size: 0.875rem; font-weight: 600;
	color: var(--c-primary, #5A4DFF);
	text-decoration: none;
	display: inline-flex; align-items: center; gap: 6px;
	transition: gap 0.2s ease;
}
.cc__link a:hover { gap: 10px; }

/* ── Éditeur Elementor : affichage grille ────────
   Utilise --cc-spv-d passé en inline style depuis PHP
   pour afficher le bon nombre de colonnes dans le BO ── */
.elementor-editor-active .cc__viewport { overflow: visible; }
.elementor-editor-active .cc__track {
	display: grid !important;
	grid-template-columns: repeat(var(--cc-spv-d, 3), 1fr) !important;
	transform: none !important;
	transition: none !important;
	gap: var(--cc-gap);
}
.elementor-editor-active .cc__slide {
	width: auto !important;
	min-width: 0 !important;
	margin-right: 0 !important;
}

@media (prefers-reduced-motion: reduce) {
	.cc__track, .cc__image-wrap img, .cc__card { transition: none; }
}