/**
 * Homepage — Case study (sezione 4).
 * Desktop: case-study-home-definitivo.svg (onda + 8 pallini).
 *
 * @package GDS-Fullcreative
 */

.gds-hcs {
	--gds-hcs-logo-scale: 0.82;
	background: #ffffff;
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow-x: clip;
	overflow-y: visible;
}

.gds-hcs__wrap {
	width: 100%;
	margin-inline: auto;
	padding: clamp(48px, 6vw, 88px) 0 clamp(56px, 7vw, 80px);
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.gds-hcs__intro {
	width: min(100% - 40px, var(--gds-content-width, 1400px));
	margin: 0 auto clamp(48px, 8vw, 142px);
	text-align: center;
}

.gds-hcs__title {
	margin: 0 0 16px;
	color: #2a355f;
	font-family: var(--font-primary, "Helvetica Neue", Helvetica, Arial, sans-serif);
	/* 35px ancorato a 1440 (come hero e about us). */
	font-size: clamp(28px, 2.43vw, 35px);
	font-weight: 300;
	line-height: 1.26;
}

.gds-hcs__lead {
	margin: 0;
	max-width: 1396px;
	color: #2A2F3A;
	font-family: var(--font-primary, "Helvetica Neue", Helvetica, Arial, sans-serif);
	/* Corpo testo: stesso clamp della hero / cerchi / about (22px @1440+). */
	font-size: clamp(18px, 1.53vw, 22px);
	font-weight: 300;
	line-height: 1.5;
	letter-spacing: 0;
}

.gds-hcs__stage {
	position: relative;
	width: min(100% - 40px, var(--gds-content-width, 1400px));
	max-width: none;
	margin: 0 auto clamp(48px, 8vw, 130px);
	overflow: visible;
}

/* Riserva altezza nel flusso: SVG e loghi sono position:absolute. */
.gds-hcs__stage-ratio {
	display: block;
	width: 100%;
	height: auto;
	pointer-events: none;
	visibility: hidden;
}

.gds-hcs__network,
.gds-hcs__stage .gds-svg-inline-wrap {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: fill;
	opacity: 0;
	transition: opacity 0.35s ease;
	z-index: 1;
}

.gds-hcs__stage .gds-svg-inline-wrap svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

#gds-hcs-line {
	fill: #1d1d1b;
	stroke: none;
}

[id^="gds-hcs-line-"] {
	fill: none;
	stroke: #1f232c;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

[id^="gds-hcs-dot-"] {
	transform-box: fill-box;
	transform-origin: center;
}

html.gds-anim-js .gds-hcs__stage:not([data-gds-hcs-reveal="clip"]):not(.gds-hcs-anim-complete) [id^="gds-hcs-dot-"] {
	opacity: 0;
}

.gds-hcs__stage.gds-hcs-anim-complete [id^="gds-hcs-dot-"],
.gds-hcs__stage[data-gds-hcs-reveal="clip"] [id^="gds-hcs-dot-"] {
	opacity: 1;
}

html.gds-anim-js .gds-hcs__stage[data-gds-hcs-reveal="clip"]:not(.gds-hcs-anim-ready) .gds-hcs__network,
html.gds-anim-js .gds-hcs__stage[data-gds-hcs-reveal="clip"]:not(.gds-hcs-anim-ready) .gds-svg-inline-wrap {
	opacity: 0 !important;
	visibility: hidden;
	border: 0;
	outline: none;
}

.gds-hcs__stage[data-gds-hcs-reveal="clip"].gds-hcs-anim-ready .gds-svg-inline-wrap {
	opacity: 1;
	visibility: visible;
}

html.gds-anim-js .gds-hcs:not(.gds-anim-is-active) .gds-hcs__network,
html.gds-anim-js .gds-hcs:not(.gds-anim-is-active) .gds-svg-inline-wrap {
	opacity: 0;
}

.gds-hcs__network.gds-svg-ready,
.gds-hcs__stage .gds-svg-inline-wrap.gds-svg-ready,
.gds-hcs.gds-anim-is-active .gds-hcs__network,
.gds-hcs.gds-anim-is-active .gds-svg-inline-wrap {
	opacity: 1;
}

.gds-hcs__logos {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
}

.gds-hcs__logo {
	position: absolute;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
}

.gds-hcs__logo img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	object-position: center;
}

.gds-hcs__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 187px;
	min-height: 49px;
	padding: 0 20px;
	border: 1.5px solid var(--gds-color-red, #c72a29);
	border-radius: 999px;
	background: transparent;
	color: var(--gds-color-red, #c72a29);
	font-family: var(--font-primary, "Helvetica Neue", Helvetica, Arial, sans-serif);
	font-size: var(--gds-home-btn-fs, 16px);
	font-weight: 300;
	line-height: var(--gds-home-btn-lh, 18px);
	letter-spacing: 0;
	text-decoration: none;
	text-transform: uppercase;
	transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.gds-hcs__cta:hover,
.gds-hcs__cta:focus-visible {
	color: #ffffff;
	background-color: #c72a29;
	border-color: #c72a29;
}

.gds-hcs__stage--mobile {
	display: none;
}

@media (min-width: 1281px) {
	.gds-hcs__stage--desktop {
		width: min(100% - 40px, var(--gds-content-width, 1400px));
	}
}

@media (max-width: 1280px) {
	.gds-hcs {
		/* Slot compatti + loghi leggermente più grandi nel vano del tracciato. */
		--gds-hcs-logo-scale: 0.78;
		--gds-hcs-mobile-slot-scale: 0.88;
		/* Metà del restringimento slot, per centrare ( (1 - scale) / 2 ). */
		--gds-hcs-mobile-slot-inset: 0.06;
		--gds-hcs-mobile-stage-height: 1040;
		min-height: auto;
	}

	.gds-hcs__stage--desktop {
		display: none;
	}

	.gds-hcs__wrap {
		padding-block: 40px 48px;
	}

	.gds-hcs__intro {
		margin-bottom: 32px;
		text-align: left;
	}

	.gds-hcs__title {
		font-size: var(--gds-home-title-fs);
		line-height: var(--gds-home-title-lh);
		letter-spacing: 0;
	}

	.gds-hcs__lead {
		font-size: var(--gds-home-text-fs);
		line-height: var(--gds-home-text-lh);
		letter-spacing: 0;
	}

	.gds-hcs__stage--mobile {
		display: block;
		width: 100%;
		max-width: min(100%, 279px);
		margin-inline: auto;
		margin-bottom: 32px;
		/* Design 279×1295: comprime ~20% l’altezza (inline aspect-ratio dal PHP). */
		aspect-ratio: 279 / var(--gds-hcs-mobile-stage-height, 1040) !important;
	}

	.gds-hcs__stage--mobile .gds-hcs__logos {
		position: absolute;
		inset: 0;
		display: block;
		margin-top: 0;
	}

}

@media (max-width: 768px) {
	.gds-hcs__stage {
		margin-bottom: 32px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.gds-hcs__network,
	.gds-hcs__stage .gds-svg-inline-wrap {
		opacity: 1 !important;
		transition: none;
	}

	.gds-hcs [id^="gds-hcs-dot-"] {
		opacity: 1 !important;
		transform: none !important;
	}

	.gds-hcs__stage--mobile .gds-hcs__logo {
		opacity: 1 !important;
	}
}