/* Screening S.I.A.M.O. — presentazione del percorso, del pannello e del risultato.
 *
 * Porting del prototipo approvato (concept "Galassia interiore", registro caldo).
 * Due regole di progetto governano questo file:
 *   1. i selettori hanno SEMPRE due classi (.imo-scr .imo-scr__x) perché il kit
 *      Elementor colpisce con `.elementor-kit-6 button/h2/h3/ul`, che a una sola
 *      classe vincerebbe (trappola ricorrente: gotcha 6.32-6.34, 6.37, 6.61);
 *   2. le misure di testo sono in rem, mai in px (gotcha 6.30), e nessun testo
 *      scende sotto 0.9rem (14.4px) — WCAG è golden rule su questo progetto.
 * Sui bottoni si azzerano esplicitamente background-image e box-shadow: il kit
 * inietta gradiente e alone che il solo background-color non sovrascrive.
 */

.imo-scr {
	--imo-scr-blu: #004B87;
	--imo-scr-scuro: #082B3B;
	--imo-scr-scuro2: #0C3D4F;
	--imo-scr-arancio: #D37A21;
	--imo-scr-arancio-chiaro: #F2A65A;
	--imo-scr-arancio-testo: #B04F00;
	--imo-scr-verde: #1CC691;
	--imo-scr-verde-testo: #0E6E5C;
	--imo-scr-carta: #F4F0E8;
	--imo-scr-carta2: #EFE9DF;
	--imo-scr-salvia: #56755C;
	--imo-scr-salvia-chiara: #A9C4B4;
	--imo-scr-tan: #8A5A21;
	--imo-scr-oro: #E8C27A;
	--imo-scr-caldo: #2B2621;
	--imo-scr-caldo-soft: #5A4A33;
	--imo-scr-testo: #1B2A33;
	--imo-scr-chiaro-su-scuro: #C9D4DC;
	/* Sostituita dallo shortcode con l'immagine scelta per lo sfondo del risultato. */
	--imo-scr-cielo: none;

	color: var(--imo-scr-testo);
	font-size: 1.0625rem;
	line-height: 1.65;
}

.imo-scr .imo-scr__flow {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 330px;
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: start;
}

@media (max-width: 1000px) {
	.imo-scr .imo-scr__flow {
		grid-template-columns: minmax(0, 1fr);
	}
}

.imo-scr .imo-scr__col {
	min-width: 0;
}

.imo-scr .imo-scr__eyebrow {
	font-size: 0.9rem;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-weight: 500;
	margin: 0;
}

/* ---------- rail delle tappe ---------- */

.imo-scr .imo-scr__rail {
	position: relative;
}

.imo-scr .imo-scr__helix {
	position: absolute;
	left: 0;
	top: 0;
	width: 150px;
	height: 100%;
	overflow: visible;
	pointer-events: none;
}

.imo-scr .imo-scr__step {
	position: relative;
	display: grid;
	grid-template-columns: 150px minmax(0, 1fr);
	gap: 0.2rem;
	padding-bottom: 3rem;
	animation: imo-scr-rise 0.5s ease both;
}

@keyframes imo-scr-rise {
	from { opacity: 0; transform: translateY(20px); }
	to   { opacity: 1; transform: none; }
}

.imo-scr .imo-scr__dot {
	position: relative;
	z-index: 1;
	width: 150px;
	display: flex;
	justify-content: center;
	padding-top: 1.4rem;
}

.imo-scr .imo-scr__dot i {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, #FBE7C2, #E1B36B 60%, #B98440);
	border: 2px solid #FFF7E8;
	display: grid;
	place-items: center;
	font-family: Arapey, Georgia, serif;
	font-size: 1.3rem;
	font-style: normal;
	/* Inchiostro scuro in entrambi gli stati: il numero è testo, e il bianco del
	   prototipo su questo oro chiaro stava a 1.4:1 (l'ombra del testo non conta
	   per il calcolo WCAG). Qui il caso peggiore è il fermo più scuro del
	   gradiente, #B98440, contro cui questo inchiostro dà 5.5:1. */
	color: #241505;
	transition: all 0.3s;
	box-shadow: 0 0 0 6px var(--imo-scr-carta), 0 0 26px 8px rgba(232, 194, 122, 0.6);
}

.imo-scr .imo-scr__step.is-current .imo-scr__dot i {
	box-shadow: 0 0 0 6px var(--imo-scr-carta), 0 0 40px 14px rgba(242, 196, 120, 0.85);
}

/* La tappa già data si distingue per l'oro più pieno, il bordo più caldo e
   l'alone spento — non per l'inversione del testo, che costava il contrasto. */
.imo-scr .imo-scr__step.is-done .imo-scr__dot i {
	background: radial-gradient(circle at 35% 30%, #F6E3C0, #D9B47D 60%, #C08D4A);
	border-color: #E8C27A;
	box-shadow: 0 0 0 6px var(--imo-scr-carta), 0 0 20px 6px rgba(232, 194, 122, 0.45);
}

/* ---------- card della tappa ---------- */

.imo-scr .imo-scr__card {
	position: relative;
	background: #fff;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 16px 40px rgba(90, 70, 40, 0.14);
}

.imo-scr .imo-scr__card::before {
	content: "";
	position: absolute;
	left: -12px;
	top: calc(1.4rem + 14px);
	border: 7px solid transparent;
	border-right-color: #fff;
	border-left: 0;
	z-index: 2;
}

.imo-scr .imo-scr__pic {
	aspect-ratio: 16 / 6;
	position: relative;
	background: var(--imo-scr-scuro2);
}

.imo-scr .imo-scr__pic img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Il soggetto sta appena sopra la mezzeria: con la striscia compatta della
	   tappa già data, un ritaglio centrato taglierebbe i volti. */
	object-position: center 40%;
	display: block;
}

.imo-scr .imo-scr__cap {
	position: absolute;
	left: 1.2rem;
	bottom: 1rem;
	background: rgba(58, 47, 34, 0.82);
	color: #fff;
	font-size: 0.9rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 0.35rem 0.9rem;
	border-radius: 999px;
	font-weight: 500;
	/* Sta dentro la foto anche col testo ingrandito, invece di allungarsi
	   oltre la card: è posizionata in assoluto, quindi il limite va detto. */
	max-width: calc(100% - 2.4rem);
	overflow-wrap: anywhere;
}

.imo-scr .imo-scr__body {
	padding: 1.6rem 1.9rem 1.8rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.imo-scr .imo-scr__q {
	font-family: Arapey, Georgia, serif;
	font-weight: 400;
	font-size: clamp(1.7rem, 3.2vw, 2.3rem);
	line-height: 1.12;
	color: var(--imo-scr-caldo);
	margin: 0;
	/* Con il testo ingrandito al 200% su schermo stretto una parola lunga
	   allargherebbe la card oltre il viewport: meglio spezzarla. */
	overflow-wrap: anywhere;
}

.imo-scr .imo-scr__help {
	color: var(--imo-scr-caldo-soft);
	margin: 0;
}

.imo-scr .imo-scr__opts {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.imo-scr .imo-scr__opts li {
	margin: 0;
	padding: 0;
	list-style: none;
	/* Senza questo tetto la pillola si dimensiona sul testo per intero e sfora
	   la card, che la ritaglia (overflow:hidden): su schermo stretto la risposta
	   risultava tagliata a metà parola. */
	max-width: 100%;
	min-width: 0;
}

.imo-scr .imo-scr__opt {
	display: inline-flex;
	gap: 0.7rem;
	align-items: center;
	text-align: left;
	background: var(--imo-scr-carta2);
	background-image: none;
	box-shadow: none;
	border: 2px solid transparent;
	border-radius: 999px;
	padding: 0.7rem 1.1rem 0.7rem 0.9rem;
	font: inherit;
	font-size: 1rem;
	color: var(--imo-scr-testo);
	cursor: pointer;
	transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.imo-scr .imo-scr__opt:hover {
	border-color: var(--imo-scr-salvia);
	background: #fff;
	color: var(--imo-scr-testo);
}

.imo-scr .imo-scr__opt[aria-checked="true"] {
	border-color: var(--imo-scr-salvia);
	background: var(--imo-scr-salvia);
	color: #fff;
}

/* L'etichetta della risposta è un figlio flex del bottone: senza min-width:0
   non scende sotto la propria larghezza naturale e sfora la card. */
.imo-scr .imo-scr__opt span:not(.imo-scr__radio) {
	min-width: 0;
	overflow-wrap: anywhere;
}

.imo-scr .imo-scr__radio {
	flex: none;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	border: 2px solid var(--imo-scr-salvia);
	display: grid;
	place-items: center;
	background: #fff;
}

.imo-scr .imo-scr__opt[aria-checked="true"] .imo-scr__radio::after {
	content: "";
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--imo-scr-salvia);
}

/* Il fuoco si vede dall'ANELLO, non da un riempimento: la risposta che lo
   riceve non deve sembrare gia scelta (lo stato scelto e verde salvia).
   Il kit Elementor riempie di arancione i button al focus, quindi qui lo stato
   a riposo va ridichiarato per intero — colore di sfondo, gradiente e ombra —
   perche vincere sul solo background-color non basta (stessa trappola dei
   gotcha 6.33 e 6.45). Due classi per superare `.elementor-kit-6 button`. */
.imo-scr .imo-scr__opt:focus,
.imo-scr .imo-scr__opt:focus-visible {
	background: var(--imo-scr-carta2);
	background-image: none;
	box-shadow: none;
	color: var(--imo-scr-testo);
	border-color: transparent;
}

/* La risposta scelta resta salvia anche mentre ha il fuoco. */
.imo-scr .imo-scr__opt[aria-checked="true"]:focus,
.imo-scr .imo-scr__opt[aria-checked="true"]:focus-visible {
	background: var(--imo-scr-salvia);
	background-image: none;
	color: #fff;
	border-color: var(--imo-scr-salvia);
}

/* Col puntatore sopra resta il comportamento di hover, anche se ha il fuoco. */
.imo-scr .imo-scr__opt:focus:hover {
	background: #fff;
	border-color: var(--imo-scr-salvia);
}

.imo-scr .imo-scr__opt[aria-checked="true"]:focus:hover {
	background: var(--imo-scr-salvia);
	color: #fff;
}

.imo-scr .imo-scr__opt:focus-visible,
.imo-scr .imo-scr__edit:focus-visible,
.imo-scr .imo-scr__btn:focus-visible {
	outline: 3px solid var(--imo-scr-arancio-testo);
	outline-offset: 3px;
}

/* ---------- tappa già data: si compatta ---------- */

.imo-scr .imo-scr__step.is-done .imo-scr__opts,
.imo-scr .imo-scr__step.is-done .imo-scr__help {
	display: none;
}

.imo-scr .imo-scr__step.is-done .imo-scr__pic {
	aspect-ratio: 16 / 3.2;
}

.imo-scr .imo-scr__step.is-done .imo-scr__q {
	font-size: 1.05rem;
	font-family: inherit;
	font-weight: 500;
	color: var(--imo-scr-caldo-soft);
	line-height: 1.5;
}

.imo-scr .imo-scr__answer {
	display: none;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
}

.imo-scr .imo-scr__step.is-done .imo-scr__answer {
	display: flex;
}

.imo-scr .imo-scr__answer-testo {
	font-size: 1.55rem;
	font-family: Arapey, Georgia, serif;
	color: var(--imo-scr-caldo);
	line-height: 1.25;
	overflow-wrap: anywhere;
}

.imo-scr .imo-scr__edit {
	background: none;
	background-image: none;
	box-shadow: none;
	border: 0;
	font: inherit;
	font-size: 0.95rem;
	color: var(--imo-scr-tan);
	text-decoration: underline;
	cursor: pointer;
	padding: 0;
	/* Col testo ingrandito «Cambia risposta» su una riga sola supera la card:
	   è un figlio flex, quindi senza min-width:0 non si stringe e viene
	   ritagliato invece di andare a capo. */
	min-width: 0;
	max-width: 100%;
	overflow-wrap: anywhere;
	text-align: left;
}

/* ---------- box "Cosa può dirti" ---------- */

.imo-scr .imo-scr__insight {
	display: none;
	grid-template-columns: auto 1fr;
	gap: 1rem;
	margin-top: 1rem;
	background: #EEF6EE;
	border: 2px solid var(--imo-scr-salvia-chiara);
	border-radius: 16px;
	padding: 1.4rem 1.6rem;
	animation: imo-scr-rise 0.5s 0.1s ease both;
}

.imo-scr .imo-scr__step.is-done .imo-scr__insight {
	display: grid;
}

.imo-scr .imo-scr__insight svg {
	width: 30px;
	height: 30px;
	color: #3F6B52;
	margin-top: 0.1rem;
}

.imo-scr .imo-scr__insight-lbl {
	font-size: 0.9rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #3F6B52;
	font-weight: 600;
	margin: 0 0 0.4rem;
}

.imo-scr .imo-scr__insight-txt {
	color: var(--imo-scr-caldo);
	margin: 0;
}

.imo-scr .imo-scr__insight-doc {
	margin: 0.7rem 0 0;
	color: var(--imo-scr-caldo);
	padding-left: 1rem;
	border-left: 3px solid var(--imo-scr-oro);
}

.imo-scr .imo-scr__insight-doc b {
	color: var(--imo-scr-tan);
	font-weight: 600;
}

/* ---------- il passo avanti ---------- */

/* Compare solo a risposta data: è lui a portare alla tappa successiva, e prende
   il fuoco appena si risponde. Prima la pagina scorreva da sola e la domanda
   nuova finiva sopra il bordo alto dello schermo. */
.imo-scr .imo-scr__next {
	display: none;
	margin: 1.1rem 0 0;
}

.imo-scr .imo-scr__step.is-done .imo-scr__next {
	display: block;
}

/* ---------- pannello del profilo ---------- */

.imo-scr .imo-scr__panel {
	position: sticky;
	top: 1rem;
	background: linear-gradient(180deg, var(--imo-scr-scuro2), var(--imo-scr-scuro));
	color: #fff;
	border-radius: 14px;
	padding: 1.8rem 1.7rem;
	display: flex;
	flex-direction: column;
	gap: 1.1rem;
	box-shadow: 0 16px 40px rgba(8, 43, 59, 0.25);
	border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Dentro il riquadro del risultato il pannello non è più una colonna che
   segue lo scorrimento: sta fermo accanto alle card, su un fondo già scuro,
   quindi gli serve un bordo più netto per staccarsi. */
.imo-scr .imo-scr__panel.is-in-result {
	position: static;
	top: auto;
	margin: 0;
	order: 0;
	padding: 1.4rem 1.3rem;
	border-color: rgba(255, 255, 255, 0.28);
}

.imo-scr .imo-scr__panel.is-in-result .imo-scr__hint {
	display: none;
}

.imo-scr .imo-scr__panel .imo-scr__eyebrow {
	color: var(--imo-scr-verde);
	text-align: center;
}

.imo-scr .imo-scr__ptitle {
	color: #fff;
	font-family: Arapey, Georgia, serif;
	font-weight: 400;
	/* 1.6rem invece di 1.9: il pannello deve stare comodo anche affiancato alle
	   due card del risultato, dove la colonna è più stretta. */
	font-size: 1.6rem;
	line-height: 1.15;
	text-align: center;
	margin: 0;
}

.imo-scr .imo-scr__count {
	color: var(--imo-scr-chiaro-su-scuro);
	text-align: center;
	margin: 0;
}

.imo-scr .imo-scr__count b {
	color: var(--imo-scr-arancio-chiaro);
	font-weight: 600;
}

.imo-scr .imo-scr__bars {
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
}

.imo-scr .imo-scr__grp {
	font-size: 0.9rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--imo-scr-chiaro-su-scuro);
	margin: 0.5rem 0 0.15rem;
}

.imo-scr .imo-scr__bar {
	display: grid;
	/* 8.2rem è la misura dell'etichetta più lunga («Cardiovascolare», 129px):
	   a 118px sbordava e si appiccicava alla barra sui viewport stretti.
	   minmax() le permette comunque di stringersi quando il testo è ingrandito
	   al 200% e lo spazio non basta, invece di schiacciare la barra a zero. */
	grid-template-columns: minmax(0, 8.2rem) 1fr;
	gap: 0.7rem;
	align-items: center;
	font-size: 0.95rem;
	color: #fff;
	overflow-wrap: anywhere;
}

.imo-scr .imo-scr__tr {
	height: 8px;
	background: rgba(255, 255, 255, 0.14);
	border-radius: 4px;
	overflow: hidden;
}

.imo-scr .imo-scr__tr i {
	display: block;
	height: 100%;
	width: 0;
	border-radius: 4px;
	background: linear-gradient(90deg, var(--imo-scr-arancio), var(--imo-scr-arancio-chiaro));
	transition: width 0.5s ease;
	box-shadow: 0 0 10px rgba(242, 166, 90, 0.6);
}

.imo-scr .imo-scr__bar.is-area .imo-scr__tr i {
	background: linear-gradient(90deg, #149C74, var(--imo-scr-verde));
	box-shadow: 0 0 10px rgba(28, 198, 145, 0.6);
}

.imo-scr .imo-scr__bar.is-lead span {
	color: var(--imo-scr-arancio-chiaro);
	font-weight: 600;
}

.imo-scr .imo-scr__bar.is-area.is-lead span {
	color: var(--imo-scr-verde);
	font-weight: 600;
}

.imo-scr .imo-scr__hint {
	font-size: 0.95rem;
	color: var(--imo-scr-chiaro-su-scuro);
	border-top: 1px solid rgba(255, 255, 255, 0.18);
	padding-top: 0.9rem;
	margin: 0;
}

/* Testo destinato solo agli screen reader. */
.imo-scr .imo-scr__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	margin: 0;
}

@media (max-width: 1000px) {
	.imo-scr .imo-scr__panel {
		position: static;
		order: -1;
		margin-bottom: 1.5rem;
	}
	.imo-scr .imo-scr__bars {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0.4rem 1.5rem;
	}
}

@media (max-width: 700px) {
	.imo-scr .imo-scr__step {
		grid-template-columns: 70px minmax(0, 1fr);
	}
	.imo-scr .imo-scr__dot,
	.imo-scr .imo-scr__helix {
		width: 70px;
	}
	.imo-scr .imo-scr__dot i {
		width: 36px;
		height: 36px;
		font-size: 1.1rem;
	}
	.imo-scr .imo-scr__body {
		padding: 1.3rem 1.2rem;
	}
	.imo-scr .imo-scr__opts li {
		flex: 1 1 100%;
	}

	.imo-scr .imo-scr__opt {
		width: 100%;
	}

	/* Su schermo stretto i padding in rem crescono insieme al testo ingrandito e
	   sommandosi, annidamento dopo annidamento, non lasciano più colonna al
	   contenuto. Qui la spaziatura di struttura passa a px: non è testo, non
	   deve scalare col testo, e così il contenuto resta leggibile al 200% senza
	   essere ritagliato. Le dimensioni dei caratteri restano in rem ovunque. */
	.imo-scr .imo-scr__step {
		grid-template-columns: 56px minmax(0, 1fr);
	}

	.imo-scr .imo-scr__dot,
	.imo-scr .imo-scr__helix {
		width: 56px;
	}

	.imo-scr .imo-scr__body {
		padding: 18px 14px;
	}

	.imo-scr .imo-scr__insight {
		grid-template-columns: minmax(0, 1fr);
		gap: 10px;
		padding: 14px 12px;
	}

	.imo-scr .imo-scr__insight-doc {
		padding-left: 12px;
	}

	.imo-scr .imo-scr__rcard,
	.imo-scr .imo-scr__specialist {
		padding: 16px 14px;
	}

	.imo-scr .imo-scr__result {
		padding: 24px 14px;
	}

	.imo-scr .imo-scr__panel {
		padding: 18px 14px;
	}

	/* Anche i gap sono spaziatura di struttura: in rem raddoppiano col testo. */
	.imo-scr .imo-scr__res-layout,
	.imo-scr .imo-scr__res-grid {
		gap: 14px;
	}
}

@media (max-width: 600px) {
	.imo-scr .imo-scr__bars {
		grid-template-columns: 1fr;
	}

	/* Con il testo ingrandito i padding in rem crescono con lui e su schermo
	   stretto mangiano la colonna: qui si stringono. */
	.imo-scr .imo-scr__panel {
		padding: 1.4rem 1.1rem;
	}
}

/* ---------- risultato ---------- */

.imo-scr .imo-scr__result {
	position: relative;
	margin-top: 1rem;
	border-radius: 16px;
	overflow: hidden;
	background-color: var(--imo-scr-scuro);
	background-image: var(--imo-scr-cielo);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	color: #fff;
	padding: clamp(2.4rem, 5vw, 4rem) clamp(1.4rem, 4vw, 3rem);
	animation: imo-scr-rise 0.6s ease both;
}

.imo-scr .imo-scr__result::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(8, 43, 59, 0.94), rgba(8, 43, 59, 0.86));
}

.imo-scr .imo-scr__result-in {
	position: relative;
}

.imo-scr .imo-scr__result .imo-scr__eyebrow {
	/* Il verde pieno del brand su questa velatura si ferma a 4.4:1: qui serve la
	   variante chiara, la stessa usata nell'occhiello della hero. */
	color: #7FE3C0;
}

.imo-scr .imo-scr__result-h {
	color: #fff;
	font-family: Arapey, Georgia, serif;
	font-weight: 400;
	font-size: clamp(2.4rem, 4.8vw, 3.6rem);
	line-height: 1.08;
	margin: 0.4rem 0 0.8rem;
	overflow-wrap: anywhere;
}

.imo-scr .imo-scr__result-lead {
	color: var(--imo-scr-chiaro-su-scuro);
	max-width: 44rem;
	font-size: 1.1rem;
	margin: 0;
}

/* Il risultato è diviso in due colonne: a destra il profilo, in alto e alto
   quanto il suo contenuto; a sinistra le quattro righe (card, vicini per
   punteggio, box dello specialista, bottoni finali). Prima il profilo stava in
   fila con le card e, essendo molto più alto, lasciava sotto di sé un vuoto
   grande quanto la sua altezza. */
.imo-scr .imo-scr__res-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 19rem;
	grid-template-areas:
		"cards profilo"
		"chips profilo"
		"spec  profilo"
		"azioni profilo";
	gap: 1.4rem;
	align-items: start;
	margin: 2.2rem 0 0;
}

.imo-scr .imo-scr__res-grid {
	grid-area: cards;
	display: grid;
	/* minmax(0,…) e non 1fr secco: il minimo di `1fr` è il contenuto, quindi
	   una card con testo lungo allargherebbe la traccia oltre lo schermo. */
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 1.4rem;
	align-items: start;
}

.imo-scr .imo-scr__res-profilo {
	grid-area: profilo;
}

.imo-scr .imo-scr__res-layout .imo-scr__chips {
	grid-area: chips;
}

.imo-scr .imo-scr__res-layout .imo-scr__specialist {
	grid-area: spec;
	margin-top: 0;
	max-width: none;
}

.imo-scr .imo-scr__res-layout .imo-scr__actions {
	grid-area: azioni;
	margin-top: 0;
}

/* Sotto i 1000px si torna a una colonna sola: l'ordine è quello del DOM, cioè
   card, profilo, vicini, specialista, bottoni. */
@media (max-width: 1000px) {
	.imo-scr .imo-scr__res-layout {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"cards"
			"profilo"
			"chips"
			"spec"
			"azioni";
	}
}

@media (max-width: 800px) {
	.imo-scr .imo-scr__res-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

.imo-scr .imo-scr__rcard {
	background: #fff;
	color: var(--imo-scr-testo);
	border-radius: 12px;
	padding: 1.5rem 1.6rem;
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
	border-top: 6px solid var(--imo-scr-arancio);
}

.imo-scr .imo-scr__rcard.is-area {
	border-top-color: var(--imo-scr-verde);
}

.imo-scr .imo-scr__tag {
	font-size: 0.9rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--imo-scr-arancio-testo);
	margin: 0;
}

.imo-scr .imo-scr__rcard.is-area .imo-scr__tag {
	color: var(--imo-scr-verde-testo);
}

.imo-scr .imo-scr__rcard-h {
	color: var(--imo-scr-blu);
	font-family: Arapey, Georgia, serif;
	font-weight: 400;
	font-size: 1.7rem;
	line-height: 1.12;
	margin: 0;
	overflow-wrap: anywhere;
}

.imo-scr .imo-scr__rcard p {
	margin: 0;
}

.imo-scr .imo-scr__cta {
	margin-top: auto;
	padding-top: 0.6rem;
}

.imo-scr .imo-scr__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	align-items: center;
	color: #fff;
}

/* I vicini per punteggio sono link veri verso la loro pagina: si comportano da
   pillola cliccabile, con lo stesso stato attivo dei bottoni del percorso. */
.imo-scr .imo-scr__chip {
	display: inline-block;
	border: 1px solid #fff;
	border-radius: 999px;
	padding: 0.35rem 1rem;
	font-size: 0.95rem;
	color: #fff;
	text-decoration: none;
	background: transparent;
	transition: background 0.15s, color 0.15s;
}

.imo-scr a.imo-scr__chip:hover,
.imo-scr a.imo-scr__chip:focus {
	background: #fff;
	color: var(--imo-scr-scuro);
}

.imo-scr a.imo-scr__chip:focus-visible {
	outline: 3px solid var(--imo-scr-arancio-chiaro);
	outline-offset: 3px;
}

.imo-scr .imo-scr__specialist {
	margin-top: 2rem;
	background: #fff;
	color: var(--imo-scr-testo);
	border-left: 4px solid var(--imo-scr-arancio);
	padding: 1.5rem 1.7rem;
	border-radius: 0 12px 12px 0;
	max-width: 54rem;
}

.imo-scr .imo-scr__specialist-h {
	color: var(--imo-scr-blu);
	font-size: 1.35rem;
	font-weight: 500;
	margin: 0 0 0.4rem;
}

.imo-scr .imo-scr__specialist p {
	margin: 0;
}

.imo-scr .imo-scr__actions {
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
	margin-top: 2rem;
}

/* ---------- bottoni ---------- */

.imo-scr .imo-scr__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	background: var(--imo-scr-blu);
	background-image: none;
	box-shadow: none;
	color: #fff;
	border: 2px solid var(--imo-scr-blu);
	border-radius: 999px;
	padding: 0.95rem 2.1rem;
	font: inherit;
	font-weight: 500;
	cursor: pointer;
	text-decoration: none;
	transition: background 0.15s, color 0.15s, border-color 0.15s;
	/* Con il testo ingrandito le etichette lunghe («Vedi il tuo profilo di
	   partenza», «Stampa la scheda da portare al medico») uscivano dallo
	   schermo: il bottone si ferma alla colonna e manda a capo. */
	max-width: 100%;
	text-align: center;
	overflow-wrap: anywhere;
}

.imo-scr .imo-scr__btn:hover,
.imo-scr .imo-scr__btn:focus,
.imo-scr .imo-scr__btn:focus-visible {
	background: var(--imo-scr-scuro);
	background-image: none;
	box-shadow: none;
	border-color: var(--imo-scr-scuro);
	color: #fff;
}

.imo-scr .imo-scr__btn.is-ghost {
	background: transparent;
	background-image: none;
	color: #fff;
	border-color: #fff;
}

.imo-scr .imo-scr__btn.is-ghost:hover,
.imo-scr .imo-scr__btn.is-ghost:focus {
	background: #fff;
	color: var(--imo-scr-scuro);
	border-color: #fff;
}

.imo-scr .imo-scr__btn.is-amber {
	background: var(--imo-scr-arancio-chiaro);
	background-image: none;
	border-color: var(--imo-scr-arancio-chiaro);
	color: var(--imo-scr-scuro);
}

.imo-scr .imo-scr__btn.is-amber:hover,
.imo-scr .imo-scr__btn.is-amber:focus {
	background: #fff;
	border-color: #fff;
	color: var(--imo-scr-scuro);
}

.imo-scr [hidden] {
	display: none !important;
}

@media (prefers-reduced-motion: reduce) {
	.imo-scr *,
	.imo-scr *::before,
	.imo-scr *::after {
		animation: none !important;
		transition: none !important;
	}
}

/* ---------- la scheda da portare al medico ----------
 * Esiste solo in questa pagina e solo per il tempo della stampa: il JS la
 * compone al click, il browser la manda alla stampante, e finisce lì. Niente
 * viene salvato né inviato, come per tutto il resto dello screening.
 */

.imo-scr .imo-scr__print {
	display: none;
}

@media print {

	/* Si stampa la sola scheda: tutto il resto della pagina resta fuori. */
	body * {
		visibility: hidden !important;
	}

	.imo-scr .imo-scr__print,
	.imo-scr .imo-scr__print * {
		visibility: visible !important;
	}

	.imo-scr .imo-scr__print {
		display: block !important;
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		color: #000;
		background: #fff;
		font-family: Poppins, system-ui, sans-serif;
		font-size: 11pt;
		line-height: 1.5;
	}

	.imo-scr .imo-scr__print-h {
		font-family: Arapey, Georgia, serif;
		font-weight: 400;
		font-size: 20pt;
		line-height: 1.15;
		margin: 0 0 0.2em;
	}

	.imo-scr .imo-scr__print-data {
		margin: 0 0 1.4em;
		font-size: 10pt;
	}

	.imo-scr .imo-scr__print-esito {
		border: 1pt solid #000;
		padding: 0.8em 1em;
		margin: 0 0 1.6em;
	}

	.imo-scr .imo-scr__print-esito p {
		margin: 0.2em 0;
	}

	.imo-scr .imo-scr__print-h2 {
		font-family: Arapey, Georgia, serif;
		font-weight: 400;
		font-size: 15pt;
		margin: 0 0 0.6em;
	}

	.imo-scr .imo-scr__print-lista {
		margin: 0;
		padding: 0 0 0 1.4em;
	}

	.imo-scr .imo-scr__print-riga {
		margin: 0 0 0.9em;
		/* Una tappa non si spezza mai fra due pagine. */
		break-inside: avoid;
		page-break-inside: avoid;
	}

	.imo-scr .imo-scr__print-tappa {
		margin: 0;
		font-size: 9pt;
		letter-spacing: 0.08em;
		text-transform: uppercase;
	}

	.imo-scr .imo-scr__print-domanda {
		margin: 0;
	}

	.imo-scr .imo-scr__print-risposta {
		margin: 0;
		font-weight: 600;
	}

	.imo-scr .imo-scr__print-nota {
		margin: 1.8em 0 0;
		padding-top: 0.8em;
		border-top: 1pt solid #000;
		font-size: 9pt;
	}

	@page {
		margin: 18mm;
	}
}