/* Works with a single clip or several. Arrow buttons and the dots list only show up in markup
   when there's more than one clip to switch between; general.js's guarded block no-ops cleanly
   without them.

   margin-top: 55px: the prototype never gives .video-player this rule directly either, it scopes
   it per page instead (.pm-schedule .video-player, .rp-how-it-works .video-player, etc.), since
   every one of those pages hand-wrote its own section. A reusable tt360/video-player instance
   can't rely on a page-specific ancestor class existing, so this bare rule gives it the same
   confirmed real gap as a default, the same fix already applied to module-cards.css/
   stat-cards.css/feature-cards.css for the identical reason. */
.video-player {
    position: relative;
    margin-top: 55px;
}

/* Editor-only, scoped under .editor-styles-wrapper so this can never reach the front end — see
   the full comment on .wp-block-tt360-section in components/section.css. Same situation as
   tt360/lifecycle-stages and tt360/card-grid (nested inside tt360/section's own InnerBlocks,
   reached by GeneratePress's own `body .wp-block { max-width: var(--content-width) }` rule) —
   this block has no max-width of its own at all normally, so it needs "none" restated, not a
   real value. */
.editor-styles-wrapper .block-editor-block-list__layout .wp-block-tt360-video-player {
    max-width: none;
}

.video-player .slides {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background-color: rgba(var(--charcoal), 0.06);
    border: 1px dashed rgba(var(--dark-green), 0.15);
    border-radius: 4px;
}

.video-player .slide {
    position: absolute;
    inset: 0;
    display: flex;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.video-player .slide.is-active {
    opacity: 1;
    pointer-events: auto;
}

.video-player .slide video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-player .arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: rgba(var(--terra-green), 1);
    background-color: rgba(var(--white), 1);
    border: 0;
    border-radius: 50%;
    box-shadow: 0 4px 16px rgba(var(--charcoal), 0.15);
    cursor: pointer;
}

.video-player .arrow:hover,
.video-player .arrow:focus {
    color: rgba(var(--terra-green), 1);
    background-color: rgba(var(--white), 1);
}

.video-player .arrow-prev {
    left: 16px;
}

.video-player .arrow-next {
    right: 16px;
}

.video-player .dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
}

.video-player .dots li {
    display: flex;
}

.video-player .dots button {
    width: 8px;
    height: 8px;
    padding: 0;
    background-color: rgba(var(--terra-green), 0.3);
    border: 0;
    border-radius: 4px;
    cursor: pointer;
}

.video-player .dots button.is-active {
    width: 24px;
    background-color: rgba(var(--terra-green), 1);
}

.video-player .caption {
    margin: 16px 0 0;
    font-style: italic;
    font-size: 14px;
    text-align: center;
    color: rgba(var(--warm-gray), 1);
}

/* sm */
@media (max-width: 575.98px) {
    .video-player .arrow {
        width: 32px;
        height: 32px;
    }
}