/* ==========================================================================
   Frontend Layout — Video Page Structure
   Layer 3 — requires tokens.css, base.css
   /css/frontend/layout.css

   Structural rules only: video layout, responsive grid,
   container sizing, and the main content/sidebar layout.
   All component styles live in components.css (Layer 4).

   Sections:
    1.  Container & Layout Shell
    2.  Video Detail Main Layout
    3.  Video Grid (Index Page)
    4.  Responsive Breakpoints
   ========================================================================== */

/* ==========================================================================
   1. Container & Layout Shell
   ========================================================================== */

.container {
    max-width: var(--width-container);
    margin: 0 auto;
    padding: 0 var(--spacing-4);
    width: 100%;
}

.video-container,
.gallery-container {
    max-width: var(--width-container);
    margin: 0 auto;
    padding: 0 var(--spacing-4);
    width: 100%;
}

.video-layout,
.gallery-layout {
    display: flex;
    gap: var(--spacing-8);
    min-height: 100vh;
}

.video-main,
.gallery-main {
    flex: 1;
    min-width: 0;
}

.video-sidebar,
.gallery-sidebar {
    width: var(--width-sidebar);
    flex-shrink: 0;
}

/* ==========================================================================
   2. Video Main Layout
   ========================================================================== */

.video-content,
.gallery-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-6);
}

.video-info-panel,
.gallery-info-panel {
    background: var(--color-bg-surface); /* background color */
    border-radius: var(--radius-xl); /* rounded corners  */
    padding: var(--spacing-6); /* padding */
}

/* ==========================================================================
   3. Video/Gallery Grid (Index Page) — masonry via CSS columns
   ========================================================================== */

.grid-spacer-top,
.grid-spacer-bottom {
    width: 100%;
    pointer-events: none;
    clear: both;
}

/* Loading spinner for infinite scroll */
.video-loader,
.gallery-loader {
    display: flex;
    justify-content: center;
    padding: var(--spacing-8) 0;
    width: 100%;
}

.video-loader[hidden],
.gallery-loader[hidden] {
    display: none;
}

.video-loader__spinner,
.gallery-loader__spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    border-top-color: var(--color-accent);
    animation: video-spin 0.8s linear infinite;
}

@keyframes video-spin {
    to { transform: rotate(360deg); }
}

/* Changed from CSS grid with fixed heights to CSS columns masonry
   reason: homepage should show natural image aspect ratios like show.php does */
.video-grid,
.gallery-grid {
    columns: 4;
    column-gap: var(--spacing-4);
    margin-bottom: var(--spacing-8);
}

.video-card,
.gallery-card {
    break-inside: avoid;
    margin-bottom: var(--spacing-4);
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg);
    cursor: pointer;
    /* purely CSS performance boost for long masonry grids */
    content-visibility: auto;
    contain-intrinsic-size: 286px 400px; /* estimates approximate card size */
}

.video-card__link,
.gallery-card__link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.video-card__image,
.gallery-card__image {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--radius-lg);
    transition: transform var(--transition-base), opacity 0.4s ease;
    background: var(--color-bg-elevated);
    opacity: 0;
}

.video-card__image.is-loaded,
.gallery-card__image.is-loaded {
    opacity: 1;
}

.video-card:hover .video-card__image,
.gallery-card:hover .gallery-card__image {
    transform: scale(1.03);
}

/* Overlay with title/count at bottom of image */
.video-card__content,
.gallery-card__content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--spacing-6) var(--spacing-3) var(--spacing-3);
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, transparent 100%);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    opacity: 0;
    transition: opacity var(--transition-base);
}

.video-card:hover .video-card__content,
.gallery-card:hover .gallery-card__content {
    opacity: 1;
}

.video-card__title,
.gallery-card__title {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: white;
    margin-bottom: var(--spacing-1);
    line-height: var(--leading-tight);
}

.video-card__duration,
.gallery-card__count {
    font-size: var(--text-xs);
    color: rgba(255, 255, 255, 0.75);
}

/* ==========================================================================
   4. Responsive Breakpoints
   ========================================================================== */

/* Tablet - video grid 3 columns */
@media (max-width: 1024px) {
    .video-grid,
    .gallery-grid {
        columns: 3;
    }

    .video-layout,
    .gallery-layout {
        flex-direction: column;
    }

    .video-sidebar,
    .gallery-sidebar {
        width: 100%;
        order: 2;
    }

    .video-main,
    .gallery-main {
        order: 1;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .video-grid,
    .gallery-grid {
        columns: 2;
        column-gap: var(--spacing-3);
    }

    .video-container,
    .gallery-container {
        padding: 0 var(--spacing-3);
    }

    .video-info-panel,
    .gallery-info-panel {
        padding: var(--spacing-4);
    }

    .video-layout,
    .gallery-layout {
        gap: var(--spacing-6);
    }

    .video-content,
    .gallery-content {
        gap: var(--spacing-4);
    }
}

/* Small mobile */
@media (max-width: 480px) {
    .video-info-panel,
    .gallery-info-panel {
        padding: var(--spacing-3);
    }

    .video-container,
    .gallery-container {
        padding: 0 var(--spacing-2);
    }
}
/* ==========================================================================
   5. Two-column Layout Grid (main + sidebar)
   ========================================================================== */

.layout-grid {
    display: grid;
    grid-template-columns: 1fr var(--width-sidebar);
    gap: var(--spacing-8);
    align-items: start;
}

.layout-grid__main {
    min-width: 0; /* prevent grid blowout */
}

.layout-grid__sidebar {
    position: sticky;
    top: calc(var(--header-height) + var(--spacing-4));
    max-height: calc(100vh - var(--header-height) - var(--spacing-8));
    overflow-y: auto;
}

/* Tablet */
@media (max-width: 1024px) {
    .layout-grid {
        grid-template-columns: 1fr;
    }

    .layout-grid__sidebar {
        position: static;
        max-height: none;
        overflow-y: visible;
    }
}