/* ============================================================
   OROSEIMETEO · PAGINE WEBCAM
   Timelapse + Archivio
   Stile coerente con Webcam, Home, Stazioni e Previsioni.
   ============================================================ */

/* ============================================================
   TESTATA CONDIVISA
   ============================================================ */

.webcam-page-head {
    background: #fff;
    border-bottom: 1px solid var(--om-line-strong, #d9e0e4);
}

.webcam-page-head-inner {
    min-height: 250px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 48px;
    padding-top: 54px;
    padding-bottom: 54px;
}

.webcam-page-head-copy {
    min-width: 0;
}

.webcam-page-kicker {
    display: block;
    color: var(--om-blue, #147fa8);
    font-size: 14px;
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: .055em;
    text-transform: uppercase;
}

.webcam-page-head h1,
.webcam-page h1 {
    margin: 8px 0 0;
    color: var(--om-blue-dark, #163f58);
    font-size: clamp(44px, 5vw, 62px);
    line-height: 1.02;
    letter-spacing: -.8px;
    font-weight: 700;
}

.webcam-page-lead {
    max-width: 760px;
    margin: 15px 0 0;
    color: var(--om-muted, #6e7f88);
    font-size: 19px;
    line-height: 1.55;
}

/* ============================================================
   NAV WEBCAM / TIMELAPSE / ARCHIVIO
   ============================================================ */

.webcam-section-nav {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

.webcam-section-nav a {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 15px;
    border: 1px solid var(--om-line-strong, #d9e0e4);
    border-radius: 4px;
    background: #fff;
    color: #4b606b;
    font-size: 15px;
    line-height: 1.2;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.webcam-section-nav a:hover {
    border-color: #9fb5c0;
    background: #f7f7f7;
}

.webcam-section-nav a.is-active {
    border-color: var(--om-blue, #147fa8);
    background: var(--om-blue, #147fa8);
    color: #fff;
}

/* ============================================================
   CONTENUTO PAGINA
   ============================================================ */

.webcam-page {
    padding: 34px 0 64px;
    background: #fff;
}

.webcam-page .container {
    width: min(1280px, calc(100% - 40px));
}

.webcam-page-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 20px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--om-line, #e1e5e8);
}

.webcam-page-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 14px;
    border: 1px solid var(--om-line-strong, #d9e0e4);
    border-radius: 4px;
    background: #fff;
    color: #4b606b;
    text-decoration: none;
    font-size: 15px;
    line-height: 1.2;
    font-weight: 700;
}

.webcam-page-back:hover {
    border-color: #9fb5c0;
    background: #f7f7f7;
}

.webcam-page-current {
    min-width: 0;
    text-align: right;
}

.webcam-page-current span {
    display: block;
    color: var(--om-muted-2, #87949b);
    font-size: 12px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.webcam-page-current strong {
    display: block;
    margin-top: 4px;
    color: var(--om-blue-dark, #163f58);
    font-size: 18px;
    line-height: 1.2;
    font-weight: 700;
}

/* ============================================================
   SELETTORE WEBCAM
   ============================================================ */

.webcam-camera-switch {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: 0 0 34px;
}

.webcam-camera-switch a {
    min-width: 0;
    position: relative;
    display: block;
    padding: 16px 17px;
    border: 1px solid var(--om-line, #e1e5e8);
    border-radius: 4px;
    background: #fff;
    color: inherit;
    text-decoration: none;
}

.webcam-camera-switch a:hover {
    border-color: #aebdc5;
    background: #fafafa;
}

.webcam-camera-switch a.is-active {
    border-color: var(--om-blue, #147fa8);
}

.webcam-camera-switch a.is-active::before {
    content: "";
    position: absolute;
    top: -1px;
    left: -1px;
    bottom: -1px;
    width: 4px;
    background: var(--om-blue, #147fa8);
    border-radius: 4px 0 0 4px;
}

.webcam-camera-switch strong {
    display: block;
    color: var(--om-blue-dark, #163f58);
    font-size: 18px;
    line-height: 1.2;
    font-weight: 700;
}

.webcam-camera-switch a.is-active strong {
    color: var(--om-blue, #147fa8);
}

.webcam-camera-switch small {
    display: block;
    margin-top: 4px;
    color: var(--om-muted, #6e7f88);
    font-size: 13px;
    line-height: 1.35;
}

/* ============================================================
   CONTENITORE NATIVO / MANUTENZIONE
   ============================================================ */

.webcam-native-shell {
    overflow: hidden;
    border: 1px solid var(--om-line, #e1e5e8);
    border-radius: 4px;
    background: #fff;
    box-shadow: none;
}

.webcam-native-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 17px 20px;
    border-bottom: 1px solid var(--om-line, #e1e5e8);
}

.webcam-native-head strong {
    color: var(--om-blue-dark, #163f58);
    font-size: 18px;
    font-weight: 700;
}

.webcam-native-head small {
    color: var(--om-muted, #6e7f88);
    font-size: 13px;
}

.webcam-maintenance-card {
    padding: 46px 28px;
    text-align: center;
}

.webcam-maintenance-icon {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    margin: 0 auto 16px;
    border: 1px solid #e5d2a4;
    border-radius: 50%;
    color: #9b6b11;
    background: #fffaf0;
    font-size: 24px;
    line-height: 1;
    font-weight: 700;
}

.webcam-maintenance-card h2 {
    margin: 0 0 10px;
    color: var(--om-blue-dark, #163f58);
    font-size: 30px;
    line-height: 1.15;
    font-weight: 700;
}

.webcam-maintenance-card p {
    max-width: 650px;
    margin: 0 auto;
    color: var(--om-muted, #6e7f88);
    font-size: 16px;
    line-height: 1.55;
}

/* ============================================================
   TIMELAPSE
   ============================================================ */

.webcam-tl-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
    margin-bottom: 22px;
}

.webcam-tl-heading h2 {
    margin: 6px 0 0;
    color: var(--om-blue-dark, #163f58);
    font-size: clamp(30px, 3.6vw, 42px);
    line-height: 1.05;
    letter-spacing: -.4px;
    font-weight: 700;
}

.webcam-tl-heading > p {
    max-width: 520px;
    margin: 0;
    color: var(--om-muted, #6e7f88);
    font-size: 16px;
    line-height: 1.5;
    text-align: right;
}

.webcam-tl-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.webcam-video-card {
    position: relative;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--om-line, #e1e5e8);
    border-radius: 4px;
    background: #fff;
}

.webcam-video-title {
    min-height: 76px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--om-line, #e1e5e8);
}

.webcam-video-title > div {
    min-width: 0;
}

.webcam-video-title span {
    display: block;
    color: var(--om-blue, #147fa8);
    font-size: 12px;
    line-height: 1.2;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .045em;
}

.webcam-video-title strong {
    display: block;
    margin-top: 4px;
    color: var(--om-blue-dark, #163f58);
    font-size: 21px;
    line-height: 1.15;
    font-weight: 700;
}

.webcam-video-title small {
    flex: 0 0 auto;
    color: var(--om-muted, #6e7f88);
    font-size: 13px;
    line-height: 1.3;
    font-weight: 600;
    text-align: right;
}

.webcam-video-card video {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #071016;
    object-fit: cover;
}

.webcam-video-card video[poster] {
    object-position: center;
}


.webcam-tl-note {
    margin-top: 22px;
    padding-top: 17px;
    border-top: 1px solid var(--om-line-strong, #d9e0e4);
    color: var(--om-muted, #6e7f88);
    font-size: 14px;
    line-height: 1.55;
}

.webcam-tl-note strong {
    color: var(--om-blue-dark, #163f58);
}

/* ============================================================
   ARCHIVIO
   Le classi restano nello stesso file perché questa stylesheet
   è condivisa con webcam-archivio.php.
   ============================================================ */


.webcam-archive-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
    margin-bottom: 18px;
}

.webcam-archive-heading h2 {
    margin: 6px 0 0;
    color: var(--om-blue-dark, #163f58);
    font-size: clamp(30px, 3.6vw, 42px);
    line-height: 1.05;
    letter-spacing: -.4px;
    font-weight: 700;
}

.webcam-archive-heading > p {
    max-width: 520px;
    margin: 0;
    color: var(--om-muted, #6e7f88);
    font-size: 16px;
    line-height: 1.5;
    text-align: right;
}

.webcam-day-switch {
    display: inline-flex;
    gap: 6px;
    margin-bottom: 20px;
}

.webcam-day-switch a {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    padding: 0 14px;
    border: 1px solid var(--om-line-strong, #d9e0e4);
    border-radius: 4px;
    background: #fff;
    color: #4b606b;
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
}

.webcam-day-switch a.is-active {
    border-color: var(--om-blue, #147fa8);
    background: var(--om-blue, #147fa8);
    color: #fff;
}

.webcam-archive-stage {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 360px;
    background: #071016;
}

.webcam-archive-stage img {
    display: block;
    width: 100%;
    max-height: 72vh;
    object-fit: contain;
}

.webcam-archive-empty {
    padding: 50px 22px;
    color: #d8e6ec;
    text-align: center;
}

.webcam-archive-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 13px 17px;
    border-top: 1px solid var(--om-line, #e1e5e8);
    color: var(--om-muted, #6e7f88);
    background: #fff;
    font-size: 13px;
}

.webcam-archive-info strong {
    color: var(--om-blue-dark, #163f58);
    font-size: 16px;
}

.webcam-archive-controls {
    display: grid;
    grid-template-columns: auto auto auto auto minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    padding: 16px 17px 9px;
    background: #fff;
}

.webcam-archive-controls button,
.webcam-archive-controls select {
    height: 40px;
    border: 1px solid var(--om-line-strong, #d9e0e4);
    border-radius: 4px;
    color: #41606f;
    background: #fff;
    font-size: 13px;
    font-weight: 700;
}

.webcam-archive-controls button {
    padding: 0 12px;
    cursor: pointer;
}

.webcam-archive-controls button.is-primary {
    color: #fff;
    border-color: var(--om-blue, #147fa8);
    background: var(--om-blue, #147fa8);
}

.webcam-archive-controls select {
    padding: 0 9px;
}

.webcam-archive-range {
    width: 100%;
    accent-color: var(--om-blue, #147fa8);
}

.webcam-archive-timebar {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 5px 17px 16px;
    color: var(--om-muted-2, #87949b);
    background: #fff;
    font-size: 12px;
}

/* ============================================================
   MINIATURE ARCHIVIO
   ============================================================ */

.webcam-thumb-section-v419 {
    padding: 20px 17px 18px;
    border-top: 1px solid var(--om-line, #e1e5e8);
    background: #fff;
}

.webcam-thumb-heading-v419 {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 15px;
}

.webcam-thumb-heading-v419 > div {
    min-width: 0;
}

.webcam-thumb-heading-v419 strong,
.webcam-thumb-heading-v419 small {
    display: block;
}

.webcam-thumb-heading-v419 strong {
    color: var(--om-blue-dark, #163f58);
    font-size: 17px;
    font-weight: 700;
}

.webcam-thumb-heading-v419 small {
    max-width: 650px;
    margin-top: 4px;
    color: var(--om-muted, #6e7f88);
    font-size: 13px;
    line-height: 1.4;
}

.webcam-thumb-heading-v419 > span {
    flex: 0 0 auto;
    color: var(--om-muted, #6e7f88);
    font-size: 13px;
    font-weight: 700;
}

.webcam-thumb-grid-v419 {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
}

.webcam-thumb-v419 {
    position: relative;
    min-width: 0;
    padding: 0;
    overflow: hidden;
    border: 2px solid transparent;
    border-radius: 4px;
    background: #edf1f3;
    cursor: pointer;
    aspect-ratio: 16 / 9;
    content-visibility: auto;
    contain-intrinsic-size: 160px 90px;
}

.webcam-thumb-v419 img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.webcam-thumb-v419 > span {
    position: absolute;
    left: 5px;
    bottom: 5px;
    padding: 3px 6px;
    border-radius: 3px;
    color: #fff;
    background: rgba(7,31,43,.72);
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
}

.webcam-thumb-v419:hover {
    border-color: #8ec9dd;
}

.webcam-thumb-v419.is-active {
    border-color: var(--om-blue, #147fa8);
    box-shadow: 0 0 0 2px rgba(37,141,180,.10);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1050px) {
    .webcam-camera-switch {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .webcam-tl-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 820px) {

    .webcam-archive-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    .webcam-archive-heading > p {
        max-width: none;
        text-align: left;
    }


    .webcam-page-head-inner {
        align-items: flex-start;
        flex-direction: column;
        gap: 24px;
    }

    .webcam-page {
        padding: 28px 0 52px;
    }

    .webcam-page-toolbar {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
    }

    .webcam-page-current {
        text-align: left;
    }

    .webcam-tl-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    .webcam-tl-heading > p {
        max-width: none;
        text-align: left;
    }

    .webcam-archive-stage {
        min-height: 230px;
    }

    .webcam-archive-controls {
        grid-template-columns: repeat(4, 1fr);
    }

    .webcam-archive-controls button {
        padding: 0 6px;
    }

    .webcam-archive-range,
    .webcam-archive-controls select {
        grid-column: 1 / -1;
    }

    .webcam-thumb-grid-v419 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 6px;
    }
}

@media (max-width: 700px) {
    .webcam-page-head-inner {
        min-height: 0;
        padding-top: 40px;
        padding-bottom: 34px;
    }

    .webcam-page-head h1,
    .webcam-page h1 {
        font-size: 38px;
        letter-spacing: -.4px;
    }

    .webcam-page-lead {
        font-size: 17px;
        line-height: 1.5;
    }

    .webcam-section-nav {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 7px;
    }

    .webcam-section-nav a {
        min-width: 0;
        padding: 0 9px;
        font-size: 14px;
    }

    .webcam-page .container {
        width: min(100% - 24px, 1280px);
    }

    .webcam-camera-switch {
        grid-template-columns: 1fr;
        gap: 8px;
        margin-bottom: 28px;
    }

    .webcam-camera-switch a {
        padding: 14px 16px;
    }

    .webcam-camera-switch strong {
        font-size: 17px;
    }

    .webcam-video-title {
        min-height: 0;
        padding: 14px 16px;
    }

    .webcam-video-title strong {
        font-size: 19px;
    }

    .webcam-video-title small {
        font-size: 12px;
    }


    .webcam-maintenance-card {
        padding: 36px 20px;
    }

    .webcam-maintenance-card h2 {
        font-size: 27px;
    }

    .webcam-maintenance-card p {
        font-size: 15px;
    }

    .webcam-thumb-section-v419 {
        padding: 16px 12px 14px;
    }

    .webcam-thumb-heading-v419 {
        align-items: flex-start;
    }

    .webcam-thumb-grid-v419 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 470px) {
    .webcam-section-nav {
        grid-template-columns: 1fr;
    }

    .webcam-section-nav a {
        justify-content: flex-start;
        padding-left: 13px;
    }

    .webcam-page .container {
        width: min(100% - 20px, 1280px);
    }

    .webcam-video-title {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
    }

    .webcam-video-title small {
        text-align: left;
    }

    .webcam-thumb-grid-v419 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}