/* Responsive base per pagina flotta */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
*, *::before, *::after { box-sizing: border-box; }
body, #page-wrapper, #wrapper { max-width: 100%; overflow-x: hidden; }
img, svg, canvas, iframe { max-width: 100%; }
button, a { -webkit-tap-highlight-color: transparent; }

			#banner {
				position: relative;
				overflow: hidden;
				background: linear-gradient(180deg, rgba(0,0,0,.22) 0%, rgba(0,0,0,.48) 100%);
			}

			#banner .inner {
				position: relative;
				z-index: 2;
			}

			#banner .logo {
				margin-bottom: 1rem;
			}

			#banner .logo,
			#banner h2,
			#banner p {
				position: relative;
				z-index: 2;
			}

			.fleet-intro {
				margin: 0 auto 2.5rem auto;
				max-width: 760px;
				text-align: center;
			}

			.fleet-intro .major {
				margin-bottom: 0.75rem;
			}

			.fleet-intro p {
				margin-bottom: 0;
			}

			.boat-card {
				background:
					linear-gradient(180deg, rgba(248,252,255,.98) 0%, rgba(231,242,249,.98) 100%);
				border-radius: 22px;
				margin: 0 auto 2.5rem auto;
				max-width: 980px;
				width: calc(100% - 2rem);
				overflow: hidden;
				box-shadow: 0 22px 40px -18px rgba(6, 24, 40, 0.30);
				color: #102033;
				border: 1px solid rgba(13, 39, 66, .11);
				position: relative;
			}

			.boat-card::before {
				content: "";
				display: block;
				height: 8px;
				background: linear-gradient(90deg, #0d2742 0%, #1f4c72 38%, #4f85ad 70%, #9dc2d8 100%);
			}

			.boat-copy {
				padding: 1.9rem 1.9rem 1.35rem 1.9rem;
				background:
					radial-gradient(circle at top right, rgba(111,163,199,.12), transparent 30%),
					linear-gradient(180deg, rgba(255,255,255,.38), rgba(255,255,255,0));
			}

			.boat-head {
				display: flex;
				justify-content: space-between;
				align-items: baseline;
				flex-wrap: wrap;
				gap: 1rem;
				margin-bottom: 1rem;
			}

			.boat-head h4 {
				font-size: 2rem;
				margin: 0;
				color: #0d2742;
				font-weight: 800;
				letter-spacing: -0.02em;
			}

			.boat-tag {
				background: linear-gradient(180deg, #edf6fb 0%, #dfeaf1 100%);
				padding: 0.35rem 1rem;
				border-radius: 999px;
				font-size: 0.78rem;
				font-weight: 800;
				color: #0d2742;
				border: 1px solid rgba(13, 39, 66, .12);
				box-shadow: 0 2px 8px rgba(13, 39, 66, .05);
				text-transform: uppercase;
				letter-spacing: .03em;
			}

			.boat-copy p {
				color: #24364a;
				line-height: 1.68;
				margin: 0.5rem 0 1rem;
			}

			.boat-meta {
				display: grid;
				grid-template-columns: repeat(4, 1fr);
				gap: 1rem;
				margin: 1.2rem 0 0.5rem;
			}

			.meta-box {
				background:
					linear-gradient(180deg, #f3f9fc 0%, #e4eef4 100%);
				border: 1px solid rgba(13, 39, 66, .12);
				border-radius: 16px;
				padding: 0.82rem 0.75rem;
				text-align: center;
				box-shadow: 0 1px 0 rgba(255,255,255,.8) inset, 0 8px 18px rgba(13,39,66,.04);
				position: relative;
			}

			.meta-box::after {
				content: "";
				position: absolute;
				left: 50%;
				top: 0;
				transform: translateX(-50%);
				width: 38px;
				height: 3px;
				border-radius: 999px;
				background: linear-gradient(90deg, #6ea7cf 0%, #1f4c72 100%);
				opacity: .75;
			}

			.meta-box small {
				display: block;
				font-size: 0.7rem;
				color: #5c6f82;
				margin: 0.25rem 0 0.25rem;
				text-transform: uppercase;
				letter-spacing: .06em;
			}

			.meta-box strong {
				font-size: 0.92rem;
				color: #0d2742;
				font-weight: 800;
			}

			.note {
				font-size: 0.82rem;
				color: #5c6f82;
				margin-top: 1rem;
				font-style: italic;
			}

			.diagram-wrap {
				padding: 0 1.5rem 1.55rem 1.5rem;
			}

			.diagram-shell {
				background:
					linear-gradient(180deg, #eaf4fb 0%, #dbe9f2 100%);
				border-radius: 18px;
				box-shadow: 0 8px 24px rgba(0,0,0,.08);
				border: 1px solid #c8dcea;
				overflow: hidden;
				width: 100%;
			}

			.diagram-topline {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0.85rem 1.2rem;
				background: linear-gradient(180deg, #16324a 0%, #1f4c72 100%);
				border-bottom: 1px solid rgba(255,255,255,.12);
				color: #ffffff;
			}

			.diagram-topline h5 {
				margin: 0;
				font-size: 0.9rem;
				font-weight: 700;
				letter-spacing: .02em;
				color: #ffffff;
			}

			.diagram-topline span {
				font-size: 0.75rem;
				font-weight: 700;
				color: rgba(255,255,255,.85);
				text-transform: uppercase;
				letter-spacing: .06em;
			}

			.diagram-stage {
				position: relative;
				min-height: 380px;
				display: flex;
				align-items: center;
				justify-content: center;
				background:
					radial-gradient(circle at 50% 35%, rgba(110,167,207,.18), transparent 44%),
					linear-gradient(180deg, #f8fcff 0%, #eaf4fa 100%);
			}

			.diagram-stage img {
				max-width: 100%;
				max-height: 380px;
				object-fit: contain;
				pointer-events: none;
				filter: saturate(1.04) contrast(1.03);
			}

			.diagram-image-frame {
				position: relative;
				width: 100%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				overflow: hidden;
			}

			.diagram-image-frame img {
				height: 100%;
				width: auto;
				max-width: none;
			}

			.hotspot[data-bbox] {
				position: absolute;
			}

			.hotspot {
				position: absolute;
				background: transparent;
				border: 0;
				cursor: pointer;
				z-index: 10;
			}

			.hotspot::before {
				content: "";
				position: absolute;
				inset: 0;
				border-radius: 12px;
				background: rgba(73,198,229,0);
				border: 2px solid rgba(73,198,229,0);
				transition: all 0.2s ease;
			}

			.hotspot:hover::before,
			.hotspot.active::before {
				background: rgba(73,198,229,.18);
				border-color: rgba(73,198,229,.75);
				box-shadow: 0 0 0 4px rgba(73,198,229,.12);
				transform: scale(1.02);
			}

			.component-strip {
				display: flex;
				flex-wrap: wrap;
				gap: 0.6rem;
				padding: 1rem 1.2rem;
				background: linear-gradient(180deg, #dfeef7 0%, #cfe3ef 100%);
				border-top: 1px solid #bfd4e1;
			}

			.component-chip {
				background:
					linear-gradient(180deg, #ffffff 0%, #f1f7fb 100%);
				border: 1px solid rgba(13, 39, 66, .14);
				padding: 0.45rem 1rem;
				border-radius: 999px;
				font-size: 0.75rem;
				font-weight: 800;
				cursor: pointer;
				transition: all 0.2s;
				color: #111111 !important;
				box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 2px 6px rgba(13,39,66,.05);
				letter-spacing: .01em;
			}

			.component-chip:hover,
			.component-chip.active {
				background: linear-gradient(180deg, #d7ebf7 0%, #b9d8ea 100%);
				border-color: #78aecd;
				color: #111111 !important;
			}

			.legend {
				display: flex;
				gap: 1rem;
				flex-wrap: wrap;
				padding: 0.8rem 1.2rem;
				background: linear-gradient(180deg, #dfeef7 0%, #cfe3ef 100%);
				font-size: 0.75rem;
				color: #2c3e50;
				border-top: 1px solid #c0d5e2;
			}

			.legend .box {
				background: rgba(255,255,255,.88);
				padding: 0.25rem 0.85rem;
				border-radius: 30px;
				box-shadow: 0 1px 2px rgba(0,0,0,.05);
				color: #111111;
				border: 1px solid rgba(13, 39, 66, .08);
			}

			.diagram-svg .part {
				cursor: pointer;
				transition: filter 0.2s, opacity 0.2s, transform 0.2s;
			}

			.diagram-svg .part:hover,
			.diagram-svg .part.active {
				filter: drop-shadow(0 0 10px rgba(73,198,229,.95));
			}

			.diagram-svg .ghost {
				fill: transparent;
				stroke: transparent;
				pointer-events: stroke;
			}

			.info-card {
				background: rgba(255,255,255,.08);
				border: 1px solid rgba(255,255,255,.1);
				border-radius: 24px;
				padding: 1rem;
				text-align: center;
				margin-top: 1.5rem;
				color: rgba(255,255,255,.7);
				font-size: 0.85rem;
			}

			@media (max-width: 736px) {
				.boat-meta { grid-template-columns: repeat(2,1fr); }
				.diagram-stage { min-height: 280px; }
				.diagram-wrap { max-width: 100%; }
				.boat-card { width: calc(100% - 1rem); }
			}

			@media (max-width: 480px) {
				.boat-meta { grid-template-columns: 1fr; }
			}
/* ===== Correzioni responsive mobile/tablet ===== */
.boat-card, .diagram-shell, .diagram-stage, .diagram-image-frame, .component-strip, .meta-box { min-width: 0; }
.boat-copy p, .meta-box strong, .component-chip { overflow-wrap: anywhere; }
.component-chip, .hotspot { touch-action: manipulation; }
.diagram-stage { width: 100%; overflow: hidden; }
.diagram-stage > .component-strip { align-self: stretch; }
.diagram-image-frame img { max-height: 100%; object-fit: contain; }

@media (max-width: 980px) {
	.boat-card { max-width: 100%; width: calc(100% - 1.5rem); margin-bottom: 2rem; }
	.boat-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.diagram-stage { min-height: clamp(300px, 58vw, 420px); }
	.diagram-stage[style] { min-height: clamp(360px, 72vw, 500px) !important; }
}

@media (max-width: 736px) {
	#banner { min-height: clamp(22rem, 56vh, 32rem); }
	#banner .inner { padding-left: 1.25rem; padding-right: 1.25rem; }
	#banner h2 { font-size: clamp(1.8rem, 9vw, 2.6rem); line-height: 1.08; word-break: normal; overflow-wrap: anywhere; }
	#banner p { font-size: .95rem; line-height: 1.45; }
	.boat-card { width: calc(100% - 1rem); border-radius: 18px; }
	.boat-copy { padding: 1.35rem 1.15rem 1rem; }
	.boat-head { align-items: flex-start; gap: .65rem; }
	.boat-head h4 { font-size: clamp(1.55rem, 8vw, 2rem); line-height: 1.1; }
	.boat-tag { font-size: .72rem; padding: .34rem .75rem; }
	.boat-copy p { font-size: .96rem; line-height: 1.58; }
	.boat-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
	.meta-box { padding: .72rem .62rem; border-radius: 14px; }
	.meta-box strong { font-size: .84rem; line-height: 1.2; }
	.diagram-wrap { padding: 0 .75rem 1rem; }
	.diagram-shell { border-radius: 16px; }
	.diagram-topline { padding: .78rem .9rem; }
	.diagram-topline h5 { font-size: .84rem; line-height: 1.2; }
	.diagram-stage { min-height: clamp(250px, 72vw, 340px); }
	.diagram-stage[style] { min-height: clamp(330px, 95vw, 460px) !important; }
	.diagram-stage img { max-height: clamp(240px, 70vw, 330px); }
	.diagram-image-frame img { width: 100%; height: auto; max-width: 100%; max-height: none; }
	.component-strip { gap: .5rem; padding: .8rem; max-height: 190px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
	.component-chip { min-height: 2.35rem; padding: .48rem .76rem; font-size: .72rem; }
}

@media (max-width: 520px) {
	#wrapper > .inner, .wrapper > .inner { padding-left: 1rem; padding-right: 1rem; }
	.boat-card { width: 100%; margin-bottom: 1.5rem; }
	.boat-copy { padding: 1.15rem .95rem .85rem; }
	.boat-meta { grid-template-columns: 1fr; }
	.meta-box { text-align: left; }
	.meta-box::after { left: .7rem; transform: none; }
	.diagram-wrap { padding: 0 .55rem .85rem; }
	.diagram-stage { min-height: clamp(230px, 78vw, 310px); }
	.diagram-stage[style] { min-height: clamp(300px, 105vw, 420px) !important; }
	.diagram-stage img { max-height: clamp(220px, 76vw, 300px); }
	.component-strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; padding: .7rem; }
	.component-chip { width: 100%; justify-content: center; text-align: center; border-radius: 14px; padding: .48rem .5rem; }
}

@media (max-width: 360px) {
	#banner h2 { font-size: 1.65rem; }
	.boat-copy p { font-size: .9rem; }
	.component-strip { grid-template-columns: 1fr; max-height: 210px; }
	.diagram-stage[style] { min-height: 280px !important; }
}

/* ===== Mobile component selection UX ===== */
.component-info {
	display: none;
	margin: 0;
	padding: 0.95rem 1.1rem 1.05rem;
	background: linear-gradient(180deg, #ffffff 0%, #edf6fb 100%);
	border-top: 1px solid #bfd4e1;
	color: #102033;
}
.component-info.is-visible { display: block; }
.component-info .component-info-kicker {
	display: block;
	font-size: .68rem;
	font-weight: 900;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: #4f6f88;
	margin-bottom: .22rem;
}
.component-info .component-info-title {
	margin: 0 0 .25rem;
	font-size: 1.08rem;
	line-height: 1.15;
	font-weight: 900;
	letter-spacing: normal;
	text-transform: none;
	color: #0d2742;
}
.component-info .component-info-text {
	margin: 0;
	font-size: .94rem;
	line-height: 1.45;
	color: #24364a;
}
.hotspot.active::after {
	content: attr(data-label);
	position: absolute;
	left: 50%;
	top: -0.35rem;
	transform: translate(-50%, -100%);
	z-index: 20;
	padding: .28rem .5rem;
	border-radius: 999px;
	background: rgba(13, 39, 66, .94);
	color: #fff;
	font-size: .68rem;
	font-weight: 900;
	white-space: nowrap;
	box-shadow: 0 8px 18px rgba(13,39,66,.22);
	pointer-events: none;
}
.diagram-shell.has-active-component { box-shadow: 0 12px 32px rgba(13, 39, 66, .18); }
.diagram-shell.has-active-component .diagram-topline { background: linear-gradient(180deg, #102d47 0%, #28618d 100%); }

@media (max-width: 736px) {
	.diagram-shell { display: flex; flex-direction: column; }
	.diagram-topline { position: relative; z-index: 4; }
	.diagram-stage {
		order: 1;
		align-items: stretch;
		padding: .55rem;
		min-height: auto;
		overflow: visible;
	}
	.diagram-stage[style] { min-height: auto !important; }
	.diagram-stage > .component-strip { order: 3; }
	.diagram-stage img { max-height: none; }
	.diagram-stage > img {
		display: block;
		width: 100%;
		height: auto;
		max-height: 58vh;
		object-fit: contain;
	}
	.diagram-image-frame {
		width: 100%;
		min-height: clamp(360px, 118vw, 560px);
		height: auto;
		align-items: center;
		justify-content: center;
		padding: .25rem;
		overflow: visible;
	}
	.diagram-image-frame img {
		width: auto;
		height: auto;
		max-width: 100%;
		max-height: clamp(350px, 112vw, 540px);
		object-fit: contain;
	}
	.hotspot { min-width: 30px; min-height: 30px; }
	.hotspot::before { border-radius: 14px; }
	.hotspot.active::before {
		background: rgba(0, 151, 205, .24);
		border-color: rgba(0, 119, 170, .9);
		box-shadow: 0 0 0 5px rgba(0, 119, 170, .16), 0 8px 18px rgba(13,39,66,.14);
		transform: scale(1.06);
	}
	.hotspot.active::after { font-size: .72rem; top: -.2rem; }
	.component-strip {
		order: 2;
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: .55rem;
		padding: .8rem;
		max-height: none;
		overflow: visible;
	}
	.component-chip {
		width: 100%;
		min-height: 2.75rem;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		text-align: center;
		border-radius: 14px;
		font-size: .78rem;
		line-height: 1.1;
		padding: .55rem .45rem;
	}
	.component-chip.active {
		background: linear-gradient(180deg, #cbe8f7 0%, #9ed0ec 100%);
		border-color: #2d7fae;
		box-shadow: inset 0 0 0 1px rgba(255,255,255,.65), 0 6px 14px rgba(13,39,66,.12);
	}
	.component-info {
		order: 3;
		display: block;
		position: sticky;
		bottom: 0;
		z-index: 5;
		border-top: 1px solid #a8cadc;
		box-shadow: 0 -10px 22px rgba(13,39,66,.10);
	}
	.component-info:not(.is-visible) .component-info-title::before { content: "Tocca un componente"; }
	.component-info:not(.is-visible) .component-info-title { font-size: 1rem; }
	.component-info:not(.is-visible) .component-info-text::before { content: "Seleziona un pulsante sotto al modellino per vedere nome e funzione del componente."; }
}

@media (max-width: 520px) {
	.diagram-wrap { padding-left: .35rem; padding-right: .35rem; }
	.diagram-stage { padding: .45rem .35rem; }
	.diagram-stage > img { max-height: 62vh; }
	.diagram-image-frame { min-height: clamp(340px, 128vw, 520px); }
	.diagram-image-frame img { max-height: clamp(335px, 122vw, 510px); }
	.component-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; padding: .65rem; }
	.component-chip { min-height: 2.85rem; font-size: .76rem; }
	.component-info { padding: .85rem .85rem .95rem; }
	.component-info .component-info-title { font-size: 1.02rem; }
	.component-info .component-info-text { font-size: .9rem; }
}

@media (max-width: 380px) {
	.component-strip { grid-template-columns: 1fr; }
	.diagram-image-frame { min-height: 330px; }
	.diagram-image-frame img { max-height: 325px; }
}

/* ===== FIX V3: layout componenti barche corretto su telefono ===== */
/* Il Tridente aveva i pulsanti a destra perché la .diagram-stage restava in riga.
   Da qui in poi forziamo sempre disegno sopra + pulsanti sotto. */
.diagram-stage {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: flex-start;
	width: 100%;
	overflow: hidden;
}

.diagram-stage > img,
.diagram-stage > .diagram-image-frame {
	order: 1;
	align-self: center;
}

.diagram-stage > .component-strip,
.diagram-shell > .component-strip {
	order: 2;
	width: 100%;
	align-self: stretch;
	flex: 0 0 auto;
}

/* PC: Tridente più leggibile e pulsanti sotto al disegno */
.diagram-shell[data-boat="tridente"] .diagram-stage {
	min-height: auto !important;
	padding: 1rem;
}

.diagram-shell[data-boat="tridente"] .diagram-image-frame {
	height: clamp(420px, 48vw, 620px);
	min-height: 420px;
	width: 100%;
	overflow: hidden;
}

.diagram-shell[data-boat="tridente"] .diagram-image-frame img {
	height: 100%;
	width: auto;
	max-width: none;
	object-fit: contain;
}

/* Scheda informativa: sotto i pulsanti, senza coprire il disegno */
.component-info {
	position: static;
	width: 100%;
}

@media (max-width: 736px) {
	/* Card più pulita e larga su smartphone */
	.boat-card {
		width: 100%;
		border-radius: 16px;
		margin-left: auto;
		margin-right: auto;
	}

	.diagram-wrap {
		padding-left: .45rem;
		padding-right: .45rem;
	}

	.diagram-shell {
		border-radius: 15px;
		overflow: hidden;
	}

	.diagram-topline {
		padding: .75rem .85rem;
	}

	.diagram-stage {
		display: flex !important;
		flex-direction: column !important;
		align-items: stretch !important;
		justify-content: flex-start !important;
		padding: .65rem !important;
		min-height: auto !important;
		overflow: hidden !important;
	}

	.diagram-stage[style] {
		min-height: auto !important;
	}

	/* Laser e Optimist */
	.diagram-stage > img {
		display: block;
		width: 100%;
		height: auto;
		max-height: 60vh;
		object-fit: contain;
		margin: 0 auto;
	}

	/* Tridente */
	.diagram-shell[data-boat="tridente"] .diagram-stage {
		padding: .5rem !important;
	}

	.diagram-shell[data-boat="tridente"] .diagram-image-frame {
		width: 100%;
		height: clamp(360px, 118vw, 540px);
		min-height: 0 !important;
		padding: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: hidden;
	}

	.diagram-shell[data-boat="tridente"] .diagram-image-frame img {
		width: auto;
		height: 100%;
		max-width: none;
		max-height: none;
		object-fit: contain;
	}

	/* Pulsanti: sempre sotto al disegno, mai a destra */
	.component-strip,
	.diagram-stage > .component-strip,
	.diagram-shell > .component-strip {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: .5rem;
		width: 100% !important;
		max-width: 100% !important;
		padding: .7rem !important;
		margin: 0 !important;
		border-top: 1px solid #bfd4e1;
		background: linear-gradient(180deg, #dfeef7 0%, #cfe3ef 100%);
		overflow: visible !important;
	}

	.component-chip {
		width: 100%;
		min-width: 0;
		min-height: 2.8rem;
		padding: .55rem .4rem;
		border-radius: 14px;
		font-size: .76rem;
		line-height: 1.08;
		text-align: center;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		white-space: normal;
	}

	.component-chip.active {
		background: linear-gradient(180deg, #cbe8f7 0%, #9ed0ec 100%);
		border-color: #2d7fae;
		box-shadow: inset 0 0 0 1px rgba(255,255,255,.7), 0 6px 14px rgba(13,39,66,.12);
	}

	/* I punti cliccabili restano utili, ma su mobile non devono generare etichette fuori schermo */
	.hotspot {
		min-width: 28px;
		min-height: 28px;
	}

	.hotspot.active::after {
		display: none;
	}

	.component-info {
		display: block;
		position: static !important;
		bottom: auto;
		z-index: 1;
		padding: .85rem .9rem .95rem;
		border-top: 1px solid #a8cadc;
		box-shadow: none;
	}

	.component-info:not(.is-visible) .component-info-title::before {
		content: "Tocca un componente";
	}

	.component-info:not(.is-visible) .component-info-text::before {
		content: "Usa i pulsanti sotto al disegno per leggere nome e funzione del componente.";
	}
}

@media (max-width: 420px) {
	.diagram-wrap {
		padding-left: .25rem;
		padding-right: .25rem;
	}

	.diagram-stage {
		padding: .45rem !important;
	}

	.diagram-stage > img {
		max-height: 56vh;
	}

	.diagram-shell[data-boat="tridente"] .diagram-image-frame {
		height: clamp(330px, 120vw, 500px);
	}

	.component-strip,
	.diagram-stage > .component-strip,
	.diagram-shell > .component-strip {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: .45rem;
		padding: .6rem !important;
	}

	.component-chip {
		min-height: 2.7rem;
		font-size: .72rem;
	}
}

@media (max-width: 340px) {
	.component-strip,
	.diagram-stage > .component-strip,
	.diagram-shell > .component-strip {
		grid-template-columns: 1fr;
	}
}


/* ===== FIX V4: hotspot evidenza separata PC / telefono =====
   Come personalizzare la posizione dell'evidenza:
   - Laser e Optimist: modifica in HTML data-pos="left,top,width,height" per PC
     e data-pos-mobile="left,top,width,height" per telefono. Sono percentuali dell'immagine visibile.
   - Tridente: modifica in HTML data-bbox="x,y,width,height" per PC
     e data-bbox-mobile="x,y,width,height" per telefono. Sono pixel dell'immagine originale.
*/

.diagram-image-frame {
	position: relative;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	isolation: isolate;
}

.diagram-image-frame--svg {
	height: 380px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.diagram-image-frame--svg img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 360px;
	object-fit: contain;
}

.hotspot {
	position: absolute;
	z-index: 10;
}

/* PC: aspetto dell'evidenza sulla foto */
.hotspot:hover::before,
.hotspot.active::before {
	background: rgba(73,198,229,.18);
	border-color: rgba(73,198,229,.75);
	box-shadow: 0 0 0 4px rgba(73,198,229,.12);
	transform: scale(1.03);
	border-width: 2px;
}

@media (max-width: 736px) {
	.diagram-image-frame--svg {
		height: clamp(280px, 82vw, 420px);
		min-height: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: hidden;
	}

	.diagram-image-frame--svg img {
		width: auto !important;
		height: auto !important;
		max-width: 100% !important;
		max-height: clamp(260px, 78vw, 400px) !important;
		object-fit: contain;
	}

	/* TELEFONO: aspetto dell'evidenza sulla foto */
	.hotspot {
		min-width: 24px;
		min-height: 24px;
	}

	.hotspot:hover::before,
	.hotspot.active::before {
		background: rgba(255, 180, 0, .30);
		border-color: rgba(255, 145, 0, .95);
		box-shadow: 0 0 0 6px rgba(255, 145, 0, .20), 0 8px 18px rgba(13,39,66,.15);
		transform: scale(1.14);
		border-width: 3px;
	}

	.hotspot.active::after {
		display: none;
	}
}

@media (max-width: 420px) {
	.diagram-image-frame--svg {
		height: clamp(250px, 88vw, 370px);
	}

	.diagram-image-frame--svg img {
		max-height: clamp(240px, 84vw, 350px) !important;
	}
}