/* /home/siisi/vertex/gallery_app/static/css/public-gallery.css */

/* =========================================
   public-gallery.css - Public gallery specific
   ========================================= */

.stat-col {
    border-right: 1px solid var(--bs-border-color, #dee2e6);
}

[data-bs-theme="dark"] .stat-col {
    border-right-color: rgba(255, 255, 255, 0.12);
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* ---------- Force square images (overrides gallery.css) ---------- */
.public-media-grid .image-wrapper {
    position: relative;
    aspect-ratio: 1 / 1 !important;
    flex: 0 0 auto !important;
    overflow: hidden;
    background-color: #f0f0f0;
}

.public-media-grid .image-wrapper img,
.public-media-grid .image-wrapper video {
    width: 100%;
    height: 100% !important;
    object-fit: contain !important;
}

/* ---------- Remove Bootstrap spacing around the grid ---------- */
.public-media-grid .row,
.public-media-grid .col-12 {
    margin: 0 !important;
    padding: 0 !important;
}

/* ---------- Horizontal scroll wrapper - no extra space ---------- */
.public-media-grid .horizontal-scroll-wrapper {
    min-height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
}

.public-media-grid .horizontal-grid {
    gap: 1rem !important;
    padding: 0 !important;
    margin: 0 !important;
}

.public-media-grid .gallery-col {
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important;
}

/* ---------- Card - compact padding ---------- */
.public-media-grid .card {
    margin-bottom: 0 !important;
}

.public-media-grid .card-body {
    padding: 0.4rem 0.75rem !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
}

/* ---------- Media controls - generous gaps ---------- */
.public-media-grid .media-controls .d-flex {
    gap: 0.6rem !important;
    align-items: center;
}

.public-media-grid form {
    margin-right: 0.6rem !important;
}

/* ---------- Privacy switch - compact but readable ---------- */
.public-media-grid .form-check {
    line-height: 1 !important;
    min-height: auto !important;
    margin-left: 0.5rem !important;
    padding-left: 2rem !important;
}

.public-media-grid .form-check-input {
    transform: none !important;
    width: 1.2rem;
    height: 1.2rem;
    margin-top: 0 !important;
}

.public-media-grid .form-check-label {
    display: inline-block !important;
    font-size: 0.75rem;
    margin-left: 0.25rem;
}

.accordion-gradient-bg,
.accordion-gradient-bg.collapsed {
    background: linear-gradient(135deg, #667eea, #764ba2) !important;
    transition: background 0.2s ease;
}

/* Higher specificity for light mode - ensures gradient overrides any theme defaults */
body:not([data-bs-theme="dark"]) .accordion-gradient-bg,
body:not([data-bs-theme="dark"]) .accordion-gradient-bg.collapsed {
    background: linear-gradient(135deg, #667eea, #764ba2) !important;
}

/* Hover effect */
.accordion-gradient-bg:hover,
body:not([data-bs-theme="dark"]) .accordion-gradient-bg:hover {
    background: linear-gradient(135deg, #5a67d8, #6b46c1) !important;
}

/* Optional: give the accordion body a background when empty */
.accordion__body--text {
    background-color: var(--bs-card-bg, #f8f9fa);
    border-radius: 0 0 12px 12px;
}

[data-bs-theme="dark"] .accordion__body--text {
    background-color: var(--bs-card-bg, #2d2d2d);
}

/* ---------- Make top public media grid transparent (overriding global opacity) ---------- */
#public-media-grid .gallery-card,
#public-media-grid .gallery-card .card-body,
#public-media-grid .image-wrapper {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

/* Dark mode - also transparent (top grid) */
[data-bs-theme="dark"] #public-media-grid .gallery-card,
[data-bs-theme="dark"] #public-media-grid .gallery-card .card-body,
[data-bs-theme="dark"] #public-media-grid .image-wrapper {
    background: transparent !important;
    background-color: transparent !important;
}

/* ---------- Dark mode for accordion (opaque, excluding carousel) ---------- */
[data-bs-theme="dark"] .gallery-explorer-accordion-card,
[data-bs-theme="dark"] .gallery-explorer-accordion-card .card-body,
[data-bs-theme="dark"] .gallery-explorer-accordion-card .accordion,
[data-bs-theme="dark"] .gallery-explorer-accordion-card .accordion__item,
[data-bs-theme="dark"] .gallery-explorer-accordion-card .accordion__body,
[data-bs-theme="dark"] .gallery-explorer-accordion-card .accordion__body--text {
    background: transparent !important;
    background-color: transparent !important;
}

/* ---------- Make carousel media items opaque (normal card background) ---------- */
/* Light mode - white background */
.gallery-explorer-accordion-card #carouselMediaSection .carousel-item,
.gallery-explorer-accordion-card #carouselMediaSection .ratio,
.gallery-explorer-accordion-card #carouselMediaSection .carousel-inner,
.gallery-explorer-accordion-card #carouselMediaSection .carousel {
    background: var(--bs-card-bg, #f0f0f0) !important;
    background-color: var(--bs-card-bg, #f0f0f0) !important;
}

/* ---------- Buttons - comfortable size ---------- */
.public-media-grid .btn-sm {
    padding: 0.2rem 0.5rem !important;
    font-size: 0.7rem !important;
    line-height: 1.3 !important;
}

.public-media-grid .btn-sm i {
    font-size: 0.8rem;
}

/* ---------- Mobile - slightly tighter ---------- */
@media (max-width: 576px) {
    .public-media-grid .horizontal-grid .gallery-col {
        width: calc(100vw - 2rem) !important;
        max-width: 480px;
        margin: 0 auto;
    }

    .public-media-grid .image-wrapper {
        aspect-ratio: 2 / 3 !important;
    }

    /* Show full media without cropping */
    .public-media-grid .image-wrapper img,
    .public-media-grid .image-wrapper video {
        object-fit: contain !important;
    }

    .public-media-grid .horizontal-grid {
        gap: 0.75rem !important;
    }

    .public-media-grid .card-body {
        padding: 0.3rem 0.5rem !important;
    }

    .public-media-grid .media-controls .d-flex {
        gap: 0.4rem !important;
    }

    .public-media-grid .btn-sm {
        padding: 0.15rem 0.4rem !important;
        font-size: 0.65rem !important;
    }

    .public-media-grid .btn-sm i {
        font-size: 0.7rem;
    }

    .public-media-grid .form-check {
        padding-left: 1.8rem !important;
    }
}