/* sv-theme — pagina «Clinn Care pazienti» (template-care-pazienti.php). */

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.cp-fascia { padding: 88px 0; scroll-margin-top: 90px; }
.cp-apertura { padding-top: 48px; }

.cp-griglia {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	gap: 72px;
	align-items: center;
}
.cp-griglia--inversa { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); }
.cp-testo { max-width: 600px; }

.cp-titolo-grande { margin-top: 18px; font-size: 60px; }

.cp-paragrafi p { margin: 0; }
.cp-paragrafi { margin-top: 20px; display: flex; flex-direction: column; gap: 14px; }
.cp-paragrafi .body { font-size: 16.5px; }

/* Le illustrazioni della piattaforma hanno già la loro cornice: qui solo
   dimensione, angoli e ombra. */
.cp-visual { display: flex; justify-content: center; }
.cp-figura { margin: 0; width: 100%; max-width: 440px; }
.cp-figura img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 24px;
	box-shadow: 0 24px 48px -18px rgba(20, 32, 31, 0.28);
}
.cp-visual--centro { margin-top: 48px; }
.cp-visual--centro .cp-figura { max-width: 480px; }

.cp-elenco {
	list-style: none;
	margin: 22px 0 0;
	padding: 0;
	border-top: 1px solid var(--ink-100);
}
.cp-elenco li {
	position: relative;
	padding: 13px 0 13px 22px;
	border-bottom: 1px solid var(--ink-100);
	font-weight: 500;
	color: var(--ink-900);
}
.cp-elenco li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 50%;
	width: 7px;
	height: 7px;
	margin-top: -3.5px;
	border-radius: 50%;
	background: var(--sage-600);
}
.cp-chiusura { margin-top: 20px; font-size: 16.5px; }

.cp-centrato { max-width: 760px; margin: 0 auto; text-align: center; }

.cp-fasi {
	list-style: none;
	margin: 48px 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 36px;
	counter-reset: fase;
}
.cp-fase {
	position: relative;
	padding: 26px 20px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	text-align: center;
}
.cp-fase strong { font-size: 16px; color: var(--ink-900); }
/* Freccia fra una fase e la successiva. */
.cp-fase + .cp-fase::before {
	content: "→";
	position: absolute;
	left: -28px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--ink-200);
	font-size: 20px;
}
.cp-icona {
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: var(--sage-100);
	color: var(--sage-600);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 6px;
}
.cp-nota { max-width: 860px; margin: 32px auto 0; text-align: center; }

.cp-fine { padding: 88px 0; }
.cp-login { margin-top: 22px; }
.cp-login a { color: #fff; border-bottom: 1px solid rgba(255, 255, 255, 0.45); margin-left: 4px; }
.cp-login a:hover { border-bottom-color: #fff; }

@media (max-width: 1200px) {
	.cp-titolo-grande { font-size: 50px; }
}

@media (max-width: 960px) {
	.cp-fascia { padding: 64px 0; }
	.cp-griglia,
	.cp-griglia--inversa { grid-template-columns: minmax(0, 1fr); gap: 40px; }
	/* Su tablet e telefono l'immagine sta SOPRA il testo, come in tutte le
	   sezioni «foto + testo» del sito (scelta dell'utente, 29 set 2026). Resta
	   sotto solo nell'apertura, dove il titolo della pagina viene prima. */
	.cp-fascia:not(.cp-apertura) .cp-griglia > .cp-visual { order: -1; }
	.cp-apertura .cp-griglia > .cp-visual { order: 2; }
	.cp-testo { max-width: none; }
	.cp-figura { max-width: 380px; }
	.cp-fasi { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
	.cp-fase + .cp-fase::before { display: none; }
}

@media (max-width: 640px) {
	.cp-fascia { padding: 52px 0; }
	.cp-apertura { padding-top: 28px; }
	.cp-titolo-grande { font-size: 38px; }
	.cp-figura { max-width: 320px; }
	.cp-fasi { grid-template-columns: minmax(0, 1fr); gap: 12px; }
	/* Icona a sinistra, titolo e testo a destra. */
	.cp-fase {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		column-gap: 14px;
		row-gap: 2px;
		align-items: center;
		text-align: left;
		padding: 16px 18px;
	}
	.cp-fase .cp-icona { grid-row: span 2; margin: 0; }
	.cp-nota { text-align: left; }
	.cp-centrato { text-align: left; }
}