/**
 * Video Standards CSS
 * Chuẩn hóa hiển thị video trên toàn bộ website
 * - Aspect ratio 16:9
 * - Border radius 12px
 * - Responsive design
 * - CLS optimization
 */

/* Video Wrapper - Chuẩn YouTube 16:9 */
.video-wrapper,
.video-container,
[style*="aspect-ratio: 16 / 9"] {
    width: 100%;
    overflow: hidden;
    background: #000;
    display: block;
}

/* Video & Iframe Elements */
video,
iframe[allow*="autoplay"] {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    object-fit: contain;
    object-position: center;
}

/* YouTube/Embed iframes - fit content without letterboxing */
iframe[allow*="autoplay"][allow*="fullscreen"] {
    object-fit: contain;
    object-position: center;
}

/* Remove default video controls styling */
video::-webkit-media-controls {
    font-family: inherit;
}

/* Lazy Loading - Opacity Transition */
.lazy-video {
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.lazy-video.loaded {
    opacity: 1;
}

/* Placeholder Spinner */
.video-placeholder {
    animation: fadeOut 0.7s ease-in-out forwards;
}

.video-placeholder.hidden {
    display: none;
}

@keyframes fadeOut {
    to {
        opacity: 0;
        visibility: hidden;
    }
}

/* Blog Map Container */
.blog-map-container {
    width: 100%;
    overflow: hidden;
    border-radius: 8px;
}

/* Prevent CLS - Reserve space before iframe load */
[data-video-wrapper] {
    contain: layout style paint;
}

/* Media Query Optimizations */
@media (max-width: 640px) {
    /* Mobile: Reduce padding on sections */
    .video-experience-section {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    /* Tablet: Maintain aspect ratio */
    [style*="aspect-ratio: 16 / 9"] {
        width: 100%;
    }
}

@media (min-width: 1025px) {
    /* Desktop: Full container width */
    .container[style*="aspect-ratio"] {
        max-width: 100%;
    }
}

/* Prevent layout shift during load */
video,
iframe {
    box-sizing: border-box;
}

/* Smooth playback */
video {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Accessibility - Focus states */
iframe:focus,
video:focus {
    outline: 2px solid #EC4899;
    outline-offset: 2px;
}

/* Disable transform to prevent layout issues */
video,
iframe {
    transform: translate(0, 0);
    will-change: auto;
}