/*
 * video-facciata.css — copertina, pulsante di riproduzione e pannello del consenso.
 * Vedi video-facciata.php per il perche'. Lo stile segue il kit istituzionale
 * (arancione #f54900, inchiostro #101727) ma non dipende da esso: funziona anche da solo.
 */

.mh-video {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: 16px;
    overflow: hidden;
    background: #000;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .35);
}

.mh-video img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    margin: 0;
}

.mh-video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.mh-video .play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .12);
    text-decoration: none !important;
    box-shadow: none !important;
}

.mh-video .play span {
    width: 78px;
    height: 78px;
    border-radius: 50%;
    background: #f54900;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
    transition: transform .2s ease;
}

.mh-video .play:hover span,
.mh-video .play:focus-visible span { transform: scale(1.08); }

.mh-video .play svg {
    width: 32px;
    height: 32px;
    margin-left: 5px;
    fill: #fff;
}

/* il pannello copre la copertina: la scelta e' li', non altrove */
.mh-video .mh-video-consenso {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 20px;
    text-align: center;
    background: rgba(16, 23, 39, .92);
    color: #f3f4f6;
    font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.45;
}

.mh-video .mh-video-consenso[hidden] { display: none; }

.mh-video .mh-video-consenso strong {
    color: #fff;
    font-size: clamp(1rem, 2.4vw, 1.2rem);
    font-weight: 600;
}

.mh-video .mh-video-consenso p {
    margin: 0;
    max-width: 460px;
    color: #c7cbd3;
    font-size: .95rem;
}

.mh-video .mh-video-azioni {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    align-items: center;
    justify-content: center;
    margin-top: 4px;
}

.mh-video .mh-video-si {
    background: #f54900;
    color: #fff;
    border: 0;
    border-radius: 8px;
    padding: 12px 22px;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s ease;
}

.mh-video .mh-video-si:hover { background: #d63f00; }

.mh-video .mh-video-fuori {
    color: #fff !important;
    font-weight: 600;
    text-decoration: underline !important;
    text-underline-offset: 4px;
    text-decoration-color: #ffb86b;
    box-shadow: none !important;
}

.mh-video .mh-video-fuori:hover { color: #ffb86b !important; }

/* su schermi piccoli il pannello deve restare leggibile dentro il 16:9 */
@media (max-width: 520px) {
    .mh-video .mh-video-consenso { gap: 6px; padding: 14px; }
    .mh-video .mh-video-consenso p { font-size: .82rem; }
    .mh-video .mh-video-si { padding: 10px 16px; }
    .mh-video .play span { width: 60px; height: 60px; }
    .mh-video .play svg { width: 26px; height: 26px; }
}

@media (prefers-reduced-motion: reduce) {
    .mh-video .play span,
    .mh-video .mh-video-si { transition: none; }
}