/**
 * ILPA — Brand Cards Carousel
 *
 * Valori di default presi dal nodo Figma "2. Brand cards gallery"
 * (259:3884, ILPA-Website): card 450x340 r20 p20, gap 24, peek 105,
 * dots 14px con gap 16 e 48 dalle card, colonne a 112 di distanza,
 * fondo #276A95 all'8%, testo Open Sans 18/1.5 #1D2833 (#52677C se in
 * secondo piano).
 *
 * Ogni misura è un custom property sovrascritto dai controlli Elementor.
 */

.ilpa-bc {
	--ilpa-bc-bg: rgba(39, 106, 149, 0.08);
	--ilpa-bc-radius: 20px;
	--ilpa-bc-cols-gap: 112px;

	--ilpa-bc-card-w: 450px;
	--ilpa-bc-card-h: 340px;
	--ilpa-bc-card-gap: 24px;
	--ilpa-bc-peek: 105px;
	--ilpa-bc-card-radius: 20px;
	--ilpa-bc-card-bg: #ffffff;
	--ilpa-bc-card-bg-idle: rgba(255, 255, 255, 0.8);
	--ilpa-bc-idle-opacity: 0.4;

	--ilpa-bc-text: #1d2833;
	--ilpa-bc-text-idle: #52677c;

	--ilpa-bc-logo-h: 80px;
	--ilpa-bc-logo-max-w: 180px;

	--ilpa-bc-arrow-size: 24px;
	--ilpa-bc-arrow: #111126;
	--ilpa-bc-arrow-hover: #276a95;

	--ilpa-bc-dot-size: 14px;
	--ilpa-bc-dot-space: 16px;
	--ilpa-bc-dots-gap: 48px;
	--ilpa-bc-dot: rgba(39, 106, 149, 0.3);
	--ilpa-bc-dot-active: #276a95;

	--ilpa-bc-intro-max-w: 582px;

	/* Larghezza card nel layout orizzontale: lascia sempre uno spiraglio
	   sulle card adiacenti anche su schermi stretti. */
	--ilpa-bc-card-w-x: min(var(--ilpa-bc-card-w), 78vw);

	--ilpa-bc-speed: 480ms;
	--ilpa-bc-ease: cubic-bezier(0.22, 0.61, 0.36, 1);

	display: flex;
	align-items: center;
	gap: var(--ilpa-bc-cols-gap);
	padding: 0 30px;
	background-color: var(--ilpa-bc-bg);
	border-radius: var(--ilpa-bc-radius);
	overflow: hidden;
	box-sizing: border-box;
}

.ilpa-bc *,
.ilpa-bc *::before,
.ilpa-bc *::after {
	box-sizing: border-box;
}

.ilpa-bc--intro-left {
	flex-direction: row-reverse;
}

/* --------------------------------------------------------------------- *
 * Galleria (dots + finestra)
 * --------------------------------------------------------------------- */

.ilpa-bc__gallery {
	display: flex;
	align-items: center;
	gap: var(--ilpa-bc-dots-gap);
	flex: 0 0 auto;
	max-width: 100%;
	min-width: 0;
}

.ilpa-bc__dots {
	display: flex;
	flex-direction: column;
	gap: var(--ilpa-bc-dot-space);
	flex: 0 0 auto;
}

/* Prefisso `button.` e regole di stato esplicite: i reset dei temi
   (hello-elementor su tutti) stilano i bottoni con `[type=button], button`,
   selettori a specificità (0,1,0) caricati dopo questo foglio. */
button.ilpa-bc__dot {
	display: block;
	width: var(--ilpa-bc-dot-size);
	height: var(--ilpa-bc-dot-size);
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 50%;
	background-color: var(--ilpa-bc-dot);
	box-shadow: none;
	cursor: pointer;
	transition: background-color 0.3s var(--ilpa-bc-ease);
	-webkit-appearance: none;
	appearance: none;
}

button.ilpa-bc__dot:hover,
button.ilpa-bc__dot:focus {
	background-color: var(--ilpa-bc-dot-active);
	border: 0;
	box-shadow: none;
}

button.ilpa-bc__dot.is-active {
	background-color: var(--ilpa-bc-dot-active);
}

button.ilpa-bc__dot:focus-visible {
	outline: 2px solid var(--ilpa-bc-dot-active);
	outline-offset: 3px;
}

.ilpa-bc__viewport {
	position: relative;
	flex: 0 0 auto;
	width: var(--ilpa-bc-card-w);
	max-width: 100%;
	/* La finestra mostra la card attiva più la porzione a vista di quelle
	   adiacenti, gap compreso. */
	height: calc(var(--ilpa-bc-card-h) + 2 * (var(--ilpa-bc-card-gap) + var(--ilpa-bc-peek)));
	overflow: hidden;
	touch-action: auto;
}

.ilpa-bc__track {
	position: absolute;
	inset: 0;
}

.ilpa-bc.is-draggable .ilpa-bc__viewport {
	cursor: grab;
}

.ilpa-bc.is-dragging .ilpa-bc__viewport {
	cursor: grabbing;
	user-select: none;
	-webkit-user-select: none;
}

/* --------------------------------------------------------------------- *
 * Slide
 * --------------------------------------------------------------------- */

.ilpa-bc__slide {
	--ilpa-bc-slot: 0;
	--ilpa-bc-t: 0;

	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: var(--ilpa-bc-card-h);
	transform: translate3d(
		0,
		calc(-50% + var(--ilpa-bc-slot) * (var(--ilpa-bc-card-h) + var(--ilpa-bc-card-gap))),
		0
	);
	opacity: calc(var(--ilpa-bc-idle-opacity) + (1 - var(--ilpa-bc-idle-opacity)) * var(--ilpa-bc-t));
	transition:
		transform var(--ilpa-bc-speed) var(--ilpa-bc-ease),
		opacity var(--ilpa-bc-speed) var(--ilpa-bc-ease);
	will-change: transform;
}

/* Posizionamento statico di riserva: se il JS non parte (o non è ancora
   partito) le card restano impilate come nel mockup invece di sovrapporsi.
   Il JS scrive --ilpa-bc-slot inline, che vince su queste regole. */
.ilpa-bc__slide:nth-child(1) { --ilpa-bc-slot: 0; --ilpa-bc-t: 1; }
.ilpa-bc__slide:nth-child(2) { --ilpa-bc-slot: 1; }
.ilpa-bc__slide:nth-child(3) { --ilpa-bc-slot: 2; }
.ilpa-bc__slide:nth-child(4) { --ilpa-bc-slot: 3; }
.ilpa-bc__slide:nth-child(5) { --ilpa-bc-slot: 4; }
.ilpa-bc__slide:nth-child(6) { --ilpa-bc-slot: 5; }
.ilpa-bc__slide:nth-child(7) { --ilpa-bc-slot: 6; }
.ilpa-bc__slide:nth-child(8) { --ilpa-bc-slot: 7; }

.ilpa-bc.is-dragging .ilpa-bc__slide {
	transition: none;
}

/* Il link è raggiungibile col puntatore solo sulla card in primo piano:
   sulle altre il click serve a portarle al centro. Da tastiera resta
   focusabile e il focus attiva la card. */
.ilpa-bc__slide:not(.is-active) .ilpa-bc__link {
	pointer-events: none;
}

.ilpa-bc.is-draggable .ilpa-bc__slide:not(.is-active) {
	cursor: pointer;
}

/* --------------------------------------------------------------------- *
 * Card
 * --------------------------------------------------------------------- */

.ilpa-bc__card {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	padding: 20px;
	border-radius: var(--ilpa-bc-card-radius);
	background-color: var(--ilpa-bc-card-bg-idle);
	overflow: hidden;
	transition: background-color var(--ilpa-bc-speed) var(--ilpa-bc-ease);
}

.ilpa-bc__slide.is-active .ilpa-bc__card {
	background-color: var(--ilpa-bc-card-bg);
}

.ilpa-bc__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	height: var(--ilpa-bc-logo-h);
	flex: 0 0 auto;
}

.ilpa-bc__logo {
	display: block;
	width: auto;
	height: auto;
	max-width: var(--ilpa-bc-logo-max-w);
	max-height: 100%;
	object-fit: contain;
	object-position: left center;
	-webkit-user-drag: none;
	user-select: none;
}

.ilpa-bc__logo--empty {
	width: 100px;
	height: 100%;
}

.ilpa-bc__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: var(--ilpa-bc-arrow-size);
	height: var(--ilpa-bc-arrow-size);
	color: var(--ilpa-bc-arrow);
	text-decoration: none;
	transition: color 0.2s var(--ilpa-bc-ease), transform 0.2s var(--ilpa-bc-ease);
}

.ilpa-bc__link:hover,
.ilpa-bc__link:focus {
	color: var(--ilpa-bc-arrow-hover);
	transform: translateX(3px);
}

.ilpa-bc__arrow,
.ilpa-bc__arrow svg {
	display: block;
	width: 100%;
	height: 100%;
}

.ilpa-bc__text {
	margin-top: auto;
	padding-top: 16px;
	font-size: 18px;
	line-height: 1.5;
	color: var(--ilpa-bc-text-idle);
	overflow: hidden;
	transition: color var(--ilpa-bc-speed) var(--ilpa-bc-ease);
	overflow-wrap: break-word;
}

.ilpa-bc__slide.is-active .ilpa-bc__text {
	color: var(--ilpa-bc-text);
}

.ilpa-bc__text p {
	margin: 0;
}

/* Interpolazione continua di fondo e colore testo durante il drag: --ilpa-bc-t
   vale 1 sulla card centrata e 0 su quelle a distanza >= 1 slot. */
@supports (background-color: color-mix(in srgb, red 50%, blue)) {
	.ilpa-bc__slide .ilpa-bc__card,
	.ilpa-bc__slide.is-active .ilpa-bc__card {
		background-color: color-mix(
			in srgb,
			var(--ilpa-bc-card-bg) calc(var(--ilpa-bc-t) * 100%),
			var(--ilpa-bc-card-bg-idle)
		);
	}

	.ilpa-bc__slide .ilpa-bc__text,
	.ilpa-bc__slide.is-active .ilpa-bc__text {
		color: color-mix(
			in srgb,
			var(--ilpa-bc-text) calc(var(--ilpa-bc-t) * 100%),
			var(--ilpa-bc-text-idle)
		);
	}
}

/* --------------------------------------------------------------------- *
 * Testo di sezione
 * --------------------------------------------------------------------- */

.ilpa-bc__intro {
	display: flex;
	flex-direction: column;
	gap: 20px;
	flex: 1 1 auto;
	min-width: 0;
	max-width: var(--ilpa-bc-intro-max-w);
}

.ilpa-bc__title {
	margin: 0;
	font-size: 64px;
	line-height: 1.2;
	font-weight: 400;
	color: var(--ilpa-bc-text);
}

.ilpa-bc__body {
	font-size: 16px;
	line-height: 1.5;
	color: var(--ilpa-bc-text);
}

.ilpa-bc__body p {
	margin: 0 0 10px;
}

.ilpa-bc__body p:last-child {
	margin-bottom: 0;
}

.ilpa-bc__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* --------------------------------------------------------------------- *
 * Layout orizzontale (classe applicata dal JS sotto la soglia scelta)
 * --------------------------------------------------------------------- */

.ilpa-bc.is-horizontal {
	flex-direction: column;
	align-items: stretch;
	gap: 32px;
	padding: 32px 0;
}

.ilpa-bc.is-horizontal .ilpa-bc__intro {
	order: -1;
	max-width: none;
	padding: 0 24px;
}

.ilpa-bc.is-horizontal .ilpa-bc__title {
	font-size: clamp(32px, 7vw, 48px);
}

.ilpa-bc.is-horizontal .ilpa-bc__gallery {
	flex-direction: column;
	gap: 24px;
	width: 100%;
}

.ilpa-bc.is-horizontal .ilpa-bc__dots {
	order: 2;
	flex-direction: row;
	justify-content: center;
}

.ilpa-bc.is-horizontal .ilpa-bc__viewport {
	width: 100%;
	height: var(--ilpa-bc-card-h);
	touch-action: pan-y;
}

.ilpa-bc.is-horizontal .ilpa-bc__slide {
	top: 0;
	left: 50%;
	width: var(--ilpa-bc-card-w-x);
	height: 100%;
	transform: translate3d(
		calc(-50% + var(--ilpa-bc-slot) * (var(--ilpa-bc-card-w-x) + var(--ilpa-bc-card-gap))),
		0,
		0
	);
}

/* --------------------------------------------------------------------- *
 * Guard-rail su schermi stretti quando il layout resta verticale
 * --------------------------------------------------------------------- */

@media (max-width: 767px) {
	.ilpa-bc:not(.is-horizontal) {
		flex-direction: column;
		align-items: center;
		gap: 32px;
		padding: 32px 16px;
	}

	.ilpa-bc:not(.is-horizontal) .ilpa-bc__intro {
		order: -1;
		max-width: none;
	}

	.ilpa-bc:not(.is-horizontal) .ilpa-bc__title {
		font-size: clamp(32px, 7vw, 48px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ilpa-bc__slide,
	.ilpa-bc__card,
	.ilpa-bc__text,
	.ilpa-bc__link {
		transition-duration: 1ms;
	}
}