/* Media Image Gallery v8 — style.css */

/* =====================================================
   FILTER TABS
   ===================================================== */
.mig-tab { outline: none !important; }

.mig-tab:not(.mig-active):hover {
    border-color: #1074BC !important;
    color:        #1074BC !important;
    background:   #fff    !important;
    transform:    translateY(-2px) !important;
    box-shadow:   0 6px 16px rgba(16,116,188,.15) !important;
}

/* =====================================================
   GRID ITEMS
   ===================================================== */
.mig-item:hover img {
    transform: scale(1.06) !important;
}

.mig-overlay {
    position:        absolute !important;
    inset:           0 !important;
    background:      rgba(0,0,0,0) !important;
    display:         flex !important;
    align-items:     center !important;
    justify-content: center !important;
    transition:      background 0.35s ease !important;
    pointer-events:  none !important;
    z-index:         2 !important;
}

.mig-overlay-icon {
    opacity:          0;
    transform:        scale(0.6);
    transition:       opacity 0.3s ease, transform 0.3s cubic-bezier(.34,1.56,.64,1);
    width:            56px;
    height:           56px;
    border-radius:    50%;
    background:       rgba(255,255,255,0.18);
    border:           2px solid rgba(255,255,255,0.7);
    display:          flex;
    align-items:      center;
    justify-content:  center;
    color:            #fff;
    backdrop-filter:  blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.mig-item:hover .mig-overlay {
    background: rgba(10,10,30,0.5) !important;
}

.mig-item:hover .mig-overlay-icon {
    opacity:   1 !important;
    transform: scale(1) !important;
}

/* =====================================================
   FILTER ANIMATION
   ===================================================== */
.mig-item.mig-hidden {
    display: none !important;
}

@keyframes migFadeIn {
    from { opacity: 0; transform: scale(.95); }
    to   { opacity: 1; transform: scale(1);   }
}

.mig-item.mig-fadein {
    animation: migFadeIn 0.32s ease both;
}

/* =====================================================
   SUBCATEGORY CARDS
   ===================================================== */
.mig-subcat-view {
    animation: migSlideIn 0.28s ease both;
}

@keyframes migSlideIn {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

.mig-subcat-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap:                   18px;
    padding:               4px 0 8px;
}

.mig-subcat-card {
    border-radius:  12px;
    overflow:       hidden;
    border:         2px solid #e9ebef;
    background:     #fff;
    cursor:         pointer;
    transition:     transform 0.22s cubic-bezier(.34,1.56,.64,1),
                    border-color 0.18s ease,
                    box-shadow 0.22s ease;
    box-shadow:     0 2px 8px rgba(0,0,0,.06);
    animation:      migCardIn 0.32s ease both;
}

.mig-subcat-card:hover {
    transform:    translateY(-6px);
    border-color: #1074BC;
    box-shadow:   0 14px 36px rgba(16,116,188,.2);
}

.mig-subcat-card:nth-child(1) { animation-delay: 0s;    }
.mig-subcat-card:nth-child(2) { animation-delay: 0.06s; }
.mig-subcat-card:nth-child(3) { animation-delay: 0.12s; }
.mig-subcat-card:nth-child(4) { animation-delay: 0.18s; }
.mig-subcat-card:nth-child(5) { animation-delay: 0.22s; }
.mig-subcat-card:nth-child(6) { animation-delay: 0.26s; }
.mig-subcat-card:nth-child(7) { animation-delay: 0.30s; }
.mig-subcat-card:nth-child(8) { animation-delay: 0.34s; }

@keyframes migCardIn {
    from { opacity: 0; transform: translateY(18px) scale(.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.mig-subcat-card-img {
    position:    relative;
    width:       100%;
    padding-top: 70%;
    overflow:    hidden;
    background:  #f0f2f6;
}

.mig-subcat-card-img img {
    position:   absolute;
    inset:      0;
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
    transition: transform 0.48s cubic-bezier(.25,.46,.45,.94);
}

.mig-subcat-card:hover .mig-subcat-card-img img {
    transform: scale(1.09);
}

.mig-subcat-placeholder {
    position:        absolute;
    inset:           0;
    display:         flex;
    align-items:     center;
    justify-content: center;
    color:           #c9cdd6;
}

.mig-subcat-overlay {
    position:        absolute;
    inset:           0;
    background:      rgba(16,116,188,0);
    display:         flex;
    align-items:     center;
    justify-content: center;
    transition:      background 0.28s ease;
    pointer-events:  none;
    z-index:         2;
}

.mig-subcat-icon {
    opacity:          0;
    transform:        scale(0.4);
    transition:       opacity 0.24s ease, transform 0.28s cubic-bezier(.34,1.56,.64,1);
    width:            50px;
    height:           50px;
    border-radius:    50%;
    background:       rgba(255,255,255,0.2);
    border:           2px solid rgba(255,255,255,0.85);
    display:          flex;
    align-items:      center;
    justify-content:  center;
    color:            #fff;
    backdrop-filter:  blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.mig-subcat-card:hover .mig-subcat-overlay {
    background: rgba(16,116,188,0.48);
}

.mig-subcat-card:hover .mig-subcat-icon {
    opacity:   1;
    transform: scale(1);
}

.mig-subcat-footer {
    padding:         12px 14px 13px;
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             8px;
    border-top:      1px solid #f0f2f5;
}

.mig-subcat-name {
    font-size:     14px;
    font-weight:   700;
    color:         #1a1a2e;
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
    flex:          1;
}

.mig-subcat-count {
    font-size:     11px;
    font-weight:   600;
    color:         #9ca3af;
    white-space:   nowrap;
    background:    #f3f4f6;
    padding:       2px 8px;
    border-radius: 20px;
    flex-shrink:   0;
}

/* =====================================================
   NAV BAR (breadcrumb + back button)
   ===================================================== */
.mig-nav-bar {
    display:       flex;
    align-items:   center;
    gap:           14px;
    margin-bottom: 18px;
    padding:       10px 14px;
    background:    #f8f9fb;
    border:        1.5px solid #e9ebef;
    border-radius: 10px;
    animation:     migFadeIn 0.2s ease both;
}

.mig-back-btn {
    display:       inline-flex;
    align-items:   center;
    gap:           5px;
    padding:       7px 14px;
    background:    #fff;
    border:        1.5px solid #d1d5db;
    border-radius: 7px;
    font-size:     13px;
    font-weight:   700;
    color:         #374151;
    cursor:        pointer;
    transition:    all 0.18s ease;
    white-space:   nowrap;
    flex-shrink:   0;
}

.mig-back-btn:hover {
    background:   #1074BC;
    border-color: #1074BC;
    color:        #fff;
    transform:    translateX(-2px);
}

.mig-breadcrumb-trail {
    display:     flex;
    align-items: center;
    gap:         6px;
    font-size:   13px;
    min-width:   0;
    overflow:    hidden;
}

.mig-bc-parent {
    font-weight:   600;
    color:         #6b7280;
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
}

.mig-bc-sub {
    font-weight:   700;
    color:         #1074BC;
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
}

.mig-breadcrumb-trail svg {
    flex-shrink: 0;
    color:       #9ca3af;
}

.mig-grid-view {
    animation: migFadeIn 0.26s ease both;
}

/* =====================================================
   LIGHTBOX
   ===================================================== */
.mig-lightbox.mig-lb-open {
    display: flex !important;
}

body.mig-noscroll header,
body.mig-noscroll .site-header,
body.mig-noscroll #masthead,
body.mig-noscroll #site-header,
body.mig-noscroll .elementor-sticky--active,
body.mig-noscroll .elementor-sticky--effects,
body.mig-noscroll [data-elementor-type="header"],
body.mig-noscroll .sticky-header,
body.mig-noscroll .fixed-header,
body.mig-noscroll nav.fixed,
body.mig-noscroll nav.sticky {
    z-index:  0 !important;
    position: relative !important;
}

body.mig-noscroll { overflow: hidden !important; }

.mig-lb-img.mig-lb-loading { opacity: 0.15 !important; }

.mig-lb-close,
.mig-lb-prev,
.mig-lb-next {
    position:         fixed !important;
    display:          flex !important;
    align-items:      center !important;
    justify-content:  center !important;
    width:            58px !important;
    height:           58px !important;
    border-radius:    50% !important;
    background:       rgba(255,255,255,0.14) !important;
    border:           2px solid rgba(255,255,255,0.55) !important;
    color:            #fff !important;
    cursor:           pointer !important;
    transition:       all 0.2s ease !important;
    z-index:          2147483647 !important;
    backdrop-filter:  blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}

.mig-lb-close { top: 24px !important; right: 24px !important; }
.mig-lb-prev  { left: 24px !important; top: 50% !important; transform: translateY(-50%) !important; }
.mig-lb-next  { right: 24px !important; top: 50% !important; transform: translateY(-50%) !important; }

.mig-lb-close:hover { background: rgba(220,38,38,.9) !important; border-color: transparent !important; transform: scale(1.1) !important; }
.mig-lb-prev:hover  { background: rgba(255,255,255,.25) !important; border-color: #fff !important; transform: translateY(-50%) scale(1.1) !important; }
.mig-lb-next:hover  { background: rgba(255,255,255,.25) !important; border-color: #fff !important; transform: translateY(-50%) scale(1.1) !important; }

@keyframes migLbIn {
    from { opacity: 0; transform: scale(0.93); }
    to   { opacity: 1; transform: scale(1); }
}
.mig-lb-img-wrap { animation: migLbIn 0.22s ease both; }

/* =====================================================
   RESPONSIVE
   ===================================================== */
@media (max-width: 900px) {
    .mig-grid        { grid-template-columns: repeat(2,1fr) !important; }
    .mig-lb-prev     { left: 10px !important; }
    .mig-lb-next     { right: 10px !important; }
    .mig-subcat-grid { grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 12px; }
}

@media (max-width: 540px) {
    .mig-grid        { grid-template-columns: repeat(2,1fr) !important; }
    .mig-tab         { padding: 7px 11px !important; font-size: 11px !important; }
    .mig-lb-close    { top: 10px !important; right: 10px !important; width: 44px !important; height: 44px !important; }
    .mig-lb-prev     { left: 6px !important; width: 44px !important; height: 44px !important; }
    .mig-lb-next     { right: 6px !important; width: 44px !important; height: 44px !important; }
    .mig-subcat-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .mig-nav-bar     { flex-wrap: wrap; gap: 8px; }
    .mig-breadcrumb-trail { font-size: 12px; }
}