/* ═══════════════════════════════════════════════════════════
   DMmotionarts Plugin — Filterable Media Gallery
   gallery.css  v1.0.0
   ═══════════════════════════════════════════════════════════ */

.dg-gallery-wrap *,
.dg-lightbox * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* ── Root variables & wrapper ── */
.dg-gallery-wrap {
    --bg:      #0f0f0f;
    --surface: #161616;
    --border:  #252525;
    --accent:  #c8f04a;
    --text:    #e2e2e2;
    --muted:   #555;
    --r:       4px;
    --dd:      #1b1b1b;

    font-family: 'DM Mono', monospace;
    background:  var(--bg);
    color:       var(--text);
    padding:     48px 28px;
    min-height:  300px;
}

/* ── Header ── */
.dg-header {
    display:       flex;
    align-items:   baseline;
    gap:           14px;
    margin-bottom: 32px;
}
.dg-header h2 {
    font-family:     'Fraunces', serif;
    font-weight:     300;
    font-size:       clamp(26px, 4vw, 44px);
    letter-spacing:  -.02em;
    color:           var(--text);
}
.dg-count {
    font-size:      10px;
    color:          var(--muted);
    letter-spacing: .14em;
    text-transform: uppercase;
}

/* ── Filter bar ── */
.dg-filter-bar {
    display:         flex;
    flex-wrap:       wrap;
    gap:             6px;
    margin-bottom:   20px;
    padding-bottom:  20px;
    border-bottom:   1px solid var(--border);
    align-items:     center;
}
.dg-filter-btn {
    position:       relative;
    background:     transparent;
    border:         1px solid var(--border);
    color:          var(--muted);
    padding:        6px 13px;
    font-family:    'DM Mono', monospace;
    font-size:      10px;
    letter-spacing: .1em;
    text-transform: uppercase;
    cursor:         pointer;
    border-radius:  var(--r);
    transition:     all .18s;
    user-select:    none;
    white-space:    nowrap;
}
.dg-filter-btn:hover {
    border-color: var(--accent);
    color:        var(--accent);
}
.dg-filter-btn.selected {
    background:   var(--accent);
    border-color: var(--accent);
    color:        #0f0f0f;
}
.dg-filter-btn.has-dd { padding-right: 26px; }
.dg-filter-btn.has-dd::after {
    content:    '▾';
    position:   absolute;
    right:      9px;
    top:        50%;
    transform:  translateY(-50%);
    font-size:  10px;
    opacity:    .6;
    transition: transform .18s;
}
.dg-filter-wrap { position: relative; display: inline-block; }
.dg-filter-wrap:hover .dg-filter-btn.has-dd::after {
    transform: translateY(-50%) rotate(-180deg);
}

/* ── Dropdown ── */
/* top:100% + padding-top bridge = no hover gap between button and panel */
.dg-dropdown {
    position:       absolute;
    top:            100%;
    left:           0;
    z-index:        9999;
    padding-top:    6px;       /* invisible bridge — keeps hover alive */
    opacity:        0;
    pointer-events: none;
    transform:      translateY(-4px);
    transition:     opacity .18s, transform .18s;
}
.dg-dropdown-inner {
    background:  var(--dd);
    border:      1px solid var(--border);
    border-radius: var(--r);
    min-width:   170px;
    padding:     4px;
    box-shadow:  0 16px 40px rgba(0,0,0,.55);
}
.dg-dropdown.open {
    opacity:        1;
    pointer-events: all;
    transform:      translateY(0);
}
.dg-dropdown-inner .dg-dd-item {
    display:        flex;
    align-items:    center;
    gap:            8px;
    padding:        7px 10px;
    cursor:         pointer;
    border-radius:  var(--r);
    font-size:      10px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color:          var(--muted);
    transition:     background .12s, color .12s;
    user-select:    none;
}
.dg-dropdown-inner .dg-dd-item:hover  { background: #222; color: var(--text); }
.dg-dropdown-inner .dg-dd-item.selected { color: var(--accent); }
.dg-check {
    width:          14px;
    height:         14px;
    border:         1px solid var(--border);
    border-radius:  2px;
    flex-shrink:    0;
    display:        flex;
    align-items:    center;
    justify-content: center;
    font-size:      9px;
    transition:     all .12s;
}
.dg-dd-item.selected .dg-check {
    background:   var(--accent);
    border-color: var(--accent);
    color:        #0f0f0f;
}

/* ── Active filter tags ── */
.dg-active-tags {
    display:       flex;
    flex-wrap:     wrap;
    gap:           6px;
    margin-bottom: 16px;
    min-height:    0;
}
.dg-tag {
    display:        inline-flex;
    align-items:    center;
    gap:            5px;
    background:     var(--accent);
    color:          #0f0f0f;
    font-size:      10px;
    letter-spacing: .08em;
    padding:        4px 10px;
    border-radius:  var(--r);
    font-family:    'DM Mono', monospace;
}
.dg-tag button {
    background:  none;
    border:      none;
    cursor:      pointer;
    color:       #0f0f0f;
    font-size:   13px;
    line-height: 1;
    padding:     0 0 0 2px;
    opacity:     .65;
    transition:  opacity .15s;
}
.dg-tag button:hover { opacity: 1; }

/* ── Clear all ── */
.dg-clear-btn {
    background:           none;
    border:               none;
    color:                var(--muted);
    font-family:          'DM Mono', monospace;
    font-size:            10px;
    letter-spacing:       .1em;
    cursor:               pointer;
    text-decoration:      underline;
    text-underline-offset: 3px;
    padding:              6px 4px;
    transition:           color .15s;
}
.dg-clear-btn:hover { color: var(--text); }

/* ── Image grid ── */
.dg-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap:                   2px;
    margin-bottom:         36px;
    transition:            opacity .2s;
}

/* ── Image card ── */
.dg-card {
    position:   relative;
    background: var(--surface);
    overflow:   hidden;
    aspect-ratio: 1;
    opacity:    0;
    transform:  translateY(10px);
    animation:  dgFU .3s ease forwards;
}
@keyframes dgFU { to { opacity: 1; transform: translateY(0); } }

.dg-card img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
    transition: transform .4s ease;
}
.dg-card:hover img { transform: scale(1.07); }

.dg-card-overlay {
    position:   absolute;
    inset:      0;
    background: linear-gradient(to top, rgba(0,0,0,.9) 0%, transparent 55%);
    display:    flex;
    flex-direction: column;
    justify-content: flex-end;
    padding:    12px;
    opacity:    0;
    transition: opacity .22s ease;
}
.dg-card:hover .dg-card-overlay { opacity: 1; }

.dg-card-title {
    font-size:      10px;
    color:          #fff;
    letter-spacing: .05em;
    white-space:    nowrap;
    overflow:       hidden;
    text-overflow:  ellipsis;
    margin-bottom:  7px;
}
.dg-card-actions { display: flex; gap: 6px; }

/* ── Buttons ── */
.dg-btn {
    display:        inline-flex;
    align-items:    center;
    gap:            4px;
    padding:        5px 10px;
    font-family:    'DM Mono', monospace;
    font-size:      10px;
    letter-spacing: .08em;
    border:         none;
    border-radius:  var(--r);
    cursor:         pointer;
    text-decoration: none;
    transition:     all .18s;
    line-height:    1;
}
.dg-btn-download            { background: var(--accent); color: #0f0f0f; }
.dg-btn-download:hover      { background: #d9ff5a; }
.dg-btn-view                { background: rgba(255,255,255,.14); color: #fff; backdrop-filter: blur(4px); }
.dg-btn-view:hover          { background: rgba(255,255,255,.26); }

/* ── Lightbox ── */
.dg-lightbox {
    display:         none;
    position:        fixed;
    inset:           0;
    z-index:         99999;
    background:      rgba(0,0,0,.94);
    align-items:     center;
    justify-content: center;
    padding:         24px;
    backdrop-filter: blur(8px);
}
.dg-lightbox.open { display: flex; }

.dg-lb-inner {
    position:       relative;
    max-width:      90vw;
    max-height:     90vh;
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            14px;
}
.dg-lb-inner img {
    max-width:    100%;
    max-height:   78vh;
    object-fit:   contain;
    border-radius: 2px;
    box-shadow:   0 32px 80px rgba(0,0,0,.6);
}
.dg-lb-meta    { display: flex; align-items: center; gap: 14px; }
.dg-lb-title   { font-size: 11px; color: var(--muted); letter-spacing: .08em; }
.dg-lb-close {
    position:        absolute;
    top:             -40px;
    right:           0;
    background:      none;
    border:          1px solid var(--border);
    color:           var(--muted);
    width:           28px;
    height:          28px;
    border-radius:   var(--r);
    font-size:       14px;
    cursor:          pointer;
    display:         flex;
    align-items:     center;
    justify-content: center;
    transition:      all .18s;
}
.dg-lb-close:hover { border-color: var(--accent); color: var(--accent); }

/* ── Pagination ── */
.dg-pagination { display: flex; gap: 5px; justify-content: center; flex-wrap: wrap; }
.dg-page-btn {
    background:    transparent;
    border:        1px solid var(--border);
    color:         var(--muted);
    width:         32px;
    height:        32px;
    font-family:   'DM Mono', monospace;
    font-size:     10px;
    cursor:        pointer;
    border-radius: var(--r);
    transition:    all .18s;
}
.dg-page-btn:hover          { border-color: var(--accent); color: var(--accent); }
.dg-page-btn.active         { background: var(--accent); border-color: var(--accent); color: #0f0f0f; }

/* ── Loader ── */
.dg-loader {
    display:        none;
    text-align:     center;
    padding:        60px;
    color:          var(--muted);
    font-size:      10px;
    letter-spacing: .15em;
}
.dg-loader.on { display: block; }
.dg-loader::before {
    content:       '';
    display:       block;
    width:         22px;
    height:        22px;
    border:        2px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    margin:        0 auto 12px;
    animation:     dgSp .65s linear infinite;
}
@keyframes dgSp { to { transform: rotate(360deg); } }

/* ── Empty state ── */
.dg-empty {
    display:        none;
    text-align:     center;
    padding:        60px;
    color:          var(--muted);
    font-size:      11px;
    letter-spacing: .1em;
}
.dg-empty.on { display: block; }

/* ── Responsive ── */
@media (max-width: 600px) {
    .dg-grid { grid-template-columns: repeat(2, 1fr); }
    .dg-card-overlay { opacity: 1; }
}