/* =====================================================
   Media Video Gallery v2  —  vg-style.css
   Fully responsive, mobile-first
   ===================================================== */

/* ── Base wrap ── */
.mvg-wrap {
    width:          100%;
    max-width:      100%;
    box-sizing:     border-box;
    overflow:       visible;
    padding-bottom: 8px;
    font-family:    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.mvg-wrap *, .mvg-wrap *::before, .mvg-wrap *::after { box-sizing: border-box; }

/* =====================================================
   ELEMENTOR FIX
   .e-con.e-flex>.e-con-inner has flex-wrap which
   breaks the gallery layout on mobile. Force nowrap.
   ===================================================== */
.e-con.e-flex > .e-con-inner {
    flex-wrap: nowrap !important;
}

/* Stop theme/Elementor sections from clipping gallery children */
.mvg-subcat-view,
.mvg-subcat-grid,
.mvg-grid-view,
.mvg-grid {
    overflow: visible !important;
}

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

.mvg-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;
    white-space:    nowrap;
}
.mvg-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;
}
.mvg-tab.mvg-active {
    background:   #1074BC;
    border-color: #1074BC;
    color:        #fff;
    box-shadow:   0 4px 16px rgba(16,116,188,.28);
    transform:    translateY(-2px);
}
.mvg-tab.mvg-active span { background: rgba(255,255,255,.22); color: #fff; }
.mvg-tab:not(.mvg-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
   ===================================================== */
.mvg-subcat-view { animation: mvgSlideUp .28s ease both; }

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

.mvg-subcat-grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   18px;
    margin-bottom:         8px;
}

.mvg-subcat-card {
    position:      relative;
    border-radius: 16px;
    overflow:      hidden;
    cursor:        pointer;
    aspect-ratio:  16 / 9;
    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;
}
.mvg-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);
}

@keyframes mvgCardIn {
    from { opacity:0; transform:translateY(20px) scale(.96); }
    to   { opacity:1; transform:translateY(0) scale(1); }
}
.mvg-subcat-card              { animation: mvgCardIn .34s ease both; }
.mvg-subcat-card:nth-child(1) { animation-delay:.00s; }
.mvg-subcat-card:nth-child(2) { animation-delay:.07s; }
.mvg-subcat-card:nth-child(3) { animation-delay:.14s; }
.mvg-subcat-card:nth-child(4) { animation-delay:.04s; }
.mvg-subcat-card:nth-child(5) { animation-delay:.11s; }
.mvg-subcat-card:nth-child(6) { animation-delay:.18s; }

.mvg-sc-badge {
    position:        absolute;
    top:             10px;
    right:           10px;
    z-index:         10;
    display:         inline-flex;
    align-items:     center;
    gap:             4px;
    padding:         4px 10px;
    border-radius:   20px;
    background:      rgba(0,0,0,.55);
    border:          1px solid rgba(255,255,255,.18);
    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);
}

.mvg-sc-img     { position:absolute; inset:0; z-index:1; }
.mvg-sc-img img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .55s cubic-bezier(.25,.46,.45,.94); }
.mvg-subcat-card:hover .mvg-sc-img img { transform:scale(1.1); }

.mvg-sc-play-ov {
    position:        absolute;
    inset:           0;
    z-index:         4;
    display:         flex;
    align-items:     center;
    justify-content: center;
    opacity:         0;
    transition:      opacity .25s ease;
    pointer-events:  none;
}
.mvg-subcat-card:hover .mvg-sc-play-ov { opacity: 1; }

.mvg-sc-noimg {
    position:        absolute;
    inset:           0;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    gap:             8px;
    color:           rgba(255,255,255,.25);
    font-size:       11px;
    text-transform:  uppercase;
    letter-spacing:  .06em;
}

.mvg-sc-footer {
    position:        absolute;
    bottom:0; left:0; right:0;
    z-index:         5;
    padding:         44px 14px 14px;
    background:      linear-gradient(to top, rgba(4,6,18,.97) 0%, rgba(4,6,18,.75) 50%, transparent 100%);
    display:         flex;
    align-items:     flex-end;
    justify-content: space-between;
    gap:             8px;
}

.mvg-sc-text  { display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; }
.mvg-sc-name  { font-size:14px; font-weight:800; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.2; text-shadow:0 1px 6px rgba(0,0,0,.6); }
.mvg-sc-count { font-size:11px; font-weight:600; color:rgba(255,255,255,.6); letter-spacing:.03em; }
.mvg-sc-desc  { font-size:11px; color:rgba(255,255,255,.65); line-height:1.4; margin-top:4px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

.mvg-sc-arrow {
    flex-shrink:     0;
    width:           34px; height:34px;
    border-radius:   50%;
    background:      rgba(255,255,255,.12);
    border:          1.5px solid rgba(255,255,255,.3);
    display:         flex;
    align-items:     center;
    justify-content: center;
    color:           #fff;
    transition:      background .2s, border-color .2s, transform .2s;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.mvg-subcat-card:hover .mvg-sc-arrow { background:#1074BC; border-color:#1074BC; transform:translateX(3px); }

.mvg-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;
}
.mvg-subcat-card:hover::after { border-color:rgba(16,116,188,.6); }

/* =====================================================
   LEVEL 3 · VIDEO GRID
   ===================================================== */
.mvg-grid-view { display:none; animation: mvgFadeIn .26s ease both; }

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

.mvg-nav-bar {
    display:       flex;
    align-items:   center;
    gap:           12px;
    flex-wrap:     wrap;
    margin-bottom: 18px;
    padding:       10px 14px;
    background:    #f8f9fb;
    border:        1.5px solid #e9ebef;
    border-radius: 10px;
    animation:     mvgFadeIn .2s ease both;
}
.mvg-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;
}
.mvg-back-btn:hover { background:#1074BC; border-color:#1074BC; color:#fff; transform:translateX(-2px); }
.mvg-breadcrumb-trail { display:flex; align-items:center; gap:6px; font-size:13px; min-width:0; overflow:hidden; flex:1; }
.mvg-bc-parent { font-weight:600; color:#6b7280; white-space:nowrap; }
.mvg-bc-sub    { font-weight:700; color:#1074BC; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mvg-breadcrumb-trail svg { flex-shrink:0; color:#9ca3af; }

/* =====================================================
   VIDEO GRID — always 3 equal cards per row on desktop
   !important overrides any inline style from PHP/Elementor
   ===================================================== */
.mvg-grid,
.mvg-cols-2,
.mvg-cols-3,
.mvg-cols-4 {
    display:               grid !important;
    grid-template-columns: repeat(3, 1fr) !important;  /* ← 3 cards per row */
    grid-auto-rows:        1fr !important;
    gap:                   16px !important;
    width:                 100% !important;
    align-items:           stretch !important;
    margin-bottom:         8px;
}

/* ── Individual item — fills full grid cell height ── */
.mvg-item {
    cursor:  pointer;
    display: block;
    width:   100%;
    height:  100%;
}
.mvg-item.mvg-hidden { display:none !important; }
.mvg-item.mvg-fadein { animation: mvgFadeIn .32s ease both; }

/* ── Card shell: flex-column + full height = every card identical ── */
.mvg-item-inner {
    border-radius:  10px;
    overflow:       hidden;
    background:     #fff;
    box-shadow:     0 2px 12px rgba(0,0,0,.09);
    transition:     transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .22s ease;
    display:        flex;
    flex-direction: column;
    height:         100%;
}
.mvg-item:hover .mvg-item-inner { transform:translateY(-5px); box-shadow:0 14px 36px rgba(0,0,0,.17); }

/* ── Strict 16:9 thumbnail — identical for every card ── */
.mvg-item-thumb {
    position:    relative;
    width:       100%;
    padding-top: 56.25%;
    overflow:    hidden;
    background:  #0a0a14;
    flex-shrink: 0;
}
.mvg-item-thumb img {
    position:   absolute;
    top:0; left:0;
    width:100%; height:100%;
    object-fit: cover;
    display:    block;
    transition: transform .5s cubic-bezier(.25,.46,.45,.94);
}
.mvg-item:hover .mvg-item-thumb img { transform:scale(1.06); }

.mvg-item-overlay {
    position:       absolute;
    inset:          0;
    background:     transparent;
    transition:     background .3s ease;
    pointer-events: none;
    z-index:        1;
}
.mvg-item:hover .mvg-item-overlay { background:rgba(10,10,30,.45); }

.mvg-item-play {
    position:        absolute;
    inset:           0;
    display:         flex;
    align-items:     center;
    justify-content: center;
    z-index:         2;
    pointer-events:  none;
}
.mvg-item-play-icon {
    width:           52px;
    height:          52px;
    border-radius:   50%;
    background:      rgba(255,255,255,.18);
    border:          2px solid rgba(255,255,255,.65);
    display:         flex;
    align-items:     center;
    justify-content: center;
    color:           #fff;
    opacity:         .85;
    transform:       scale(.8);
    transition:      opacity .3s ease, transform .3s cubic-bezier(.34,1.56,.64,1);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.mvg-item:hover .mvg-item-play-icon { opacity:1; transform:scale(1); }

.mvg-item-type-badge {
    position:       absolute;
    top:8px; left:8px;
    z-index:        3;
    padding:        3px 8px;
    border-radius:  4px;
    background:     rgba(16,116,188,.88);
    color:          #fff;
    font-size:      10px;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: .05em;
}

/* ── Title: EXACTLY 2 lines, fixed height — every card pixel-identical ── */
.mvg-item-title {
    padding:            10px 12px;
    font-size:          13px;
    line-height:        1.45;
    font-weight:        600;
    color:              #1a1a2e;
    background:         #fff;
    border-top:         1px solid #f0f0f0;
    display:            -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow:           hidden;
    height:             calc(13px * 1.45 * 2 + 20px);
    flex-shrink:        0;
}

.mvg-no-results { text-align:center; color:#9ca3af; padding:32px 0; font-size:14px; }

/* =====================================================
   LIGHTBOX — NO transform/filter on iframe parents
   ===================================================== */
.mvg-lightbox { display:none; position:fixed; inset:0; z-index:2147483647; }
.mvg-lightbox.mvg-lb-open { display:flex !important; align-items:center; justify-content:center; }

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

.mvg-lb-backdrop {
    position:absolute; inset:0;
    background:rgba(5,5,15,.93);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    cursor:pointer;
}

.mvg-lb-close,
.mvg-lb-fullscreen {
    position:fixed !important; z-index:10 !important;
    display:flex !important; align-items:center !important; justify-content:center !important;
    width:52px !important; height:52px !important;
    border-radius:50% !important;
    background:rgba(255,255,255,.14) !important;
    border:2px solid rgba(255,255,255,.5) !important;
    color:#fff !important; cursor:pointer !important;
    transition:all .2s ease !important;
    backdrop-filter:blur(10px) !important;
    -webkit-backdrop-filter:blur(10px) !important;
}
.mvg-lb-close      { top:20px !important; right:20px !important; }
.mvg-lb-fullscreen { top:20px !important; right:82px !important; }
.mvg-lb-close:hover      { background:rgba(220,38,38,.9) !important; border-color:transparent !important; transform:scale(1.1) !important; }
.mvg-lb-fullscreen:hover { background:rgba(16,116,188,.85) !important; border-color:#1074BC !important; transform:scale(1.1) !important; }

.mvg-lb-content {
    position:relative; z-index:1;
    width:90vw; max-width:900px;
    display:flex; flex-direction:column; align-items:center; gap:12px;
    isolation:isolate;
}

.mvg-lb-video-wrap {
    position:relative; width:100%; padding-top:56.25%;
    border-radius:12px; overflow:hidden;
    box-shadow:0 24px 80px rgba(0,0,0,.6);
    background:#000;
}
@keyframes mvgLbIn { from{opacity:0;transform:scale(.94)} to{opacity:1;transform:scale(1)} }
.mvg-lb-video-wrap { animation:mvgLbIn .22s ease both; }

.mvg-lb-iframe {
    position:absolute !important; top:0 !important; left:0 !important;
    width:100% !important; height:100% !important;
    border:none !important; display:block !important;
}

.mvg-lb-title { color:rgba(255,255,255,.85); font-size:14px; font-weight:600; text-align:center; line-height:1.4; padding:0 8px; }

/* =====================================================
   TOUCH — always show play icon, disable hover lift
   ===================================================== */
@media (hover: none) {
    .mvg-item-play-icon  { opacity:1 !important; transform:scale(1) !important; }
    .mvg-item-overlay    { background:rgba(10,10,30,.25) !important; }
    .mvg-sc-play-ov      { opacity:.75 !important; }
    .mvg-subcat-card:hover { transform:none !important; box-shadow:0 4px 20px rgba(0,0,0,.15) !important; }
    .mvg-subcat-card:hover::after { border-color:transparent !important; }
    .mvg-item:hover .mvg-item-inner { transform:none !important; box-shadow:0 2px 12px rgba(0,0,0,.09) !important; }
    .mvg-subcat-card:hover .mvg-sc-arrow { transform:none !important; }
}

/* =====================================================
   RESPONSIVE — Tablet landscape  1025–1100px
   ===================================================== */
@media (max-width: 1100px) {
    .mvg-subcat-grid { grid-template-columns:repeat(3,1fr); gap:16px; }
}

/* =====================================================
   RESPONSIVE — Tablet portrait  768–1024px
   3 cols → 2 cols
   ===================================================== */
@media (max-width: 1024px) {
    .mvg-subcat-grid { grid-template-columns:repeat(2,1fr) !important; gap:14px; }

    .mvg-grid,
    .mvg-cols-2,
    .mvg-cols-3,
    .mvg-cols-4 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 14px !important;
    }
}

/* =====================================================
   RESPONSIVE — Mobile  <= 767px
   2 cols, smaller play icon + title
   ===================================================== */
@media (max-width: 767px) {

    .mvg-wrap { padding-bottom: 24px !important; }

    /* Tabs: horizontal scroll row */
    .mvg-filter {
        flex-wrap:       nowrap;
        overflow-x:      auto;
        justify-content: flex-start;
        gap:             8px;
        padding-bottom:  14px;
        margin-bottom:   20px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .mvg-filter::-webkit-scrollbar { display:none; }
    .mvg-tab { flex-shrink:0 !important; }

    /* Subcat: 2 columns */
    .mvg-subcat-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap:           12px;
        margin-bottom: 8px;
    }
    .mvg-subcat-card { border-radius: 10px; }
    .mvg-sc-footer   { padding: 24px 10px 10px; }
    .mvg-sc-name     { font-size: 12px; }
    .mvg-sc-count    { font-size: 10px; }
    .mvg-sc-arrow    { width: 24px; height: 24px; }

    /* Video grid: 2 columns */
    .mvg-grid,
    .mvg-cols-2,
    .mvg-cols-3,
    .mvg-cols-4 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    .mvg-item-play-icon { width:38px; height:38px; }
    .mvg-item-title {
        font-size: 12px;
        padding:   8px 10px;
        height:    calc(12px * 1.45 * 2 + 16px);
    }

    .mvg-nav-bar          { padding:8px 10px; gap:8px; }
    .mvg-back-btn         { padding:6px 12px; font-size:12px; }
    .mvg-breadcrumb-trail { font-size:12px; }

    .mvg-lb-content    { width:96vw; gap:8px; }
    .mvg-lb-video-wrap { border-radius:8px; }
    .mvg-lb-title      { font-size:12px; }
    .mvg-lb-close      { top:12px !important; right:12px !important; width:44px !important; height:44px !important; }
    .mvg-lb-fullscreen { top:12px !important; right:66px !important; width:44px !important; height:44px !important; }
}

/* =====================================================
   RESPONSIVE — Small mobile  <= 480px
   1 column full width
   ===================================================== */
@media (max-width: 480px) {

    .mvg-wrap { padding-bottom: 24px !important; }

    .mvg-tab      { padding:8px 13px !important; font-size:11px !important; }
    .mvg-tab span { font-size:10px; min-width:16px; height:16px; }

    /* Subcat: 1 column */
    .mvg-subcat-grid {
        grid-template-columns: 1fr !important;
        gap:           10px;
        margin-bottom: 10px;
    }
    .mvg-subcat-card { aspect-ratio:16/9; border-radius:10px; transition:none !important; }
    .mvg-sc-footer   { padding:40px 14px 14px; }
    .mvg-sc-name     { font-size:14px; }
    .mvg-sc-count    { font-size:11px; }
    .mvg-sc-arrow    { width:30px; height:30px; }

    /* Video grid: 1 column */
    .mvg-grid,
    .mvg-cols-2,
    .mvg-cols-3,
    .mvg-cols-4 {
        grid-template-columns: 1fr !important;
        gap:           10px !important;
        margin-bottom: 10px !important;
    }

    .mvg-item-play-icon { width:44px; height:44px; opacity:1 !important; transform:scale(1) !important; }
    .mvg-item-title {
        font-size: 13px;
        padding:   10px 12px;
        height:    calc(13px * 1.45 * 2 + 20px);
    }

    .mvg-back-btn { font-size:12px; padding:6px 10px; }

    .mvg-lb-close      { top:10px !important; right:10px !important; width:40px !important; height:40px !important; }
    .mvg-lb-fullscreen { top:10px !important; right:58px !important; width:40px !important; height:40px !important; }
    .mvg-lb-title      { font-size:11px; }
}

/* =====================================================
   RESPONSIVE — Very small  <= 360px
   ===================================================== */
@media (max-width: 360px) {
    .mvg-wrap        { padding-bottom: 20px !important; }
    .mvg-tab         { padding:7px 10px !important; font-size:10px !important; }
    .mvg-subcat-grid { gap:8px !important; margin-bottom:8px; }
    .mvg-sc-footer   { padding:32px 10px 10px; }
    .mvg-sc-name     { font-size:12px; }

    .mvg-grid,
    .mvg-cols-2,
    .mvg-cols-3,
    .mvg-cols-4 { gap:8px !important; margin-bottom:8px !important; }

    .mvg-item-title {
        font-size: 11px;
        padding:   8px 10px;
        height:    calc(11px * 1.45 * 2 + 16px);
    }
    .mvg-lb-close      { width:36px !important; height:36px !important; }
    .mvg-lb-fullscreen { right:54px !important; width:36px !important; height:36px !important; }
}