/* ==========================================================================
   CASE STUDY EXTRAS (single ss_case_studies only)
   Behind-the-scenes clip and the "More Videos" sections (PM comment #2621754).
   ========================================================================== */

/* Behind-the-scenes clip: phone clips are usually vertical, so cap the height
   and let the width follow the video. */
.cs-bts-video {
    display: flex;
    justify-content: center;
}
.cs-bts-video video {
    display: block;
    max-width: 100%;
    max-height: min(70vh, 640px);
    border-radius: 20px;
    background: #000000;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.18);
}
.cs-bts-video__frame {
    position: relative;
    width: 100%;
    max-width: 900px;
    aspect-ratio: 16 / 9;
    border-radius: 20px;
    overflow: hidden;
    background: #000000;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.18);
}
.cs-bts-video__frame.is-vertical {
    max-width: 360px;
    aspect-ratio: 9 / 16;
}
.cs-bts-video__frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Consecutive More Videos sections sit closer together. */
.site-case-study-videos + .site-case-study-videos {
    padding-top: 0;
}

/* One video in a section: show it large and play it in place. */
.cs-video-large {
    max-width: 900px;
    margin: 0 auto;
}
.cs-video-large__poster,
.cs-video-large__frame {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
    border-radius: 20px;
    overflow: hidden;
    background: #0f172a;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.18);
}
.cs-video-large__poster {
    padding: 0;
    cursor: pointer;
}
.cs-video-large__poster img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.cs-video-large__poster:hover img {
    transform: scale(1.03);
}
.cs-video-large__play {
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    margin: -38px 0 0 -38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
    transition: transform 0.3s ease;
}
.cs-video-large__play svg {
    margin-left: 4px;
}
.cs-video-large__poster:hover .cs-video-large__play,
.cs-video-large__poster:focus-visible .cs-video-large__play {
    transform: scale(1.1);
}
.cs-video-large__poster:focus-visible {
    outline: 3px solid #be9141;
    outline-offset: 3px;
}
.cs-video-large__caption {
    margin: 16px 0 0;
    text-align: center;
    font-size: 1.125rem;
    font-weight: 500;
    color: #333333;
}
.cs-video-large__location {
    color: #c79d3d;
    font-weight: 600;
}
@media (max-width: 767px) {
    .cs-video-large__play {
        width: 60px;
        height: 60px;
        margin: -30px 0 0 -30px;
    }
}

/* Testimonial beside the behind-the-scenes clip (Jeremy 10/13 PDF p.8) */
.cs-pair__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 32px;
    align-items: center;
    max-width: 1100px;
    margin: 0 auto;
}
.cs-pair__quote { height: 100%; display: flex; align-items: center; }
.cs-pair__quote > div { width: 100%; }
.cs-pair__clip { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.cs-pair__clip video {
    display: block;
    width: 100%;
    max-height: min(70vh, 568px);
    border-radius: 20px;
    background: #000000;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.18);
}
.cs-pair__clip .cs-bts-video__frame { max-width: 320px; }
.cs-pair__clip figcaption { text-align: center; display: flex; flex-direction: column; gap: 4px; }
.cs-pair__label { font-size: 1.125rem; font-weight: 600; color: #02225a; }
.cs-pair__sub { font-size: 0.875rem; color: #666666; line-height: 1.5; }
@media (max-width: 1023px) {
    .cs-pair__grid { grid-template-columns: minmax(0, 1fr); }
    .cs-pair__clip { max-width: 320px; margin: 0 auto; }
}