/* ==========================================================================
   Atlantis – Fade Card Servizi
   I valori dinamici arrivano da Elementor (selectors) o dalle variabili CSS
   scritte inline sulla card: --atl-fcs-duration, --atl-fcs-blur.
   ========================================================================== */

.atl-fcs-card {
	position: relative;
	display: block;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	height: 520px;
	min-height: 180px;
	overflow: hidden;
	isolation: isolate;
	border-radius: 14px;
	box-shadow: 0 6px 24px rgba(0, 0, 0, .12);
	transition: transform .3s ease, box-shadow .3s ease;

	/*
	 * pointer-events si eredita dagli antenati. Alcuni widget di terze parti
	 * (per esempio le tab di Essential Addons) lasciano per errore un
	 * "pointer-events: none" su un contenitore che poi risulta ancora
	 * visibile: senza questa riga la card sembrerebbe visivamente a posto ma
	 * ignorerebbe qualsiasi passaggio del mouse o click.
	 *
	 * "auto" su un discendente annulla il "none" ereditato da un antenato,
	 * quindi questa riga rende la card utilizzabile anche dentro un
	 * contenitore rotto, senza dover intervenire sul CSS altrui.
	 */
	pointer-events: auto;
}

.atl-fcs-card * {
	pointer-events: auto;
}

.atl-fcs-card.atl-fcs-ratio {
	height: auto;
	aspect-ratio: 3 / 4;
}

.atl-fcs-card *,
.atl-fcs-card *::before,
.atl-fcs-card *::after {
	box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   Facce
   -------------------------------------------------------------------------- */

.atl-fcs-face {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	border-radius: inherit;
	transition:
		opacity var(--atl-fcs-duration, 450ms) ease,
		visibility var(--atl-fcs-duration, 450ms) ease;
}

.atl-fcs-front {
	opacity: 1;
	visibility: visible;
	z-index: 2;
}

.atl-fcs-back {
	opacity: 0;
	visibility: hidden;
	z-index: 3;
}

.atl-fcs-trigger-hover:hover .atl-fcs-front,
.atl-fcs-card.is-focus .atl-fcs-front,
.atl-fcs-card.is-active .atl-fcs-front {
	opacity: 0;
	visibility: hidden;
}

.atl-fcs-trigger-hover:hover .atl-fcs-back,
.atl-fcs-card.is-focus .atl-fcs-back,
.atl-fcs-card.is-active .atl-fcs-back {
	opacity: 1;
	visibility: visible;
}

.atl-fcs-trigger-click {
	cursor: pointer;
}

/* --------------------------------------------------------------------------
   Sfondi e overlay
   -------------------------------------------------------------------------- */

.atl-fcs-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	z-index: 1;
}

/* La scala evita che la sfocatura scopra i bordi della card. */
.atl-fcs-bg--blur {
	filter: blur(var(--atl-fcs-blur, 12px));
	transform: scale(1.15);
}

.atl-fcs-overlay {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
}

/* --------------------------------------------------------------------------
   Contenuti
   -------------------------------------------------------------------------- */

.atl-fcs-content {
	position: relative;
	z-index: 3;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	width: 100%;
	height: 100%;
	min-width: 0;
	padding: 30px;
}

.atl-fcs-title {
	margin: 0;
	line-height: 1.25;
	word-break: break-word;
}

.atl-fcs-desc {
	margin-top: 18px;
	width: 100%;
	max-width: 100%;
	line-height: 1.5;
}

.atl-fcs-desc p {
	margin: 0 0 1em;
}

.atl-fcs-desc p:last-child {
	margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Link sull'intera card
   -------------------------------------------------------------------------- */

.atl-fcs-card-link {
	position: absolute;
	inset: 0;
	z-index: 4;
	display: block;
	border-radius: inherit;
}

.atl-fcs-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* --------------------------------------------------------------------------
   Freccia
   -------------------------------------------------------------------------- */

.atl-fcs-action {
	position: absolute;
	z-index: 6;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	flex: 0 0 auto;
	color: #fff;
	text-decoration: none;
	border-radius: 50%;
	opacity: var(--atl-fcs-action-opacity, .75);
	transition:
		opacity var(--atl-fcs-duration, 450ms) ease,
		visibility var(--atl-fcs-duration, 450ms) ease,
		transform .25s ease;
}

.atl-fcs-action--bottom-right {
	right: var(--atl-fcs-action-x, 24px);
	bottom: var(--atl-fcs-action-y, 24px);
}

.atl-fcs-action--bottom-left {
	left: var(--atl-fcs-action-x, 24px);
	bottom: var(--atl-fcs-action-y, 24px);
}

.atl-fcs-action--top-right {
	right: var(--atl-fcs-action-x, 24px);
	top: var(--atl-fcs-action-y, 24px);
}

.atl-fcs-action--top-left {
	left: var(--atl-fcs-action-x, 24px);
	top: var(--atl-fcs-action-y, 24px);
}

a.atl-fcs-action:hover,
a.atl-fcs-action:focus-visible {
	opacity: 1;
	transform: translateY(-2px);
}

.atl-fcs-action-svg,
.atl-fcs-action-img {
	display: block;
	width: 100%;
	height: 100%;
}

.atl-fcs-action-img {
	object-fit: contain;
}

/* Quando la card intera è cliccabile la freccia è decorativa: i click devono
   attraversarla e arrivare allo stretched link sottostante. Specificità
   maggiore della regola generale pointer-events:auto qui sopra. */
.atl-fcs-card .atl-fcs-action:not(a) {
	pointer-events: none;
}

/* Visibilità della freccia in base alla faccia mostrata */
.atl-fcs-trigger-hover:hover .atl-fcs-action--on-front,
.atl-fcs-card.is-focus .atl-fcs-action--on-front,
.atl-fcs-card.is-active .atl-fcs-action--on-front {
	opacity: 0;
	visibility: hidden;
}

.atl-fcs-action--on-back {
	opacity: 0;
	visibility: hidden;
}

.atl-fcs-trigger-hover:hover .atl-fcs-action--on-back,
.atl-fcs-card.is-focus .atl-fcs-action--on-back,
.atl-fcs-card.is-active .atl-fcs-action--on-back {
	opacity: var(--atl-fcs-action-opacity, .75);
	visibility: visible;
}

/* Applicata per un frame quando la card torna visibile dopo essere stata
   nascosta (cambio di tab, accordion, browser tab): senza questa, alcuni
   browser rieseguono la transizione da soli e la card compare già girata. */
.atl-fcs-no-anim,
.atl-fcs-no-anim * {
	transition: none !important;
}

/* --------------------------------------------------------------------------
   Rendering
   -------------------------------------------------------------------------- */

.atl-fcs-card,
.atl-fcs-face,
.atl-fcs-content {
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

/* --------------------------------------------------------------------------
   Mobile
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {

	.atl-fcs-disable-mobile:hover .atl-fcs-front,
	.atl-fcs-disable-mobile.is-focus .atl-fcs-front,
	.atl-fcs-disable-mobile.is-active .atl-fcs-front {
		opacity: 1;
		visibility: visible;
	}

	.atl-fcs-disable-mobile:hover .atl-fcs-back,
	.atl-fcs-disable-mobile.is-focus .atl-fcs-back,
	.atl-fcs-disable-mobile.is-active .atl-fcs-back {
		opacity: 0;
		visibility: hidden;
	}

	.atl-fcs-disable-mobile .atl-fcs-action--on-front {
		opacity: var(--atl-fcs-action-opacity, .75) !important;
		visibility: visible !important;
	}

	.atl-fcs-disable-mobile .atl-fcs-action--on-back {
		opacity: 0 !important;
		visibility: hidden !important;
	}
}

/* --------------------------------------------------------------------------
   Accessibilità
   -------------------------------------------------------------------------- */

.atl-fcs-card a:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {

	.atl-fcs-card,
	.atl-fcs-face,
	.atl-fcs-action {
		transition-duration: 1ms;
	}

	.atl-fcs-card:hover {
		transform: none;
	}
}