/* ARTMC Media v9.4.1 */

/* =========================================
   1. Grid & Item Wrapper
   ========================================= */
.artmc-grid { 
    display: grid; 
    gap: 20px; 
}

.artmc-item-wrap { 
    position: relative; 
    overflow: hidden; 
    transition: 0.3s; 
    display: block; 
    width: 100%; 
    box-sizing: border-box; 
}

/* =========================================
   2. Filters Tabs
   ========================================= */
.artmc-media-filters { 
    display: flex; 
    flex-wrap: nowrap; 
    gap: 10px; 
    margin-bottom: 25px; 
    overflow-x: auto; 
    -webkit-overflow-scrolling: touch; 
    scrollbar-width: none; 
    padding-bottom: 5px; 
}

.artmc-media-filters::-webkit-scrollbar { 
    display: none; 
}

.artmc-filter-btn { 
    background: #f1f1f1; 
    color: #333; 
    border: none; 
    padding: 8px 20px; 
    border-radius: 30px; 
    cursor: pointer; 
    white-space: nowrap; 
    font-weight: 600; 
    transition: 0.3s; 
    font-size: 14px; 
}

.artmc-filter-btn.active, 
.artmc-filter-btn:hover { 
    background: #2271b1; 
    color: #fff; 
}

/* =========================================
   3. Image & Overlay
   ========================================= */
.artmc-thumb { 
    position: relative; 
    width: 100%; 
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat; 
    transition: transform 0.6s ease; 
    display: block; 
}

.artmc-overlay { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    transition: 0.3s; 
    z-index: 2; 
}

/* =========================================
   4. Content Styling
   ========================================= */
.artmc-content { 
    position: relative; 
    width: 100%; 
    z-index: 3; 
    padding: 15px; 
    transition: 0.3s; 
}

.artmc-title { 
    margin: 0; 
    font-weight: bold; 
}

.artmc-desc { 
    font-size: 13px; 
    color: #666; 
    margin-top: 8px; 
    line-height: 1.5; 
}

/* Position: Below (Default) */
.artmc-pos-below .artmc-content { 
    background: #fff; 
}

/* Position: Overlay */
.artmc-pos-overlay .artmc-item-wrap { 
    display: flex; 
    flex-direction: column; 
}

.artmc-pos-overlay .artmc-content { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent); 
    color: #fff; 
    padding-bottom: 20px; 
}

.artmc-pos-overlay .artmc-title, 
.artmc-pos-overlay .artmc-desc { 
    color: #fff; 
}

/* =========================================
   5. Buttons & Loader (Load More)
   ========================================= */
.artmc-loader { 
    text-align: center; 
    padding: 20px; 
    display: none; 
    width: 100%; 
    font-weight: bold; 
    color: #666; 
}

.artmc-btn-wrap { 
    text-align: center; 
    margin-top: 20px; 
}

.artmc-btn-more { 
    cursor: pointer; 
    display: inline-block; 
    padding: 10px 25px; 
    background: #2271b1; 
    color: #fff; 
    text-decoration: none; 
    border: none; 
    border-radius: 4px; 
    transition: 0.3s; 
    font-weight: bold; 
}

.artmc-btn-more:hover { 
    opacity: 0.9; 
}

/* =========================================
   6. Numbered Pagination (NEW)
   ========================================= */
.artmc-pagination { 
    text-align: center; 
    margin-top: 30px; 
    display: flex; 
    justify-content: center; 
    gap: 8px; 
    flex-wrap: wrap; 
}

.artmc-pagination .page-numbers { 
    display: inline-flex; 
    align-items: center; 
    justify-content: center; 
    min-width: 36px; 
    height: 36px; 
    padding: 0 10px; 
    background: #f1f1f1; 
    color: #333; 
    text-decoration: none; 
    border-radius: 4px; 
    font-weight: bold; 
    transition: 0.3s; 
    font-size: 14px; 
}

.artmc-pagination .page-numbers:hover, 
.artmc-pagination .page-numbers.current { 
    background: #2271b1; 
    color: #fff; 
}

.artmc-pagination .page-numbers.dots { 
    background: transparent; 
    color: #999; 
    pointer-events: none; 
}

/* =========================================
   7. Swiper Fixes & Slider Nav
   ========================================= */
.artmc-swiper-container { 
    margin: -10px; 
    padding: 10px; 
} /* Ensures box-shadows don't clip */

.swiper-wrapper { 
    display: flex; 
}

.swiper-slide { 
    height: auto; 
    display: flex !important; 
    flex-direction: column; 
}

.artmc-media-wrapper { 
    position: relative; 
    --artmc-arrow-h: 0px; 
}

.swiper-button-next, 
.swiper-button-prev { 
    width: 40px; 
    height: 40px; 
    background: rgba(0,0,0,0.5); 
    color: #fff; 
    border-radius: 50%; 
    z-index: 10; 
    transition: 0.3s; 
}

.swiper-button-next:after, 
.swiper-button-prev:after { 
    font-size: 16px; 
    font-weight: bold; 
}

.swiper-button-next { right: var(--artmc-arrow-h) !important; }
.swiper-button-prev { left: var(--artmc-arrow-h) !important; }

[dir="rtl"] .swiper-button-next { left: var(--artmc-arrow-h) !important; right: auto !important; }
[dir="rtl"] .swiper-button-prev { right: var(--artmc-arrow-h) !important; left: auto !important; }

.swiper-pagination { 
    position: relative !important; 
    margin-top: 15px !important; 
    bottom: 0 !important; 
}

/* =========================================
   8. Icons & Animations
   ========================================= */
.artmc-icon svg { 
    transition: fill 0.3s ease; 
    filter: drop-shadow(0 2px 3px rgba(0,0,0,0.3)); 
}

.artmc-effect-zoom .artmc-item-wrap:hover .artmc-thumb { 
    transform: scale(1.1); 
}

.artmc-effect-lift .artmc-item-wrap:hover { 
    transform: translateY(-5px); 
    box-shadow: 0 10px 20px rgba(0,0,0,0.1); 
}

/* =========================================
   9. GLightbox Popup Adjustments (A11y)
   ========================================= */
.glightbox-container .gdesc-inner { 
    text-align: center; 
}

.artmc-lb-desc { 
    font-size: 14px; 
    color: #ccc; 
    margin-top: 5px; 
    display: inline-block; 
}

.artmc-a11y-alt { 
    letter-spacing: 0.5px; 
}