/* ===== General videos grid ===== */
.videos-grid {
    display: grid;
    gap: 20px; /* spacing between videos */
    grid-template-columns: 1fr; /* default to single column for mobile */
}

/* Immersion 2-video layout */
.videos-grid.immersion-vertical-centered {
    grid-template-columns: 1fr; /* main above short by default */
    justify-items: center;
}

/* Standard 2-video layout */
.videos-grid.compact.center-aligned {
    max-width: 900px;
    margin: 0 auto;
    justify-items: center;
    grid-template-columns: 1fr; /* stacked on mobile by default */
}

/* Exchange layout for 3+ videos */
.videos-grid.special-layout {
    grid-template-columns: 1fr; /* stacked by default */
    gap: 20px;
}

/* Fallback auto grid */
.videos-grid.auto-grid {
    grid-template-columns: 1fr;
    gap: 20px;
}

/* Child containers in special/exchange layout */
.videos-grid.special-layout .shorts-container {
    display: grid;
    gap: 20px;
    grid-template-columns: 1fr; /* stacked on mobile */
}

/* ===== Media query for tablets and up ===== */
@media (min-width: 768px) {
    /* Standard 2-video layout side by side */
    .videos-grid.compact.center-aligned {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Immersion layout: main + short stacked vertically still, but centered */
    .videos-grid.immersion-vertical-centered {
        grid-template-columns: 1fr; /* keep main above short, optional you can use 2 columns if desired */
    }

    /* Exchange layout: main full width, shorts in grid */
    .videos-grid.special-layout .shorts-container {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }

    /* Fallback auto grid: responsive */
    .videos-grid.auto-grid {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }
}

/* Optional: make main video span full width */
.videos-grid.special-layout .main-video-container {
    grid-column: 1 / -1;
}