/* FotoModale */
.fotomodale {
	--fotomodale-bg: #fbfbfd;
	--fotomodale-text: #3f6fb5;
	--fotomodale-title: #1f5f7a;
	--fotomodale-radius: 16px;
	--fotomodale-width: min(520px, 55vw);
	position: relative;
}

.fotomodale:not(.fotomodale-host) {
	display: inline-block;
	max-width: 100%;
	vertical-align: top;
}

/* Elemento già presente nella pagina a cui è agganciato il riquadro */
.fotomodale-host {
	cursor: pointer;
}

.fotomodale-host:focus-visible {
	outline: 3px solid var(--fotomodale-text);
	outline-offset: 4px;
}

/* Testo per lettori di schermo, nel caso il tema non definisca la classe */
.fotomodale .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

.fotomodale__trigger {
	all: unset;
	display: block;
	cursor: pointer;
	border-radius: 8px;
}

.fotomodale__trigger:focus-visible {
	outline: 3px solid var(--fotomodale-text);
	outline-offset: 4px;
}

.fotomodale__img {
	display: block;
	max-width: 100%;
	height: auto;
	border-radius: 6px;
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.2);
	transition: transform 0.2s ease;
}

.fotomodale:hover .fotomodale__img,
.fotomodale.is-open .fotomodale__img {
	transform: scale(1.02);
}

.fotomodale__panel {
	position: absolute;
	top: 50%;
	left: calc(100% - 2rem); /* si sovrappone un po' alla foto: nessun "buco" tra foto e riquadro */
	z-index: 50;
	width: var(--fotomodale-width);
	max-height: 85vh;
	overflow: auto;
	padding: 1.75rem 2rem;
	background: var(--fotomodale-bg);
	color: var(--fotomodale-text);
	border-radius: var(--fotomodale-radius);
	box-shadow: 0 14px 44px rgba(0, 0, 0, 0.22);
	opacity: 0;
	visibility: hidden;
	transform: translate(12px, -50%);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

.fotomodale--left .fotomodale__panel {
	left: auto;
	right: calc(100% - 2rem);
	transform: translate(-12px, -50%);
}

@media (hover: hover) {
	.fotomodale:hover .fotomodale__panel {
		opacity: 1;
		visibility: visible;
		transform: translate(0, -50%);
	}
}

.fotomodale:focus-within .fotomodale__panel,
.fotomodale.is-open .fotomodale__panel {
	opacity: 1;
	visibility: visible;
	transform: translate(0, -50%);
}

.fotomodale__title {
	margin: 0 0 0.75rem;
	color: var(--fotomodale-title);
}

.fotomodale__body > :last-child {
	margin-bottom: 0;
}

.fotomodale__modal-img {
	display: block;
	max-width: 100%;
	height: auto;
}

.fotomodale__more {
	margin: 1rem 0 0;
}

/* Schermi stretti: il riquadro si apre sotto la foto al tocco */
@media (max-width: 782px) {
	.fotomodale:not(.fotomodale-host) {
		display: block;
	}

	.fotomodale__panel,
	.fotomodale--left .fotomodale__panel {
		position: static;
		display: none;
		width: auto;
		max-height: none;
		margin-top: 1rem;
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	.fotomodale.is-open .fotomodale__panel {
		display: block;
	}
}

@media (prefers-reduced-motion: reduce) {
	.fotomodale__img,
	.fotomodale__panel {
		transition: none;
	}
}

/* Titolo sempre visibile sopra o sotto la foto */
.fotomodale__caption {
	margin: 0.5rem 0;
	color: var(--fotomodale-title);
	text-align: center;
}

.fotomodale__caption--title {
	font-weight: 600;
}

.fotomodale__caption p {
	margin: 0 0 0.4em;
}

.fotomodale__caption > :last-child {
	margin-bottom: 0;
}

.fotomodale--static {
	display: inline-block;
	max-width: 100%;
}

/* Sezioni del page builder che contengono un riquadro aperto (vedi JS) */
.fotomodale-lift {
	z-index: 9000 !important;
}