/* Didatec — bloc « gammes ».
   Chargé uniquement quand le bloc est présent (enqueue_style ACF). */

/* Gammes section --------------------------------------------------------- */

.gammes__title { margin-block-end: var(--wp--preset--spacing--50); }

.gammes__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
}

.gammes__actions {
	display: flex;
	justify-content: center;
	margin-block-start: var(--wp--preset--spacing--50);
}

/* Collapsed state: the extra tiles are hidden behind a fade + the CTA. */
.gammes[data-gammes-collapsible] .gammes__grid { position: relative; }

.gammes[data-gammes-collapsible]:not(.is-expanded) .gamme-card.is-extra { display: none; }

/* The next row shows a 40px sliver, clipped by the card box while the tile
   keeps its aspect ratio inside. */
.gammes[data-gammes-collapsible]:not(.is-expanded) .gamme-card.is-peek {
	display: block;
	height: 40px;
	overflow: hidden;
}

/* Figma 12106:36224: 70% white over the sliver, opaque 57px lower. */
.gammes[data-gammes-collapsible]:not(.is-expanded) .gammes__grid::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	height: 46px;
	background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.7), var(--wp--preset--color--white) 57px);
	pointer-events: none;
}

.gammes__toggle-less { display: none; }

.gammes.is-expanded .gammes__toggle-more { display: none; }
.gammes.is-expanded .gammes__toggle-less { display: inline; }

/* Without JS the CTA falls back to the catalogue page. */
.gammes__link { display: none; }
.no-js .gammes__toggle { display: none; }
.no-js .gammes__link { display: inline-flex; }

@media (max-width: 1023px) {
	.gammes__grid {
		display: flex;
		gap: 16px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		/* Out of the container so the tiles reach the screen edges while
		   scrolling; the padding gives the first and last one their gutter. */
		margin-inline: calc(var(--wp--preset--spacing--70) * -1);
		padding-inline: var(--wp--preset--spacing--70);
		scroll-padding-inline: var(--wp--preset--spacing--70);
	}

	.gammes__grid::-webkit-scrollbar { display: none; }

	.gammes__grid > .gamme-card {
		flex: 0 0 100%;
		scroll-snap-align: start;
	}

	/* Page « Nos gammes » : la maquette mobile (12298:39706) empile les onze
	   vignettes au lieu de les faire défiler — c'est la page de destination,
	   tout doit y être visible sans geste. */
	.gammes--stacked .gammes__grid {
		flex-direction: column;
		overflow-x: visible;
		scroll-snap-type: none;
		margin-inline: 0;
		padding-inline: 0;
	}

	.gammes--stacked .gammes__grid > .gamme-card {
		flex: 0 0 auto;
		width: 100%;
	}

	/* On mobile every tile is reachable by swiping: the CTA goes to the catalogue. */
	.gammes[data-gammes-collapsible]:not(.is-expanded) .gamme-card.is-extra { display: block; }

	.gammes[data-gammes-collapsible]:not(.is-expanded) .gamme-card.is-peek {
		height: auto;
		overflow: visible;
	}

	.gammes[data-gammes-collapsible]:not(.is-expanded) .gammes__grid::after { content: none; }
	.gammes__toggle { display: none; }
	.gammes__link { display: inline-flex; }
}