/* ==========================================================================
   Recapiti della pagina contatti
   ==========================================================================
   Tre modi per farsi trovare, accanto al form. Su desktop stanno in riga,
   sotto i 768.98px passano in colonna e precedono il form: chi apre questa
   pagina dal telefono di solito vuole chiamare, e non deve scorrere sei campi
   per scoprirlo.

   Spec: docs/superpowers/specs/2026-08-06-pagine-servizio-de-elementor-design.md
   ========================================================================== */

.htmb-recapiti {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: clamp(1rem, 2.5vw, 2rem);
	margin-bottom: clamp(2rem, 4vw, 3rem);
	padding: clamp(1.25rem, 2.5vw, 1.75rem);
	background-color: #f7fafc;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
}

.htmb-recapito h3 {
	margin: 0 0 0.35rem;
	font-family: 'Inter', sans-serif;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #64748b;
}

.htmb-recapito p {
	margin: 0;
	font-family: 'Inter', sans-serif;
	font-size: 1.125rem;
	line-height: 1.4;
	color: #0f172a;
}

/* Area di tocco piena: un numero di telefono che si manca al primo tentativo
   e' un contatto perso. */
.htmb-recapito a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: #0f172a;
	text-decoration: none;
	border-bottom: 2px solid transparent;
	transition: color 0.2s ease, border-color 0.2s ease;
}

.htmb-recapito a:hover,
.htmb-recapito a:focus-visible {
	color: #e91e63;
	border-bottom-color: currentColor;
}

.htmb-recapito-nota {
	margin-top: 0.15rem;
	font-size: 0.875rem;
	color: #64748b;
}

.htmb-contatti-nota {
	margin: -1rem 0 clamp(2rem, 4vw, 3rem);
	font-size: 0.875rem;
	color: #64748b;
}