/**
 * CLS Improvements - Phase 1
 * Standalone CSS for layout stability optimizations
 */

/* Aspect Ratio Helpers - Prevent image layout shifts */
.slideshow__cell img {
    aspect-ratio: 16 / 9;
    width: 100%;
    height: auto;
    object-fit: cover;
}

.footer__logo img,
.slideshow__logo img {
    max-width: 100%;
    height: auto;
}

.img-responsive {
    max-width: 100%;
    height: auto;
}

.aspect-16-9 {
    aspect-ratio: 16 / 9;
}

.aspect-4-3 {
    aspect-ratio: 4 / 3;
}

.aspect-1-1 {
    aspect-ratio: 1 / 1;
}

.aspect-2-1 {
    aspect-ratio: 2 / 1;
}

/* Widget Skeleton Styles - Reserve space for async widgets */
givebutter-widget {
    display: block;
    min-height: 400px;
    contain: layout;
    background: #f5f5f5;
    border-radius: 4px;
}

givebutter-widget:empty {
    position: relative;
}

givebutter-widget:empty::before {
    content: 'Loading donation form...';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #999;
    font-size: 14px;
}

.sponsorship-module {
    min-height: 200px;
    contain: layout;
}

.sponsorship-module.is-loading {
    background: #f5f5f5;
    border-radius: 4px;
}

.async-widget-container {
    min-height: var(--widget-min-height, 300px);
    contain: layout;
}

.async-widget-container.is-loading {
    background: #f5f5f5;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.async-widget-container.is-loading::after {
    content: 'Loading...';
    color: #999;
    font-size: 14px;
}

/* Footer partner logos - prevent shift when images load */
.footer .row.vspace-small-12 .column {
    min-height: 120px;
}