:root {
    --m2-background: #f3f6fa;
    --m2-surface: #ffffff;
    --m2-text: #132238;
    --m2-muted: #64748b;
    --m2-border: #dce5ef;
    --m2-primary: #0567b1;
    --m2-primary-dark: #034b84;
    --m2-shadow: 0 16px 42px rgba(15, 42, 70, .08);
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--m2-background);
    color: var(--m2-text);
    font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
    line-height: 1.55;
}

a {
    color: var(--m2-primary);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

.m2-container {
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto;
}

.m2-header {
    background: #071d34;
    color: #fff;
}

.m2-header-inner {
    min-height: 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.m2-logo {
    color: #fff;
    font-size: 1.5rem;
    font-weight: 900;
    letter-spacing: .06em;
}

.m2-stage-badge {
    padding: 6px 10px;
    border: 1px solid rgba(255,255,255,.3);
    border-radius: 999px;
    font-size: .78rem;
}

.m2-breadcrumb {
    display: flex;
    gap: 9px;
    flex-wrap: wrap;
    padding: 22px 0;
    color: var(--m2-muted);
    font-size: .9rem;
}

.m2-hero {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 30px;
    padding: 42px;
    border-radius: 24px;
    background:
        linear-gradient(
            135deg,
            var(--m2-primary-dark),
            var(--m2-primary)
        );
    color: #fff;
    box-shadow: var(--m2-shadow);
}

.m2-hero h1 {
    margin: 7px 0 10px;
    font-size: clamp(2rem, 5vw, 3.7rem);
    line-height: 1.05;
}

.m2-hero p {
    max-width: 720px;
    margin: 0;
    font-size: 1.08rem;
    color: rgba(255,255,255,.88);
}

.m2-eyebrow {
    display: block;
    color: #77c9ff;
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.m2-location-summary {
    min-width: 210px;
    padding: 20px;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 18px;
    background: rgba(255,255,255,.12);
    backdrop-filter: blur(8px);
}

.m2-location-summary strong,
.m2-location-summary span {
    display: block;
}

.m2-location-summary strong {
    font-size: 1.3rem;
}

.m2-location-summary span {
    color: rgba(255,255,255,.78);
}

.m2-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
    margin-top: 24px;
}

.m2-card {
    padding: 28px;
    border: 1px solid var(--m2-border);
    border-radius: 20px;
    background: var(--m2-surface);
    box-shadow: var(--m2-shadow);
}

.m2-card h2 {
    margin-top: 0;
}

.m2-data-list {
    margin: 0;
}

.m2-data-list div {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 11px 0;
    border-bottom: 1px solid var(--m2-border);
}

.m2-data-list div:last-child {
    border-bottom: 0;
}

.m2-data-list dt {
    color: var(--m2-muted);
}

.m2-data-list dd {
    margin: 0;
    font-weight: 750;
}

.m2-weather-placeholder {
    background:
        linear-gradient(
            145deg,
            #ffffff,
            #edf7ff
        );
}

.m2-related {
    margin-top: 24px;
}

.m2-section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 20px;
}

.m2-section-heading h2 {
    margin: 5px 0 0;
}

.m2-related-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.m2-related-item {
    padding: 16px;
    border: 1px solid var(--m2-border);
    border-radius: 14px;
    background: #f8fafc;
}

.m2-related-item strong,
.m2-related-item span {
    display: block;
}

.m2-related-item span {
    margin-top: 3px;
    color: var(--m2-muted);
    font-size: .86rem;
}

.m2-preview-note {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin: 24px 0 40px;
    padding: 16px 20px;
    border-radius: 14px;
    background: #fff7d6;
    color: #6f5610;
}

.m2-footer {
    padding: 28px 0;
    background: #071d34;
    color: rgba(255,255,255,.75);
}

@media (max-width: 760px) {
    .m2-hero,
    .m2-grid {
        grid-template-columns: 1fr;
    }

    .m2-hero {
        padding: 28px 22px;
    }

    .m2-location-summary {
        min-width: 0;
    }

    .m2-related-grid {
        grid-template-columns: 1fr;
    }

    .m2-section-heading,
    .m2-preview-note {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* AURORA LIVE WEATHER */
.m2-current-weather {
    background:
        linear-gradient(
            145deg,
            #ffffff,
            #edf7ff
        );
}

.m2-weather-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.m2-weather-heading h2 {
    margin: 5px 0 0;
}

.m2-weather-updated {
    color: var(--m2-muted);
    font-size: .82rem;
    white-space: nowrap;
}

.m2-weather-main {
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 26px 0;
}

.m2-current-temperature {
    font-size: clamp(3.2rem, 8vw, 5.5rem);
    font-weight: 850;
    line-height: .9;
    letter-spacing: -.06em;
    color: var(--m2-primary-dark);
}

.m2-current-condition,
.m2-weather-source {
    display: block;
}

.m2-current-condition {
    font-size: 1.12rem;
}

.m2-weather-source {
    margin-top: 5px;
    color: var(--m2-muted);
    font-size: .8rem;
}

.m2-weather-values {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.m2-weather-values div {
    padding: 13px;
    border: 1px solid var(--m2-border);
    border-radius: 13px;
    background: rgba(255,255,255,.8);
}

.m2-weather-values span,
.m2-weather-values strong {
    display: block;
}

.m2-weather-values span {
    color: var(--m2-muted);
    font-size: .8rem;
}

.m2-weather-values strong {
    margin-top: 3px;
    font-size: .98rem;
}

.m2-weather-unavailable {
    margin-top: 22px;
    padding: 18px;
    border: 1px dashed var(--m2-border);
    border-radius: 14px;
    color: var(--m2-muted);
}

@media (max-width: 760px) {
    .m2-weather-heading {
        flex-direction: column;
    }

    .m2-weather-updated {
        white-space: normal;
    }
}

/* LIVE WEATHER REFRESH STATUS */
.m2-weather-refresh-status {
    margin-top: 14px;
    color: var(--m2-muted);
    font-size: .78rem;
}

.m2-weather-refresh-status[data-state="success"] {
    color: #177245;
}

.m2-weather-refresh-status[data-state="loading"] {
    color: var(--m2-primary);
}

.m2-weather-refresh-status[data-state="error"],
.m2-weather-refresh-status[data-state="unavailable"] {
    color: #a63a32;
}

[data-aurora-live-weather][aria-busy="true"] {
    opacity: .92;
}

/* =========================================================
   AURORA NATIONAL LOCATION HERO
   Unico componente per tutte le località italiane
   ========================================================= */

.m2-location-hero-pro {
    overflow: hidden;
    border-radius: 26px;
    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(89, 190, 255, .28),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            #061a31 0%,
            #074b82 52%,
            #0877bd 100%
        );
    color: #fff;
    box-shadow: var(--m2-shadow);
}

.m2-location-hero-main {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(260px, .55fr);
    align-items: center;
    gap: 34px;
    padding: 42px;
}

.m2-location-kicker {
    display: block;
    margin-bottom: 9px;
    color: #88d3ff;
    font-size: .75rem;
    font-weight: 850;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.m2-location-hero-copy h1 {
    margin: 0;
    font-size: clamp(2.3rem, 5.5vw, 4.6rem);
    line-height: .98;
    letter-spacing: -.045em;
}

.m2-location-subtitle {
    max-width: 700px;
    margin: 15px 0 20px;
    color: rgba(255, 255, 255, .83);
    font-size: 1.05rem;
}

.m2-location-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.m2-location-tags span {
    padding: 7px 11px;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 999px;
    background: rgba(255, 255, 255, .09);
    font-size: .76rem;
    font-weight: 700;
}

.m2-location-live-summary {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 22px;
}

.m2-location-temperature {
    font-size: clamp(4.2rem, 9vw, 7.6rem);
    font-weight: 900;
    line-height: .86;
    letter-spacing: -.08em;
}

.m2-location-condition {
    max-width: 210px;
}

.m2-location-condition strong,
.m2-location-condition span {
    display: block;
}

.m2-location-condition strong {
    font-size: 1.08rem;
    line-height: 1.3;
}

.m2-location-condition span {
    margin-top: 7px;
    color: rgba(255, 255, 255, .72);
    font-size: .78rem;
}

.m2-location-hero-data {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
    border-top: 1px solid rgba(255, 255, 255, .14);
    background: rgba(3, 22, 42, .24);
}

.m2-location-hero-data > div {
    min-width: 0;
    padding: 18px 22px;
    border-right: 1px solid rgba(255, 255, 255, .12);
}

.m2-location-hero-data > div:last-child {
    border-right: 0;
}

.m2-location-hero-data span,
.m2-location-hero-data strong {
    display: block;
}

.m2-location-hero-data span {
    color: rgba(255, 255, 255, .66);
    font-size: .75rem;
}

.m2-location-hero-data strong {
    overflow: hidden;
    margin-top: 4px;
    font-size: 1rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 840px) {
    .m2-location-hero-main {
        grid-template-columns: 1fr;
        padding: 30px 24px;
    }

    .m2-location-live-summary {
        justify-content: flex-start;
    }

    .m2-location-hero-data {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .m2-location-hero-data > div:nth-child(2) {
        border-right: 0;
    }

    .m2-location-hero-data > div:nth-child(-n+2) {
        border-bottom:
            1px solid rgba(255, 255, 255, .12);
    }
}

@media (max-width: 520px) {
    .m2-location-live-summary {
        align-items: flex-start;
        flex-direction: column;
        gap: 14px;
    }

    .m2-location-temperature {
        font-size: 5rem;
    }

    .m2-location-hero-data {
        grid-template-columns: 1fr;
    }

    .m2-location-hero-data > div {
        border-right: 0;
        border-bottom:
            1px solid rgba(255, 255, 255, .12);
    }

    .m2-location-hero-data > div:last-child {
        border-bottom: 0;
    }
}

/* HERO LIVE REFRESH */
.m2-hero-refresh-status {
    padding: 8px 22px 10px;
    border-top: 1px solid rgba(255, 255, 255, .08);
    background: rgba(3, 22, 42, .24);
    color: rgba(255, 255, 255, .65);
    font-size: .72rem;
    text-align: right;
}

.m2-hero-refresh-status[data-state="success"] {
    color: #9de7bd;
}

.m2-hero-refresh-status[data-state="loading"] {
    color: #9edcff;
}

.m2-hero-refresh-status[data-state="error"],
.m2-hero-refresh-status[data-state="unavailable"] {
    color: #ffc2bd;
}

.m2-location-hero-pro[aria-busy="true"] {
    opacity: .94;
}

.m2-grid-single {
    grid-template-columns: minmax(0, 1fr);
}

/* =========================================================
   AURORA REGION PAGES
   ========================================================= */

.m2-region-hero {
    padding: 44px;
    border-radius: 26px;
    background:
        radial-gradient(
            circle at 90% 0,
            rgba(123, 207, 255, .24),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #061a31,
            #075b97
        );
    color: #fff;
    box-shadow: var(--m2-shadow);
}

.m2-region-hero h1 {
    margin: 6px 0 12px;
    font-size: clamp(2.5rem, 6vw, 4.8rem);
    line-height: 1;
    letter-spacing: -.045em;
}

.m2-region-hero p {
    max-width: 720px;
    margin: 0;
    color: rgba(255, 255, 255, .82);
    font-size: 1.08rem;
}

.m2-region-stat-grid {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-top: 30px;
}

.m2-region-stat-grid > div {
    padding: 17px;
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 15px;
    background: rgba(255, 255, 255, .09);
}

.m2-region-stat-grid strong,
.m2-region-stat-grid span {
    display: block;
}

.m2-region-stat-grid strong {
    font-size: 1.65rem;
}

.m2-region-stat-grid span {
    color: rgba(255, 255, 255, .68);
    font-size: .78rem;
}

.m2-region-section {
    margin-top: 24px;
}

.m2-province-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.m2-province-item {
    padding: 18px;
    border: 1px solid var(--m2-border);
    border-radius: 15px;
    background: #f8fafc;
}

.m2-province-item strong,
.m2-province-item span {
    display: block;
}

.m2-province-item span {
    margin-top: 4px;
    color: var(--m2-muted);
    font-size: .82rem;
}

.m2-region-total {
    color: var(--m2-muted);
    font-size: .86rem;
}

@media (max-width: 760px) {
    .m2-region-hero {
        padding: 30px 23px;
    }

    .m2-region-stat-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .m2-province-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   AURORA PROVINCE PAGES
   ========================================================= */

.m2-province-hero {
    padding: 44px;
    border-radius: 26px;
    background:
        radial-gradient(
            circle at 88% 0,
            rgba(157, 222, 255, .24),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #071a30,
            #056aa9
        );
    color: #fff;
    box-shadow: var(--m2-shadow);
}

.m2-province-hero h1 {
    max-width: 950px;
    margin: 6px 0 12px;
    font-size: clamp(2.3rem, 5.5vw, 4.5rem);
    line-height: 1;
    letter-spacing: -.045em;
}

.m2-province-hero p {
    max-width: 760px;
    margin: 0;
    color: rgba(255, 255, 255, .82);
    font-size: 1.08rem;
}

@media (max-width: 760px) {
    .m2-province-hero {
        padding: 30px 23px;
    }
}

/* =========================================================
   AURORA FORECAST NAZIONALE
   ========================================================= */

.m2-forecast-widget {
    margin-top: 24px;
    padding: 26px;
    border: 1px solid var(--m2-border);
    border-radius: 22px;
    background: #fff;
    box-shadow: var(--m2-shadow);
}

.m2-forecast-widget[aria-busy="true"] {
    opacity: .92;
}

.m2-forecast-updated-group {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.m2-forecast-updated {
    color: var(--m2-muted);
    font-size: .78rem;
}

.m2-forecast-next-update {
    color: var(--m2-muted);
    font-size: .72rem;
    opacity: .8;
}

.m2-forecast-loading,
.m2-forecast-error {
    padding: 22px;
    border-radius: 14px;
    background: #f4f7fa;
    color: var(--m2-muted);
    text-align: center;
}

.m2-forecast-error {
    background: #fff4f2;
    color: #a63a32;
}

.m2-forecast-daily {
    display: grid;
    grid-template-columns:
        repeat(7, minmax(125px, 1fr));
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 7px;
}

.m2-forecast-day {
    min-width: 125px;
    padding: 15px;
    border: 1px solid var(--m2-border);
    border-radius: 15px;
    background: #f8fafc;
}

.m2-forecast-day-name,
.m2-forecast-day-condition,
.m2-forecast-temperatures,
.m2-forecast-rain {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 7px;
}

.m2-forecast-day-name span,
.m2-forecast-day-condition span,
.m2-forecast-rain span {
    color: var(--m2-muted);
    font-size: .72rem;
}

.m2-forecast-day-condition {
    min-height: 56px;
    margin: 12px 0;
    align-items: flex-start;
    flex-direction: column;
}

.m2-forecast-temperatures strong {
    font-size: 1.35rem;
}

.m2-forecast-temperatures span {
    color: var(--m2-muted);
}

.m2-forecast-rain {
    margin-top: 10px;
    padding-top: 9px;
    border-top: 1px solid var(--m2-border);
}

.m2-forecast-hourly-section {
    margin-top: 28px;
}

.m2-forecast-subheading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 13px;
}

.m2-forecast-subheading h3 {
    margin: 0;
}

.m2-forecast-subheading span {
    color: var(--m2-muted);
    font-size: .8rem;
}

.m2-forecast-hourly {
    display: flex;
    gap: 9px;
    overflow-x: auto;
    padding-bottom: 9px;
}

.m2-forecast-hour {
    min-width: 82px;
    padding: 13px 9px;
    border: 1px solid var(--m2-border);
    border-radius: 14px;
    background: #f8fafc;
    text-align: center;
}

.m2-forecast-hour strong,
.m2-forecast-hour b,
.m2-forecast-hour small {
    display: block;
}

.m2-forecast-hour b {
    margin: 7px 0;
    font-size: 1.08rem;
}

.m2-forecast-hour small {
    margin-top: 3px;
    color: var(--m2-muted);
    font-size: .66rem;
}

.m2-forecast-icon {
    display: inline-block;
    width: 31px;
    height: 31px;
    margin: 7px auto;
    border-radius: 50%;
    background: #dbeeff;
}

.m2-forecast-icon[data-icon="clear-day"] {
    background:
        radial-gradient(
            circle,
            #ffd84d 0 42%,
            #fff3b0 43% 62%,
            transparent 63%
        );
}

.m2-forecast-icon[data-icon="rain"],
.m2-forecast-icon[data-icon="showers"],
.m2-forecast-icon[data-icon="drizzle"] {
    background:
        linear-gradient(
            180deg,
            #b9d2e6 0 55%,
            #3795d2 56% 100%
        );
}

.m2-forecast-icon[data-icon="thunderstorm"] {
    background:
        linear-gradient(
            135deg,
            #8d9baa 0 55%,
            #ffd84d 56% 72%,
            #3f5b70 73%
        );
}

.m2-forecast-icon[data-icon="snow"] {
    background:
        radial-gradient(
            circle,
            #fff 0 35%,
            #bfe8ff 36% 100%
        );
}

.m2-forecast-icon[data-icon="cloudy"],
.m2-forecast-icon[data-icon="partly-cloudy"],
.m2-forecast-icon[data-icon="fog"] {
    background:
        linear-gradient(
            180deg,
            #d8e3ec,
            #9fb7ca
        );
}

.m2-forecast-footer {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    margin-top: 16px;
    padding-top: 13px;
    border-top: 1px solid var(--m2-border);
    color: var(--m2-muted);
    font-size: .72rem;
}

@media (max-width: 760px) {
    .m2-forecast-widget {
        padding: 20px 15px;
    }

    .m2-forecast-daily {
        grid-template-columns:
            repeat(7, 128px);
    }

    .m2-forecast-subheading,
    .m2-forecast-footer {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* =========================================================
   AURORA FORECAST CHART
   ========================================================= */

.m2-forecast-chart-panel {
    margin-top: 28px;
}

.m2-forecast-chart-wrap {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 12px 0 2px;
    border: 1px solid var(--m2-border);
    border-radius: 16px;
    background:
        linear-gradient(
            180deg,
            #fbfdff 0%,
            #f5f9fc 100%
        );
}

.m2-forecast-chart-wrap canvas {
    display: block;
    min-width: 760px;
}

.m2-chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    color: var(--m2-muted);
    font-size: .74rem;
}

.m2-chart-legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.m2-chart-legend i {
    display: inline-block;
    width: 18px;
    height: 5px;
    border-radius: 999px;
}

.m2-chart-legend-temp {
    background: rgba(8, 103, 168, .95);
}

.m2-chart-legend-rain {
    background: rgba(64, 149, 211, .34);
}

@media (max-width: 760px) {
    .m2-forecast-chart-panel
    .m2-forecast-subheading {
        align-items: flex-start;
        flex-direction: column;
    }

    .m2-forecast-chart-wrap {
        margin-right: -4px;
    }
}

.m2-weather-console{
margin:24px 0;
}

.m2-weather-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
gap:14px;
}

.m2-weather-cell{
background:#fff;
border:1px solid #e7edf4;
border-radius:14px;
padding:14px;
}

.m2-weather-cell span{
display:block;
font-size:.78rem;
color:#708090;
margin-bottom:6px;
}

.m2-weather-cell strong{
font-size:1.08rem;
font-weight:700;
color:#16324f;
}

/* ===========================================================
   AURORA WEATHER CONSOLE PREMIUM
   =========================================================== */

.m2-weather-console{

margin:34px 0;

padding:28px;

border-radius:22px;

background:
linear-gradient(
180deg,
#ffffff,
#f7fbff
);

border:1px solid #dfe9f4;

box-shadow:
0 12px 35px rgba(24,48,78,.07);

}

.m2-weather-grid{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(170px,1fr));

gap:18px;

}

.m2-weather-cell{

padding:18px;

border-radius:18px;

background:#fff;

border:1px solid #e7eef5;

transition:.25s;

}

.m2-weather-cell:hover{

transform:translateY(-3px);

box-shadow:
0 10px 22px rgba(0,0,0,.08);

}

.m2-weather-cell span{

display:block;

font-size:.76rem;

text-transform:uppercase;

letter-spacing:.08em;

font-weight:700;

color:#6f8398;

margin-bottom:8px;

}

.m2-weather-cell strong{

display:block;

font-size:1.35rem;

font-weight:700;

color:#18324f;

line-height:1.2;

}

@media(max-width:700px){

.m2-weather-console{

padding:18px;

}

.m2-weather-grid{

grid-template-columns:
repeat(2,minmax(0,1fr));

gap:12px;

}

.m2-weather-cell{

padding:14px;

}

.m2-weather-cell strong{

font-size:1.1rem;

}

}


/* ===========================================================
   AURORA WEATHER SUMMARY PREMIUM
   =========================================================== */

.m2-weather-summary {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 24px;
    margin: 24px 0;
    padding: 26px 28px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 22px;
    background:
        radial-gradient(
            circle at 85% 10%,
            rgba(255, 255, 255, .18),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            #075f9d,
            #0b82c5
        );
    color: #fff;
    box-shadow:
        0 18px 40px rgba(6, 74, 119, .18);
}

.m2-weather-summary-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 82px;
    height: 82px;
    font-size: 62px;
    line-height: 1;
}


.m2-weather-summary-main {
    display: flex;
    align-items: center;
    gap: 24px;
}

.m2-weather-summary-main > strong {
    font-size: clamp(3.2rem, 7vw, 5.6rem);
    line-height: .9;
    letter-spacing: -.06em;
}

.m2-weather-summary-main h3 {
    margin: 0 0 6px;
    font-size: clamp(1.15rem, 2.4vw, 1.65rem);
}

.m2-weather-summary-main span,
.m2-weather-summary-extra span {
    color: rgba(255,255,255,.76);
    font-size: .78rem;
}

.m2-weather-summary-extra {
    min-width: 150px;
    padding-left: 24px;
    border-left: 1px solid rgba(255,255,255,.22);
}

.m2-weather-summary-extra span,
.m2-weather-summary-extra strong {
    display: block;
}

.m2-weather-summary-extra strong {
    margin-top: 7px;
    font-size: 1.65rem;
}

@media (max-width: 760px) {
    .m2-weather-summary {
        grid-template-columns: auto 1fr;
        gap: 16px;
        padding: 22px 18px;
    }

    .m2-weather-summary-icon {
        width: 62px;
        height: 62px;
    }

    .m2-weather-summary-main {
        gap: 14px;
    }

    .m2-weather-summary-main > strong {
        font-size: 3.2rem;
    }

    .m2-weather-summary-extra {
        grid-column: 1 / -1;
        padding: 14px 0 0;
        border-top: 1px solid rgba(255,255,255,.22);
        border-left: 0;
    }
}

/* =====================================================
   AURORA HOURLY TIMELINE
   ===================================================== */

.m2-hourly-timeline{

margin:32px 0;

overflow-x:auto;

}

.m2-hourly-track{

display:flex;

gap:14px;

padding:8px 4px 14px;

min-width:max-content;

}

.m2-hour-card{

width:84px;

flex:0 0 auto;

padding:14px 10px;

border-radius:18px;

background:#fff;

border:1px solid #e5edf5;

text-align:center;

transition:.25s;

}

.m2-hour-card:hover{

transform:translateY(-3px);

box-shadow:0 10px 24px rgba(0,0,0,.08);

}

.m2-hour-time{

font-size:.78rem;

font-weight:700;

color:#61788e;

}

.m2-hour-icon{

font-size:1.6rem;

margin:10px 0;

}

.m2-hour-temp{

font-size:1.25rem;

font-weight:700;

color:#17314f;

}

.m2-hour-rain{

margin-top:8px;

font-size:.72rem;

color:#2c8ad6;

}

.m2-hour-wind{

margin-top:6px;

font-size:.70rem;

color:#7a8795;

}


/* =====================================================
   AURORA HOURLY TIMELINE LIVE
   ===================================================== */

.m2-hourly-timeline {
    position: relative;
    margin: 30px 0;
    padding: 4px 0 8px;
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: #9fc6df transparent;
}

.m2-hourly-track {
    display: flex;
    gap: 12px;
    width: max-content;
    min-width: 100%;
    padding: 8px 3px 14px;
}

.m2-hour-card {
    position: relative;
    width: 112px;
    min-height: 245px;
    flex: 0 0 112px;
    padding: 15px 12px;
    overflow: hidden;
    border: 1px solid #dfeaf3;
    border-radius: 19px;
    background:
        linear-gradient(
            180deg,
            #ffffff,
            #f5f9fc
        );
    text-align: center;
    transition:
        transform .22s ease,
        box-shadow .22s ease,
        border-color .22s ease;
}

.m2-hour-card:hover {
    transform: translateY(-4px);
    border-color: #9bcbea;
    box-shadow:
        0 14px 30px rgba(20, 75, 113, .12);
}

.m2-hour-card.is-current {
    border-color: #168fd1;
    background:
        linear-gradient(
            180deg,
            #eaf7ff,
            #ffffff
        );
    box-shadow:
        0 12px 28px rgba(15, 139, 205, .15);
}

.m2-hour-card.is-current::before {
    position: absolute;
    top: 0;
    right: 18px;
    left: 18px;
    height: 4px;
    border-radius: 0 0 999px 999px;
    background: #1396db;
    content: "";
}

.m2-hour-time {
    min-height: 20px;
    color: #5d758a;
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .03em;
}

.m2-hour-icon {
    margin: 12px 0 7px;
    font-size: 2rem;
    line-height: 1;
}

.m2-hour-temp {
    color: #132f4b;
    font-size: 1.55rem;
    font-weight: 800;
    line-height: 1;
}

.m2-hour-condition {
    min-height: 30px;
    margin-top: 8px;
    overflow: hidden;
    color: #718294;
    font-size: .68rem;
    line-height: 1.25;
}

.m2-hour-rain,
.m2-hour-wind {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 2px 6px;
    margin-top: 11px;
    padding-top: 9px;
    border-top: 1px solid #e4ecf3;
    text-align: left;
}

.m2-hour-rain > span,
.m2-hour-wind > span {
    grid-row: 1 / 3;
}

.m2-hour-rain strong,
.m2-hour-wind strong {
    color: #24445f;
    font-size: .72rem;
}

.m2-hour-rain small,
.m2-hour-wind small {
    color: #7a8c9d;
    font-size: .62rem;
}

@media (max-width: 760px) {
    .m2-hourly-track {
        gap: 9px;
    }

    .m2-hour-card {
        width: 102px;
        flex-basis: 102px;
        min-height: 232px;
        padding: 14px 10px;
    }
}

/* =========================================================
   AURORA FORECAST CHART PREMIUM
   ========================================================= */

.m2-forecast-chart-panel {
    position: relative;
}

.m2-forecast-chart-wrap {
    position: relative;
    min-height: 360px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
    scrollbar-color: #a9c9dd transparent;
}

.m2-forecast-chart-wrap canvas {
    display: block;
    min-width: 760px;
    min-height: 360px;
}

.m2-forecast-chart-wrap::after {
    position: absolute;
    right: 12px;
    bottom: 9px;
    color: #8093a4;
    font-size: .64rem;
    content: "Temperatura · precipitazioni";
    pointer-events: none;
}

@media (max-width: 760px) {
    .m2-forecast-chart-wrap {
        min-height: 340px;
    }

    .m2-forecast-chart-wrap canvas {
        min-height: 340px;
    }
}

/* =========================================================
   AURORA FORECAST 10 GIORNI PREMIUM
   ========================================================= */

.m2-daily-premium {
    margin-top: 30px;
}

.m2-forecast-daily {
    display: grid;
    grid-template-columns:
        repeat(5, minmax(165px, 1fr));
    gap: 14px;
    overflow: visible;
}

.m2-daily-card {
    position: relative;
    padding: 18px;
    overflow: hidden;
    border: 1px solid #dfe9f2;
    border-radius: 19px;
    background:
        linear-gradient(
            180deg,
            #ffffff,
            #f7fafc
        );
    transition:
        transform .2s ease,
        box-shadow .2s ease,
        border-color .2s ease;
}

.m2-daily-card:hover {
    transform: translateY(-4px);
    border-color: #9bcce9;
    box-shadow:
        0 14px 30px rgba(22, 76, 112, .11);
}

.m2-daily-card.is-today {
    border-color: #168fd1;
    background:
        linear-gradient(
            180deg,
            #eaf7ff,
            #ffffff
        );
}

.m2-daily-card.is-today::before {
    position: absolute;
    top: 0;
    right: 22px;
    left: 22px;
    height: 4px;
    border-radius: 0 0 999px 999px;
    background: #148fd1;
    content: "";
}

.m2-daily-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.m2-daily-header strong,
.m2-daily-header span {
    display: block;
}

.m2-daily-header strong {
    color: #173550;
    font-size: .92rem;
}

.m2-daily-header span {
    margin-top: 3px;
    color: #798b9a;
    font-size: .68rem;
}

.m2-daily-header b {
    padding: 4px 7px;
    border-radius: 999px;
    background: #148fd1;
    color: #fff;
    font-size: .58rem;
    letter-spacing: .06em;
}

.m2-daily-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin: 18px 0 12px;
}

.m2-daily-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    font-size: 36px;
    line-height: 1;
}


.m2-daily-temperature {
    text-align: right;
}

.m2-daily-temperature strong {
    display: block;
    color: #102f4a;
    font-size: 1.75rem;
    line-height: 1;
}

.m2-daily-temperature span {
    display: block;
    margin-top: 4px;
    color: #758899;
    font-size: 1rem;
}

.m2-daily-condition {
    min-height: 35px;
    color: #63798c;
    font-size: .74rem;
    line-height: 1.35;
}

.m2-daily-details {
    display: grid;
    gap: 8px;
    margin-top: 14px;
    padding-top: 13px;
    border-top: 1px solid #e4ecf2;
}

.m2-daily-details > div {
    display: grid;
    grid-template-columns:
        1fr auto;
    align-items: center;
    gap: 2px 8px;
}

.m2-daily-details span {
    color: #718699;
    font-size: .67rem;
}

.m2-daily-details strong {
    color: #25445f;
    font-size: .72rem;
}

.m2-daily-details small {
    grid-column: 1 / -1;
    color: #8a99a6;
    font-size: .59rem;
}

@media (max-width: 1100px) {
    .m2-forecast-daily {
        grid-template-columns:
            repeat(3, minmax(165px, 1fr));
    }
}

@media (max-width: 760px) {
    .m2-forecast-daily {
        display: flex;
        gap: 10px;
        overflow-x: auto;
        padding-bottom: 10px;
        scrollbar-width: thin;
    }

    .m2-daily-card {
        width: 180px;
        flex: 0 0 180px;
    }
}

/* ==========================================================
   AURORA GENERATED WEATHER CONTENT
   ========================================================== */

.m2-location-generated-content {
    width: min(1180px, calc(100% - 32px));
    margin: 40px auto;
}

.m2-generated-weather-content {
    padding: clamp(22px, 4vw, 42px);
    border: 1px solid rgba(10, 49, 82, 0.10);
    border-radius: 28px;
    background: #ffffff;
    box-shadow: 0 18px 50px rgba(7, 29, 52, 0.08);
}

.m2-generated-weather-header h1 {
    margin: 0 0 12px;
    font-size: clamp(28px, 4vw, 44px);
    line-height: 1.08;
}

.m2-generated-weather-excerpt {
    margin: 0;
    font-size: 18px;
    line-height: 1.65;
    color: #42566a;
}

.m2-weather-intelligence {
    margin: 28px 0;
    padding: 22px;
    border-radius: 20px;
    background: #f2f7fb;
}

.m2-weather-intelligence h2 {
    margin-top: 0;
}

.m2-risk-medium {
    border-left: 5px solid #e0a21a;
}

.m2-risk-high {
    border-left: 5px solid #c84343;
}

.m2-generated-weather-body h2,
.m2-generated-weather-faq h2 {
    margin: 34px 0 12px;
    font-size: clamp(22px, 3vw, 30px);
}

.m2-generated-weather-body p,
.m2-generated-weather-faq p {
    font-size: 17px;
    line-height: 1.75;
    color: #263b4d;
}

.m2-generated-weather-faq details {
    padding: 16px 0;
    border-bottom: 1px solid rgba(10, 49, 82, 0.12);
}

.m2-generated-weather-faq summary {
    cursor: pointer;
    font-size: 17px;
    font-weight: 700;
}

@media (max-width: 640px) {
    .m2-location-generated-content {
        width: min(100% - 20px, 1180px);
        margin: 26px auto;
    }

    .m2-generated-weather-content {
        padding: 20px 16px;
        border-radius: 22px;
    }
}

/* ==========================================================
   METEO2 SMART SUMMARY
   ========================================================== */

.m2-ai-summary {
    margin: 26px 0 30px;
    padding: clamp(20px, 3vw, 30px);
    overflow: hidden;
    border: 1px solid rgba(36, 119, 185, 0.18);
    border-radius: 24px;
    background:
        radial-gradient(
            circle at top right,
            rgba(89, 185, 255, 0.20),
            transparent 42%
        ),
        linear-gradient(
            135deg,
            #f4faff 0%,
            #ffffff 58%,
            #f6fbff 100%
        );
    box-shadow: 0 16px 42px rgba(7, 29, 52, 0.09);
}

.m2-ai-summary-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.m2-ai-summary-heading h2 {
    margin: 0;
    color: #071d34;
    font-size: clamp(24px, 3vw, 34px);
    line-height: 1.15;
}

.m2-ai-summary-badge {
    display: inline-flex;
    padding: 7px 11px;
    border-radius: 999px;
    background: #0a5c96;
    color: #ffffff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.m2-ai-summary-text {
    max-width: 900px;
    margin: 0 0 20px;
    color: #243c50;
    font-size: clamp(16px, 2vw, 19px);
    line-height: 1.65;
}

.m2-ai-summary-grid {
    display: grid;
    grid-template-columns:
        repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.m2-ai-summary-item {
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 74px;
    padding: 13px 15px;
    border: 1px solid rgba(7, 29, 52, 0.08);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.82);
}

.m2-ai-summary-icon {
    font-size: 25px;
    line-height: 1;
}

.m2-ai-summary-data {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.m2-ai-summary-data strong {
    color: #62768a;
    font-size: 11px;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.m2-ai-summary-data span {
    overflow-wrap: anywhere;
    color: #0a263e;
    font-size: 15px;
    font-weight: 750;
}

.m2-ai-summary-updated {
    display: block;
    margin-top: 16px;
    color: #6b7e8f;
    font-size: 12px;
}

@media (max-width: 640px) {
    .m2-ai-summary {
        margin: 20px 0 24px;
        padding: 18px 14px;
        border-radius: 20px;
    }

    .m2-ai-summary-grid {
        grid-template-columns: 1fr 1fr;
        gap: 9px;
    }

    .m2-ai-summary-item {
        min-height: 68px;
        padding: 11px;
    }

    .m2-ai-summary-icon {
        font-size: 21px;
    }

    .m2-ai-summary-data span {
        font-size: 14px;
    }
}

@media (max-width: 390px) {
    .m2-ai-summary-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================
   AURORA GEO SEO PANEL
   ========================================================== */

.m2-geo-seo-panel {
    width: min(1180px, calc(100% - 32px));
    margin: 34px auto;
    padding: clamp(22px, 4vw, 38px);
    border: 1px solid rgba(7, 29, 52, 0.10);
    border-radius: 28px;
    background:
        radial-gradient(
            circle at top right,
            rgba(65, 157, 224, 0.14),
            transparent 38%
        ),
        #ffffff;
    box-shadow: 0 18px 50px rgba(7, 29, 52, 0.08);
}

.m2-geo-seo-header {
    max-width: 850px;
    margin-bottom: 26px;
}

.m2-geo-seo-kicker {
    display: inline-flex;
    margin-bottom: 10px;
    padding: 6px 11px;
    border-radius: 999px;
    background: rgba(10, 92, 150, 0.10);
    color: #0a5c96;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.m2-geo-seo-header h2 {
    margin: 0 0 12px;
    color: #071d34;
    font-size: clamp(25px, 3.2vw, 38px);
    line-height: 1.15;
}

.m2-geo-seo-header p {
    margin: 0;
    color: #465e71;
    font-size: 17px;
    line-height: 1.65;
}

.m2-geo-seo-layout {
    display: grid;
    grid-template-columns: minmax(260px, .8fr) minmax(0, 1.5fr);
    gap: 26px;
}

.m2-geo-seo-facts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-content: start;
    gap: 10px;
    margin: 0;
}

.m2-geo-seo-facts div {
    padding: 14px;
    border: 1px solid rgba(7, 29, 52, 0.08);
    border-radius: 15px;
    background: #f7fafc;
}

.m2-geo-seo-facts dt {
    margin-bottom: 5px;
    color: #718496;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.m2-geo-seo-facts dd {
    margin: 0;
    color: #102d45;
    font-size: 15px;
    font-weight: 750;
    overflow-wrap: anywhere;
}

.m2-geo-seo-facts a {
    color: #075f9a;
    text-decoration: none;
}

.m2-geo-seo-facts a:hover {
    text-decoration: underline;
}

.m2-geo-seo-links h3 {
    margin: 0 0 14px;
    color: #102d45;
    font-size: 20px;
}

.m2-geo-seo-links-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
}

.m2-geo-seo-links-grid a {
    display: grid;
    gap: 5px;
    min-height: 92px;
    padding: 15px 17px;
    border: 1px solid rgba(7, 29, 52, 0.09);
    border-radius: 16px;
    background: rgba(246, 250, 253, 0.92);
    color: inherit;
    text-decoration: none;
    transition:
        transform .18s ease,
        border-color .18s ease,
        box-shadow .18s ease;
}

.m2-geo-seo-links-grid a:hover {
    transform: translateY(-2px);
    border-color: rgba(10, 92, 150, 0.28);
    box-shadow: 0 10px 24px rgba(7, 29, 52, 0.08);
}

.m2-geo-seo-links-grid strong {
    color: #0a5c96;
    font-size: 15px;
}

.m2-geo-seo-links-grid span {
    color: #5c7081;
    font-size: 13px;
    line-height: 1.45;
}

@media (max-width: 820px) {
    .m2-geo-seo-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .m2-geo-seo-panel {
        width: min(100% - 20px, 1180px);
        margin: 26px auto;
        padding: 20px 15px;
        border-radius: 22px;
    }

    .m2-geo-seo-facts {
        grid-template-columns: 1fr 1fr;
    }

    .m2-geo-seo-links-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 390px) {
    .m2-geo-seo-facts {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================
   AURORA INTERNAL LINK ENGINE
   ========================================================== */

.m2-internal-link {
    position: relative;
}

.m2-internal-link::after {
    position: absolute;
    top: 14px;
    right: 14px;
    color: #7890a4;
    font-size: 16px;
    content: "→";
    transition: transform .18s ease;
}

.m2-internal-link:hover::after {
    transform: translateX(3px);
}

.m2-internal-link-nearby {
    background: #ffffff;
}

.m2-internal-link-province,
.m2-internal-link-region {
    border-color: rgba(10, 92, 150, 0.20);
    background: #eef7fd;
}

/* ==========================================================
   AURORA SEMANTIC SEO
   ========================================================== */

.m2-semantic-seo {
    width: min(1180px, calc(100% - 32px));
    margin: 34px auto;
    padding: clamp(22px, 4vw, 38px);
    border: 1px solid rgba(7, 29, 52, 0.10);
    border-radius: 28px;
    background: #ffffff;
    box-shadow: 0 18px 50px rgba(7, 29, 52, 0.07);
}

.m2-semantic-seo > header {
    max-width: 780px;
    margin-bottom: 22px;
}

.m2-semantic-seo > header span {
    display: inline-flex;
    margin-bottom: 9px;
    color: #0a5c96;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.m2-semantic-seo > header h2 {
    margin: 0;
    color: #071d34;
    font-size: clamp(25px, 3vw, 38px);
    line-height: 1.15;
}

.m2-semantic-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.m2-semantic-item {
    padding: 19px;
    border: 1px solid rgba(7, 29, 52, 0.08);
    border-radius: 18px;
    background: #f7fafc;
}

.m2-semantic-item h3 {
    margin: 0 0 10px;
    color: #0a5c96;
    font-size: 18px;
}

.m2-semantic-item p {
    margin: 0;
    color: #40586b;
    font-size: 15px;
    line-height: 1.7;
}

@media (max-width: 850px) {
    .m2-semantic-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .m2-semantic-seo {
        width: min(100% - 20px, 1180px);
        margin: 26px auto;
        padding: 20px 15px;
        border-radius: 22px;
    }
}

/* ==========================================================
   AURORA KNOWLEDGE GRAPH
   ========================================================== */

.m2-knowledge-wrapper {
    width: min(1180px, calc(100% - 32px));
    margin: 34px auto;
}

.m2-knowledge {
    padding: clamp(22px, 4vw, 38px);
    border: 1px solid rgba(7, 29, 52, 0.10);
    border-radius: 28px;
    background:
        radial-gradient(
            circle at top right,
            rgba(107, 182, 255, 0.14),
            transparent 38%
        ),
        #ffffff;
    box-shadow: 0 18px 50px rgba(7, 29, 52, 0.07);
}

.m2-knowledge h2 {
    margin: 0 0 20px;
    color: #071d34;
    font-size: clamp(25px, 3vw, 38px);
    line-height: 1.15;
}

.m2-knowledge-grid {
    display: grid;
    grid-template-columns:
        repeat(auto-fit, minmax(190px, 1fr));
    gap: 12px;
}

.m2-knowledge-item {
    display: grid;
    gap: 5px;
    min-height: 82px;
    padding: 15px 16px;
    border: 1px solid rgba(7, 29, 52, 0.08);
    border-radius: 16px;
    background: #f7fafc;
    color: inherit;
    text-decoration: none;
}

.m2-knowledge-item:hover {
    border-color: rgba(10, 92, 150, 0.28);
    box-shadow: 0 10px 24px rgba(7, 29, 52, 0.07);
}

.m2-knowledge-item strong {
    color: #0a5c96;
    font-size: 15px;
}

.m2-knowledge-item span {
    color: #687d8e;
    font-size: 12px;
    letter-spacing: .04em;
    text-transform: uppercase;
}

@media (max-width: 640px) {
    .m2-knowledge-wrapper {
        width: min(100% - 20px, 1180px);
        margin: 26px auto;
    }

    .m2-knowledge {
        padding: 20px 15px;
        border-radius: 22px;
    }

    .m2-knowledge-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 390px) {
    .m2-knowledge-grid {
        grid-template-columns: 1fr;
    }
}