/* CLS Optimization Styles */

/* Reserve space for images that will be loaded */
img[src$=".jpg"],
img[src$=".jpeg"],
img[src$=".png"],
img[src$=".svg"] {
    display: inline-block;
    background-color: transparent;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Smooth font loading */
body {
    font-display: swap;
}

/* Prevent content reflow when loading */
.tutor__resume-list {
    contain: content;
}

/* Optimize avatar loading */
.tutor__avatar-wrapper {
    display: inline-block;
    position: relative;
    min-width: 80px;
    min-height: 80px;
}

/* Add smooth transitions for any potential layout shifts */
* {
    scroll-behavior: smooth;
}

/* Ensure iframes don't cause layout shifts */
iframe {
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;
}

/* Optimize lazy loading */
img[loading="lazy"] {
    opacity: 0;
    transition: opacity 0.3s ease;
}

img[loading="lazy"].loaded {
    opacity: 1;
}