/* Critical Layout Shift Fixes */

/* Reserve space for main content */
#main-content {
    min-height: 100vh;
}

/* Fix YouTube thumbnail size */
.youtube-facade {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
}

.youtube-facade img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Fix hero section height */
.hero-section {
    min-height: 400px;
}

/* Prevent banner shift */
.bg-gradient-to-r {
    min-height: 40px;
}

/* Fix image dimensions */
img {
    max-width: 100%;
    height: auto;
    aspect-ratio: attr(width) / attr(height);
}

/* Prevent font loading shift */
body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-display: swap;
}

/* Reserve space for navigation */
nav {
    min-height: 64px;
}

/* Prevent button shifts */
button, .btn {
    min-height: 40px;
    line-height: 1;
}

/* Fix video container */
.relative.rounded-2xl {
    aspect-ratio: 16/9;
}

/* Prevent text reflow */
h1, h2, h3, h4, h5, h6 {
    text-wrap: balance;
}

p {
    text-wrap: pretty;
}