/* --------------------------------------------------------------
   AL QUÈRTO - IL PROGETTO
-------------------------------------------------------------- */

.aq-project-widget {
	position: relative;

	overflow: hidden;
	isolation: isolate;

	padding:
		clamp(96px, 12vw, 180px)
		clamp(20px, 5vw, 76px);

	color: var(--aq-black, #04070f);

	background:
		radial-gradient(
			circle at 14% 18%,
			rgba(5, 60, 255, .12),
			transparent 30rem
		),
		radial-gradient(
			circle at 88% 72%,
			rgba(5, 60, 255, .10),
			transparent 30rem
		),
		linear-gradient(
			180deg,
			#fbfaf5 0%,
			#fffef9 100%
		);
}


/* --------------------------------------------------------------
   GHOST
-------------------------------------------------------------- */

.aq-project-widget__ghost {
	position: absolute;

	right: -4vw;
	top: clamp(38px, 8vw, 110px);

	z-index: 0;

	color: rgba(5, 60, 255, .055);

	font-family: var(--aq-font-display);
	font-size: clamp(12rem, 26vw, 34rem);
	font-weight: 400;
	line-height: .72;
	letter-spacing: -.02em;

	text-transform: uppercase;
	white-space: nowrap;

	pointer-events: none;
}


/* --------------------------------------------------------------
   INNER
-------------------------------------------------------------- */

.aq-project-widget__inner {
	position: relative;

	z-index: 2;

	width: min(1440px, 100%);

	margin: 0 auto;
}


/* --------------------------------------------------------------
   HEAD
-------------------------------------------------------------- */

.aq-project-widget__head {
	display: grid;

	grid-template-columns:
		minmax(130px, .28fr)
		minmax(0, 1fr);

	gap: clamp(28px, 5vw, 76px);

	align-items: end;

	margin-bottom:
		clamp(46px, 7vw, 96px);
}


/* Marker */

.aq-project-widget__marker {
	display: grid;

	gap: 10px;

	align-content: start;

	text-transform: uppercase;
}


.aq-project-widget__marker span {
	width: fit-content;

	padding: 8px 11px;

	border-radius: 999px;

	color: #fff;
	background: var(--aq-blue);

	font-family: var(--aq-font-body);
	font-size: .66rem;
	font-weight: 800;
	line-height: 1;
	letter-spacing: .08em;
}


.aq-project-widget__marker strong {
	color: var(--aq-blue);

	font-family: var(--aq-font-display);
	font-size: clamp(1.85rem, 3vw, 3.4rem);
	font-weight: 400;
	line-height: .88;
	letter-spacing: -.02em;
}


/* Heading */

.aq-project-widget__kicker {
	margin: 0 0 20px;

	color: var(--aq-blue);

	font-family: var(--aq-font-body);
	font-size: .78rem;
	font-weight: 800;
	line-height: 1;
	letter-spacing: .09em;

	text-transform: uppercase;
}


.aq-project-widget__heading h2 {
	max-width: 980px;

	margin: 0;

	font-family: var(--aq-font-display);
	font-size: clamp(4rem, 8.2vw, 7.5rem);
	font-weight: 400;
	line-height: .9;
	letter-spacing: -.02em;

	text-transform: uppercase;
}


/* --------------------------------------------------------------
   CONTENT
-------------------------------------------------------------- */

.aq-project-widget__content {
	display: grid;

	grid-template-columns:
		minmax(320px, 1fr)
		minmax(300px, .72fr);

	gap: clamp(24px, 4vw, 62px);

	align-items: stretch;
}


/* Shared cards */

.aq-project-widget__story,
.aq-project-widget__payoff {
	position: relative;

	border:
		1px solid rgba(5, 60, 255, .20);

	background:
		rgba(255, 255, 255, .76);

	box-shadow:
		0 32px 92px rgba(5, 60, 255, .10);

	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
}


/* --------------------------------------------------------------
   STORY
-------------------------------------------------------------- */

.aq-project-widget__story {
	padding:
		clamp(28px, 4.4vw, 62px);
}


.aq-project-widget__story::before {
	content: "";

	position: absolute;

	left: -1px;
	top: -1px;
	bottom: -1px;

	width: 6px;

	background: var(--aq-blue);
}


.aq-project-widget__story p {
	margin: 0;

	color: #151b2b;

	font-family: var(--aq-font-body);
	font-size: clamp(1.18rem, 1.7vw, 1.3rem);
	font-weight: 400;
	line-height: 1.55;
	letter-spacing: -.02em;
}


.aq-project-widget__story p + p {
	margin-top: 20px;
}


/* --------------------------------------------------------------
   PAYOFF
-------------------------------------------------------------- */

.aq-project-widget__payoff {
	display: flex;
	flex-direction: column;
	justify-content: space-between;

	min-height: 330px;

	padding:
		clamp(26px, 3.8vw, 52px);

	background:
		radial-gradient(
			circle at 82% 12%,
			rgba(5, 60, 255, .18),
			transparent 18rem
		),
		rgba(255, 255, 255, .9);
}


.aq-project-widget__payoff-label {
	display: inline-flex;

	width: fit-content;

	padding: 8px 11px;

	border-radius: 999px;

	color: #fff;
	background: var(--aq-blue);

	font-family: var(--aq-font-body);
	font-size: .66rem;
	font-weight: 800;
	line-height: 1;
	letter-spacing: .08em;

	text-transform: uppercase;
}


.aq-project-widget__payoff strong {
	position: relative;

	z-index: 1;

	display: block;

	margin-top: 54px;

	color: var(--aq-blue);

	font-family: var(--aq-font-display);
	font-size: clamp(3.4rem, 6.8vw, 7.2rem);
	font-weight: 400;
	line-height: .9;
	letter-spacing: -.02em;

	text-transform: uppercase;
}


/* Optional link */

.aq-project-widget__payoff.has-link {
	transition:
		transform .4s cubic-bezier(.16, 1, .3, 1),
		box-shadow .4s cubic-bezier(.16, 1, .3, 1);
}


.aq-project-widget__payoff.has-link:hover {
	transform: translateY(-8px);

	box-shadow:
		0 42px 110px rgba(5, 60, 255, .16);
}


.aq-project-widget__payoff-hit {
	position: absolute;
	inset: 0;

	z-index: 5;
}


.aq-project-widget__payoff-hit:focus-visible {
	outline:
		3px solid var(--aq-blue);

	outline-offset: -10px;
}


.elementor-editor-active
.aq-project-widget__payoff-hit {
	pointer-events: none;
}


/* --------------------------------------------------------------
   REVEAL
-------------------------------------------------------------- */

.aq-project-widget [data-aq-reveal] {
	opacity: 0;

	transform: translateY(44px);

	transition:
		opacity .85s cubic-bezier(.16, 1, .3, 1),
		transform .85s cubic-bezier(.16, 1, .3, 1);

	transition-delay:
		var(--aq-reveal-delay, 0ms);
}


.aq-project-widget
[data-aq-reveal].is-visible {
	opacity: 1;

	transform: none;
}


.elementor-editor-active
.aq-project-widget
[data-aq-reveal] {
	opacity: 1;

	transform: none;
}


/* --------------------------------------------------------------
   TABLET
-------------------------------------------------------------- */

@media (max-width: 1080px) {

	.aq-project-widget__head,
	.aq-project-widget__content {
		grid-template-columns: 1fr;
	}


	.aq-project-widget__payoff {
		min-height: 260px;
	}

}


/* --------------------------------------------------------------
   MOBILE
-------------------------------------------------------------- */

@media (max-width: 760px) {

	.aq-project-widget {
		padding:
			76px
			18px;
	}


	.aq-project-widget__heading h2 {
		font-size:
			clamp(3.5rem, 17vw, 6.1rem);
	}


	.aq-project-widget__marker strong {
		font-size: 2.2rem;
	}


	.aq-project-widget__story,
	.aq-project-widget__payoff {
		padding: 24px;
	}


	.aq-project-widget__story p {
		font-size: 1.05rem;
	}


	.aq-project-widget__payoff strong {
		font-size:
			clamp(3rem, 14vw, 5.8rem);
	}

}


/* --------------------------------------------------------------
   REDUCED MOTION
-------------------------------------------------------------- */

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

	.aq-project-widget [data-aq-reveal] {
		opacity: 1;

		transform: none;

		transition: none;
	}

}