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

/* CRITICAL: Flickity slideshow container must have explicit width */
/* Without this, Flickity calculates cell widths incorrectly */
.slideshow-container {
    width: 100%;
}

.slideshow {
    width: 100% !important;
}

/* Ensure Flickity viewport fills container */
.slideshow .flickity-viewport {
    width: 100% !important;
}

/* Aspect Ratio Helpers - Prevent image layout shifts */
/* Slideshow images should fill container with consistent ratio */
.slideshow__cell {
    width: 100% !important;
}

.slideshow__cell img {
    width: 100%;
    height: auto;
    object-fit: cover;
    aspect-ratio: 16 / 9;
}

/* Remove Foundation column padding for slideshow to be truly full-width */
.columns:has(.slideshow-container) {
    padding-left: 0;
    padding-right: 0;
}

.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;
}

/* Mobile/Desktop Layout Controls */
.mobile-only-layout {
    display: block;
}

.desktop-only-layout {
    display: none;
}

@media screen and (min-width: 40.5625em) {
    .mobile-only-layout {
        display: none;
    }
    
    .desktop-only-layout {
        display: block;
    }
}

/* Mobile Recent Articles - Ensure full width ONLY on mobile */
@media screen and (max-width: 40.5624em) {
    .mobile-only-layout .article-tile {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .mobile-only-layout .vspace-small-4 {
        width: 100% !important;
        max-width: 100% !important;
    }
}


/* Explicit Mobile/Desktop Section Controls - Fix Foundation Visibility Classes */
@media screen and (max-width: 39.9375em) {
    /* Hide desktop sections on mobile - including flex containers */
    .hide-for-small-only,
    .row.hide-for-small-only,
    .columns.hide-for-small-only,
    div.row.hide-for-small-only,
    .row.vspace-small-12.hide-for-small-only,
    #desktop-recent-articles {
        display: none !important;
    }
    
    /* Show mobile sections on mobile */
    .show-for-small-only {
        display: block !important;
    }
}

@media screen and (min-width: 40em) {
    /* Show desktop sections on desktop */
    .hide-for-small-only {
        display: block !important;
    }
    
    /* Hide mobile sections on desktop */
    .show-for-small-only {
        display: none !important;
    }
}

/* Ensure mobile sections are full width */
@media screen and (max-width: 39.9375em) {
    .show-for-small-only .row {
        max-width: 100%;
        margin: 0;
        padding: 0 0.9375rem;
    }
    
    .show-for-small-only .small-12.columns {
        width: 100%;
        padding-left: 0;
        padding-right: 0;
    }
    
    .show-for-small-only .article-tile,
    .show-for-small-only .column {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Add 10px margin-bottom to ALL .hr-title elements on mobile */
    .hr-title {
        margin-bottom: 10px !important;
    }
    
    /* Make Recent Audio Programs full width on mobile - style-two tiles */
    .article-tile--style-two {
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        display: block !important;
    }
    
    /* Ensure audio tile images and content are full width */
    .article-tile--style-two .article-tile__img,
    .article-tile--style-two .article-tile__content {
        width: 100% !important;
        max-width: 100% !important;
    }
}