/* ============================================================
   OROSEIMETEO · ARCHIVIO / DETTAGLIO PREVISIONI
   Estensione di previsioni.css
   ============================================================ */

.forecast-detail-actions {
    margin-top: 24px;
}

.forecast-detail-actions button {
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    padding: 0 15px;
    border: 1px solid var(--om-line-strong);
    border-radius: 4px;
    background: #fff;
    color: #465c67;
    font: inherit;
    font-size: 15px;
    line-height: 1.2;
    font-weight: 700;
    cursor: pointer;
    transition:
        border-color .16s ease,
        background-color .16s ease,
        color .16s ease;
}

.forecast-detail-actions button:hover {
    border-color: #9fb5c0;
    background: #f7f7f7;
    color: var(--om-blue);
}

.forecast-share-note {
    display: none;
    max-width: 760px;
    margin-top: 14px;
    padding: 14px 16px;
    border-left: 3px solid var(--om-blue);
    background: #f7f7f7;
    color: #576b75;
    font-size: 14px;
    line-height: 1.5;
}

.forecast-share-note.is-visible {
    display: block;
}

.forecast-detail-extra {
    margin-top: 13px;
    padding-top: 13px;
    border-top: 1px solid var(--om-line);
}

.forecast-detail-extra p {
    margin: 7px 0 0;
    color: var(--om-muted);
    font-size: 14px;
    line-height: 1.5;
}

.forecast-detail-extra b {
    color: #465c67;
}

.forecast-rain-list {
    margin-top: 13px;
}

.forecast-rain-list p {
    margin: 6px 0 0;
    color: var(--om-muted);
    font-size: 14px;
    line-height: 1.5;
}

.forecast-rain-list b {
    color: var(--om-blue-dark);
}


/* ARCHIVIO */

.forecast-archive-list {
    display: grid;
    gap: 14px;
}

.forecast-archive-card {
    overflow: hidden;
    border: 1px solid var(--om-line);
    border-radius: 4px;
    background: #fff;
}

.forecast-archive-card-inner {
    padding: 26px 28px;
}

.forecast-archive-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 15px;
}

.forecast-archive-card h3 {
    margin: 14px 0 0;
    color: var(--om-blue-dark);
    font-size: 28px;
    line-height: 1.18;
    font-weight: 700;
}

.forecast-archive-card p {
    max-width: 940px;
    margin: 15px 0 0;
    color: #526872;
    font-size: 16px;
    line-height: 1.6;
}

.forecast-archive-card .forecast-anchor-nav {
    margin-top: 20px;
}

.forecast-archive-count {
    color: var(--om-muted);
    font-size: 15px;
    line-height: 1.4;
    font-weight: 600;
}

.forecast-archive-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 28px;
}

.forecast-archive-pagination a,
.forecast-archive-pagination span {
    display: grid;
    place-items: center;
    min-width: 40px;
    min-height: 40px;
    padding: 0 11px;
    border: 1px solid var(--om-line-strong);
    border-radius: 4px;
    background: #fff;
    color: #465c67;
    font-size: 14px;
    line-height: 1;
    font-weight: 700;
    text-decoration: none;
}

.forecast-archive-pagination a:hover {
    background: #f7f7f7;
    color: var(--om-blue);
}

.forecast-archive-pagination .is-current {
    border-color: var(--om-blue);
    background: var(--om-blue);
    color: #fff;
}


@media (max-width: 700px) {

    .forecast-detail-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .forecast-detail-actions a,
    .forecast-detail-actions button {
        width: 100%;
        justify-content: flex-start;
    }

    .forecast-archive-card-inner {
        padding: 21px 20px;
    }

    .forecast-archive-card h3 {
        font-size: 24px;
    }

    .forecast-archive-card p {
        font-size: 15px;
    }
}


/* ============================================================
   OROSEIMETEO · MEDIA BOLLETTINO V2
   ============================================================ */

.forecast-detail-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    max-width: 640px;
}

.forecast-detail-actions > a,
.forecast-detail-actions > button {
    width: 100%;
    justify-content: center;
    text-align: center;
}


/* GALLERIA */

.forecast-media-section {
    padding: 28px 30px 30px;
    border-top: 1px solid var(--om-line);
    background: #fff;
}

.forecast-media-section .forecast-subhead {
    margin-bottom: 20px;
}

.forecast-media-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.forecast-media-item {
    display: block;
    overflow: hidden;
    border: 1px solid var(--om-line);
    border-radius: 4px;
    background: #f7f7f7;
}

.forecast-media-item.is-main {
    grid-column: 1 / -1;
}

.forecast-media-item img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.forecast-media-item.is-main img {
    aspect-ratio: 16 / 9;
}


@media (max-width: 700px) {

    .forecast-detail-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px;
        max-width: none;
    }

    .forecast-detail-actions > a,
    .forecast-detail-actions > button {
        width: 100%;
        justify-content: center;
        padding-left: 8px;
        padding-right: 8px;
        font-size: 13px;
    }

    .forecast-media-section {
        padding: 22px 20px 24px;
    }

    .forecast-media-grid {
        gap: 8px;
    }
}


/* ============================================================
   OROSEIMETEO · MEDIA BOLLETTINO V3
   Dimensioni reali + didascalie facoltative
   ============================================================ */

.forecast-media-section {
    padding: 28px 30px 30px;
    border-top: 1px solid var(--om-line);
    background: #fff;
}

.forecast-media-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.forecast-media-figure {
    min-width: 0;
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--om-line);
    border-radius: 4px;
    background: #f7f7f7;
}

.forecast-media-figure.is-main {
    grid-column: 1 / -1;
}

.forecast-media-figure.is-main.is-portrait {
    width: min(100%, 560px);
    justify-self: center;
}

.forecast-media-figure.is-main.is-square {
    width: min(100%, 720px);
    justify-self: center;
}

.forecast-media-figure.is-main.is-landscape {
    width: 100%;
}

.forecast-media-figure.is-portrait:not(.is-main) {
    width: min(100%, 430px);
    justify-self: center;
}

.forecast-media-link {
    display: block;
    background: #f7f7f7;
}

.forecast-media-figure img {
    display: block;
    width: 100%;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    background: #f7f7f7;
}

.forecast-media-figure figcaption {
    padding: 11px 13px 12px;
    border-top: 1px solid var(--om-line);
    background: #fff;
    color: #526872;
    font-size: 14px;
    line-height: 1.45;
}


@media (max-width: 700px) {

    .forecast-media-section {
        padding: 22px 20px 24px;
    }

    .forecast-media-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .forecast-media-figure,
    .forecast-media-figure.is-main,
    .forecast-media-figure.is-main.is-portrait,
    .forecast-media-figure.is-main.is-square,
    .forecast-media-figure.is-main.is-landscape,
    .forecast-media-figure.is-portrait:not(.is-main) {
        grid-column: 1;
        width: 100%;
        max-width: none;
        justify-self: stretch;
    }

    .forecast-media-figure figcaption {
        font-size: 13px;
    }
}


/* ============================================================
   OROSEIMETEO_DESKTOP_EDITORIAL_COLUMNS_V4

   Desktop:
   due colonne indipendenti, senza righe forzate
   alla stessa altezza.

   Mobile:
   mantiene l'ordine originale:
   Temperature, Venti, Precipitazioni, Mari.
   ============================================================ */

@media (min-width: 701px) {

    .forecast-editorial-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
    }

    .forecast-editorial-column {
        min-width: 0;
    }

    .forecast-editorial-column +
    .forecast-editorial-column {
        border-left: 1px solid var(--om-line);
    }

    .forecast-editorial-column
    .forecast-info-card {
        width: 100%;
        min-width: 0;
        height: auto;
        border-left: 0 !important;
        border-bottom: 1px solid var(--om-line);
    }

    .forecast-editorial-column
    .forecast-info-card:last-child {
        border-bottom: 0;
    }
}


@media (max-width: 700px) {

    .forecast-editorial-grid {
        display: flex !important;
        flex-direction: column;
    }

    .forecast-editorial-column {
        display: contents;
    }

    .forecast-card-temp {
        order: 1;
    }

    .forecast-card-wind {
        order: 2;
    }

    .forecast-card-rain {
        order: 3;
    }

    .forecast-card-sea {
        order: 4;
    }

    .forecast-editorial-column
    .forecast-info-card {
        border-left: 0 !important;
    }
}


/* ============================================================
   OROSEIMETEO_ACTIVE_ALERTS_V1
   Avvisi meteo attivi nella pagina Previsioni
   ============================================================ */

.forecast-alerts-section {
    background: #fff;
}

.forecast-active-alert-list {
    display: grid;
    gap: 14px;
}

.forecast-active-alert {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(240px, 34%);
    overflow: hidden;
    border: 1px solid var(--om-line);
    border-left: 4px solid var(--om-blue);
    border-radius: 4px;
    background: #fff;
}

.forecast-active-alert:not(:has(.forecast-active-alert-media)) {
    grid-template-columns: 1fr;
}

.forecast-active-alert-content {
    min-width: 0;
    padding: 24px 26px;
}

.forecast-active-alert-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px 14px;
}

.forecast-active-alert-meta > span:last-child {
    color: var(--om-muted);
    font-size: 13px;
    font-weight: 600;
}

.forecast-active-alert h3 {
    margin: 12px 0 0;
    color: var(--om-blue-dark);
    font-size: 25px;
    line-height: 1.2;
    font-weight: 700;
}

.forecast-active-alert p {
    margin: 13px 0 0;
    color: #526872;
    font-size: 16px;
    line-height: 1.6;
}

.forecast-active-alert-validity {
    margin-top: 15px;
    padding-top: 12px;
    border-top: 1px solid var(--om-line);
    color: var(--om-muted-2);
    font-size: 13px;
    line-height: 1.4;
}

.forecast-active-alert-media {
    display: grid;
    place-items: center;
    min-width: 0;
    padding: 14px;
    border-left: 1px solid var(--om-line);
    background: #fafafa;
}

.forecast-active-alert-media a {
    display: block;
    width: 100%;
    text-align: center;
}

.forecast-active-alert-media img {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: 360px;
    height: auto;
    margin: auto;
    object-fit: contain;
}


@media (max-width: 700px) {

    .forecast-active-alert {
        grid-template-columns: 1fr;
    }

    .forecast-active-alert-content {
        padding: 20px;
    }

    .forecast-active-alert h3 {
        font-size: 22px;
    }

    .forecast-active-alert p {
        font-size: 15px;
    }

    .forecast-active-alert-media {
        padding: 12px;
        border-left: 0;
        border-top: 1px solid var(--om-line);
    }

    .forecast-active-alert-media img {
        max-height: none;
    }
}