/**
 * Level Page CLS (Cumulative Layout Shift) Optimization Styles
 * Prevents layout shifts during page load and content rendering
 */

/* Prevent layout shift for level cards */
.level-card {
    contain: layout;
}

/* Reserve space for images to prevent CLS */
.level-card .level-image {
    display: block;
    max-width: 100%;
    height: auto;
}

/* Ensure consistent card heights */
.level-text-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Optimize font loading to prevent text shift */
.level-title {
    font-display: swap;
}

/* Prevent layout shift during image loading */
img[loading="lazy"] {
    min-height: 180px;
    background-color: #f3f4f6;
}

/* Video container aspect ratio preservation */
.video-container {
    position: relative;
    width: 100%;
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}