/* =========================================================================
 * QuoVadis Core v2 — Home page ("form-first")
 * Foglio stile autorevole della HOME. Caricato DOPO qv-discovery.css, quindi
 * può sovrascrivere le regole di base/discovery. Usa SOLO i token esistenti.
 * Mobile-first. Tutto scoped sotto .qv-body.
 * Blocchi: HERO (+ posizionamento form), STEP, FEATURED wrapper, CTA finale.
 * ========================================================================= */

/* -------------------------------------------------------------------------
 * HERO — il search form è il protagonista, above the fold.
 * ----------------------------------------------------------------------- */
.qv-body .qv-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding-block: var(--qv-sp-6) var(--qv-sp-7);
}

/* Backdrop: gradiente brand + SVG costiero (fallback garantito).
   Se presente, la foto POI viene sovrapposta in .qv-hero--photo. */
.qv-body .qv-hero__bg {
	position: absolute;
	inset: 0;
	z-index: -2;
	background-color: var(--qv-green-50);
	background-image:
		radial-gradient(ellipse 90% 70% at 85% -10%, rgba(34, 197, 94, 0.22), transparent 60%),
		radial-gradient(ellipse 90% 70% at -10% 110%, rgba(0, 103, 215, 0.16), transparent 60%),
		var(--qv-hero-svg, none),
		linear-gradient(180deg, var(--qv-green-50), var(--qv-neutral-0) 72%);
	background-repeat: no-repeat;
	background-position: center top, center bottom, center bottom, center;
	background-size: auto, auto, 1440px auto, cover;
}

@media (min-width: 768px) {
	.qv-body .qv-hero__bg {
		background-size: auto, auto, 100% auto, cover;
	}
}

/* Variante con foto POI: foto scura sotto, gradiente brand + SVG sopra in
   semitrasparenza, così il testo e la card restano sempre leggibili. */
.qv-body .qv-hero--photo .qv-hero__bg {
	background-color: var(--qv-green-900);
	background-image:
		linear-gradient(180deg, rgba(8, 30, 50, 0.55) 0%, rgba(8, 30, 50, 0.26) 44%, rgba(10, 44, 40, 0.50) 100%),
		var(--qv-hero-photo, none);
	background-position: center, center;
	background-size: cover, cover;
}

@media (min-width: 768px) {
	.qv-body .qv-hero--photo .qv-hero__bg {
		background-size: cover, cover;
	}
}

.qv-body .qv-hero__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: var(--qv-sp-4);
	align-items: stretch;
}

/* Intro: testi compatti, NON devono dominare la card. */
.qv-body .qv-hero__intro {
	text-align: center;
	max-width: 40ch;
	margin-inline: auto;
}

.qv-body .qv-hero__eyebrow {
	margin: 0 0 var(--qv-sp-2);
	font-size: var(--qv-fs-xs);
	font-weight: var(--qv-fw-bold);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--qv-green-700);
}

.qv-body .qv-hero__title {
	margin: 0;
	font-size: clamp(1.75rem, 4.2vw + 0.6rem, var(--qv-fs-3xl));
	font-weight: var(--qv-fw-extra);
	line-height: var(--qv-lh-tight);
	letter-spacing: -0.02em;
	color: var(--qv-fg);
}

.qv-body .qv-hero__lead {
	margin: var(--qv-sp-2) 0 0;
	font-size: var(--qv-fs-md);
	line-height: var(--qv-lh-snug);
	color: var(--qv-fg-muted);
}

/* Sopra foto: intro chiara per contrasto. */
.qv-body .qv-hero--photo .qv-hero__eyebrow { color: var(--qv-green-200); }
.qv-body .qv-hero--photo .qv-hero__title {
	color: var(--qv-neutral-0);
	text-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
}
.qv-body .qv-hero--photo .qv-hero__lead {
	color: rgba(255, 255, 255, 0.92);
	text-shadow: 0 1px 8px rgba(0, 0, 0, 0.30);
}

/* LA CARD: il form è l'elemento dominante, bianco ed elevato. */
.qv-body .qv-hero__form {
	background: var(--qv-neutral-0);
	border: 1px solid var(--qv-border);
	border-radius: var(--qv-r-lg);
	box-shadow: var(--qv-shadow-lg);
	padding: var(--qv-sp-5);
	width: 100%;
	max-width: 860px;
	margin-inline: auto;
}

/* Trust row sotto la card. */
.qv-body .qv-hero__trust {
	display: inline-flex;
	align-items: center;
	gap: var(--qv-sp-2);
	margin: var(--qv-sp-1) auto 0;
	padding: var(--qv-sp-2) var(--qv-sp-4);
	font-size: var(--qv-fs-sm);
	color: var(--qv-fg-muted);
	background: rgba(255, 255, 255, 0.72);
	border-radius: var(--qv-r-full);
	backdrop-filter: blur(2px);
}
.qv-body .qv-hero__trust svg { color: var(--qv-green-600); flex: 0 0 auto; }
.qv-body .qv-hero__trust strong { color: var(--qv-fg); font-weight: var(--qv-fw-bold); }
.qv-body .qv-hero--photo .qv-hero__trust {
	color: rgba(255, 255, 255, 0.92);
	background: rgba(0, 0, 0, 0.28);
}
.qv-body .qv-hero--photo .qv-hero__trust strong { color: var(--qv-neutral-0); }
.qv-body .qv-hero--photo .qv-hero__trust svg { color: var(--qv-green-300); }

/* Placement/sizing del form dentro l'hero (stile della card, non del
   componente: le classi interne restano di proprietà di Agent 2). */
.qv-body .qv-hero .qv-search-form {
	gap: var(--qv-sp-4);
}

/* Tablet: più respiro, intro un filo più grande. */
@media (min-width: 768px) {
	.qv-body .qv-hero {
		padding-block: var(--qv-sp-7) var(--qv-sp-8);
	}
	.qv-body .qv-hero__inner { gap: var(--qv-sp-5); }
	.qv-body .qv-hero__intro { max-width: 48ch; }
	.qv-body .qv-hero__title {
		font-size: clamp(2rem, 3.4vw + 1rem, var(--qv-fs-4xl));
	}
	.qv-body .qv-hero__lead { font-size: var(--qv-fs-lg); }
	.qv-body .qv-hero__form { padding: var(--qv-sp-6); }
	.qv-body .qv-hero .qv-search-form { gap: var(--qv-sp-5); }
}

/* Desktop: hero pieno schermo (sotto l'header), card ben centrata. */
@media (min-width: 1024px) {
	.qv-body .qv-hero {
		min-height: calc(100svh - var(--qv-header-h));
		display: flex;
		align-items: center;
	}
	.qv-body .qv-hero__inner {
		width: 100%;
	}
}

/* Schermi molto larghi: niente di sproporzionato. */
@media (min-width: 1400px) {
	.qv-body .qv-hero__form { max-width: 920px; }
}

/* -------------------------------------------------------------------------
 * SECTIONS — ritmo verticale + intestazioni centrate.
 * ----------------------------------------------------------------------- */
.qv-body .qv-main--home .qv-section {
	padding-block: var(--qv-sp-7);
}
.qv-body .qv-main--home .qv-section--steps {
	background: var(--qv-bg-alt);
}
.qv-body .qv-main--home .qv-section--cta {
	padding-bottom: var(--qv-sp-8);
}

.qv-body .qv-main--home .qv-section__head {
	margin-bottom: var(--qv-sp-6);
	text-align: center;
	max-width: 60ch;
	margin-inline: auto;
}
.qv-body .qv-main--home .qv-section__head h2 {
	margin: 0 0 var(--qv-sp-2);
}
.qv-body .qv-main--home .qv-section__sub {
	margin: 0;
	font-size: var(--qv-fs-md);
	color: var(--qv-fg-muted);
}
.qv-body .qv-main--home .qv-section__cta-line {
	text-align: center;
	margin: var(--qv-sp-6) 0 0;
}

@media (min-width: 768px) {
	.qv-body .qv-main--home .qv-section { padding-block: var(--qv-sp-8); }
}

/* -------------------------------------------------------------------------
 * STEPS — 3-step explainer.
 * ----------------------------------------------------------------------- */
.qv-body .qv-steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--qv-sp-5);
	counter-reset: qv-step;
}
.qv-body .qv-steps__item {
	position: relative;
	background: var(--qv-neutral-0);
	border: 1px solid var(--qv-border);
	border-radius: var(--qv-r-lg);
	padding: var(--qv-sp-6);
	box-shadow: var(--qv-shadow-sm);
	transition: transform var(--qv-tr-normal), box-shadow var(--qv-tr-normal);
}
.qv-body .qv-steps__item:hover {
	transform: translateY(-2px);
	box-shadow: var(--qv-shadow-md);
}
.qv-body .qv-steps__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-bottom: var(--qv-sp-3);
	font-size: var(--qv-fs-lg);
	font-weight: var(--qv-fw-bold);
	color: var(--qv-neutral-0);
	background: linear-gradient(135deg, var(--qv-green-500), var(--qv-green-700));
	border-radius: var(--qv-r-full);
	box-shadow: var(--qv-shadow-sm);
}
.qv-body .qv-steps__title {
	margin: 0 0 var(--qv-sp-2);
	font-size: var(--qv-fs-lg);
}
.qv-body .qv-steps__text {
	margin: 0;
	color: var(--qv-fg-muted);
	line-height: var(--qv-lh-normal);
}

@media (min-width: 768px) {
	.qv-body .qv-steps { grid-template-columns: repeat(3, 1fr); gap: var(--qv-sp-6); }
}

/* -------------------------------------------------------------------------
 * FEATURED — solo wrapper/intestazione. Le card sono di Agent 3.
 * ----------------------------------------------------------------------- */
.qv-body .qv-section--featured .qv-grid--poi {
	margin-top: var(--qv-sp-2);
}

/* -------------------------------------------------------------------------
 * CTA FINALE — .qv-cta-box (riautorata qui).
 * ----------------------------------------------------------------------- */
.qv-body .qv-cta-box {
	position: relative;
	overflow: hidden;
	text-align: center;
	color: var(--qv-neutral-0);
	background: linear-gradient(135deg, var(--qv-green-600), var(--qv-blue-600));
	border-radius: var(--qv-r-xl);
	padding: var(--qv-sp-7) var(--qv-sp-5);
	box-shadow: var(--qv-shadow-md);
}
.qv-body .qv-cta-box h2 {
	margin: 0 0 var(--qv-sp-3);
	color: var(--qv-neutral-0);
}
.qv-body .qv-cta-box p {
	margin: 0 auto;
	max-width: 52ch;
	color: rgba(255, 255, 255, 0.92);
}
.qv-body .qv-cta-box__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--qv-sp-3);
	justify-content: center;
	margin-top: var(--qv-sp-5);
}
.qv-body .qv-cta-box .qv-btn--primary {
	background: var(--qv-neutral-0);
	color: var(--qv-green-700);
	border-color: var(--qv-neutral-0);
}
.qv-body .qv-cta-box .qv-btn--primary:hover {
	background: var(--qv-neutral-50);
	color: var(--qv-green-800);
}
.qv-body .qv-cta-box .qv-btn--ghost {
	background: transparent;
	color: var(--qv-neutral-0);
	border-color: rgba(255, 255, 255, 0.65);
}
.qv-body .qv-cta-box .qv-btn--ghost:hover {
	background: rgba(255, 255, 255, 0.14);
	color: var(--qv-neutral-0);
	border-color: var(--qv-neutral-0);
}

@media (min-width: 768px) {
	.qv-body .qv-cta-box { padding: var(--qv-sp-8) var(--qv-sp-7); }
}

/* -------------------------------------------------------------------------
 * Riduzione movimento.
 * ----------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.qv-body .qv-steps__item { transition: none; }
}