/**
 * Landing Servizi — stili scoped a .htmb-landing-servizi
 * Eredita palette/tipografia da DESIGN.md: magenta raro, Poppins per i titoli,
 * Inter per il corpo, Roboto Mono per l'unico momento "da codice".
 */

.htmb-landing-servizi {
	--htmb-ls-ink: #0f172a;
	--htmb-ls-ink-secondary: #334155;
	--htmb-ls-ink-muted: #64748b;
	--htmb-ls-surface: #ffffff;
	--htmb-ls-surface-tint: aliceblue;
	--htmb-ls-border: #e2e8f0;
	--htmb-ls-seam: rgba(15, 23, 42, 0.08);
	--htmb-ls-primary: #e91e63;
	--htmb-ls-primary-dark: #c2185b;

	--htmb-ls-space-xs: clamp(0.5rem, 1vw, 0.75rem);
	--htmb-ls-space-sm: clamp(0.75rem, 1.5vw, 1rem);
	--htmb-ls-space-base: clamp(1rem, 2vw, 1.5rem);
	--htmb-ls-space-lg: clamp(1.5rem, 2.5vw, 2rem);
	--htmb-ls-space-xl: clamp(2rem, 3vw, 2.5rem);
	--htmb-ls-space-2xl: clamp(3rem, 6vw, 6rem);

	background: var(--htmb-ls-surface);
	color: var(--htmb-ls-ink-secondary);
}

.htmb-servizi {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
	line-height: 1.6;
}

.htmb-servizi-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

.htmb-landing-servizi section {
	padding-block: var(--htmb-ls-space-2xl);
}

.htmb-landing-servizi section:not(:first-of-type) {
	border-top: 1px solid var(--htmb-ls-seam);
}

.htmb-landing-servizi h1,
.htmb-landing-servizi h2,
.htmb-landing-servizi h3 {
	font-family: 'Poppins', sans-serif;
	color: var(--htmb-ls-ink);
	line-height: 1.2;
}

.text-wrap-balance {
	text-wrap: balance;
}

.htmb-landing-servizi p {
	max-width: 65ch;
}

/* ==================== IL CONFINE ==================== */

.htmb-servizi-boundary-grid {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: var(--htmb-ls-space-2xl);
	align-items: center;
}

.htmb-servizi-boundary-text p {
	max-width: none;
}

.htmb-servizi-boundary-text p + p {
	margin-top: var(--htmb-ls-space-base);
}

.htmb-servizi-boundary-code {
	background: #0f172a;
	border-radius: 12px;
	padding: clamp(1.75rem, 3vw, 2.5rem) clamp(1.5rem, 3vw, 2.25rem);
	box-shadow: 0 8px 25px rgba(15, 23, 42, 0.25);
	overflow-x: auto;
}

.htmb-servizi-boundary-code pre {
	margin: 0;
	padding: 0;
	background: transparent;
	border: none;
	color: inherit;
	font-family: 'Roboto Mono', monospace;
	font-size: 0.85rem;
	line-height: 1.9;
	white-space: pre-wrap;
	overflow-wrap: normal;
	word-break: normal;
}

.htmb-code-comment {
	color: #e2e8f0;
}

/* L'evidenziazione testo (::selection) è definita a livello globale del
   sito con testo scuro su sfondo chiaro — su questo box scuro il testo
   selezionato "spariva" (scuro su scuro). Override scoped con contrasto
   corretto per il solo blocco codice. */
.htmb-servizi-boundary-code ::selection {
	background: rgba(233, 30, 99, 0.45);
	color: #ffffff;
	text-shadow: none;
}

/* ==================== SERVIZI ==================== */

.htmb-servizi-services {
	background: var(--htmb-ls-surface-tint);
}

.htmb-servizi-services h2 {
	margin-bottom: var(--htmb-ls-space-xl);
}

.htmb-servizi-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--htmb-ls-space-lg);
}

.htmb-service-card {
	background: var(--htmb-ls-surface);
	border: 1px solid var(--htmb-ls-border);
	border-radius: 12px;
	padding: var(--htmb-ls-space-xl);
	box-shadow: 0 2px 8px rgba(15, 23, 42, 0.07);
	transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.htmb-service-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
	border-color: var(--htmb-ls-primary);
}

.htmb-service-card h3 {
	font-size: 1.25rem;
	margin: 0 0 0.75rem;
}

.htmb-service-card p {
	margin: 0;
	max-width: none;
}

.htmb-service-card--featured {
	background: linear-gradient(135deg, rgba(233, 30, 99, 0.04), rgba(15, 23, 42, 0.02)), var(--htmb-ls-surface);
	border-color: rgba(233, 30, 99, 0.16);
}

.htmb-service-card--featured h3 {
	font-size: 1.5rem;
}

/* ==================== PROOF ==================== */

.htmb-servizi-proof {
	background: var(--htmb-ls-surface-tint);
}

.htmb-servizi-proof h2 {
	margin-bottom: var(--htmb-ls-space-xl);
}

.htmb-proof-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--htmb-ls-space-lg);
	align-items: stretch;
}

.htmb-proof-card {
	background: var(--htmb-ls-surface);
	border: 1px solid var(--htmb-ls-border);
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	display: flex;
	flex-direction: column;
}

.htmb-proof-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}

.htmb-proof-image {
	aspect-ratio: 16 / 9;
	background: var(--htmb-ls-border);
	overflow: hidden;
	/* Necessario dentro un flex container in colonna: senza questo, il
	   min-height:auto di default lascia che le dimensioni intrinseche
	   dell'immagine forzino l'altezza oltre l'aspect-ratio dichiarato. */
	min-height: 0;
}

/* L'aspect-ratio segue la forma naturale di ciascun asset reale, non una
   griglia arbitraria: due screenshot di siti (16:9) e una locandina
   verticale (4:5) — la varietà nasce dal contenuto, non è decorativa. */
.htmb-proof-card--tre-libretti .htmb-proof-image,
.htmb-proof-card--norcia .htmb-proof-image {
	aspect-ratio: 16 / 9;
}

.htmb-proof-card--ranieri .htmb-proof-image {
	aspect-ratio: 4 / 5;
}

.htmb-proof-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Solo su dispositivi con hover reale (mouse): il cursore suggerisce che
   l'immagine si può ingrandire. Su touch resta un'immagine normale. */
@media (hover: hover) and (pointer: fine) {
	.htmb-proof-image {
		cursor: zoom-in;
	}
}

/* ==================== ANTEPRIMA IMMAGINE (hover "toast") ==================== */

.htmb-image-preview {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 60;
	max-width: min(70vw, 640px);
	max-height: 70vh;
	pointer-events: none;
	opacity: 0;
	transform: translate(-50%, -50%) scale(0.96);
	transition: opacity 0.35s ease, transform 0.35s ease;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 20px 60px rgba(15, 23, 42, 0.35);
	background: var(--htmb-ls-surface);
}

.htmb-image-preview.is-visible {
	opacity: 1;
	transform: translate(-50%, -50%) scale(1);
}

.htmb-image-preview img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

@media (prefers-reduced-motion: reduce) {
	.htmb-image-preview {
		transition: opacity 0.15s linear;
		transform: translate(-50%, -50%);
	}
}

/* Niente anteprima flottante su touch: non esiste un "hover" da intercettare
   e occuperebbe spazio prezioso senza un vero valore. */
@media (hover: none) {
	.htmb-image-preview {
		display: none;
	}
}

.htmb-proof-body {
	padding: var(--htmb-ls-space-lg);
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.htmb-proof-body h3 {
	font-size: 1.15rem;
	margin: 0 0 0.5rem;
}

.htmb-proof-body p {
	margin: 0;
	font-size: 1rem;
	max-width: none;
}

.htmb-proof-body strong {
	color: var(--htmb-ls-ink);
}

/* ==================== PROCESSO ==================== */

.htmb-servizi-process h2 {
	margin-bottom: var(--htmb-ls-space-xl);
}

.htmb-process-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--htmb-ls-space-xl);
}

.htmb-process-list li {
	display: flex;
	gap: var(--htmb-ls-space-base);
	align-items: flex-start;
}

.htmb-process-number {
	flex: none;
	width: 2.5rem;
	height: 2.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--htmb-ls-primary-dark);
	color: #fff;
	font-weight: 700;
	font-family: 'Poppins', sans-serif;
}

.htmb-process-list h3 {
	font-size: 1.1rem;
	margin: 0 0 0.35rem;
}

.htmb-process-list p {
	margin: 0;
	font-size: 1rem;
	max-width: none;
}

/* ==================== FORM ==================== */

.htmb-servizi-form h2 {
	text-align: center;
	margin-bottom: 0.5rem;
}

.htmb-servizi-form-note {
	text-align: center;
	color: var(--htmb-ls-ink-muted);
	margin: 0 auto var(--htmb-ls-space-xl);
}

.htmb-servizi-form-wrapper {
	max-width: 860px;
	margin: 0 auto;
	padding: clamp(1.5rem, 4vw, 3rem);
	border: 1px solid var(--htmb-ls-border);
	border-radius: 16px;
	background: var(--htmb-ls-surface);
	box-shadow: 0 18px 48px rgba(15, 23, 42, 0.12);
}

/* Specificità: alcune regole globali del tema per WPForms (definite senza
   scoping su .wpforms-form / .wpforms-submit-container) hanno più classi
   nel selettore delle nostre regole precedenti e vincevano nonostante il
   nostro file si carichi dopo. Includiamo qui gli stessi contenitori reali
   del markup (.wpforms-field, .wpforms-submit-container) per pareggiare
   o superare quella specificità. */

.htmb-servizi-form-wrapper .wpforms-field {
	margin-bottom: 1.75rem;
}

/* La maggior parte dei campi di questo form ha l'etichetta nascosta
   apposta (solo screen reader, wpforms-label-hide) — è così anche nella
   pagina Contattami esistente, non lo forziamo a cambiare. Questa regola
   si applica di fatto solo al campo "Argomento", l'unico con etichetta
   visibile. */
.htmb-servizi-form-wrapper .wpforms-field-label {
	color: var(--htmb-ls-ink);
	font-weight: 600;
	margin-bottom: 0.6rem;
}

/* !important qui è deliberato: il JS "Material Design" del tema (Hestia)
   converte automaticamente ogni input con classe .form-control (aggiunta
   da WPForms) in uno stile a sola sottolineatura, iniettando un <style>
   con selettori del tipo "div.wpforms-container .wpforms-form
   input[type=text].form-control" — più specifico dei nostri e rigenerato
   via JS, quindi non possiamo contare sull'ordine di caricamento né
   vincere solo aumentando la specificità in modo stabile nel tempo.
   Alcune di quelle regole usano ANCHE !important sul border (border-width/
   style/color separati): a parità di !important vince chi ha più elementi
   nel selettore, quindi includiamo anche .wpforms-form nella catena.
   Proprietà scritte per esteso (background-color / background-image
   separati, non la shorthand "background") per evitare che il minificatore
   del sito le fonda in modo scorretto, come successo sul bottone Invia. */
.htmb-servizi-form-wrapper .wpforms-form .wpforms-field input[type="text"],
.htmb-servizi-form-wrapper .wpforms-form .wpforms-field input[type="email"],
.htmb-servizi-form-wrapper .wpforms-form .wpforms-field textarea,
.htmb-servizi-form-wrapper .wpforms-form .wpforms-field select,
.htmb-servizi-form-wrapper .wpforms-form .wpforms-field .choices__inner {
	width: 100% !important;
	min-height: 52px !important;
	padding: 0.9rem 1rem !important;
	border-width: 2px !important;
	border-style: solid !important;
	border-color: var(--htmb-ls-border) !important;
	border-radius: 12px !important;
	background-color: var(--htmb-ls-surface) !important;
	background-image: none !important;
	box-shadow: none !important;
	color: var(--htmb-ls-ink) !important;
	font-size: 1rem !important;
	line-height: 1.5 !important;
	float: none !important;
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.htmb-servizi-form-wrapper .wpforms-field input::placeholder,
.htmb-servizi-form-wrapper .wpforms-field textarea::placeholder {
	color: var(--htmb-ls-ink-muted);
	opacity: 1;
}

.htmb-servizi-form-wrapper .wpforms-form .wpforms-field textarea {
	min-height: 160px !important;
	resize: vertical;
}

.htmb-servizi-form-wrapper .wpforms-form .wpforms-field input:focus,
.htmb-servizi-form-wrapper .wpforms-form .wpforms-field textarea:focus,
.htmb-servizi-form-wrapper .wpforms-form .wpforms-field select:focus,
.htmb-servizi-form-wrapper .wpforms-form .wpforms-field .choices.is-focused .choices__inner,
.htmb-servizi-form-wrapper .wpforms-form .wpforms-field .choices.is-open .choices__inner {
	border-width: 2px !important;
	border-style: solid !important;
	border-color: var(--htmb-ls-primary) !important;
	background-image: none !important;
	outline: 3px solid rgba(233, 30, 99, 0.22);
	outline-offset: 2px;
	box-shadow: 0 0 0 4px rgba(233, 30, 99, 0.1) !important;
}

/* ==================== REVEAL ON SCROLL ==================== */
/* Il contenuto è visibile di default (nessun JS = nessuna sorpresa: tutto
   c'è già). Solo se landing-servizi.js riesce ad "armare" un elemento
   (classe .htmb-reveal-armed, aggiunta via JS PRIMA di osservarlo) quel
   singolo elemento passa per uno stato nascosto in attesa dell'ingresso in
   viewport. Se il JS non parte (bloccato, errore, screenshot headless),
   niente resta bianco. */

@media (prefers-reduced-motion: no-preference) {
	.htmb-servizi [data-htmb-reveal].htmb-reveal-armed {
		opacity: 0;
		transform: translateY(16px);
		transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
	}

	.htmb-servizi [data-htmb-reveal].htmb-reveal-armed.is-visible {
		opacity: 1;
		transform: none;
	}

	/* Stagger: le liste rivelano un elemento dopo l'altro, non tutte insieme */
	.htmb-servizi-grid .htmb-service-card:nth-child(1) { transition-delay: 0ms; }
	.htmb-servizi-grid .htmb-service-card:nth-child(2) { transition-delay: 80ms; }
	.htmb-servizi-grid .htmb-service-card:nth-child(3) { transition-delay: 160ms; }
	.htmb-servizi-grid .htmb-service-card:nth-child(4) { transition-delay: 240ms; }

	.htmb-proof-grid .htmb-proof-card:nth-child(1) { transition-delay: 0ms; }
	.htmb-proof-grid .htmb-proof-card:nth-child(2) { transition-delay: 100ms; }
	.htmb-proof-grid .htmb-proof-card:nth-child(3) { transition-delay: 200ms; }

	.htmb-process-list li:nth-child(1) { transition-delay: 0ms; }
	.htmb-process-list li:nth-child(2) { transition-delay: 100ms; }
	.htmb-process-list li:nth-child(3) { transition-delay: 200ms; }
}

/* ==================== RESPONSIVE ==================== */

@media (max-width: 991px) {
	.htmb-servizi-boundary-grid {
		grid-template-columns: 1fr;
	}

	.htmb-proof-grid {
		grid-template-columns: 1fr;
	}

	.htmb-process-list {
		grid-template-columns: 1fr;
		gap: var(--htmb-ls-space-lg);
	}
}

@media (max-width: 600px) {
	.htmb-servizi-grid {
		grid-template-columns: 1fr;
	}
}

/* ==================== FIX ELEMENTI GLOBALI SU QUESTA PAGINA ==================== */
/* Il pulsante "torna su" del tema (fixed bottom-right) si sovrappone al
   badge reCAPTCHA v3 del form (anch'esso fixed bottom-right). Su questa
   pagina soltanto, alziamo il torna-su per liberare lo spazio del badge,
   restando comunque nell'angolo dove l'utente se lo aspetta — non
   tocchiamo lo stile globale usato altrove. */
body.page-template-page-templates-template-servizi-php .htmb-back-to-top,
body.page-template-template-servizi-php .htmb-back-to-top {
	bottom: 100px;
}