/* ================================================================
   BBG Gallery — Neumorphic / Stripe-clarity override
   Loaded on media-gallery page via ?v2=1
   Overrides gallery.css with soft-UI neumorphic shadows,
   no borders, and a muted surface background.
   ================================================================ */

/* ================================================================
   TOKEN OVERRIDES — neumorphic surface
   ================================================================ */
.bbg-gallery-page {
    --gal-bg:         #e8ecf2 !important;
    --gal-surface:    #e8ecf2 !important;

    /* Neumorphic shadow pair */
    --neu-d:          #c5cbd7;
    --neu-l:          #ffffff;
    --shadow-xs:       4px  4px 10px var(--neu-d), -4px  -4px 10px var(--neu-l);
    --shadow-sm:       5px  5px 14px var(--neu-d), -5px  -5px 14px var(--neu-l);
    --shadow-md:       6px  6px 16px var(--neu-d), -6px  -6px 16px var(--neu-l);
    --shadow-lg:       8px  8px 22px var(--neu-d), -8px  -8px 22px var(--neu-l);
    --shadow-xl:      10px 10px 30px var(--neu-d), -10px -10px 30px var(--neu-l);
    --shadow-inset:   inset 3px 3px 7px var(--neu-d), inset -3px -3px 7px var(--neu-l);

    background: #e8ecf2 !important;
}


/* ================================================================
   HERO — sunken / pressed neumorphic container
   ================================================================ */
.gal-hero {
    border-radius: 20px !important;
    margin: 8px 24px 0 !important;
    overflow: hidden !important;
    box-shadow: none !important;
    border: none !important;
    position: relative !important;
}

/* Sunken inset shadow over the gradient overlay */
.gal-hero::after {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    border-radius: inherit !important;
    z-index: 3 !important;
    pointer-events: none !important;
    box-shadow:
        inset  0  8px 18px rgba(0, 0, 0, .45),
        inset  0 -4px 12px rgba(0, 0, 0, .15),
        inset  6px 0 14px  rgba(0, 0, 0, .18),
        inset -6px 0 14px  rgba(0, 0, 0, .18) !important;
}

/* Outer "lip" — surface shadow INTO the recess */
.gal-hero {
    outline: 2px solid rgba(0, 0, 0, .06) !important;
    outline-offset: -2px !important;
}

/* Hero pill counter — extruded */
.gal-hero__count {
    background: rgba(232, 236, 242, 0.15) !important;
    border: none !important;
    box-shadow:
        4px 4px 10px rgba(0, 0, 0, .25),
       -4px -4px 10px rgba(255, 255, 255, .08) !important;
    backdrop-filter: blur(16px) saturate(1.5) !important;
}


/* ================================================================
   FILTERS BAR — extruded soft bar
   ================================================================ */
.gal-filters__inner {
    background: #e8ecf2 !important;
    border-radius: 16px !important;
    box-shadow: 5px 5px 14px #c5cbd7, -5px -5px 14px #ffffff !important;
    padding: 16px 24px !important;
    margin: 24px auto 0 !important;
    border: none !important;
}

/* Filter selects — sunken wells */
.gal-filter-select {
    background: #e8ecf2 !important;
    border: none !important;
    border-radius: 12px !important;
    box-shadow: inset 3px 3px 7px #c5cbd7, inset -3px -3px 7px #ffffff !important;
    color: #1a2a4a !important;
    transition: box-shadow 0.25s ease !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='%23001845' d='M5 7L1 3h8z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
}

.gal-filter-select:hover,
.gal-filter-select:focus {
    box-shadow: inset 2px 2px 5px #c5cbd7, inset -2px -2px 5px #ffffff,
                0 0 0 2px rgba(0, 45, 114, 0.15) !important;
    background-color: #e8ecf2 !important;
    border-color: transparent !important;
}

/* Reset button — extruded pill */
.gal-filter-reset {
    background: #e8ecf2 !important;
    border: none !important;
    border-radius: 12px !important;
    box-shadow: 4px 4px 10px #c5cbd7, -4px -4px 10px #ffffff !important;
    transition: box-shadow 0.25s ease !important;
}

.gal-filter-reset:hover {
    box-shadow: inset 3px 3px 7px #c5cbd7, inset -3px -3px 7px #ffffff !important;
    border-color: transparent !important;
}


/* ================================================================
   MASONRY GRID — extruded cards
   ================================================================ */
.gal-grid-wrap {
    background: #e8ecf2 !important;
}

.gal-item {
    background: #e8ecf2 !important;
    border: none !important;
    border-radius: 16px !important;
    box-shadow: 6px 6px 16px #c5cbd7, -6px -6px 16px #ffffff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transition: transform 0.35s cubic-bezier(.4,0,.2,1),
                box-shadow 0.35s ease !important;
    overflow: hidden !important;
}

.gal-item:hover {
    transform: translateY(-5px) !important;
    box-shadow: 8px 8px 22px #c5cbd7, -8px -8px 22px #ffffff !important;
    border-color: transparent !important;
}

/* Image inside card — sunken well */
.gal-item__media {
    margin: 8px !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: inset 2px 2px 6px #c5cbd7, inset -2px -2px 6px #ffffff !important;
}

.gal-item__media img,
.gal-item__media video {
    border-radius: 12px !important;
}

/* Play button — extruded circle */
.gal-item__play {
    background: #e8ecf2 !important;
    color: #001845 !important;
    box-shadow: 4px 4px 10px #c5cbd7, -4px -4px 10px #ffffff !important;
    backdrop-filter: none !important;
}

.gal-item:hover .gal-item__play {
    background: #e8ecf2 !important;
    box-shadow: inset 3px 3px 7px #c5cbd7, inset -3px -3px 7px #ffffff !important;
}


/* ================================================================
   LIGHTBOX — neumorphic panel
   ================================================================ */
.gal-lightbox__container {
    background: #e8ecf2 !important;
    border: none !important;
    border-radius: 20px !important;
    box-shadow: 10px 10px 30px rgba(0, 0, 0, .4),
               -10px -10px 30px rgba(255, 255, 255, .06) !important;
}

.gal-lightbox__close {
    background: #e8ecf2 !important;
    color: #001845 !important;
    box-shadow: 4px 4px 10px #c5cbd7, -4px -4px 10px #ffffff !important;
}

.gal-lightbox__close:hover {
    box-shadow: inset 3px 3px 7px #c5cbd7, inset -3px -3px 7px #ffffff !important;
    background: #e8ecf2 !important;
}

.gal-lightbox__nav {
    background: #e8ecf2 !important;
    color: #001845 !important;
    box-shadow: 4px 4px 10px #c5cbd7, -4px -4px 10px #ffffff !important;
}

.gal-lightbox__nav:hover {
    background: #e8ecf2 !important;
    box-shadow: inset 3px 3px 7px #c5cbd7, inset -3px -3px 7px #ffffff !important;
}

/* Info sidebar — extruded panel */
.gal-lightbox__info {
    background: #e8ecf2 !important;
    border-left: none !important;
    box-shadow: inset 3px 0 10px rgba(197, 203, 215, 0.5) !important;
}

.gal-lightbox__title {
    color: #001845 !important;
}

.gal-lightbox__desc {
    color: #555e70 !important;
}

.gal-lightbox__badge {
    background: #e8ecf2 !important;
    color: #002d72 !important;
    box-shadow: 3px 3px 8px #c5cbd7, -3px -3px 8px #ffffff !important;
}

.gal-lightbox__counter {
    color: #8a95a8 !important;
}

.gal-lightbox__meta {
    border-top-color: rgba(197, 203, 215, 0.4) !important;
}

.gal-lightbox__meta-item {
    color: #555e70 !important;
}


/* ================================================================
   EMPTY STATE — sunken well
   ================================================================ */
.gal-empty {
    background: #e8ecf2 !important;
    border-radius: 16px !important;
    box-shadow: inset 3px 3px 7px #c5cbd7, inset -3px -3px 7px #ffffff !important;
    margin: 0 24px !important;
}

.gal-no-results {
    background: #e8ecf2 !important;
    border-radius: 16px !important;
    box-shadow: inset 3px 3px 7px #c5cbd7, inset -3px -3px 7px #ffffff !important;
}


/* ================================================================
   RESPONSIVE — keep hero spacing tighter on mobile
   ================================================================ */
@media (max-width: 600px) {
    .gal-hero {
        margin: 4px 12px 0 !important;
        border-radius: 14px !important;
    }

    .gal-filters__inner {
        margin: 16px 12px 0 !important;
        border-radius: 12px !important;
        padding: 12px 16px !important;
    }

    .gal-item {
        border-radius: 12px !important;
    }

    .gal-item__media {
        margin: 6px !important;
        border-radius: 10px !important;
    }

    .gal-lightbox__container {
        border-radius: 14px !important;
    }
}