/**
 * 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: var(--htmb-ink);
	--htmb-ls-ink-secondary: var(--htmb-ink-2);
	--htmb-ls-ink-muted: var(--htmb-ink-tenue);
	--htmb-ls-surface: var(--htmb-superficie);
	--htmb-ls-surface-tint: aliceblue;
	--htmb-ls-border: var(--htmb-bordo);
	--htmb-ls-seam: rgba(15, 23, 42, 0.08);
	--htmb-ls-primary: var(--htmb-accento);
	--htmb-ls-primary-dark: var(--htmb-accento-scuro);

	--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 {
	/* Lo stesso contenitore della barra: stesso bordo sinistro (spec
	   2026-09-27, L4). Prima 1200px con un padding proprio, 10px fuori asse. */
	width: min(100% - 2 * var(--htmb-margine), var(--htmb-largo));
	margin-inline: auto;
}

.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: color-mix(in srgb, var(--htmb-accento) 45%, transparent);
	color: #ffffff;
	text-shadow: none;
}

/* ==================== SERVIZI ==================== */
/* Colonne nel telaio: componenti/caratteristiche.css e componenti/telaio.css.
   Qui solo il fondo della sezione. */

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

/* ==================== 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 E FAQ ==================== */
/* Il processo usa lo stesso componente dei servizi, su fondo tinto; le FAQ
   sono in componenti/caratteristiche.css. */

.htmb-servizi-process {
	background: var(--htmb-superficie-tinta);
}

/* ==================== FORM ==================== */
/* Il modulo e' lo stesso di /contattami/: campi in componenti/moduli.css,
   bottone in componenti/cta.css, cornice nel telaio. Le vecchie regole con
   !important servivano contro il JavaScript "Material" di Hestia, che col
   tema nuovo non c'e' piu'. */

.htmb-servizi-form {
	background: var(--htmb-superficie-tinta);
}

.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 {
	width: min(100%, 44rem);
	margin: 0 auto;
	padding: clamp(1.4rem, 1rem + 1.5vw, 2.4rem);
	background: var(--htmb-ls-surface);
}

/* ==================== 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-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; }
}

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

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

	.htmb-proof-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-torna-su,
body.page-template-template-servizi-php .htmb-torna-su {
	bottom: 100px;
}