/* ==========================================================================
   ZONA 5 — «artigiani»: la scheda del professionista.
   Vestito minimo: ogni colore viene da assets/css/radar.css (già accodato
   prima di questo foglio, `templates/cerca.php`, foreach dei fogli-zona),
   quindi qui non si ridefinisce nessun token e il tema scuro si eredita da
   solo — niente light-dark() locale, non c'è nessun colore nuovo da coprire.
   `.pillola`, `.pillola--servizi`, `.pillola__segno`, `.pulsante`,
   `.pulsante--quieto` e `.contenitore` sono di `radar.css`: qui non si
   riscrivono.
   ========================================================================== */

.artigiani {
	padding-block: clamp(48px, 7vh, 88px);
}

.artigiani__testa {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: clamp(20px, 4vw, 48px);
	margin-block-end: clamp(32px, 5vh, 56px);
}

.artigiani__testa-blocco {
	flex: 1 1 420px;
	min-width: 0;
}

.artigiani__occhiello {
	display: flex;
	align-items: center;
	gap: 11px;
	margin: 0 0 14px;
	font: 500 .875rem/1 var(--font);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--marchio);
}

.artigiani__occhiello::before {
	content: "";
	display: inline-block;
	width: 24px;
	height: 1px;
	background: var(--marchio);
}

.artigiani__titolo {
	margin: 0;
	max-width: 14em;
	font: 400 clamp(1.65rem, 3.2vw, 2.8rem) / 1.08 var(--font-titolo);
	letter-spacing: -.02em;
}

.artigiani__titolo em {
	font-style: italic;
	color: var(--marchio);
}

.artigiani__lead {
	margin: 0;
	flex: 1 1 320px;
	max-width: 27em;
	min-width: 0;
	font-size: 1rem;
	line-height: 1.65;
	color: var(--testo-2);
}

.artigiani__vuoto {
	max-width: 36em;
	color: var(--testo-2);
	line-height: 1.65;
}

/* --------------------------------------------------------------------------
   Le due colonne — il telefono a sinistra, i fatti a destra. Una colonna
   sola sotto i 60rem, come il resto del tema (radar.css riga 878).
   -------------------------------------------------------------------------- */

.artigiani__corpo {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(28px, 4vw, 56px);
	align-items: start;
}

.artigiani__corpo > * {
	min-width: 0;
}

@media (min-width: 60rem) {
	.artigiani__corpo {
		grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
	}
}

/* --------------------------------------------------------------------------
   Il mockup del telefono: una cornice, dentro l'anteprima della scheda vera.
   -------------------------------------------------------------------------- */

.artigiani__telefono {
	justify-self: center;
	width: 100%;
	max-width: 22.5rem;
	padding: 14px;
	background: var(--superficie);
	border: 1px solid var(--bordo);
	border-radius: 28px;
	box-shadow: var(--ombra);
}

.artigiani__schermo {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 22px 18px 24px;
	background: var(--fondo);
	border: 1px solid var(--bordo);
	border-radius: 18px;
	overflow: hidden;
}

.artigiani__schermo .pillola {
	align-self: flex-start;
}

.artigiani__scheda-nome {
	margin: 0;
	font-size: 1.3rem;
	font-weight: 600;
	line-height: 1.2;
	overflow-wrap: break-word;
}

.artigiani__scheda-sub {
	margin: 0;
	color: var(--testo-2);
	font-size: .95rem;
	overflow-wrap: break-word;
}

.artigiani__scheda-piva {
	margin: 0;
	font-size: .85rem;
	color: var(--testo-2);
}

.artigiani__scheda-piva strong {
	color: var(--verificato);
	font-weight: 600;
}

.artigiani__recapiti {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding-block: 14px;
	list-style: none;
	border-block: 1px solid var(--bordo);
}

.artigiani__recapiti li {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 6px 12px;
	font-size: .875rem;
}

.artigiani__recapiti li > span:first-child {
	color: var(--testo-2);
	flex-shrink: 0;
}

.artigiani__recapiti li > span:last-child,
.artigiani__recapiti li > a {
	overflow-wrap: anywhere;
	text-align: right;
}

.artigiani__recapiti a {
	color: var(--azione);
	text-decoration: none;
}

.artigiani__recapiti a:hover {
	text-decoration: underline;
}

.artigiani__azioni {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.artigiani__azioni .pulsante {
	justify-content: center;
	width: 100%;
	min-height: 44px;
	text-align: center;
}

/* --------------------------------------------------------------------------
   La colonna destra: il testo e i quattro riquadri dei fatti veri.
   -------------------------------------------------------------------------- */

.artigiani__note h3 {
	margin: 0 0 12px;
	font: 400 clamp(1.1rem, 1.6vw, 1.5rem) / 1.2 var(--font-titolo);
}

.artigiani__note > p {
	margin: 0 0 24px;
	max-width: 30em;
	color: var(--testo-2);
	line-height: 1.65;
}

.artigiani__fatti {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.artigiani__fatto {
	min-width: 0;
	padding: 16px 18px;
	background: var(--superficie);
	border: 1px solid var(--bordo);
	border-radius: var(--raggio-grande, 18px);
}

.artigiani__fatto-etichetta {
	display: block;
	margin-bottom: 6px;
	font-size: .75rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--testo-2);
}

.artigiani__fatto-valore {
	display: block;
	font-size: 1.05rem;
	font-weight: 600;
	overflow-wrap: break-word;
}

/* --------------------------------------------------------------------------
   La fascia in fondo: tre card vere, o meno se il catalogo ne ha meno.
   -------------------------------------------------------------------------- */

.artigiani__fascia {
	margin-block-start: clamp(56px, 7vh, 96px);
	padding-block-start: clamp(40px, 5vh, 64px);
	border-top: 1px solid var(--bordo);
}

.artigiani__fascia-testa {
	margin-block-end: 24px;
}

.artigiani__fascia-testa h3 {
	margin: 0 0 8px;
	font: 400 clamp(1.3rem, 2vw, 1.7rem) / 1.15 var(--font-titolo);
}

.artigiani__fascia-testa p {
	margin: 0;
	max-width: 40em;
	color: var(--testo-2);
	line-height: 1.6;
}

.artigiani__carte {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(16px, 2vw, 24px);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (max-width: 59.999rem) {
	.artigiani__carte {
		grid-template-columns: 1fr;
	}
}

.artigiani__carta {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	min-width: 0;
	padding: 20px;
	background: var(--superficie);
	border: 1px solid var(--bordo);
	border-radius: var(--raggio-grande, 18px);
}

.artigiani__carta h4 {
	margin: 4px 0 0;
	font-size: 1.05rem;
	overflow-wrap: break-word;
}

.artigiani__carta p {
	margin: 0;
	color: var(--testo-2);
	font-size: .9rem;
	overflow-wrap: break-word;
}

.artigiani__vedi {
	margin-top: auto;
	padding-top: 8px;
	font-weight: 600;
	color: var(--azione);
	text-decoration: none;
}

.artigiani__vedi:hover {
	text-decoration: underline;
}