/* ==========================================================================
   Caratteristiche e FAQ
   ==========================================================================
   Due componenti delle pagine di presentazione (oggi Servizi), dai
   riferimenti features-4 e faqs-1 scelti da Daniele.
   Spec 2026-09-27-larghezze-e-componenti, §4.4 e §4.5.
   ========================================================================== */

/* --- Testata di sezione --------------------------------------------------- */

.htmb-sezione-testata {
	margin-bottom: clamp(2.5rem, 2rem + 2vw, 4rem);
}

.htmb-sezione-testata--centro {
	text-align: center;
}

.htmb-sezione-testata h2 {
	margin: 0;
}

.htmb-occhiello {
	display: block;
	margin-bottom: 0.9rem;
	color: var(--htmb-ink-tenue);
	font-family: var(--htmb-font-ui);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.htmb-sezione-testata .htmb-sezione-intro {
	max-width: 60ch;
	margin: 1rem 0 0;
	color: var(--htmb-ink-tenue);
	font-size: 1.08rem;
}

.htmb-sezione-testata--centro .htmb-sezione-intro {
	margin-inline: auto;
}

/* --- Caratteristiche: colonne a filo dentro il telaio ---------------------
   Divisori verticali fra le colonne, con una crocetta in cima a ognuno.
   4 colonne, 2 sotto i 1024px, 1 sotto i 640. La variante --3 (il processo)
   passa direttamente da 3 a 1. */

.htmb-caratteristiche {
	display: grid;
	grid-template-columns: repeat(var(--htmb-colonne, 4), minmax(0, 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
	background-color: var(--htmb-superficie);
}

.htmb-caratteristiche--3 {
	--htmb-colonne: 3;
}

.htmb-caratteristica {
	position: relative;
	margin: 0;
	padding: clamp(1.5rem, 1rem + 1.2vw, 2.4rem);
}

.htmb-caratteristica + .htmb-caratteristica {
	border-left: 1px solid var(--htmb-bordo);
}

.htmb-caratteristica + .htmb-caratteristica::before {
	content: "";
	position: absolute;
	top: -6px;
	left: -6px;
	width: 11px;
	height: 11px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11'%3E%3Cpath d='M5.5 0v11M0 5.5h11' stroke='%2394a3b8'/%3E%3C/svg%3E");
}

.htmb-caratteristica-icona {
	display: grid;
	place-items: center;
	width: 2.6rem;
	height: 2.6rem;
	margin-bottom: 1.6rem;
	border: 1px solid var(--htmb-bordo);
	border-radius: 0.6rem;
	background-color: var(--htmb-superficie);
	color: var(--htmb-ink);
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}

.htmb-caratteristica-icona svg {
	width: 1.2rem;
	height: 1.2rem;
}

.htmb-caratteristica-numero {
	display: block;
	margin-bottom: 1.4rem;
	color: var(--htmb-firma);
	font-family: var(--htmb-font-ui);
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.1em;
}

.htmb-caratteristica h3 {
	margin: 0 0 0.6rem;
	font-size: 1.1rem;
	font-weight: 500;
	line-height: 1.3;
}

.htmb-caratteristica p {
	max-width: none;
	margin: 0;
	color: var(--htmb-ink-tenue);
	font-size: 0.95rem;
}

@media (max-width: 1023.98px) {
	.htmb-caratteristiche {
		--htmb-colonne: 2;
	}

	.htmb-caratteristica:nth-child(odd) {
		border-left: 0;
	}

	.htmb-caratteristica:nth-child(odd)::before {
		display: none;
	}

	.htmb-caratteristica:nth-child(n + 3) {
		border-top: 1px solid var(--htmb-bordo);
	}

	.htmb-caratteristiche--3 {
		--htmb-colonne: 1;
	}

	.htmb-caratteristiche--3 .htmb-caratteristica + .htmb-caratteristica {
		border-left: 0;
		border-top: 1px solid var(--htmb-bordo);
	}

	.htmb-caratteristiche--3 .htmb-caratteristica::before {
		display: none;
	}
}

@media (max-width: 639.98px) {
	.htmb-caratteristiche {
		--htmb-colonne: 1;
	}

	.htmb-caratteristica + .htmb-caratteristica {
		border-left: 0;
		border-top: 1px solid var(--htmb-bordo);
	}

	.htmb-caratteristica::before {
		display: none;
	}
}

/* --- FAQ: un riquadro, divisori, <details> nativo -------------------------
   Accessibile da tastiera senza JavaScript; la freccia gira con translate e
   rotate, mai con il margine (niente ricalcolo del layout). */

.htmb-faq-blocco {
	width: min(100%, 52rem);
	margin-inline: auto;
}

.htmb-faq {
	overflow: hidden;
	border: 1px solid var(--htmb-bordo);
	border-radius: 0.9rem;
	background-color: var(--htmb-superficie);
}

.htmb-faq details + details {
	border-top: 1px solid var(--htmb-bordo);
}

.htmb-faq summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.15rem 1.4rem;
	color: var(--htmb-ink);
	font-family: var(--htmb-font-titoli);
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.4;
	cursor: pointer;
	list-style: none;
}

.htmb-faq summary::-webkit-details-marker {
	display: none;
}

.htmb-faq summary::after {
	content: "";
	flex: none;
	width: 0.55rem;
	height: 0.55rem;
	border-right: 1.5px solid var(--htmb-ink-tenue);
	border-bottom: 1.5px solid var(--htmb-ink-tenue);
	translate: 0 -0.15rem;
	rotate: 45deg;
	transition: rotate 240ms ease, translate 240ms ease;
}

.htmb-faq details[open] summary::after {
	translate: 0 0.15rem;
	rotate: 225deg;
}

.htmb-faq summary:hover {
	background-color: var(--htmb-superficie-tinta);
}

.htmb-faq summary:focus-visible {
	outline: 2px solid var(--htmb-accento);
	outline-offset: -2px;
}

.htmb-faq details p {
	max-width: 68ch;
	margin: 0;
	padding: 0 1.4rem 1.3rem;
	color: var(--htmb-ink-tenue);
}

.htmb-faq-nota {
	margin: 1.5rem 0 0;
	color: var(--htmb-ink-tenue);
}

.htmb-faq-nota a {
	color: var(--htmb-ink);
	font-weight: 500;
}

@media (prefers-reduced-motion: reduce) {
	.htmb-faq summary::after {
		transition: none;
	}
}