/* Incendi 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 .ilm e non eredita
 * niente di strutturale. Nessun web font, nessuna immagine: il blocco sta
 * above-the-fold e non deve costare LCP.
 */

.ilm {
	--ilm-bg: #fff;
	--ilm-ink: #1a1a1a;
	--ilm-mute: #6b7280;
	--ilm-line: #e5e7eb;
	--ilm-land: #eef1f4;
	--ilm-border: #cbd5e1;
	--ilm-active: #f0a202;
	--ilm-strong: #e8590c;
	--ilm-major: #c92a2a;

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

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

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

.ilm-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(--ilm-line);
}

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

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

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

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

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

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

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

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

.ilm-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;
}

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

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

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

.ilm-dot--active { fill: var(--ilm-active); }
.ilm-dot--strong { fill: var(--ilm-strong); }
.ilm-dot--major  { fill: var(--ilm-major); }

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

/* Elenco completo per default.
 *
 * Prima aveva max-height + scroll interno: su una pagina il cui unico scopo è
 * mostrare quei focolai nascondeva 13 eventi su 17, e su mobile l'area con
 * scroll proprio intercetta lo scroll della pagina. Il cap resta disponibile
 * per l'uso come widget in colonna, dove serve davvero: [incendi_map compact="1"]. */
.ilm-list {
	margin: 0.5rem 0 0;
	padding: 0;
	list-style: none;
}

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

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

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

.ilm-dotmark {
	flex: 0 0 auto;
	width: 0.6em;
	height: 0.6em;
	margin-right: -0.35rem;
	border-radius: 50%;
	background: var(--ilm-active);
}

.ilm-item--strong .ilm-dotmark { background: var(--ilm-strong); }
.ilm-item--major  .ilm-dotmark { background: var(--ilm-major); }

.ilm-where { flex: 1 1 auto; min-width: 0; }
.ilm-prov, .ilm-region, .ilm-dist { color: var(--ilm-mute); font-size: 0.88em; }
.ilm-region::before { content: " · "; }

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

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

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

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

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

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

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

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

.ilm-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;
}

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

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

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

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

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

.ilm-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. */
.ilm-mpu {
	display: flex;
	justify-content: center;
	margin: 1.1rem 0 0;
	min-height: 250px;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* ── contenitore della pagina mappa ──────────────────────────────── */

/* Misura di lettura, non larghezza del tema. Dove il tema già incolonna
   (www.notizie.it, ~760 px) questo non morde; dove non lo fa affatto
   (newz.com, testo a tutta pagina da bordo a bordo) rimette ordine. */
.ilm-page {
	box-sizing: border-box;
	max-width: 780px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 1rem;
	padding-right: 1rem;
}

.ilm-page > * { max-width: 100%; }

/* Il blocco mappa può respirare un po' più del testo. */
.ilm-page .ilm { margin-left: -0.5rem; margin-right: -0.5rem; }

@media (max-width: 820px) {
	.ilm-page .ilm { margin-left: 0; margin-right: 0; }
}

/* ── Vigili del Fuoco: contesto e statistiche ────────────────────── */

.ilm-vvf {
	margin: 1.6rem 0;
	padding: 1rem 1.1rem;
	background: #f7f9fb;
	border-left: 4px solid #2b5f8a;
	border-radius: 6px;
	font-size: 15px;
	line-height: 1.5;
}

.ilm-vvf-title {
	margin: 0 0 0.5rem;
	font-size: 1.02rem;
	font-weight: 700;
}

.ilm-vvf p { margin: 0 0 0.45rem; }
.ilm-vvf p:last-child { margin-bottom: 0; }
.ilm-vvf-trend { color: #374151; }

.ilm-vvf-note {
	font-size: 0.78rem;
	line-height: 1.4;
	color: #6b7280;
}

.ilm-stats { margin: 1.8rem 0; font-size: 15px; }
.ilm-stats h3 { margin: 1.4rem 0 0.7rem; font-size: 1.12rem; font-weight: 700; }

/* Istogramma della stagionalità: 12 barre, nessuna libreria. */
.ilm-bars {
	display: flex;
	align-items: flex-end;
	gap: 3px;
	height: 170px;
	padding-bottom: 1.5rem;
	position: relative;
}

.ilm-bar {
	flex: 1 1 0;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: center;
	position: relative;
}

.ilm-bar-fill {
	width: 100%;
	background: linear-gradient(180deg, #e8590c, #f0a202);
	border-radius: 3px 3px 0 0;
}

.ilm-bar-val { font-size: 0.66rem; color: #6b7280; order: -1; margin-bottom: 2px; }
.ilm-bar-lab { position: absolute; bottom: -1.3rem; font-size: 0.72rem; color: #6b7280; }

/* La tabella scorre da sola: la pagina non deve mai scorrere in orizzontale. */
.ilm-tablewrap { overflow-x: auto; margin: 0.6rem 0; }

.ilm-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.ilm-table th, .ilm-table td { padding: 0.42rem 0.6rem; border-bottom: 1px solid #e5e7eb; text-align: left; }
.ilm-table thead th { border-bottom: 2px solid #cbd5e1; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.02em; color: #6b7280; }
.ilm-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ilm-table tbody th { font-weight: 600; }
.ilm-table .up { color: #c92a2a; }
.ilm-table .down { color: #2b6a34; }

/* ── perimetri delle aree bruciate ───────────────────────────────── */

/* Sotto ai puntini e più tenui: sono il contesto, non l'evento del giorno. */
.ilm-burn {
	fill: #7a3b1a;
	fill-opacity: 0.28;
	stroke: #7a3b1a;
	stroke-opacity: 0.5;
	stroke-width: 0.8;
	vector-effect: non-scaling-stroke;
}

.ilm-burnt-line {
	margin: 0.2rem 0 0.6rem;
	font-size: 0.9rem;
	line-height: 1.45;
	color: var(--ilm-mute);
}

.ilm-burnt-line strong { color: var(--ilm-ink); }