/*
 * Video card for content written In Admin (web/js/satrunner-video-card.js): a rounded grey card with a muted,
 * looping video and a pause / play button bottom right. Used by the CMS blocks customer-auth-media (sign-in,
 * register, reset) and page-in-progress (pages without content yet). Docs: docs/video-card.html
 *
 *   <figure class="sr-video-card">
 *     <img class="sr-video-card__poster" src="…poster.jpg" alt="">
 *     <a class="sr-video-card__source" href="…video.webm">WebM</a>
 *     <a class="sr-video-card__source" href="…video.mp4">MP4</a>
 *   </figure>
 *
 * The video and poster have a white ground: multiply lets the card's grey show through. Square by default; the
 * page's own CSS may change the aspect ratio.
 */
.sr-video-card {
    position: relative;
    aspect-ratio: 1 / 1;
    margin: 0;
    overflow: hidden;
    border-radius: 16px;
    background: #f6f6f6;
}

.sr-video-card .sr-video-card__poster,
.sr-video-card .sr-video-card__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: contain;
    mix-blend-mode: multiply;
}

.sr-video-card.has-video .sr-video-card__poster,
.sr-video-card .sr-video-card__source {
    display: none;
}

/* Pause / play, bottom right: the icon alone, no container (a 44px area stays clickable). Drawn in CSS: two bars
   (pause), a triangle when paused (play). */
.sr-video-card button.sr-video-card__toggle {
    position: absolute;
    right: 20px;
    bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: none;
    box-shadow: none;
    color: #1f2328;
    cursor: pointer;
    transition: color 0.2s ease;
}

.sr-video-card button.sr-video-card__toggle:hover,
.sr-video-card button.sr-video-card__toggle:focus,
.sr-video-card button.sr-video-card__toggle:active {
    border: 0;
    background: none;
    box-shadow: none;
    color: #f26a21;
}

.sr-video-card button.sr-video-card__toggle:focus-visible {
    outline: 3px solid rgba(242, 106, 33, 0.6);
    outline-offset: 4px;
}

.sr-video-card__toggle-icon {
    position: relative;
    display: block;
    width: 12px;
    height: 16px;
}

/* Pause: two bars side by side */
.sr-video-card__toggle-icon::before,
.sr-video-card__toggle-icon::after {
    content: '';
    position: absolute;
    top: 0;
    width: 4px;
    height: 16px;
    border-radius: 1px;
    background-color: currentColor;
}

.sr-video-card__toggle-icon::before {
    left: 0;
}

.sr-video-card__toggle-icon::after {
    right: 0;
}

/* Play: one triangle */
.sr-video-card__toggle.is-paused .sr-video-card__toggle-icon::before {
    left: 1px;
    width: 12px;
    border-radius: 0;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.sr-video-card__toggle.is-paused .sr-video-card__toggle-icon::after {
    display: none;
}

@media (max-width: 448px) {
    .sr-video-card button.sr-video-card__toggle {
        right: 16px;
        bottom: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sr-video-card button.sr-video-card__toggle {
        transition: none;
    }
}