/* =========================================================================
   GEO Content Blocks — stili box editoriali (B/C/D/E)
   Auto-sufficienti: hex letterali (brand + segnali spec), niente dipendenze
   dal tema, così i box reggono anche dopo un cambio tema.
   ========================================================================= */

.geo-box {
	--cb-blue: #0365fa;
	--cb-blue-bg: #edf4ff;
	--cb-ink: #1c1f29;
	--cb-muted: #525c72;
	--cb-green: #3b6d11;
	--cb-green-bg: #eaf3de;
	--cb-red: #a32d2d;
	--cb-red-bg: #fcebeb;
	--cb-amber: #854f0b;
	--cb-amber-bg: #faeeda;

	font-family: "Rubik", system-ui, -apple-system, sans-serif;
	margin: 28px 0;
	line-height: 1.6;
	box-sizing: border-box;
}
.geo-box * { box-sizing: border-box; }
.geo-box svg {
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	display: block;
}
/* Il corpo (testo) riempie la colonna di lettura: senza fl:1 restava stretto. */
.geo-box__body { flex: 1 1 auto; min-width: 0; }

/* ---- B: Approfondisci (link "porta") ---------------------------------- */
.geo-box--approfondisci {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 18px 22px;
	background: var(--cb-blue-bg);
	border: 1px solid #cfe0fb;
	border-left: 4px solid var(--cb-blue);
	border-radius: 10px;
	text-decoration: none;
	transition: transform .15s ease, box-shadow .15s ease;
}
.geo-box--approfondisci:hover {
	transform: translateY(-1px);
	box-shadow: 0 8px 22px -12px rgba(3, 101, 250, .45);
}
.geo-box--approfondisci .geo-box__icon { color: var(--cb-blue); flex: 0 0 auto; }
.geo-box__eyebrow {
	display: block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--cb-blue);
	margin-bottom: 3px;
}
.geo-box__title {
	display: block;
	font-size: 17px;
	font-weight: 600;
	color: var(--cb-ink);
}
.geo-box__desc {
	display: block;
	font-size: 14px;
	color: var(--cb-muted);
	margin-top: 4px;
}

/* ---- C/D: Pro tip & Errore comune ------------------------------------- */
.geo-box--protip,
.geo-box--errore {
	display: flex;
	gap: 14px;
	padding: 18px 22px;
	border-radius: 10px;
}
.geo-box--protip { background: var(--cb-green-bg); border-left: 4px solid var(--cb-green); }
.geo-box--errore { background: var(--cb-red-bg);   border-left: 4px solid var(--cb-red); }
.geo-box--protip .geo-box__icon { color: var(--cb-green); flex: 0 0 auto; margin-top: 2px; }
.geo-box--errore .geo-box__icon { color: var(--cb-red);   flex: 0 0 auto; margin-top: 2px; }
.geo-box__label {
	display: block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .04em;
	margin-bottom: 4px;
}
.geo-box--protip .geo-box__label { color: var(--cb-green); }
.geo-box--errore .geo-box__label { color: var(--cb-red); }
.geo-box__text { color: var(--cb-ink); font-size: 15.5px; }
.geo-box__text > :first-child { margin-top: 0; }
.geo-box__text > :last-child  { margin-bottom: 0; }

/* ---- E: Come ti vede l'AI (firma) ------------------------------------- */
.geo-ai {
	border: 1px solid #e3e6ec;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 10px 30px -18px rgba(28, 31, 41, .35);
	background: #fff;
}
.geo-ai__bar {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 18px;
	background: var(--cb-ink);
	color: #fff;
}
.geo-ai__icon { color: #ffd27a; }
.geo-ai__icon svg { width: 18px; height: 18px; }
.geo-ai__platform {
	font-family: "Plus Jakarta Sans", system-ui, sans-serif;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .01em;
}
.geo-ai__body {
	padding: 18px 20px;
	color: var(--cb-ink);
	font-size: 15.5px;
}
.geo-ai__body > :first-child { margin-top: 0; }
.geo-ai__body > :last-child  { margin-bottom: 0; }
.geo-ai__hl {
	background: var(--cb-amber-bg);
	color: var(--cb-amber);
	padding: 1px 5px;
	border-radius: 4px;
	font-weight: 600;
}
.geo-ai__conseguenza {
	padding: 12px 20px 18px;
	color: var(--cb-muted);
	font-size: 14px;
	font-style: italic;
	border-top: 1px dashed #e3e6ec;
}

/* ---- Mobile ----------------------------------------------------------- */
@media (max-width: 600px) {
	.geo-box--approfondisci,
	.geo-box--protip,
	.geo-box--errore { padding: 16px; }
	.geo-box { margin: 22px 0; }
}