/* Cosmetic rules for below-the-fold sections. Structural rules (layout,
   positioning, size reservation, initial hidden state) live in the inline
   <style> block in index.html so they apply before this sheet resolves. */

/*----------------------------------------
    CLIENT LIST
------------------------------------------*/
.clients {
    background-color: var(--color-surface);
}

.clients__item {
    background-color: var(--color-white);
    padding: 0 1.25rem;
}

/*----------------------------------------
    IN-PLACE VIDEO PLAYBACK
------------------------------------------*/
.watch-video {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 0.75rem;
    color: var(--color-text);
}

.watch-video:hover {
    color: var(--color-brand);
}

.watch-video__icon--play,
.watch-video__icon--close,
.watch-video__label--play,
.watch-video__label--close {
    transition: opacity 0.25s ease;
}

.watch-video.is-close-mode .watch-video__icon--play,
.watch-video.is-close-mode .watch-video__label--play {
    opacity: 0;
}

.watch-video.is-close-mode .watch-video__icon--close,
.watch-video.is-close-mode .watch-video__label--close {
    opacity: 1;
}

@keyframes close-btn-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Dark-backdrop modal treatment: mobile only */
@media screen and (max-width: 845px) {
    .watch-video.is-close-mode {
        position: fixed;
        top: 1rem;
        right: 1rem;
        margin-top: 0;
        padding: 0.5rem;
        grid-template-columns: auto;
        color: var(--color-white);
        z-index: 200;
        animation: close-btn-fade-in 0.4s ease-out 0.2s both;
    }

    @media (hover: hover) {
        .watch-video.is-close-mode:hover {
            color: var(--color-white);
            opacity: 0.7;
        }
    }

    .watch-video.is-close-mode svg {
        width: 28px;
        height: 28px;
        stroke: var(--color-white);
    }

    .watch-video.is-close-mode .watch-video__label--play,
    .watch-video.is-close-mode .watch-video__label--close {
        display: none;
    }

    .article__backdrop {
        position: fixed;
        inset: 0;
        background-color: hsl(0, 0%, 8%);
        opacity: 0;
        pointer-events: none;
        z-index: 150;
    }
}

.gallery-video video {
    border: solid 14px hsla(0, 0%, 9%, 0.045);
    border: solid clamp(12px, 1.1cqi, 16px) hsla(0, 0%, 9%, 0.045);
    border-radius: 16px;
    border-radius: clamp(8px, 4cqi, 22px);
}

/* Dark backdrop treatment: break video out of the gallery so it can fill the viewport, thinner lighter border */
@media screen and (max-width: 845px) {
    .gallery-video {
        position: fixed;
        inset: 2rem;
        z-index: 160;
    }

    .gallery-video video {
        border-width: 10px;
        border-color: hsla(0, 0%, 100%, 0.2);
    }

    /* Size phone by width (capped) or height (capped), whichever is smaller - preserves aspect ratio */
    .gallery-video--phone .phone-device {
        height: auto;
        width: min(70vw, calc(85vh * 320 / 660));
    }
}

.gallery-video.is-active {
    pointer-events: auto;
}

.gallery-video.is-active video {
    pointer-events: auto;
}

.gallery-video video::-webkit-media-controls-mute-button,
.gallery-video video::-webkit-media-controls-fullscreen-button {
    display: none;
}

.gallery-video--phone video {
    border: none;
    border-radius: 0;
}

.phone-device video {
    border-radius: 11.64% / 5.38%;
}

/*----------------------------------------
    FOOTER
------------------------------------------*/
.footer {
    background-color: var(--color-surface);
}