/* Terremoti Live Map — stile del blocco mappa.
 *
 * Vincoli: gira dentro 3 temi diversi (aptica-notizie, generatepress child dei
 * locali, notizie-it-v3 di milano), quindi tutto è scoped su .tlm e non eredita
 * niente di strutturale. Nessun web font, nessuna immagine: il blocco sta
 * above-the-fold e non deve costare LCP.
 *
 * Rispetto alla mappa incendi la scala colore ha QUATTRO livelli invece di
 * tre, e parte da un grigio-blu: la maggior parte delle scosse è strumentale,
 * e dipingerle tutte di giallo darebbe a una giornata normale l'aria di
 * un'emergenza.
 */

.tlm {
	--tlm-bg: #fff;
	--tlm-ink: #1a1a1a;
	--tlm-mute: #6b7280;
	--tlm-line: #e5e7eb;
	--tlm-land: #eef1f4;
	--tlm-border: #cbd5e1;
	--tlm-micro: #64748b;
	--tlm-light: #f0a202;
	--tlm-strong: #e8590c;
	--tlm-major: #c92a2a;

	box-sizing: border-box;
	max-width: 100%;
	margin: 1.75rem 0;
	padding: 1rem 1.1rem 0.85rem;
	background: var(--tlm-bg);
	border: 1px solid var(--tlm-line);
	border-radius: 10px;
	color: var(--tlm-ink);
	font-size: 15px;
	line-height: 1.45;
}

.tlm *, .tlm *::before, .tlm *::after { box-sizing: inherit; }

/* Testo per i soli screen reader: il numerone della magnitudo è aria-hidden
   (letto ad alta voce, "3.7" da solo non dice niente), qui c'è a parole. */
.tlm-sr {
	position: absolute;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ── testata ─────────────────────────────────────────────────────── */

.tlm-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem 1rem;
	padding-bottom: 0.7rem;
	border-bottom: 1px solid var(--tlm-line);
}

.tlm-title {
	margin: 0;
	font-size: 1.25rem;
	line-height: 1.2;
	font-weight: 700;
}

.tlm-sub {
	margin: 0.3rem 0 0;
	font-size: 0.82rem;
	color: var(--tlm-mute);
}

/* Il pallino pulsa piano: segnala "vivo" senza promettere il real time. */
.tlm-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.38em;
	font-weight: 600;
	color: var(--tlm-major);
}

.tlm-badge::before {
	content: "";
	width: 0.5em;
	height: 0.5em;
	border-radius: 50%;
	background: currentColor;
	animation: tlm-pulse 2.4s ease-in-out infinite;
}

@keyframes tlm-pulse {
	0%, 100% { opacity: 1; }
	50%      { opacity: 0.25; }
}

@media (prefers-reduced-motion: reduce) {
	.tlm-badge::before { animation: none; }
}

.tlm-stamp::before { content: " · "; }

.tlm-count {
	margin: 0;
	font-size: 0.95rem;
	white-space: nowrap;
}

/* ── mappa ───────────────────────────────────────────────────────── */

.tlm-mapwrap {
	/* Il rapporto è quello del viewBox: riservare lo spazio qui evita che
	   l'SVG faccia saltare il layout mentre il resto della pagina carica. */
	margin: 0.9rem auto 0.4rem;
	max-width: 460px;
}

.tlm-map {
	display: block;
	width: 100%;
	height: auto;
}

.tlm-reg {
	fill: var(--tlm-land);
	stroke: var(--tlm-border);
	stroke-width: 1.1;
	vector-effect: non-scaling-stroke;
}

.tlm-dot {
	fill-opacity: 0.55;
	stroke: #fff;
	stroke-width: 1.2;
	vector-effect: non-scaling-stroke;
}

 /* ⚠️ Il micro era a 0.42 di opacità, grigio-azzurro sopra una terraferma
    (--tlm-land #eef1f4) quasi dello stesso tono: sulla mappa nazionale, dove
    quasi tutte le scosse sono micro, il risultato era una mappa che sembrava
    vuota. Serve contrasto, non delicatezza. */
.tlm-dot--micro  { fill: var(--tlm-micro); fill-opacity: 0.8; }
.tlm-dot--light  { fill: var(--tlm-light); }
.tlm-dot--strong { fill: var(--tlm-strong); }
.tlm-dot--major  { fill: var(--tlm-major); }

/* Fuori dai confini disegnati: il tratteggio dice "questo punto non è sulla
   terraferma che vedi". Senza, un evento in Croazia è un pallino sospeso nel
   vuoto e sembra un errore della mappa. */
.tlm-dot--foreign { stroke-dasharray: 3 2; fill-opacity: 0.35; }

/* ── elenco ──────────────────────────────────────────────────────── */

/* Elenco completo per default. Il cap con scroll interno resta disponibile per
   l'uso come widget in colonna: [terremoti_map compact="1"]. */
.tlm-list {
	margin: 0.5rem 0 0;
	padding: 0;
	list-style: none;
}

.tlm--compact .tlm-list {
	max-height: 19rem;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.tlm-item {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.5rem 0;
	border-bottom: 1px solid var(--tlm-line);
}

.tlm-item:last-child { border-bottom: 0; }

/* La magnitudo apre la riga ed è l'unico numero grande del blocco: è il dato
   che il lettore sta cercando. Larghezza fissa e cifre tabulari, o la colonna
   dei luoghi balla da una riga all'altra. */
.tlm-mag {
	flex: 0 0 2.6rem;
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
	color: var(--tlm-micro);
}

.tlm-item--light  .tlm-mag { color: var(--tlm-light); }
.tlm-item--strong .tlm-mag { color: var(--tlm-strong); }
.tlm-item--major  .tlm-mag { color: var(--tlm-major); }

.tlm-where { flex: 1 1 auto; min-width: 0; }
.tlm-prov, .tlm-area, .tlm-dist { color: var(--tlm-mute); font-size: 0.88em; }

/* Fuori confine: l'area al posto della provincia, in maiuscoletto, così si
   legge come "non è in Italia" senza doverlo scrivere. */
.tlm-area {
	font-variant: small-caps;
	letter-spacing: 0.02em;
}

.tlm-meta {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	font-size: 0.8rem;
	color: var(--tlm-mute);
	text-align: right;
}

.tlm-empty {
	margin: 1rem 0;
	padding: 0.8rem 1rem;
	background: #f1f8f2;
	border-radius: 6px;
	color: #2b6a34;
}

/* ── contesto storico ────────────────────────────────────────────── */

/* Non è un "box informativo" da saltare: è la frase che dà scala ai numeri
   sopra. Quindi testo pieno, non grigetto da nota a piè di pagina. */
.tlm-context {
	margin: 1.1rem 0 0;
	padding: 0.9rem 1rem;
	background: #f7f9fb;
	border-left: 3px solid var(--tlm-micro);
	border-radius: 0 6px 6px 0;
	font-size: 0.92rem;
	line-height: 1.55;
}

.tlm-context-title {
	margin: 0 0 0.4rem;
	font-size: 0.95rem;
	font-weight: 700;
}

.tlm-context p { margin: 0; }

.tlm-context-src {
	margin-top: 0.45rem !important;
	font-size: 0.76rem;
	color: var(--tlm-mute);
}

/* ── piede ───────────────────────────────────────────────────────── */

.tlm-foot {
	margin-top: 0.7rem;
	padding-top: 0.6rem;
	border-top: 1px solid var(--tlm-line);
	font-size: 0.76rem;
	line-height: 1.4;
	color: var(--tlm-mute);
}

.tlm-foot p { margin: 0 0 0.35rem; }
.tlm-foot p:last-child { margin-bottom: 0; }
.tlm-suppressed { font-style: italic; }

@media (max-width: 480px) {
	.tlm { padding: 0.85rem 0.85rem 0.7rem; font-size: 14px; }
	.tlm-head { flex-direction: column; align-items: flex-start; }
	.tlm-item { flex-wrap: wrap; gap: 0.15rem 0.6rem; }
	.tlm-mag { flex-basis: 2.3rem; }
	.tlm-meta { flex-direction: row; gap: 0.5rem; width: 100%; justify-content: flex-start; padding-left: 2.9rem; }
	.tlm--compact .tlm-list { max-height: 16rem; }
}

/* ── colonna laterale: ultime notizie + slot 300x250 ─────────────── */

.tlm-aside {
	box-sizing: border-box;
	margin: 1.5rem 0;
	font-size: 15px;
	line-height: 1.45;
	color: #1a1a1a;
}

.tlm-aside-title {
	margin: 0 0 0.6rem;
	padding-bottom: 0.45rem;
	border-bottom: 2px solid #c92a2a;
	font-size: 1rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.tlm-news { margin: 0; padding: 0; list-style: none; }

.tlm-news-item {
	padding: 0.55rem 0;
	border-bottom: 1px solid #e5e7eb;
}

.tlm-news-item:last-child { border-bottom: 0; }

.tlm-news-item a {
	display: block;
	font-weight: 600;
	line-height: 1.32;
	text-decoration: none;
	color: inherit;
}

.tlm-news-item a:hover { text-decoration: underline; }

.tlm-news-item time {
	display: block;
	margin-top: 0.15rem;
	font-size: 0.78rem;
	color: #6b7280;
}

/* Spazio riservato: lo slot si riempie dopo il primo render e senza
   min-height farebbe scorrere la colonna sotto gli occhi del lettore. */
.tlm-mpu {
	display: flex;
	justify-content: center;
	margin: 1.1rem 0 0;
	min-height: 250px;
}

.tlm-mpu > div { width: 300px; max-width: 100%; }

/* ── link all'articolo correlato ─────────────────────────────────── */

.tlm-related {
	flex: 0 0 auto;
	margin-left: auto;
	padding: 0.1rem 0.5rem;
	border: 1px solid var(--tlm-line);
	border-radius: 999px;
	font-size: 0.74rem;
	font-weight: 600;
	white-space: nowrap;
	text-decoration: none;
	color: var(--tlm-major);
}

.tlm-related:hover { background: var(--tlm-major); border-color: var(--tlm-major); color: #fff; }

/* Copertura precedente, non la cronaca di questa scossa: stesso posto, peso
   visivo minore. Il testo dell'etichetta fa il lavoro, il colore lo asseconda. */
.tlm-related--old { color: var(--tlm-mute); }
.tlm-related--old:hover { background: var(--tlm-micro); border-color: var(--tlm-micro); color: #fff; }

/* ── domande frequenti ───────────────────────────────────────────── */

.tlm-faq { margin: 2rem 0; font-size: 15px; line-height: 1.5; }

.tlm-faq-title {
	margin: 0 0 0.8rem;
	font-size: 1.3rem;
	line-height: 1.2;
	font-weight: 700;
}

.tlm-faq-item {
	padding: 0.65rem 0;
	border-bottom: 1px solid #e5e7eb;
}

.tlm-faq-item summary {
	cursor: pointer;
	font-weight: 600;
	list-style: none;
	position: relative;
	padding-right: 1.6rem;
}

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

.tlm-faq-item summary::after {
	content: "+";
	position: absolute;
	right: 0.25rem;
	font-weight: 400;
	font-size: 1.2em;
	line-height: 1;
	color: #6b7280;
}

.tlm-faq-item[open] summary::after { content: "\2212"; }
.tlm-faq-item p { margin: 0.5rem 0 0; color: #374151; }

@media (max-width: 480px) {
	.tlm-item { position: relative; }
	.tlm-related { margin-left: 2.9rem; order: 3; }
}

/* ── rimando dall'articolo alla mappa ────────────────────────────── */

.tlm-backlink { margin: 1.6rem 0; }

.tlm-backlink a {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	padding: 0.85rem 1rem 0.85rem 2.6rem;
	position: relative;
	background: #f5f7fa;
	border: 1px solid #cbd5e1;
	border-left: 4px solid #475569;
	border-radius: 8px;
	text-decoration: none;
	color: inherit;
}

.tlm-backlink a::before {
	content: "〰";
	position: absolute;
	left: 0.9rem;
	top: 50%;
	transform: translateY(-50%);
	font-size: 1.1rem;
	line-height: 1;
	color: #475569;
}

.tlm-backlink a:hover { background: #eef2f7; }
.tlm-backlink-label { font-weight: 700; line-height: 1.25; }
.tlm-backlink-sub { font-size: 0.84rem; color: #6b7280; }