/* =====================================================
   Media Image Gallery v9  —  style.css
   ===================================================== */

/* ── Wrap ─────────────────────────────────────── */
.mig-wrap {
    width:      100%;
    max-width:  100%;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* =====================================================
   LEVEL 1 · PARENT FILTER TABS
   ===================================================== */
.mig-filter {
    display:         flex;
    flex-wrap:       wrap;
    gap:             8px;
    justify-content: center;
    margin-bottom:   28px;
    padding-bottom:  20px;
    border-bottom:   2px solid #eaecef;
}

.mig-tab {
    display:       inline-flex;
    align-items:   center;
    gap:           7px;
    padding:       9px 18px;
    border-radius: 3px;
    border:        2px solid #d8dce2;
    background:    #f7f8fa;
    color:         #6b7280;
    font-size:     12px;
    font-weight:   700;
    letter-spacing:.05em;
    text-transform:uppercase;
    cursor:        pointer;
    transition:    all .2s ease;
    line-height:   1;
    outline:       none;
}
.mig-tab span {
    display:       inline-flex;
    align-items:   center;
    justify-content:center;
    min-width:     20px;
    height:        20px;
    padding:       0 6px;
    border-radius: 3px;
    font-size:     11px;
    font-weight:   700;
    background:    #e5e7eb;
    color:         #9ca3af;
}
.mig-tab.mig-active,
.mig-tab:focus {
    background:   #1074BC;
    border-color: #1074BC;
    color:        #fff;
    box-shadow:   0 4px 16px rgba(16,116,188,.28);
    transform:    translateY(-2px);
}
.mig-tab.mig-active span {
    background: rgba(255,255,255,.22);
    color:      #fff;
}
.mig-tab:not(.mig-active):hover {
    border-color: #1074BC;
    color:        #1074BC;
    background:   #fff;
    transform:    translateY(-2px);
    box-shadow:   0 4px 12px rgba(16,116,188,.12);
}

/* =====================================================
   LEVEL 2 · SUBCATEGORY CARDS
   ===================================================== */
.mig-subcat-view { animation: migSlideUp .28s ease both; }

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

/* 4 columns — exact match to design */
.mig-subcat-grid {
    display:               grid;
    grid-template-columns: repeat(4, 1fr);
    gap:                   18px;
    padding:               4px 0 4px;
}

/* ── Card shell ── */
.mig-subcat-card {
    position:      relative;
    border-radius: 16px;
    overflow:      hidden;
    cursor:        pointer;
    aspect-ratio:  4 / 5;
    background:    #111827;
    box-shadow:    0 4px 20px rgba(0,0,0,.15);
    transition:    transform .26s cubic-bezier(.34,1.56,.64,1),
                   box-shadow .26s ease;
}
.mig-subcat-card:hover {
    transform:  translateY(-8px) scale(1.015);
    box-shadow: 0 22px 52px rgba(16,116,188,.26), 0 8px 20px rgba(0,0,0,.18);
}

/* Staggered entrance */
@keyframes migCardIn {
    from { opacity:0; transform:translateY(20px) scale(.96); }
    to   { opacity:1; transform:translateY(0)    scale(1);   }
}
.mig-subcat-card                { animation: migCardIn .34s ease both; }
.mig-subcat-card:nth-child(1)   { animation-delay:.00s; }
.mig-subcat-card:nth-child(2)   { animation-delay:.07s; }
.mig-subcat-card:nth-child(3)   { animation-delay:.14s; }
.mig-subcat-card:nth-child(4)   { animation-delay:.21s; }
.mig-subcat-card:nth-child(5)   { animation-delay:.04s; }
.mig-subcat-card:nth-child(6)   { animation-delay:.11s; }
.mig-subcat-card:nth-child(7)   { animation-delay:.18s; }
.mig-subcat-card:nth-child(8)   { animation-delay:.25s; }

/* ── Top-right badge ── */
.mig-sc-badge {
    position:        absolute;
    top:             12px;
    right:           12px;
    z-index:         10;
    display:         inline-flex;
    align-items:     center;
    gap:             4px;
    padding:         4px 10px;
    border-radius:   20px;
    background:      rgba(0,0,0,.52);
    border:          1px solid rgba(255,255,255,.16);
    color:           #fff;
    font-size:       11px;
    font-weight:     700;
    letter-spacing:  .04em;
    line-height:     1;
    pointer-events:  none;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* ── Cover image ── */
.mig-sc-img {
    position: absolute;
    inset:    0;
}
.mig-sc-img img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
    transition: transform .55s cubic-bezier(.25,.46,.45,.94);
}
.mig-subcat-card:hover .mig-sc-img img { transform: scale(1.1); }

/* No-cover placeholder */
.mig-sc-noimg {
    width:           100%;
    height:          100%;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    gap:             10px;
    color:           rgba(255,255,255,.2);
    font-size:       11px;
    letter-spacing:  .06em;
    text-transform:  uppercase;
}

/* ── Bottom gradient bar ── */
.mig-sc-footer {
    position:   absolute;
    bottom:     0;
    left:       0;
    right:      0;
    z-index:    5;
    padding:    44px 16px 16px;
    background: linear-gradient(to top,
        rgba(4,6,18,.97) 0%,
        rgba(4,6,18,.80) 38%,
        transparent 100%);
    display:         flex;
    align-items:     flex-end;
    justify-content: space-between;
    gap:             10px;
    transition:      padding-bottom .22s ease;
}
.mig-subcat-card:hover .mig-sc-footer { padding-bottom: 20px; }

/* Text stack inside footer */
.mig-sc-text {
    display:        flex;
    flex-direction: column;
    gap:            3px;
    min-width:      0;
    flex:           1;
}
.mig-sc-name {
    font-size:     15px;
    font-weight:   800;
    color:         #fff;
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
    line-height:   1.2;
    letter-spacing: -.01em;
    text-shadow:   0 2px 10px rgba(0,0,0,.5);
}
.mig-sc-count {
    font-size:   11px;
    font-weight: 600;
    color:       rgba(255,255,255,.55);
    letter-spacing: .04em;
}

/* Arrow circle */
.mig-sc-arrow {
    flex-shrink:     0;
    width:           36px;
    height:          36px;
    border-radius:   50%;
    background:      rgba(255,255,255,.13);
    border:          1.5px solid rgba(255,255,255,.35);
    display:         flex;
    align-items:     center;
    justify-content: center;
    color:           #fff;
    transition:      background .22s ease, border-color .22s ease, transform .22s ease;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.mig-subcat-card:hover .mig-sc-arrow {
    background:   #1074BC;
    border-color: #1074BC;
    transform:    translateX(3px);
}

/* Blue ring on hover */
.mig-subcat-card::after {
    content:        '';
    position:       absolute;
    inset:          0;
    border-radius:  16px;
    border:         2px solid transparent;
    transition:     border-color .24s ease;
    pointer-events: none;
    z-index:        6;
}
.mig-subcat-card:hover::after { border-color: rgba(16,116,188,.65); }

/* =====================================================
   LEVEL 3 · IMAGE GRID
   ===================================================== */
.mig-grid-view { animation: migFadeIn .26s ease both; }

.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 .35s ease !important;
    pointer-events:  none !important;
    z-index:         2 !important;
}
.mig-overlay-icon {
    opacity:         0;
    transform:       scale(.6);
    transition:      opacity .3s ease, transform .3s cubic-bezier(.34,1.56,.64,1);
    width:           56px;
    height:          56px;
    border-radius:   50%;
    background:      rgba(255,255,255,.18);
    border:          2px solid rgba(255,255,255,.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,.52) !important; }
.mig-item:hover .mig-overlay-icon       { opacity:1 !important; transform:scale(1) !important; }

/* Filter animation */
@keyframes migFadeIn {
    from { opacity:0; transform:scale(.95); }
    to   { opacity:1; transform:scale(1); }
}
.mig-item.mig-hidden  { display:none !important; }
.mig-item.mig-fadein  { animation: migFadeIn .32s ease both; }

/* =====================================================
   NAV BAR
   ===================================================== */
.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 .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 .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; }
.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; }

/* =====================================================
   LIGHTBOX
   ===================================================== */
.mig-lightbox.mig-lb-open { display:flex !important; }
body.mig-noscroll { overflow:hidden !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 [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;
}

.mig-lb-img.mig-lb-loading { opacity:.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,.14) !important;
    border:          2px solid rgba(255,255,255,.55) !important;
    color:           #fff !important;
    cursor:          pointer !important;
    transition:      all .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(.92); }
    to   { opacity:1; transform:scale(1); }
}
.mig-lb-img-wrap { animation: migLbIn .22s ease both; }

/* =====================================================
   RESPONSIVE
   ===================================================== */
@media (max-width:1100px) {
    .mig-subcat-grid { grid-template-columns:repeat(3,1fr); gap:14px; }
}
@media (max-width:900px) {
    .mig-grid        { grid-template-columns:repeat(2,1fr) !important; }
    .mig-subcat-grid { grid-template-columns:repeat(2,1fr); gap:12px; }
    .mig-lb-prev     { left:10px !important; }
    .mig-lb-next     { right:10px !important; }
}
@media (max-width:540px) {
    .mig-grid        { grid-template-columns:repeat(2,1fr) !important; }
    .mig-tab         { padding:7px 11px !important; font-size:11px !important; }
    .mig-subcat-grid { grid-template-columns:repeat(2,1fr); gap:10px; }
    .mig-subcat-card { aspect-ratio:3/4; }
    .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-nav-bar     { flex-wrap:wrap; gap:8px; }
    .mig-sc-name     { font-size:13px; }
}