/*
 * notizie-local — design system del network locale.
 *
 * Fedele al canvas "Notizie Local Network.html":
 * - palette nero ink + rosso notizie + bianco
 * - Inter weight 800 italic per i titoli, body 17px
 * - layout max-width 1200px, main + sidebar 320px gap 36px
 *
 * Variabili ↔ tokens del design (NZ / NF in notizie-shared.jsx).
 */

:root {
    --nz-bg: #FFFFFF;
    --nz-bg-soft: #F5F5F4;
    --nz-bg-dark: #0F0F0F;
    --nz-ink: #0F0F0F;
    --nz-ink-2: #2E2E2E;
    --nz-ink-3: #555555;
    --nz-muted: #8A8A8A;
    --nz-rule: #E6E6E6;
    --nz-rule-soft: #F0F0F0;
    --nz-red: #E30613;
    --nz-red-dark: #B30410;
    --nz-red-soft: #FFE8E9;
    --nz-yellow: #FFC107;
    --nz-ad-bg: #F4F1EB;
    --nz-ad-border: #D9D2C5;
    --nz-native-bg: #FFF6E5;
    --nz-native-border: #F0D78A;

    --nz-font-display: 'Inter', -apple-system, 'Segoe UI', system-ui, sans-serif;
    --nz-font-body: 'Inter', -apple-system, 'Segoe UI', system-ui, sans-serif;
    --nz-font-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;

    --nz-container: 1200px;
    --nz-sidebar: 320px;
    --nz-gap: 36px;
}

/* ─── Reset di base ─────────────────────────────────────── */
html, body { background: var(--nz-bg-soft); }
body.site,
.site {
    font-family: var(--nz-font-body);
    color: var(--nz-ink);
}
body * { box-sizing: border-box; }

.nl-container {
    max-width: var(--nz-container);
    margin: 0 auto;
    padding: 0 24px;
}

.nl-shell {
    max-width: var(--nz-container);
    margin: 0 auto;
    background: var(--nz-bg);
}

/* nascondi chrome del parent GeneratePress laddove sovrascriviamo */
.site-header,
.site-info,
.site-footer { background: transparent; }

/* ═══════════════════════════════════════════════════════════
   HEADER · utility bar + leaderboard + masthead + nav + ticker
   ═══════════════════════════════════════════════════════════ */
.nl-utility {
    background: var(--nz-bg-soft);
    border-bottom: 1px solid var(--nz-rule);
    font-size: 11px;
    color: var(--nz-ink-3);
    max-width: var(--nz-container);
    margin: 0 auto;
}
.nl-utility .nl-utility__inner {
    display: flex;
    justify-content: space-between;
    padding: 6px 24px;
    max-width: var(--nz-container);
    margin: 0 auto;
}
.nl-utility__left,
.nl-utility__right { display: flex; gap: 16px; }
.nl-utility__right { gap: 14px; }
.nl-utility a { color: inherit; text-decoration: none; }
/* topbar meteo light (icon + temp) */
.nl-utility__meteo {
    color: var(--nz-ink-2, #4a4a4a);
    font-variant-numeric: tabular-nums;
}
/* topbar alert Protezione Civile — render condizionale, sparisce quando $alert è null nel transient */
.nl-utility__alert {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 1px 8px;
    border-radius: 999px;
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: 0.1px;
}
.nl-utility__alert--gialla { background: #FFF3CD; color: #7A5A00; border: 1px solid #F4D88A; }
.nl-utility__alert--arancione { background: #FFE0B2; color: #8A4500; border: 1px solid #F1B068; }
.nl-utility__alert--rossa { background: #FBE0E0; color: #9A1212; border: 1px solid #E89595; }

.nl-top-ad {
    background: var(--nz-bg);
    border-bottom: 1px solid var(--nz-rule);
    padding: 10px 0;
    max-width: var(--nz-container);
    margin: 0 auto;
}

.nl-masthead {
    background: var(--nz-bg);
    border-bottom: 1px solid var(--nz-rule);
    padding: 14px 0;
    max-width: var(--nz-container);
    margin: 0 auto;
}
.nl-masthead__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}
.nl-brand {
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    color: inherit;
}
.nl-brand__logo { height: 32px; width: auto; display: block; object-fit: contain; }
.nl-brand__divider {
    width: 1px;
    height: 30px;
    background: var(--nz-rule);
}
.nl-brand__city-name {
    font-family: var(--nz-font-display);
    font-weight: 800;
    font-style: italic;
    font-size: 22px;
    line-height: 1;
    letter-spacing: -0.5px;
    color: var(--nz-ink);
}
.nl-brand__city-domain {
    font-family: var(--nz-font-mono);
    font-size: 9px;
    color: var(--nz-muted);
    margin-top: 2px;
    letter-spacing: 1px;
    text-transform: uppercase;
}
/* Search form reale nel masthead (21 mag 2026, sostituisce .nl-search-trigger). */
.nl-search {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border: 1px solid var(--nz-rule);
    border-radius: 2px;
    background: transparent;
}
.nl-search:focus-within {
    border-color: var(--nz-ink);
}
.nl-search__submit {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--nz-muted);
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
}
.nl-search__submit:hover {
    color: var(--nz-ink);
}
.nl-search__field {
    width: 190px;
    min-width: 0;
    border: 0;
    background: transparent;
    outline: none;
    color: var(--nz-ink);
    font-family: var(--nz-font-body);
    font-size: 13px;
    padding: 4px 0;
    -webkit-appearance: none;
    appearance: none;
}
.nl-search__field::placeholder {
    color: var(--nz-muted);
    opacity: 1;
}
.nl-search__field::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}
.nl-newsletter-cta {
    background: var(--nz-red);
    color: #fff;
    border: none;
    padding: 9px 16px;
    border-radius: 2px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    text-decoration: none;
    font-family: var(--nz-font-body);
}
.nl-newsletter-cta:hover { background: var(--nz-red-dark); color: #fff; }

.nl-nav {
    background: var(--nz-bg-dark);
    color: #fff;
    max-width: var(--nz-container);
    margin: 0 auto;
}
.nl-nav__inner {
    display: flex;
    align-items: stretch;
    max-width: var(--nz-container);
    margin: 0 auto;
    padding: 0 24px;
}
.nl-nav__inner ul,
.nl-nav__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: stretch;
    flex: 1;
}
.nl-nav__inner a {
    display: inline-flex;
    align-items: center;
    padding: 14px 18px;
    font-size: 13px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.75);
    background: transparent;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-family: var(--nz-font-body);
    text-decoration: none;
}
.nl-nav__inner .current-menu-item > a,
.nl-nav__inner .current-cat > a,
.nl-nav__inner a.is-active {
    color: #fff;
    background: var(--nz-red);
}
.nl-nav__city-switch-wrap {
    position: relative;
    margin-left: auto;
}
.nl-nav__city-switch-wrap > .nl-nav__city-switch {
    margin-left: 0;
}
/* NB selector con .nl-nav__inner per specificità sopra `.nl-nav__inner ul`
   (riga ~182 sovrascrive display:grid con display:flex) */
.nl-nav__inner ul.nl-nav__city-menu,
.nl-nav__city-menu {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 9999;
    margin: 0;
    padding: 18px 20px 16px;
    width: 480px;
    max-height: 70vh;
    overflow-y: auto;
    background: #fff;
    color: var(--nz-ink);
    border: 1px solid var(--nz-rule);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.18);
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: start;
    gap: 2px 12px;
    text-align: left;
    flex: none;
}
.nl-nav__inner ul.nl-nav__city-menu[hidden],
.nl-nav__city-menu[hidden] { display: none; }
.nl-nav__city-menu li { margin: 0; padding: 0; display: block; flex: none; }
.nl-nav__city-menu a {
    display: block;
    padding: 8px 10px;
    color: var(--nz-ink);
    font-family: var(--nz-font-body);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
    text-decoration: none;
    text-transform: none;
    letter-spacing: normal;
    border-radius: 3px;
    border: 0;
    background: transparent;
    transition: background 0.12s, color 0.12s;
}
.nl-nav__city-menu a:hover,
.nl-nav__city-menu a:focus {
    background: var(--nz-red-soft);
    color: var(--nz-red);
    outline: 0;
}
/* notizie.it parent — primo item, full-width, separator sotto */
.nl-nav__city-menu li:first-child {
    grid-column: 1 / -1;
    border-bottom: 1px solid var(--nz-rule);
    margin-bottom: 8px;
    padding-bottom: 4px;
}
.nl-nav__city-menu li:first-child a {
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 12px;
    color: var(--nz-ink-3);
}
.nl-nav__city-menu li:first-child a:hover {
    color: var(--nz-red);
    background: transparent;
}
@media (max-width: 600px) {
    .nl-nav__inner ul.nl-nav__city-menu,
    .nl-nav__city-menu {
        width: 92vw;
        right: -10px;
        grid-template-columns: repeat(2, 1fr);
    }
}
.nl-nav__city-switch {
    margin-left: auto;
    padding: 14px 18px;
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
    font-style: italic;
    font-family: var(--nz-font-body);
    background: transparent;
    border: 0;
    cursor: pointer;
}

.nl-ticker {
    background: var(--nz-bg-dark);
    color: #fff;
    display: flex;
    align-items: stretch;
    overflow: hidden;
    font-family: var(--nz-font-body);
    font-size: 13px;
    max-width: var(--nz-container);
    margin: 0 auto;
}
.nl-ticker__label {
    background: var(--nz-red);
    padding: 8px 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: 12px;
}
.nl-ticker__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fff;
    animation: nl-blink 1.4s infinite;
}
@keyframes nl-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}
.nl-ticker__items {
    padding: 8px 14px;
    flex: 1;
    display: flex;
    gap: 28px;
    overflow: hidden;
    white-space: nowrap;
    align-items: center;
}
.nl-ticker__item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.nl-ticker__item::before {
    content: '';
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--nz-red);
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════
   PRIMITIVES · card, row-head, ad-slot, image
   ═══════════════════════════════════════════════════════════ */
.nl-card {
    display: flex;
    flex-direction: column;
    font-family: var(--nz-font-body);
    text-decoration: none;
    color: inherit;
}
.nl-card__media {
    position: relative;
    background: repeating-linear-gradient(45deg, #DDD8CD 0 12px, #D2CCBE 12px 24px);
    overflow: hidden;
}
.nl-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.nl-card__media[data-h="200"] { height: 200px; }
.nl-card__media[data-h="160"] { height: 160px; }
.nl-card__media[data-h="170"] { height: 170px; }
.nl-card__media[data-h="180"] { height: 180px; }
.nl-card__media[data-h="280"] { height: 280px; }
.nl-card__media[data-h="360"] { height: 360px; }
.nl-card__media[data-h="420"] { height: 420px; }
.nl-card__media[data-h="140"] { height: 140px; }
.nl-card__media[data-h="130"] { height: 130px; }
.nl-card__cat {
    position: absolute;
    top: 0;
    left: 0;
    background: var(--nz-red);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    padding: 4px 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.nl-card__kicker {
    position: absolute;
    top: 0;
    right: 0;
    background: var(--nz-bg-dark);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    padding: 4px 8px;
    font-family: var(--nz-font-mono);
    letter-spacing: 1px;
}
.nl-card__title {
    font-family: var(--nz-font-display);
    font-weight: 800;
    line-height: 1.2;
    margin: 10px 0 6px;
    color: var(--nz-ink);
    letter-spacing: -0.1px;
    font-size: 18px;
}
.nl-card--lg .nl-card__title {
    font-style: italic;
    font-size: 28px;
    letter-spacing: -0.4px;
}
.nl-card--sm .nl-card__title { font-size: 14px; }
.nl-card__excerpt {
    font-size: 13px;
    color: var(--nz-ink-3);
    line-height: 1.5;
    margin: 0 0 6px;
}
.nl-card__meta {
    font-size: 11px;
    color: var(--nz-muted);
    margin-top: auto;
    font-family: var(--nz-font-mono);
}

.nl-row-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 3px solid var(--nz-ink);
}
.nl-row-head--red { border-bottom-color: var(--nz-red); }
.nl-row-head__title {
    font-family: var(--nz-font-display);
    font-size: 24px;
    font-weight: 800;
    font-style: italic;
    margin: 0;
    letter-spacing: -0.4px;
    color: var(--nz-ink);
}
.nl-row-head__link {
    font-size: 11px;
    font-weight: 700;
    color: var(--nz-red);
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
}

/* AdHub slot host (production) — invisibile, riserva solo l'altezza
   per CLS. Il bundle adhub-{host}.min.js riempie il <div id="..."> via
   googletag.display() quando la creative arriva. Niente background né
   border: la creative GAM dovrebbe essere visivamente self-contained.
   Mobile @media riduce min-height (slot 970x250 → 320x100 fallback). */
.nl-ad-host {
    width: 100%;
    text-align: center;
    /* min-height è inline-style dal renderer (CLS-safe) */
}
.nl-ad-host--sticky {
    /* sticky positioning gestito dal bundle (sticky-stack module) */
    position: relative;
}
@media (max-width: 768px) {
    .nl-ad-host[style*="min-height:250px"],
    .nl-ad-host[style*="min-height: 250px"] {
        min-height: 100px !important;
    }
    .nl-ad-host[style*="min-height:600px"],
    .nl-ad-host[style*="min-height: 600px"] {
        min-height: 280px !important;
    }
}

/* AdHub video player — riserva 16:9 anti-CLS (2026-05-21).
   Il bundle adhub-{host}.min.js aggancia il player a runtime sul
   <div id="my-playlist" data-adhub-playlist="..."> emesso da
   nl_video_player(). Senza riserva spinge giù tutto il body articolo.
   Decisione: il video player è attivo network-wide → riserviamo SEMPRE
   il 16:9 (niente :empty collapse). Un po' di spazio bianco quando non
   fa fill è preferibile al CLS. Mobile: max-width 100%, aspect-ratio
   invariato (16:9 scala con la larghezza). */
[id="my-playlist"][data-adhub-playlist],
[data-adhub-playlist] {
    width: 100%;
    max-width: 750px;
    margin: 15px auto;
    aspect-ratio: 16 / 9;
    background: #000;
}
@media (max-width: 768px) {
    [id="my-playlist"][data-adhub-playlist],
    [data-adhub-playlist] {
        max-width: 100%;
    }
}

/* AdHub native widget (MGID recommendation) — riserva altezza anti-CLS
   (2026-05-21). nl_native_widget() emette <section class="nl-native">
   con <div id="adhub-native-widget"> popolato a runtime da
   adhub-external-widgets.js. Riserviamo la max desktop inline-equivalente
   via CSS sull'ID server-rendered; @media riduce/aumenta su mobile reale
   (MGID mobile = colonna singola, più alta). */
.nl-native {
    margin: 28px 0;
}
.nl-native > div[id] {
    min-height: 320px;
}
@media (max-width: 768px) {
    .nl-native > div[id] {
        min-height: 520px !important;
    }
}

/* Debug placeholder ?adsdebug=1 — visibile, mostra logical id + code */
.nl-ad,
.nl-ad-slot {
    background: repeating-linear-gradient(135deg, var(--nz-ad-bg) 0 8px, color-mix(in srgb, var(--nz-ad-bg) 86%, transparent) 8px 16px);
    border: 1px dashed var(--nz-ad-border);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: #5b5448;
    font-family: var(--nz-font-mono);
    font-size: 10px;
    text-align: center;
    padding: 8px;
    border-radius: 2px;
    width: 100%;
}
.nl-ad--native,
.nl-ad-slot--native {
    background: repeating-linear-gradient(135deg, var(--nz-native-bg) 0 8px, color-mix(in srgb, var(--nz-native-bg) 86%, transparent) 8px 16px);
    border-color: var(--nz-native-border);
    color: #8A5A00;
}
.nl-ad__kicker,
.nl-ad-slot__tag {
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: 9px;
}
.nl-ad__label,
.nl-ad-slot__label { font-weight: 700; font-size: 11px; }
.nl-ad__size,
.nl-ad-slot__size { opacity: 0.7; }
.nl-ad-slot__note { opacity: 0.6; font-size: 9px; margin-top: 2px; }
.nl-ad--missing {
    border-color: var(--nz-red);
    color: var(--nz-red);
    background: var(--nz-red-soft);
}

.nl-img {
    margin: 20px 0;
}
.nl-img__frame {
    background: repeating-linear-gradient(45deg, #DDD8CD 0 10px, #D2CCBE 10px 20px);
    border: 1px solid var(--nz-rule);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #7A7368;
    font-family: var(--nz-font-mono);
    font-size: 11px;
    letter-spacing: 1px;
}
.nl-img__frame img {
    display: block;
    width: 100%;
    height: auto;
}
.nl-img figcaption {
    font-family: var(--nz-font-body);
    font-size: 12px;
    color: var(--nz-muted);
    margin-top: 6px;
    font-style: italic;
}

/* ═══════════════════════════════════════════════════════════
   PAGE LAYOUTS
   ═══════════════════════════════════════════════════════════ */
.nl-page {
    padding: 28px 24px;
}
.nl-page--columns {
    display: grid;
    grid-template-columns: 1fr var(--nz-sidebar);
    gap: var(--nz-gap);
}
.nl-page main { min-width: 0; }
.nl-page--article main { max-width: 760px; }
.nl-aside__sticky {
    position: sticky;
    top: 16px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* ─── Home ────────────────────────────────────────────── */
.nl-hero-mosaic {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 22px;
    margin-bottom: 32px;
}
.nl-hero-mosaic__side {
    display: grid;
    grid-template-rows: 1fr 1fr;
    gap: 22px;
}
.nl-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}
.nl-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}
.nl-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 26px;
}
.nl-row { margin-bottom: 36px; }
.nl-row--in-feed-ad { margin: 0 0 28px; }
.nl-row--native-ad { margin: 0 0 32px; }

.nl-cronaca-split {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 22px;
}
.nl-cronaca-split__list {
    display: grid;
    grid-template-rows: repeat(3, 1fr);
    gap: 10px;
}
.nl-thumb-article {
    display: flex;
    gap: 10px;
    text-decoration: none;
    color: inherit;
}
.nl-thumb-article__thumb {
    width: 90px;
    height: 70px;
    background: repeating-linear-gradient(45deg, #DDD8CD 0 8px, #D2CCBE 8px 16px);
    flex-shrink: 0;
    overflow: hidden;
}
.nl-thumb-article__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.nl-thumb-article__cat {
    font-size: 9px;
    color: var(--nz-red);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.nl-thumb-article__title {
    font-family: var(--nz-font-display);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.25;
    margin: 3px 0 0;
    color: var(--nz-ink);
}
.nl-thumb-article__meta {
    font-size: 10px;
    color: var(--nz-muted);
    margin-top: 3px;
    font-family: var(--nz-font-mono);
}

.nl-cosafare {
    margin: 40px 0;
    background: var(--nz-bg-soft);
    padding: 28px 24px;
    border-left: 4px solid var(--nz-red);
}
.nl-cosafare__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 18px;
}
.nl-cosafare__title {
    font-family: var(--nz-font-display);
    font-size: 26px;
    font-weight: 800;
    font-style: italic;
    margin: 0;
    letter-spacing: -0.3px;
}
.nl-cosafare__link {
    font-size: 11px;
    color: var(--nz-red);
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;
}
.nl-cosafare__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.nl-cosafare__card {
    background: #fff;
    border: 1px solid var(--nz-rule);
}
.nl-cosafare__media {
    position: relative;
    height: 130px;
    background: repeating-linear-gradient(45deg, #DDD8CD 0 10px, #D2CCBE 10px 20px);
}
.nl-cosafare__datebadge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #fff;
    padding: 6px 10px;
    text-align: center;
    min-width: 44px;
}
.nl-cosafare__datebadge .nl-day {
    font-family: var(--nz-font-display);
    font-size: 18px;
    font-weight: 800;
    color: var(--nz-red);
    line-height: 1;
}
.nl-cosafare__datebadge .nl-month {
    font-family: var(--nz-font-mono);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 1px;
}
.nl-cosafare__body {
    padding: 12px 14px;
}
.nl-cosafare__body h3 {
    font-family: var(--nz-font-display);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--nz-ink);
    margin: 0 0 4px;
}
.nl-cosafare__venue {
    font-size: 11px;
    color: var(--nz-muted);
}

/* ─── Newsletter CTA in sidebar ─────────────────────── */
.nl-newsletter-block {
    background: var(--nz-red);
    color: #fff;
    padding: 18px;
}
.nl-newsletter-block__title {
    font-family: var(--nz-font-display);
    font-size: 18px;
    font-weight: 800;
    font-style: italic;
    margin: 0 0 6px;
}
.nl-newsletter-block__desc {
    font-size: 12px;
    opacity: 0.9;
    margin: 0 0 12px;
}
.nl-newsletter-block__btn {
    width: 100%;
    background: #fff;
    color: var(--nz-red);
    border: none;
    padding: 10px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
}

/* ═══════════════════════════════════════════════════════════
   SIDEBAR WIDGETS · weather, traffic, events, sport, hoods
   ═══════════════════════════════════════════════════════════ */
.nl-widget {
    background: var(--nz-bg);
    border: 1px solid var(--nz-rule);
    padding: 16px;
    font-family: var(--nz-font-body);
}
.nl-widget--dark {
    background: var(--nz-bg-dark);
    color: #fff;
    border: 0;
}
.nl-widget__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--nz-ink);
    margin-bottom: 14px;
}
.nl-widget--dark .nl-widget__head {
    border-bottom-color: var(--nz-red);
}
.nl-widget__title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin: 0;
}
.nl-widget__link {
    font-size: 10px;
    color: var(--nz-red);
    font-weight: 600;
    text-decoration: none;
}
.nl-widget__link--bright { color: var(--nz-red); font-weight: 700; }
.nl-widget__live {
    font-family: var(--nz-font-mono);
    font-size: 9px;
    color: var(--nz-muted);
}

/* Weather */
.nl-weather { display: flex; align-items: center; gap: 14px; }
.nl-weather__icon { font-size: 44px; line-height: 1; }
.nl-weather__temp {
    font-family: var(--nz-font-display);
    font-size: 32px;
    font-weight: 800;
    line-height: 1;
}
.nl-weather__cond {
    font-size: 12px;
    color: var(--nz-muted);
    margin-top: 2px;
}
.nl-weather__extra {
    margin-left: auto;
    text-align: right;
    font-size: 11px;
    color: var(--nz-ink-3);
}
.nl-weather__extra strong { color: var(--nz-ink); }

/* Traffic */
.nl-traffic__row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-top: 1px solid var(--nz-rule-soft);
}
.nl-traffic__row:first-of-type { border-top: 0; }
.nl-traffic__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.nl-traffic__dot--ok   { background: #3FA34D; }
.nl-traffic__dot--warn { background: var(--nz-yellow); }
.nl-traffic__dot--bad  { background: var(--nz-red); }
.nl-traffic__road {
    font-size: 12px;
    font-weight: 600;
    color: var(--nz-ink);
}
.nl-traffic__status {
    font-size: 11px;
    color: var(--nz-muted);
    text-transform: capitalize;
}

/* Events list */
.nl-events__row {
    display: flex;
    gap: 12px;
    padding: 12px 0;
    border-top: 1px solid var(--nz-rule-soft);
}
.nl-events__row:first-of-type { border-top: 0; }
.nl-events__date {
    width: 44px;
    text-align: center;
    flex-shrink: 0;
}
.nl-events__day {
    font-family: var(--nz-font-display);
    font-size: 22px;
    font-weight: 800;
    color: var(--nz-red);
    line-height: 1;
}
.nl-events__month {
    font-family: var(--nz-font-mono);
    font-size: 9px;
    color: var(--nz-ink);
    letter-spacing: 1px;
    margin-top: 2px;
    font-weight: 700;
}
.nl-events__title {
    font-family: var(--nz-font-display);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--nz-ink);
}
.nl-events__venue {
    font-size: 11px;
    color: var(--nz-muted);
    margin-top: 3px;
}

/* Sport (dark) — chip squadre + match cards live (last/next) da football-data.org
   + feed ultime notizie sport. Match cards renderizzate solo se transient
   nl_od_sport ha dati (worker popola via football-data.org Serie A). */
.nl-sport__teams {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.nl-sport__team-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.nl-sport__team-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 6px;
}
.nl-sport__crest-img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    flex-shrink: 0;
    background: #fff;
    border-radius: 50%;
    padding: 2px;
}
.nl-sport__match {
    border-left: 3px solid rgba(255,255,255,0.18);
    padding: 6px 10px;
    margin-left: 14px;
    font-size: 12px;
}
.nl-sport__match--win  { border-left-color: #4ade80; }
.nl-sport__match--loss { border-left-color: #f87171; }
.nl-sport__match--draw { border-left-color: #94a3b8; }
.nl-sport__match--next { border-left-color: var(--nz-red, #e30613); }
.nl-sport__match-meta {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    font-family: var(--nz-font-mono);
    color: rgba(255,255,255,0.55);
    letter-spacing: 0.4px;
    text-transform: uppercase;
    margin-bottom: 2px;
}
.nl-sport__match-body {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #fff;
}
.nl-sport__match-home { flex: 1; text-align: right; }
.nl-sport__match-away { flex: 1; }
.nl-sport__match-score {
    font-family: var(--nz-font-display);
    font-weight: 800;
    padding: 1px 8px;
    background: rgba(255,255,255,0.08);
    border-radius: 3px;
    font-variant-numeric: tabular-nums;
}
.nl-sport__match-vs {
    font-size: 10px;
    opacity: 0.6;
    text-transform: uppercase;
}
.nl-sport__crest {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--nz-red);
    display: grid;
    place-items: center;
    font-size: 11px;
    font-weight: 800;
    flex-shrink: 0;
    color: #fff;
}
.nl-sport__team-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.nl-sport__name {
    font-family: var(--nz-font-display);
    font-size: 14px;
    font-weight: 800;
    font-style: italic;
    color: #fff;
}
.nl-sport__league {
    font-size: 10px;
    font-family: var(--nz-font-mono);
    letter-spacing: 0.6px;
    color: rgba(255, 255, 255, 0.55);
}
.nl-sport__feed--with-teams {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Sport feed (sempre presente, riusato sia con teams sia senza) */
.nl-sport__feed-row {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 10px 0;
    color: inherit;
    text-decoration: none;
}
.nl-sport__feed-row--bordered { border-top: 1px solid rgba(255,255,255,0.08); }
.nl-sport__feed-thumb {
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    border-radius: 4px;
    background: rgba(255,255,255,0.08) center / cover no-repeat;
}
.nl-sport__feed-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.nl-sport__feed-cat {
    font-size: 9px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--nz-red, #d40000);
    font-weight: 700;
}
.nl-sport__feed-title {
    font-size: 13px;
    line-height: 1.35;
    color: #fff;
    font-weight: 600;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.nl-sport__feed-row:hover .nl-sport__feed-title { text-decoration: underline; }

/* Neighborhood tags */
.nl-hoods__list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.nl-hoods__chip {
    font-size: 11px;
    padding: 4px 10px;
    background: var(--nz-bg-soft);
    border: 1px solid var(--nz-rule);
    color: var(--nz-ink-2);
    font-weight: 500;
    text-decoration: none;
}

/* Popular / Trending list */
.nl-popular__row {
    display: flex;
    gap: 10px;
    padding: 10px 0;
    border-top: 1px solid var(--nz-rule-soft);
}
.nl-popular__row:first-of-type { border-top: 0; }
.nl-popular__rank {
    font-family: var(--nz-font-display);
    font-size: 24px;
    font-weight: 800;
    font-style: italic;
    color: var(--nz-red);
    min-width: 22px;
    line-height: 1;
}
.nl-popular__title {
    font-family: var(--nz-font-display);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--nz-ink);
    text-decoration: none;
}

/* ═══════════════════════════════════════════════════════════
   SINGLE ARTICLE
   ═══════════════════════════════════════════════════════════ */
.nl-breadcrumb-cat {
    font-size: 11px;
    color: var(--nz-muted);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 12px;
    font-weight: 600;
}
.nl-breadcrumb-cat__primary { color: var(--nz-red); text-decoration: none; }
.nl-article__title {
    font-family: var(--nz-font-display);
    font-size: 44px;
    font-weight: 800;
    font-style: italic;
    line-height: 1.1;
    margin: 0 0 14px;
    letter-spacing: -1px;
    color: var(--nz-ink);
}
.nl-article__dek {
    font-family: var(--nz-font-body);
    font-size: 19px;
    line-height: 1.5;
    color: var(--nz-ink-2);
    margin: 0 0 18px;
    font-weight: 500;
}
.nl-article__byline {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    color: var(--nz-muted);
    padding-bottom: 16px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--nz-rule);
}
.nl-article__byline-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--nz-rule);
    flex-shrink: 0;
    overflow: hidden;
}
.nl-article__byline-text strong { color: var(--nz-ink-2); }
.nl-article__share {
    margin-left: auto;
    display: flex;
    gap: 10px;
    font-size: 11px;
}
.nl-article__share a {
    width: 26px;
    height: 26px;
    border: 1px solid var(--nz-rule);
    display: grid;
    place-items: center;
    font-weight: 700;
    text-decoration: none;
    color: var(--nz-ink);
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
/* 2026-05-20: icone SVG inline al posto delle iniziali testuali (F/X/WA/✉).
   fill/stroke = currentColor → l'icona segue il colore testo del bottone. */
.nl-article__share a .nl-share-icon {
    display: block;
    pointer-events: none;
}
.nl-article__share a:hover,
.nl-article__share a:focus-visible {
    background-color: var(--nz-ink);
    border-color: var(--nz-ink);
    color: #fff;
}
.nl-article__body p {
    font-family: var(--nz-font-body);
    font-size: 17px;
    line-height: 1.65;
    color: var(--nz-ink-2);
    margin: 0 0 18px;
}
.nl-article__body blockquote {
    border-left: 4px solid var(--nz-red);
    padding: 6px 0 6px 20px;
    margin: 24px 0;
    font-family: var(--nz-font-display);
    font-size: 22px;
    font-weight: 700;
    font-style: italic;
    line-height: 1.35;
    color: var(--nz-ink);
}
.nl-article__body blockquote cite {
    display: block;
    font-family: var(--nz-font-body);
    font-size: 12px;
    font-weight: 500;
    font-style: normal;
    color: var(--nz-muted);
    margin-top: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.nl-article__ad {
    margin: 28px 0;
    display: flex;
    justify-content: center;
}
.nl-article__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid var(--nz-rule);
}
.nl-article__tags-label {
    font-size: 10px;
    color: var(--nz-muted);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 700;
    margin-right: 6px;
    align-self: center;
}
.nl-article__tag {
    font-size: 11px;
    padding: 4px 10px;
    background: var(--nz-bg-soft);
    border: 1px solid var(--nz-rule);
    color: var(--nz-ink-2);
    text-decoration: none;
}
.nl-article__author {
    margin-top: 28px;
    padding: 18px;
    border: 1px solid var(--nz-rule);
    background: var(--nz-bg);
    display: flex;
    gap: 14px;
}
.nl-article__author-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--nz-rule);
    flex-shrink: 0;
    overflow: hidden;
}
.nl-article__author-label {
    font-size: 10px;
    color: var(--nz-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
}
.nl-article__author-name {
    font-family: var(--nz-font-display);
    font-size: 18px;
    font-weight: 800;
    font-style: italic;
}
.nl-article__author-bio {
    font-size: 13px;
    color: var(--nz-ink-2);
    line-height: 1.5;
    margin-top: 4px;
}
.nl-related {
    margin-top: 16px;
    padding-top: 22px;
    border-top: 3px solid var(--nz-ink);
}
.nl-related__title {
    font-family: var(--nz-font-display);
    font-size: 22px;
    font-weight: 800;
    font-style: italic;
    margin: 0 0 16px;
}
.nl-related__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

/* Media players */
.nl-audio {
    background: var(--nz-bg-dark);
    color: #fff;
    border-radius: 2px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 14px 0;
}
.nl-audio__btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--nz-red);
    display: grid;
    place-items: center;
    flex-shrink: 0;
    color: #fff;
    border: 0;
}
.nl-audio__meta {
    flex: 1;
    min-width: 0;
}
.nl-audio__label {
    font-size: 10px;
    opacity: 0.6;
    font-family: var(--nz-font-mono);
    text-transform: uppercase;
    letter-spacing: 1.2px;
}
.nl-audio__bar {
    height: 2px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 1px;
    margin-top: 6px;
}
.nl-audio__bar-fill {
    width: 22%;
    height: 100%;
    background: var(--nz-red);
}
.nl-audio__time {
    font-family: var(--nz-font-mono);
    font-size: 11px;
    opacity: 0.75;
}

.nl-video {
    margin: 20px 0;
    background: #000;
    border-radius: 2px;
    overflow: hidden;
    position: relative;
    height: 300px;
}
.nl-video::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #1a1a1a, #0a0a0a);
}
.nl-video__preroll-tag {
    position: absolute;
    top: 10px;
    left: 10px;
    background: var(--nz-red);
    color: #fff;
    font-size: 10px;
    font-family: var(--nz-font-mono);
    padding: 3px 7px;
    font-weight: 700;
    letter-spacing: 1px;
    z-index: 1;
}
.nl-video__tag {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 9px;
    font-family: var(--nz-font-mono);
    color: rgba(255, 255, 255, 0.5);
    padding: 2px 6px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    z-index: 1;
}
.nl-video__playbtn {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}
.nl-video__playbtn span {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(227, 6, 19, 0.9);
    display: grid;
    place-items: center;
    color: #fff;
}
.nl-video__caption {
    position: absolute;
    bottom: 12px;
    left: 14px;
    right: 14px;
    color: #fff;
    z-index: 1;
}
.nl-video__caption-kicker {
    font-size: 10px;
    font-family: var(--nz-font-mono);
    opacity: 0.6;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}
.nl-video__caption-title {
    font-family: var(--nz-font-display);
    font-size: 15px;
    font-weight: 700;
    margin-top: 2px;
}

.nl-taboola {
    margin: 28px 0;
}
.nl-taboola__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--nz-font-body);
    font-size: 11px;
    color: var(--nz-muted);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--nz-ink);
}
.nl-taboola__head strong { font-weight: 700; color: var(--nz-ink); }
.nl-taboola__head-by {
    font-family: var(--nz-font-mono);
    font-size: 9px;
}
.nl-taboola__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}
.nl-taboola__card-media {
    height: 100px;
    background: repeating-linear-gradient(45deg, #DDD8CD 0 8px, #D2CCBE 8px 16px);
}
.nl-taboola__card-title {
    font-family: var(--nz-font-body);
    font-size: 12px;
    margin-top: 8px;
    line-height: 1.3;
    color: var(--nz-ink-2);
    font-weight: 500;
}
.nl-taboola__card-source {
    font-family: var(--nz-font-mono);
    font-size: 9px;
    color: var(--nz-muted);
    margin-top: 3px;
}

/* ═══════════════════════════════════════════════════════════
   CATEGORY ARCHIVE
   ═══════════════════════════════════════════════════════════ */
.nl-cat-hero {
    padding: 28px 24px 20px;
    background: var(--nz-bg-dark);
    color: #fff;
    border-bottom: 4px solid var(--nz-red);
}
.nl-cat-hero__kicker {
    font-size: 11px;
    opacity: 0.6;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 600;
}
.nl-cat-hero__title {
    font-family: var(--nz-font-display);
    font-size: 56px;
    font-weight: 800;
    font-style: italic;
    margin: 4px 0 8px;
    letter-spacing: -1.5px;
}
.nl-cat-hero__desc {
    font-size: 15px;
    opacity: 0.85;
    margin: 0;
    max-width: 680px;
    line-height: 1.5;
}
.nl-cat-hero__chips {
    display: flex;
    gap: 6px;
    margin-top: 14px;
    flex-wrap: wrap;
}
.nl-cat-hero__chip {
    font-size: 11px;
    padding: 4px 12px;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.15);
    font-weight: 500;
    text-decoration: none;
}

.nl-pagination {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin-top: 28px;
}
.nl-pagination a,
.nl-pagination span {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    font-size: 13px;
    font-weight: 700;
    background: var(--nz-bg);
    color: var(--nz-ink-2);
    border: 1px solid var(--nz-rule);
    font-family: var(--nz-font-body);
    text-decoration: none;
}
.nl-pagination .current,
.nl-pagination a.current {
    background: var(--nz-red);
    color: #fff;
    border: 0;
}

/* ═══════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════ */
.nl-footer {
    background: var(--nz-bg-dark);
    color: #fff;
    padding: 40px 0 18px;
    margin-top: 40px;
    font-family: var(--nz-font-body);
}
.nl-footer__inner {
    max-width: var(--nz-container);
    margin: 0 auto;
    padding: 0 24px;
}
.nl-footer__grid {
    display: grid;
    grid-template-columns: 1fr 1fr 2fr;
    gap: 32px;
}

/* Col "Altre città del network" (3a col del grid). Lista renderizzata in
   wrap 2-col interna via `column-count` — niente separatore puntino, le
   2 sotto-colonne sono già un separatore visivo sufficiente. */
.nl-footer__col--cities .nl-footer__cities-list {
    list-style: none;
    margin: 0;
    padding: 0;
    column-count: 2;
    column-gap: 24px;
}
.nl-footer__col--cities .nl-footer__cities-list li {
    font-size: 12px;
    margin-bottom: 6px;
    break-inside: avoid;
    page-break-inside: avoid; /* safari fallback */
}
.nl-footer__col--cities .nl-footer__cities-list a {
    color: rgba(255, 255, 255, 0.78);
    text-decoration: none;
    opacity: 0.9;
}
.nl-footer__col--cities .nl-footer__cities-list a:hover {
    color: #fff;
    opacity: 1;
    text-decoration: underline;
}
.nl-footer__brand-row {
    display: flex;
    align-items: center;
    gap: 12px;
}
.nl-footer__logo {
    height: 26px;
    width: auto;
    display: block;
    object-fit: contain;
    filter: brightness(0) invert(1);
}
.nl-footer__brand-divider {
    width: 1px;
    height: 22px;
    background: rgba(255, 255, 255, 0.2);
}
.nl-footer__city {
    font-family: var(--nz-font-display);
    font-weight: 800;
    font-style: italic;
    font-size: 18px;
}
.nl-footer__about {
    font-size: 12px;
    opacity: 0.6;
    margin-top: 12px;
    line-height: 1.6;
    max-width: 360px;
}
.nl-footer__about strong { color: #fff; }
.nl-footer__col-title {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    opacity: 0.5;
    margin-bottom: 12px;
    font-weight: 700;
}
.nl-footer__col ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.nl-footer__col li {
    font-size: 12px;
    margin-bottom: 8px;
    opacity: 0.85;
}
.nl-footer__col a { color: inherit; text-decoration: none; }
.nl-footer__bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: 28px;
    padding-top: 16px;
    font-size: 10px;
    opacity: 0.5;
    display: flex;
    justify-content: space-between;
}

/* ─── Brand band CHIARA (sopra il dark footer) ────────────── */
.nl-footer-brand {
    background: #fff;
    color: var(--nz-ink, #111);
    border-top: 1px solid var(--nz-rule, #e5e5e5);
    border-bottom: 1px solid var(--nz-rule, #e5e5e5);
    padding: 28px 0;
    margin-top: 40px;
    font-family: var(--nz-font-body);
}
.nl-footer-brand__inner {
    max-width: var(--nz-container);
    margin: 0 auto;
    padding: 0 24px;
}
.nl-footer-brand__cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: start;
}
.nl-footer-brand__title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}
.nl-footer-brand__logo {
    height: 28px;
    width: auto;
    display: block;
}
.nl-footer-brand__divider {
    color: var(--nz-rule, #ccc);
    font-weight: 300;
    font-size: 22px;
    line-height: 1;
}
.nl-footer-brand__city {
    font-family: var(--nz-font-display);
    font-weight: 800;
    font-style: italic;
    font-size: 22px;
    color: var(--nz-ink, #111);
}
.nl-footer-brand__links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    font-size: 14px;
}
.nl-footer-brand__links a {
    color: var(--nz-ink, #111);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color .15s;
}
.nl-footer-brand__links a:hover {
    border-bottom-color: var(--nz-accent, #E30613);
}
.nl-footer-brand__copy {
    font-size: 13px;
    line-height: 1.6;
    color: var(--nz-ink-2, #444);
    margin: 0;
}
.nl-footer-brand__copy a {
    color: var(--nz-accent, #E30613);
    text-decoration: none;
}
.nl-footer-brand__copy a:hover { text-decoration: underline; }

/* Quando c'è il brand band sopra, rimuoviamo lo stacco superiore del dark footer */
.nl-footer-brand + .nl-footer { margin-top: 0; }

/* ─── Linea legale testata (dentro dark footer) ───────────── */
.nl-footer__legal-line {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: 28px;
    padding-top: 18px;
    font-size: 12px;
    line-height: 1.6;
    opacity: 0.8;
}
.nl-footer__legal {
    margin-top: 10px;
    font-size: 11px;
    opacity: 0.65;
    display: flex;
    flex-direction: column;
    gap: 6px;
    line-height: 1.6;
}
.nl-footer__legal a {
    color: #fff;
    text-decoration: none;
}
.nl-footer__legal a:hover { text-decoration: underline; }
.nl-footer__legal-row { display: block; }
.nl-footer__legal-sep { opacity: 0.5; padding: 0 2px; }
.nl-footer__disclosure {
    font-style: italic;
    opacity: 0.55;
    max-width: 720px;
}

/* ─── Network mondiale (network-footer-client shortcode) ──── */
.nl-footer__network {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 24px;
    margin-top: 24px;
    color: #fff;
}

/* Force trasparenza interna: i child del wrapper plugin (theme-default
   imposta bg #2a2a2a, theme-dark #111, theme-light #fff) devono restare
   trasparenti per appoggiarsi sul dark footer. Override mirato che
   copre tutte le varianti theme-*. */
.nl-footer__network .network-footer-wrap,
.nl-footer__network .network-footer-wrap.theme-default,
.nl-footer__network .network-footer-wrap.theme-dark,
.nl-footer__network .network-footer-wrap.theme-light,
.nl-footer__network .network-footer-wrap.theme-transparent,
.nl-footer__network .network-footer,
.nl-footer__network .network-footer-block,
.nl-footer__network .network-footer-column,
.nl-footer__network .footer-column,
.nl-footer__network .group-block {
    background: transparent !important;
    background-color: transparent !important;
}
.nl-footer__network .network-footer-wrap { color: inherit; }
.nl-footer__network .network-footer {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.nl-footer__network .footer-column { min-width: 0; }
.nl-footer__network .group-block + .group-block { margin-top: 18px; }
.nl-footer__network h5 {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.55;
    margin: 0 0 8px;
    font-weight: 700;
    color: #fff;
}
.nl-footer__network ul.sites-list { list-style: none; margin: 0; padding: 0; }
.nl-footer__network ul.sites-list li {
    font-size: 12px;
    margin-bottom: 5px;
    opacity: 0.8;
}
.nl-footer__network ul.sites-list a { color: #fff; text-decoration: none; }
.nl-footer__network ul.sites-list a:hover {
    opacity: 1;
    text-decoration: underline;
}
.nl-footer__network .contents-com {
    font-size: 11px;
    opacity: 0.5;
    font-style: italic;
}

/* ═══════════════════════════════════════════════════════════
   ANCHOR AD (mobile)
   ═══════════════════════════════════════════════════════════ */
.nl-anchor {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--nz-bg);
    border-top: 1px solid var(--nz-rule);
    padding: 6px;
    z-index: 50;
    display: none;
}
@media (max-width: 768px) {
    .nl-anchor { display: block; }
    body { padding-bottom: 70px; }
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    .nl-page--columns { grid-template-columns: 1fr; }
    .nl-aside__sticky { position: static; }
}

@media (max-width: 768px) {
    .nl-utility,
    .nl-top-ad,
    .nl-nav__city-switch { display: none; }
    .nl-page { padding: 14px; }
    .nl-hero-mosaic { grid-template-columns: 1fr; gap: 14px; }
    .nl-grid-4 { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .nl-grid-3 { grid-template-columns: 1fr; gap: 14px; }
    .nl-grid-2 { grid-template-columns: 1fr; gap: 14px; }
    .nl-cronaca-split { grid-template-columns: 1fr; }
    .nl-cosafare__grid { grid-template-columns: 1fr; }
    .nl-cosafare { margin: 24px -14px; }
    .nl-cosafare__title { font-size: 22px; }
    .nl-article__title { font-size: 26px; letter-spacing: -0.6px; }
    .nl-article__dek { font-size: 16px; }
    .nl-article__share { display: none; }
    .nl-cat-hero { padding: 18px 14px; }
    .nl-cat-hero__title { font-size: 38px; letter-spacing: -1px; }
    .nl-related__grid { grid-template-columns: 1fr; }
    .nl-taboola__grid { grid-template-columns: repeat(2, 1fr); }
    .nl-footer__grid { grid-template-columns: 1fr; gap: 22px; }
    .nl-footer__bottom { flex-direction: column; gap: 6px; }
    .nl-footer__col--cities .nl-footer__cities-list { column-count: 2; column-gap: 16px; }
    .nl-footer-brand__cols { grid-template-columns: 1fr; gap: 22px; }
    .nl-footer-brand__city { font-size: 18px; }
    .nl-footer-brand__links { font-size: 13px; gap: 6px 14px; }
    .nl-footer__network .network-footer { grid-template-columns: 1fr; gap: 16px; }
    .nl-nav__inner { padding: 0; overflow-x: auto; }
    .nl-nav__inner a { padding: 10px 14px; font-size: 11px; }
    .nl-masthead { padding: 10px 14px; }
    .nl-masthead__inner .nl-newsletter-cta { display: none; }
    .nl-brand__logo { height: 20px; }
    .nl-brand__city-name { font-size: 16px; }
    .nl-brand__city-domain { display: none; }
    /* Search mobile (21 mag 2026): l'input resta visibile e digitabile.
       Brand + form devono stare su 320-360px → field flessibile e stretto. */
    .nl-masthead__inner { gap: 8px; }
    .nl-search { padding: 3px 6px; gap: 2px; flex: 0 1 auto; min-width: 0; }
    .nl-search__submit { font-size: 15px; }
    .nl-search__field { width: 96px; font-size: 12px; padding: 3px 0; }
}

/* ═══════════════════════════════════════════════════════════
   OPEN-DATA WIDGETS (6 idee gratuite — design canvas
   "Widget Open Data Proposals.html")
   ═══════════════════════════════════════════════════════════ */

/* ─── 1. Meteo + Allerta ───────────────────────────────── */
.nl-w-meteo__now {
    display: flex;
    align-items: center;
    gap: 14px;
}
.nl-w-meteo__icon { font-size: 48px; line-height: 1; }
.nl-w-meteo__temp {
    font-family: var(--nz-font-display);
    font-size: 36px;
    font-weight: 800;
    font-style: italic;
    line-height: 1;
}
.nl-w-meteo__cond {
    font-size: 11px;
    color: var(--nz-muted);
    margin-top: 2px;
}
.nl-w-meteo__extra {
    margin-left: auto;
    text-align: right;
    font-size: 11px;
    color: var(--nz-ink-3);
}
.nl-w-meteo__extra strong { color: var(--nz-ink); }
.nl-w-meteo__forecast {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--nz-rule-soft);
}
.nl-w-meteo__day {
    text-align: center;
    font-size: 11px;
}
.nl-w-meteo__day-label {
    color: var(--nz-muted);
    font-weight: 600;
}
.nl-w-meteo__day-icon {
    font-size: 18px;
    margin: 4px 0;
}
.nl-w-meteo__day-temp { font-weight: 700; }
.nl-w-meteo__alert {
    margin-top: 12px;
    padding: 10px 12px;
    background: #FFF6E5;
    border-left: 4px solid #FF7A00;
    display: flex;
    gap: 10px;
    align-items: flex-start;
}
.nl-w-meteo__alert-icon { font-size: 18px; }
.nl-w-meteo__alert-title {
    font-size: 11px;
    font-weight: 800;
    color: #FF7A00;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.nl-w-meteo__alert-meta {
    font-size: 11px;
    color: var(--nz-ink-2);
    margin-top: 2px;
}

/* ─── 2. Qualità aria ──────────────────────────────────── */
.nl-w-air__top {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
}
.nl-w-air__gauge {
    --nl-pct: 50%;
    --nl-color: var(--nz-yellow);
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: conic-gradient(var(--nl-color) 0 var(--nl-pct), var(--nz-rule-soft) var(--nl-pct) 100%);
    display: grid;
    place-items: center;
    flex-shrink: 0;
}
.nl-w-air__gauge--ok   { --nl-color: #3FA34D; }
.nl-w-air__gauge--warn { --nl-color: var(--nz-yellow); }
.nl-w-air__gauge--bad  { --nl-color: #FF7A00; }
.nl-w-air__gauge-num {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #fff;
    display: grid;
    place-items: center;
    font-size: 22px;
    font-weight: 800;
    font-style: italic;
    font-family: var(--nz-font-display);
}
.nl-w-air__aqi-label {
    font-size: 11px;
    color: var(--nz-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
}
.nl-w-air__aqi-status {
    font-size: 16px;
    font-weight: 800;
    font-style: italic;
    font-family: var(--nz-font-display);
}
.nl-w-air__aqi-status--ok   { color: #3FA34D; }
.nl-w-air__aqi-status--warn { color: var(--nz-yellow); }
.nl-w-air__aqi-status--bad  { color: #FF7A00; }
.nl-w-air__advice {
    font-size: 11px;
    color: var(--nz-muted);
    margin-top: 2px;
}
.nl-w-air__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    font-size: 11px;
    padding-top: 10px;
    border-top: 1px solid var(--nz-rule-soft);
}
.nl-w-air__p-k { color: var(--nz-muted); font-size: 10px; }
.nl-w-air__p-v {
    font-weight: 800;
    font-size: 14px;
}
.nl-w-air__p-v--ok   { color: #3FA34D; }
.nl-w-air__p-v--warn { color: var(--nz-yellow); }
.nl-w-air__p-v--bad  { color: #FF7A00; }
.nl-w-air__p-u {
    font-size: 9px;
    color: var(--nz-muted);
}
.nl-w-air__footer {
    margin-top: 10px;
    font-size: 10px;
    color: var(--nz-muted);
    font-family: var(--nz-font-mono);
}

/* ─── 3. Trasporti urbani ──────────────────────────────── */
.nl-w-transit__live {
    color: #3FA34D !important;
    font-weight: 700;
}
.nl-w-transit__row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
}
.nl-w-transit__row--bordered { border-top: 1px solid var(--nz-rule-soft); }
.nl-w-transit__crest {
    width: 28px;
    height: 28px;
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: 11px;
    flex-shrink: 0;
    font-style: italic;
    font-family: var(--nz-font-display);
}
.nl-w-transit__info { flex: 1; min-width: 0; }
.nl-w-transit__line {
    font-size: 12px;
    font-weight: 700;
    color: var(--nz-ink);
}
.nl-w-transit__status {
    font-size: 11px;
    color: var(--nz-muted);
}
.nl-w-transit__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.nl-w-transit__dot--ok   { background: #3FA34D; }
.nl-w-transit__dot--warn { background: var(--nz-yellow); }
.nl-w-transit__dot--bad  { background: var(--nz-red); }
.nl-w-transit__footer {
    margin-top: 10px;
    font-size: 10px;
    color: var(--nz-muted);
    font-family: var(--nz-font-mono);
}

/* ─── 4. Eventi sismici ────────────────────────────────── */
.nl-w-seismic__sub {
    font-size: 11px;
    color: var(--nz-muted);
    margin-bottom: 12px;
}
.nl-w-seismic__row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
}
.nl-w-seismic__row--bordered { border-top: 1px solid var(--nz-rule-soft); }
.nl-w-seismic__mag {
    --nl-mag-color: var(--nz-muted);
    --nl-mag-bg: var(--nz-bg-soft);
    width: 44px;
    text-align: center;
    padding: 4px 0;
    background: var(--nl-mag-bg);
    border-left: 3px solid var(--nl-mag-color);
    flex-shrink: 0;
}
.nl-w-seismic__mag--mute { --nl-mag-color: var(--nz-muted);   --nl-mag-bg: var(--nz-bg-soft); }
.nl-w-seismic__mag--warn { --nl-mag-color: var(--nz-yellow);  --nl-mag-bg: rgba(255,193,7,0.12); }
.nl-w-seismic__mag--bad  { --nl-mag-color: #FF7A00;           --nl-mag-bg: rgba(255,122,0,0.12); }
.nl-w-seismic__mag-n {
    font-family: var(--nz-font-display);
    font-size: 16px;
    font-weight: 800;
    font-style: italic;
    color: var(--nl-mag-color);
    line-height: 1;
}
.nl-w-seismic__mag-label {
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--nz-muted);
}
.nl-w-seismic__info { flex: 1; min-width: 0; }
.nl-w-seismic__loc {
    font-size: 12px;
    font-weight: 700;
    color: var(--nz-ink);
}
.nl-w-seismic__meta {
    font-size: 10px;
    color: var(--nz-muted);
    font-family: var(--nz-font-mono);
}

/* ─── 5. Accaduto oggi ─────────────────────────────────── */
.nl-w-history__sub {
    font-size: 11px;
    color: var(--nz-muted);
    margin-bottom: 10px;
    font-style: italic;
}
.nl-w-history__row {
    display: flex;
    gap: 12px;
    padding: 10px 0;
}
.nl-w-history__row--bordered { border-top: 1px solid var(--nz-rule-soft); }
.nl-w-history__year {
    font-family: var(--nz-font-display);
    font-size: 18px;
    font-weight: 800;
    font-style: italic;
    color: var(--nz-red);
    min-width: 48px;
    line-height: 1.1;
}
.nl-w-history__info { flex: 1; min-width: 0; }
.nl-w-history__kind {
    font-size: 9px;
    color: var(--nz-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
}
.nl-w-history__title {
    font-size: 12px;
    color: var(--nz-ink);
    line-height: 1.4;
    margin-top: 2px;
}

/* ─── 6. Sole & Luna ──────────────────────────────────── */
.nl-w-sun__split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 14px;
}
.nl-w-sun__cell {
    text-align: center;
    padding: 10px;
    background: var(--nz-bg-soft);
}
.nl-w-sun__icon { font-size: 22px; }
.nl-w-sun__label {
    font-size: 9px;
    color: var(--nz-muted);
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-top: 4px;
}
.nl-w-sun__time {
    font-family: var(--nz-font-display);
    font-size: 20px;
    font-weight: 800;
    font-style: italic;
    color: var(--nz-ink);
    line-height: 1;
}
.nl-w-sun__bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 10px;
    border-top: 1px solid var(--nz-rule-soft);
}
.nl-w-sun__moon {
    display: flex;
    gap: 8px;
    align-items: center;
}
.nl-w-sun__moon-icon { font-size: 28px; }
.nl-w-sun__moon-pct {
    font-size: 9px;
    color: var(--nz-muted);
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    display: block;
}
.nl-w-sun__moon-phase {
    font-size: 12px;
    color: var(--nz-ink);
    font-weight: 600;
}
.nl-w-sun__daylen {
    text-align: right;
    font-size: 11px;
    color: var(--nz-muted);
}
.nl-w-sun__daylen-v {
    color: var(--nz-ink);
    font-weight: 700;
}

/* =============================================================
 * ARTICLE WIDGETS · Strategy A (contextual strip) + C (end hub)
 * Match design "Widget nellArticolo.html" — desktop + mobile.
 * ============================================================= */

/* ---------- A · CONTEXTUAL STRIP ---------- */
.nl-article-strip {
    background: #F7F6F2;
    border-left: 3px solid var(--nz-red);
    padding: 12px 14px;
    margin: 0 0 22px;
    display: flex;
    align-items: center;
    gap: 14px;
}
.nl-article-strip__lead {
    font-size: 9px;
    font-weight: 800;
    color: var(--nz-red);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    border-right: 1px solid var(--nz-rule);
    padding-right: 6px;
    line-height: 1;
    flex-shrink: 0;
}
.nl-article-strip__items {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    align-items: center;
    min-width: 0;
}
.nl-article-strip__item { min-width: 0; }

/* Micro-widget (shared inside strip) */
.nl-micro {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.nl-micro__label {
    font-size: 9px;
    font-weight: 800;
    color: var(--nz-muted);
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 4px;
    line-height: 1.1;
}
.nl-micro__body { min-width: 0; flex: 1; }
.nl-micro__sub {
    font-size: 9px;
    color: var(--nz-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

/* Meteo */
.nl-micro--meteo .nl-micro__icon {
    font-size: 26px;
    line-height: 1;
    flex-shrink: 0;
}
.nl-micro--meteo .nl-micro__temp {
    font-family: var(--nz-font-display);
    font-size: 20px;
    font-weight: 900;
    font-style: italic;
    line-height: 1;
    color: var(--nz-ink);
}

/* Allerta */
.nl-micro--allerta { display: block; }
.nl-micro--allerta .nl-micro__label { color: #FF7A00; }
.nl-micro--allerta-arancione .nl-micro__label { color: #FF7A00; }
.nl-micro--allerta-rossa .nl-micro__label { color: var(--nz-red); }
.nl-micro__alert-desc {
    font-size: 11px;
    font-weight: 700;
    color: var(--nz-ink);
    line-height: 1.3;
    margin-top: 2px;
}

/* Metro */
.nl-micro--metro { display: block; }
.nl-micro__metro-rows { display: flex; gap: 4px; flex-wrap: wrap; }
.nl-micro__metro-badge {
    width: 22px;
    height: 22px;
    color: #fff;
    display: inline-grid;
    place-items: center;
    font-weight: 900;
    font-style: italic;
    font-size: 10px;
    position: relative;
    flex-shrink: 0;
    line-height: 1;
}
.nl-micro__metro-dot {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    border: 1.5px solid #fff;
}
.nl-micro__metro-dot--ok   { background: #3FA34D; }
.nl-micro__metro-dot--slow { background: var(--nz-yellow); }
.nl-micro__metro-dot--down { background: var(--nz-red); }

/* Aria */
.nl-micro--air { color: #FF7A00; }
.nl-micro--air-ok   { color: #3FA34D; }
.nl-micro--air-warn { color: var(--nz-yellow); }
.nl-micro--air-bad  { color: #FF7A00; }
.nl-micro--air .nl-micro__air-gauge { flex-shrink: 0; line-height: 0; }
.nl-micro__air-cond {
    font-size: 12px;
    font-weight: 800;
    font-style: italic;
    color: inherit;
}

/* Sole */
.nl-micro--sole { display: block; }
.nl-micro__sole-times {
    font-size: 11px;
    font-family: var(--nz-font-mono);
    font-weight: 700;
    color: var(--nz-ink);
}

/* Sismi */
.nl-micro--sismi { display: block; }
.nl-micro--sismi-mute  .nl-micro__sismi-mag { color: var(--nz-muted); }
.nl-micro--sismi-warn  .nl-micro__sismi-mag { color: var(--nz-yellow); }
.nl-micro--sismi-bad   .nl-micro__sismi-mag { color: #FF7A00; }
.nl-micro__sismi-row { display: flex; align-items: center; gap: 6px; }
.nl-micro__sismi-mag {
    font-family: var(--nz-font-display);
    font-size: 14px;
    font-weight: 900;
    font-style: italic;
}
.nl-micro__sismi-meta {
    font-size: 10px;
    color: var(--nz-ink-2);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* History */
.nl-micro--history { display: block; }
.nl-micro__history-row {
    display: flex;
    align-items: baseline;
    gap: 6px;
}
.nl-micro__history-year {
    font-family: var(--nz-font-display);
    font-size: 14px;
    font-weight: 900;
    font-style: italic;
    color: var(--nz-red);
    flex-shrink: 0;
}
.nl-micro__history-title {
    font-size: 11px;
    color: var(--nz-ink-2);
    font-weight: 600;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* ---------- C · END-OF-ARTICLE HUB ---------- */
.nl-article-hub {
    margin: 30px 0 0;
    padding: 22px;
    background: var(--nz-ink);
    color: #fff;
}
.nl-article-hub__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
.nl-article-hub__title {
    font-family: var(--nz-font-display);
    font-size: 26px;
    font-weight: 900;
    font-style: italic;
    margin: 0;
    letter-spacing: -0.5px;
    color: #fff;
    line-height: 1.1;
}
.nl-article-hub__pulse {
    font-size: 10px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    flex-shrink: 0;
}
.nl-article-hub__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}
.nl-article-hub__card {
    background: #fff;
    color: var(--nz-ink);
    padding: 14px;
    min-width: 0;
}
.nl-hub-card__head {
    font-size: 9px;
    font-weight: 800;
    color: var(--nz-muted);
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 8px;
}
.nl-hub-card__main {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    min-height: 32px;
}
.nl-hub-card__sub {
    font-size: 10px;
    color: var(--nz-muted);
    line-height: 1.35;
}
.nl-hub-card__sub strong {
    color: var(--nz-ink);
    font-weight: 800;
}

/* Hub card · meteo+alert */
.nl-hub-card__icon { font-size: 30px; line-height: 1; }
.nl-hub-card__temp {
    font-family: var(--nz-font-display);
    font-size: 28px;
    font-weight: 900;
    font-style: italic;
    line-height: 1;
}
.nl-hub-card__alert {
    background: rgba(255, 122, 0, 0.12);
    border-left: 3px solid #FF7A00;
    padding: 6px 10px;
    font-size: 10px;
    font-weight: 700;
    color: var(--nz-ink);
    line-height: 1.35;
}
.nl-hub-card__alert--arancione { background: rgba(255, 122, 0, 0.15); border-left-color: #FF7A00; }
.nl-hub-card__alert--rossa     { background: rgba(227, 6, 19, 0.10);  border-left-color: var(--nz-red); }

/* Hub card · metro */
.nl-hub-card__metro-row {
    display: flex;
    gap: 6px;
    margin-bottom: 8px;
}
.nl-hub-card__metro-badge {
    width: 30px;
    height: 30px;
    color: #fff;
    display: inline-grid;
    place-items: center;
    font-weight: 900;
    font-style: italic;
    font-size: 13px;
    position: relative;
    flex-shrink: 0;
    line-height: 1;
}
.nl-hub-card__metro-dot {
    position: absolute;
    bottom: -3px;
    right: -3px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: 2px solid #fff;
}
.nl-hub-card__metro-dot--ok   { background: #3FA34D; }
.nl-hub-card__metro-dot--slow { background: var(--nz-yellow); }
.nl-hub-card__metro-dot--down { background: var(--nz-red); }

/* Hub card · air */
.nl-hub-card__air-gauge { line-height: 0; }
.nl-hub-card__air-gauge--ok   { color: #3FA34D; }
.nl-hub-card__air-gauge--warn { color: var(--nz-yellow); }
.nl-hub-card__air-gauge--bad  { color: #FF7A00; }
.nl-hub-card__air-label {
    font-family: var(--nz-font-display);
    font-size: 16px;
    font-weight: 800;
    font-style: italic;
}
.nl-hub-card__air-label--ok   { color: #3FA34D; }
.nl-hub-card__air-label--warn { color: var(--nz-yellow); }
.nl-hub-card__air-label--bad  { color: #FF7A00; }

/* Hub card · sole */
.nl-hub-card__sun-icon { font-size: 26px; line-height: 1; }
.nl-hub-card__sun-times {
    font-family: var(--nz-font-mono);
    font-size: 13px;
    font-weight: 700;
}

/* Hub card · sismi */
.nl-hub-card__sismi-mag {
    font-family: var(--nz-font-display);
    font-size: 26px;
    font-weight: 900;
    font-style: italic;
}
.nl-hub-card__sismi--mute .nl-hub-card__sismi-mag { color: var(--nz-muted); }
.nl-hub-card__sismi--warn .nl-hub-card__sismi-mag { color: var(--nz-yellow); }
.nl-hub-card__sismi--bad  .nl-hub-card__sismi-mag { color: #FF7A00; }

/* Hub card · history */
.nl-hub-card__history-year {
    font-family: var(--nz-font-display);
    font-size: 24px;
    font-weight: 900;
    font-style: italic;
    color: var(--nz-red);
    line-height: 1;
}
.nl-hub-card__history-title {
    color: var(--nz-ink-2);
    font-weight: 600;
    font-size: 11px;
    line-height: 1.4;
}

/* Hub CTA */
.nl-article-hub__cta-wrap {
    margin-top: 14px;
    text-align: center;
}
.nl-article-hub__cta {
    display: inline-block;
    background: var(--nz-red);
    color: #fff;
    padding: 10px 18px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
    text-decoration: none;
    text-transform: uppercase;
}
.nl-article-hub__cta:hover {
    background: var(--nz-red-dark);
    color: #fff;
}

/* ---------- MOBILE ---------- */
@media (max-width: 768px) {
    /* A · strip becomes a horizontal scroller, full-bleed */
    .nl-article-strip {
        margin-left: -14px;
        margin-right: -14px;
        margin-bottom: 14px;
        padding: 10px 14px;
        background: var(--nz-bg-soft);
        border-left: 0;
        border-top: 2px solid var(--nz-red);
        border-bottom: 1px solid var(--nz-rule);
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    .nl-article-strip__lead {
        writing-mode: horizontal-tb;
        transform: none;
        border-right: 0;
        padding-right: 0;
    }
    .nl-article-strip__items {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        scroll-snap-type: x proximity;
    }
    .nl-article-strip__items::-webkit-scrollbar { display: none; }
    .nl-article-strip__item {
        background: #fff;
        padding: 10px;
        min-width: 140px;
        flex-shrink: 0;
        border: 1px solid var(--nz-rule);
        scroll-snap-align: start;
    }

    /* C · hub stays full-width but with reduced padding + card stack */
    .nl-article-hub {
        margin-left: -14px;
        margin-right: -14px;
        padding: 16px 14px;
    }
    .nl-article-hub__title { font-size: 18px; }
    .nl-article-hub__grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .nl-article-hub__card { padding: 10px; }
    .nl-hub-card__main { gap: 10px; }
}

/* =============================================================
 * UTILITY STRIP · Home top — 5 slot orizzontali
 * Match design "Widget v2 Restyling + Positioning.html" strategia B.
 * ============================================================= */
.nl-utility-strip {
    background: #F7F6F2;
    border-bottom: 1px solid var(--nz-rule);
    padding: 12px 24px;
    margin-bottom: 20px;
}
.nl-utility-strip__items {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
    align-items: stretch;
}
/* Auto-flow: se non sono esattamente 5, distribuisce comunque */
.nl-utility-strip__items:has(.nl-utility-strip__slot:nth-child(4):last-child) { grid-template-columns: repeat(4, 1fr); }
.nl-utility-strip__items:has(.nl-utility-strip__slot:nth-child(3):last-child) { grid-template-columns: repeat(3, 1fr); }
.nl-utility-strip__slot {
    padding: 4px 14px;
    border-right: 1px solid var(--nz-rule);
    min-width: 0;
    display: flex;
    align-items: center;
}
.nl-utility-strip__slot:last-child { border-right: 0; }

/* Mobile: utility strip diventa scroller orizzontale a card */
@media (max-width: 768px) {
    .nl-utility-strip {
        padding: 10px 0 12px 14px;
        margin-bottom: 12px;
    }
    .nl-utility-strip__items {
        display: flex;
        grid-template-columns: none;
        gap: 8px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        scroll-snap-type: x proximity;
    }
    .nl-utility-strip__items::-webkit-scrollbar { display: none; }
    .nl-utility-strip__slot {
        background: #fff;
        padding: 10px;
        min-width: 140px;
        flex-shrink: 0;
        border: 1px solid var(--nz-rule);
        border-right: 1px solid var(--nz-rule);
        scroll-snap-align: start;
    }
}

/* =============================================================
 * IN-FEED MODULES · "<Città> in tempo reale" + "Vivi <Città> oggi"
 * Box editoriali con 2 widget side-by-side dentro al main della home.
 * ============================================================= */
.nl-infeed-module {
    margin: 28px 0;
    background: #F7F6F2;
    padding: 20px;
    border-left: 4px solid var(--nz-red);
}
.nl-infeed-module--vivi {
    border-left-color: var(--nz-ink);
}
.nl-infeed-module__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 14px;
}
.nl-infeed-module__title {
    font-family: var(--nz-font-display);
    font-size: 22px;
    font-weight: 900;
    font-style: italic;
    margin: 0;
    color: var(--nz-ink);
    letter-spacing: -0.3px;
    line-height: 1.1;
}
.nl-infeed-module__source {
    font-size: 10px;
    color: var(--nz-muted);
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.nl-infeed-module__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.nl-infeed-module__slot { min-width: 0; }
/* I widget originali dentro al modulo ereditano bg bianco per stacco vs bgSoft */
.nl-infeed-module__slot > .nl-widget { background: #fff; }

@media (max-width: 768px) {
    .nl-infeed-module {
        margin: 18px -14px;
        padding: 16px 14px;
    }
    .nl-infeed-module__grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .nl-infeed-module__title { font-size: 18px; }
}

/* Seismic empty state — quando filtro geo non rende eventi */
.nl-w-seismic__empty {
    padding: 18px 14px;
    color: var(--nz-muted);
    font-size: 12px;
    text-align: center;
    background: var(--nz-bg-soft);
    margin-top: 6px;
}

/* Category empty state — quando 0 articoli per la categoria.
 * Comunica chiaramente all'utente che la sezione esiste ma non ha
 * ancora contenuti, invece di mostrare placeholder/mock articoli. */
.nl-empty {
    padding: 60px 24px;
    text-align: center;
    color: var(--nz-muted);
    font-size: 15px;
    line-height: 1.5;
    background: var(--nz-bg-soft);
    border-left: 3px solid var(--nz-rule);
    margin: 12px 0 28px;
}