/* ===========================================
   NASA SC24-Style Gallery for MkDocs
   Extends showcase-card.css component
   =========================================== */

/* ---------------------------------------------
   Gallery Grid (CSS Grid) - Max 2 columns
   --------------------------------------------- */
.gallery-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-bottom: 2rem;
    max-width: 900px;
}

/* 2 columns on larger screens */
@media (min-width: 600px) {
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ---------------------------------------------
   Gallery Item Extensions
   Gallery items use .showcase-card base styles
   --------------------------------------------- */

/* Video play button overlay via CSS pseudo-elements */
.gallery-item.video .media-container::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 50%;
    border: 3px solid #fff;
    transition: all 0.3s ease;
    pointer-events: none;
}

.gallery-item.video .media-container::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-40%, -50%);
    z-index: 1;
    border-style: solid;
    border-width: 12px 0 12px 20px;
    border-color: transparent transparent transparent #fff;
    pointer-events: none;
}

.gallery-item.video:hover .media-container::after {
    background: var(--md-primary-fg-color, #2196f3);
    border-color: var(--md-primary-fg-color, #2196f3);
}

/* ---------------------------------------------
   GLightbox Customization
   --------------------------------------------- */

/* Transparent background - relies on dark lightbox background */
.glightbox-clean .gslide-description {
    background: transparent !important;
}

/* Inner description padding */
.glightbox-clean .gdesc-inner {
    padding: 1.5rem;
}

/* Title styling */
.glightbox-clean .gslide-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #fff !important;
}

/* Description text */
.glightbox-clean .gslide-desc {
    font-size: 0.9rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85) !important;
}

/* Counter style */
.glightbox-clean .gslide-image .gslide-counter {
    background: rgba(0, 0, 0, 0.6);
    padding: 0.5rem 1rem;
    border-radius: 4px;
}

/* Remove any box shadow on description */
.glightbox-clean .gslide-description,
.glightbox-clean .gdesc-inner {
    box-shadow: none !important;
}

/* ---------------------------------------------
   Gallery Page Header
   --------------------------------------------- */
.gallery-header {
    text-align: center;
    margin-bottom: 2rem;
    padding: 2rem;
    background: linear-gradient(135deg, var(--md-primary-fg-color--dark, #0d47a1) 0%, var(--md-primary-fg-color, #2196f3) 100%);
    border-radius: 8px;
    color: #fff;
}

.gallery-header h1,
.gallery-header h2 {
    margin: 0 0 0.5rem 0;
    font-size: 2rem;
    color: #fff;
}

.gallery-header p {
    margin: 0;
    font-size: 1.1rem;
    opacity: 0.9;
}

/* ---------------------------------------------
   Responsive Adjustments
   --------------------------------------------- */
@media (max-width: 600px) {
    .gallery-header h1,
    .gallery-header h2 {
        font-size: 1.5rem;
    }

    .gallery-grid {
        grid-template-columns: 1fr;
    }
}

/* ---------------------------------------------
   Print Styles
   --------------------------------------------- */
@media print {
    .gallery-item.video .media-container::before,
    .gallery-item.video .media-container::after {
        display: none;
    }
}