/* ==========================================================================
   Testimonial Video Card
   ========================================================================== */

.testimonial-video {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.testimonial-video__trigger {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    border: none;
    padding: 0;
    margin: 0;
    background: var( --color-dark );
    cursor: pointer;
    overflow: hidden;
    border-radius: 4px;
}

.testimonial-video__thumb {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.testimonial-video__trigger:hover .testimonial-video__thumb {
    transform: scale( 1.03 );
}

.testimonial-video__play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate( -50%, -50% );
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.06);
    color: var( --color-dark );
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.testimonial-video__play svg {
    width: 44px;
    height: 44px;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
    color: var(--gold);
}

.testimonial-video__trigger:hover .testimonial-video__play {
    transform: translate( -50%, -50% ) scale( 1.06 );
}

.testimonial-video__spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2.25rem;
    height: 2.25rem;
    margin: -1.125rem 0 0 -1.125rem;
    border: 3px solid rgba( 255, 255, 255, 0.3 );
    border-top-color: var( --gold );
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    animation: testimonial-video-spin 0.8s linear infinite;
}

.testimonial-video__trigger.is-loading .testimonial-video__play {
    opacity: 0;
}

.testimonial-video__trigger.is-loading .testimonial-video__spinner {
    opacity: 1;
}

@keyframes testimonial-video-spin {
    to { transform: rotate( 360deg ); }
}

.testimonial-video__meta {
    text-align: center;
}

.testimonial-video__title {
    font-family: var( --font-serif );
    font-size: 1rem;
    color: var( --color-dark );
    margin: 0 0 0.25rem;
}

.testimonial-video__client {
    font-family: var( --font-sans );
    font-size: 0.85rem;
    color: var( --color-border );
    margin: 0;
}