/* Layout Shift Prevention - Reduces CLS (Cumulative Layout Shift)
 * This file contains CSS rules to prevent layout shifts by:
 * - Reserving space for images before they load
 * - Using aspect-ratio for responsive images
 * - Preventing shifts from dynamic content
 * Target: CLS < 0.1
 */

/* === Image Containers with Aspect Ratio === */
.card-image,
.group-image,
.channel-image,
.listing-image {
    aspect-ratio: 1 / 1; /* Square images for group/channel listings */
    object-fit: cover;
    width: 100%;
    height: auto;
}

.featured-image,
.hero-image {
    aspect-ratio: 16 / 9; /* Widescreen aspect ratio */
    object-fit: cover;
    width: 100%;
    height: auto;
}

.article-image {
    aspect-ratio: 4 / 3; /* Standard article image ratio */
    object-fit: cover;
    width: 100%;
    height: auto;
}

/* === Logo and Branding === */
.logo-container {
    width: 180px;
    height: 50px;
    display: inline-block;
}

.logo-image {
    width: 180px;
    height: 50px;
    object-fit: contain;
}

.favicon,
.icon-small {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

/* === Avatar and Profile Images === */
.avatar,
.profile-image,
.user-avatar {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 50%;
}

.avatar-small {
    width: 40px;
    height: 40px;
}

.avatar-medium {
    width: 64px;
    height: 64px;
}

.avatar-large {
    width: 128px;
    height: 128px;
}

/* === Reserve Space for Dynamic Content === */
.notification-area {
    min-height: 40px; /* Reserve space even when empty */
    transition: height 0.3s ease; /* Smooth expansion */
}

.featured-links-container {
    min-height: 300px; /* Reserve space while loading */
}

.category-list {
    min-height: 50px; /* Prevent shift when categories load */
}

.user-points-display {
    min-width: 60px; /* Prevent horizontal shift */
    text-align: right;
}

/* === Skeleton Loaders (prevents shift during loading) === */
.skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 4px;
}

@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.skeleton-image {
    aspect-ratio: 1 / 1;
    width: 100%;
}

.skeleton-text {
    height: 1em;
    margin-bottom: 0.5em;
    border-radius: 4px;
}

.skeleton-text-short {
    width: 60%;
}

.skeleton-text-long {
    width: 90%;
}

/* === Ad Containers (prevent shift when ads load) === */
.ad-container {
    min-height: 250px; /* Standard ad height */
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f5f5f5;
}

.ad-container-horizontal {
    min-height: 90px; /* Horizontal banner */
}

.ad-container-square {
    min-height: 300px; /* Square ad */
    aspect-ratio: 1 / 1;
}

/* === Card Grid (maintains consistent sizing) === */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
}

.card {
    min-height: 320px; /* Consistent card height */
    display: flex;
    flex-direction: column;
}

.card-body {
    flex: 1; /* Takes remaining space */
}

/* === Loading States === */
.loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* === Prevent Layout Shift from Fonts === */
/* Note: Font fallbacks are defined in base.html with size-adjust */
body {
    font-family: 'Inter', Arial, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Outfit', 'Arial Black', Arial, sans-serif;
}

/* === Responsive Images with Explicit Dimensions === */
img[width][height] {
    height: auto; /* Maintain aspect ratio */
}

/* === Prevent Shift from Lazy-Loaded Images === */
img[loading="lazy"] {
    /* Browser will reserve space based on width/height attributes */
    display: block;
}

/* === Modal and Popup (prevent background shift) === */
.modal-open {
    overflow: hidden; /* Prevent scrollbar shift */
    padding-right: var(--scrollbar-width, 0); /* Compensate for scrollbar */
}

/* === Tables (maintain column widths) === */
.stats-table {
    table-layout: fixed;
    width: 100%;
}

.stats-table th,
.stats-table td {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* === Footer (fixed minimum height) === */
.site-footer {
    min-height: 200px;
}

/* === Collapsible Sections (smooth transitions) === */
.collapsible-content {
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.collapsible-content.collapsed {
    max-height: 0;
}

/* === Badge and Tag Containers (prevent reflow) === */
.tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    min-height: 2em; /* Reserve space for at least one tag row */
}

/* === Member Count Display (fixed width prevents shift) === */
.member-count {
    min-width: 80px;
    display: inline-block;
    text-align: right;
}

/* === Rating Stars (fixed dimensions) === */
.rating-stars {
    display: inline-flex;
    gap: 2px;
    min-width: 100px;
    height: 20px;
}

.rating-star {
    width: 18px;
    height: 18px;
}

/* === Mobile Specific Fixes === */
@media (max-width: 768px) {
    .card-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }

    .card {
        min-height: 280px;
    }

    .featured-links-container {
        min-height: 250px;
    }
}

/* === Prevent Shift from HTMX Updates === */
[hx-swap] {
    /* Reserve space during HTMX swaps */
    min-height: 1px;
}

/* === CLS-Critical: Preload Placeholders === */
.image-placeholder {
    background: linear-gradient(135deg, #f5f5f5 25%, #ebebeb 50%, #f5f5f5 75%);
    background-size: 200% 200%;
    animation: pulse 2s ease infinite;
}

@keyframes pulse {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}