/* ============================================================
   xGallery — gallery.css
   ============================================================ */

/* BEGIN WRAPPER-OVERRIDE */
.wrapper { max-width: 1280px; }
/* END WRAPPER-OVERRIDE */

/* BEGIN CONTROLS */
.gallery-filter-panel { margin-bottom: var(--space-6); padding: var(--space-5) var(--space-6); position: relative; z-index: var(--z-dropdown); }

.gallery-controls {
    display:       flex;
    align-items:   center;
    gap:           var(--space-3);
    margin-bottom: var(--space-4);
}
.gallery-search     { flex: 1; }
.gallery-sort-wrap  { flex-shrink: 0; }

/* search-bar und Sort-Button auf 40px — gleiche Höhe wie .input (Login-Felder) */
.gallery-search.search-bar { height: 40px; }
.gallery-sort-btn          { height: 40px; min-width: 190px; padding: 0 var(--space-4); font-size: var(--text-ui); }
/* END CONTROLS */

/* BEGIN ROW2 — Anzahl links, View-Toggle + Tags-Button rechts (Hoehe ident mit xReviews-Tabs-Zeile) */
.gallery-row2 {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             var(--space-4);
}

.gallery-tags-btn {
    height:    36px;
    padding:   0 var(--space-4);
    font-size: var(--text-ui);
}

.gallery-tags-btn.is-active {
    background:   var(--accent-soft);
    color:        var(--accent);
    border-color: rgba(242, 166, 158, 0.35);
}

.gallery-count {
    font-size: var(--text-sm);
    color:     var(--text-muted);
}

.gallery-row2-right {
    display:     flex;
    align-items: center;
    gap:         var(--space-4);
}

.gallery-view-toggle {
    display: flex;
    gap:     var(--space-1);
}

.gallery-view-btn.is-active {
    background:   var(--accent-soft);
    color:        var(--accent);
    border-color: rgba(242, 166, 158, 0.35);
}
/* END ROW2 */

/* BEGIN TAG-MODAL */
.tag-modal-controls {
    display:       flex;
    align-items:   center;
    gap:           var(--space-3);
    margin-bottom: var(--space-4);
}

.tag-modal-search.search-bar { flex: 1; height: 40px; }

.tag-modal-sort-btn {
    height:      40px;
    min-width:   220px;
    padding:     0 var(--space-4);
    font-size:   var(--text-ui);
    flex-shrink: 0;
}

.tag-modal-list {
    max-height:      340px;
    overflow-y:      auto;
    scrollbar-width: none;
    border:          1px solid var(--border);
    border-radius:   var(--radius-md);
}

.tag-modal-list::-webkit-scrollbar { display: none; }

.tag-modal-row {
    display:       flex;
    align-items:   center;
    gap:           var(--space-3);
    padding:       var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border);
    cursor:        pointer;
    transition:    background var(--transition-fast);
}

.tag-modal-row:last-child { border-bottom: none; }
.tag-modal-row:hover      { background: var(--glass); }

.tag-modal-row.is-active {
    background: var(--accent-subtle);
}

.tag-modal-row-name {
    flex:        1;
    min-width:   0;
    font-size:   var(--text-sm);
    font-weight: 600;
    color:       var(--text-primary);
    overflow:      hidden;
    text-overflow: ellipsis;
    white-space:   nowrap;
}

.tag-modal-row.is-active .tag-modal-row-name { color: var(--accent); }

.tag-modal-row-desc {
    font-size: var(--text-xs);
    color:     var(--text-muted);
}

.tag-modal-row-count {
    font-size:   var(--text-xs);
    font-family: var(--font-mono);
    color:       var(--text-subtle);
    flex-shrink: 0;
}

.tag-modal-empty {
    padding:    var(--space-8);
    text-align: center;
    font-size:  var(--text-sm);
    color:      var(--text-subtle);
}
/* END TAG-MODAL */

/* BEGIN MASONRY-GRID */
.gallery-masonry {
    display:     flex;
    align-items: flex-start;
    gap:         var(--space-4);
}

.gallery-col {
    flex:           1;
    min-width:      0;
    display:        flex;
    flex-direction: column;
    gap:            var(--space-4);
}

.gallery-item {
    position:      relative;
    border-radius: var(--radius-md);
    overflow:      hidden;
    cursor:        pointer;
    background:    var(--glass);
    border:        1px solid var(--border);
    transition:    transform var(--transition), box-shadow var(--transition), border-color var(--transition);
    animation:     cardIn 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.gallery-item:hover {
    transform:    translateY(-3px);
    box-shadow:   var(--shadow-lg);
    border-color: var(--border-hover);
}
.gallery-item:hover .gallery-item-hover {
    opacity:   1;
    transform: translateY(0);
}
.gallery-img-wrap {
    position: relative;
    width:    100%;
    overflow: hidden;
}
.gallery-img-placeholder {
    position:        absolute;
    inset:           0;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       var(--text-xs);
    color:           rgba(255,255,255,0.28);
    font-family:     var(--font-mono);
    text-align:      center;
    padding:         var(--space-4);
}

.gallery-img-wrap img {
    position:   absolute;
    inset:      0;
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
}
.gallery-item-hover {
    position:   absolute;
    inset:      0;
    opacity:    0;
    transform:  translateY(4px);
    transition: opacity var(--transition), transform var(--transition);
}

/* Tag — oben rechts */
.gallery-item-tag {
    position: absolute;
    top:      var(--space-3);
    right:    var(--space-3);
}
.gallery-item-tag .tag {
    background:   rgba(10, 6, 20, 0.78);
    color:        rgba(255, 255, 255, 0.90);
    border-color: transparent;
    box-shadow:   0 2px 8px rgba(0,0,0,0.6);
}

/* Titel — unten links, Text-Outline für Lesbarkeit auf hellem Hintergrund */
.gallery-item-title {
    position:    absolute;
    bottom:      var(--space-3);
    left:        var(--space-3);
    right:       var(--space-10);
    font-size:   var(--text-sm);
    font-weight: 600;
    color:       #ffffff;
    margin:      0;
    line-height: 1.3;
    text-shadow: 0 0 3px rgba(0,0,0,1),
                 0 0 6px rgba(0,0,0,0.9),
                 1px  1px 0 rgba(0,0,0,1),
                -1px -1px 0 rgba(0,0,0,1),
                 1px -1px 0 rgba(0,0,0,1),
                -1px  1px 0 rgba(0,0,0,1);
}
/* END MASONRY-GRID */

/* BEGIN LIST-VIEW — Spaltenbreiten + Thumb-Groesse sind Page-Delta, Rest kommt aus shared .list-row */
.gallery-list.panel-solid {
    padding:                   0;
    overflow-x:                auto;
    overflow-y:                hidden;
    -webkit-overflow-scrolling: touch;
}

.gallery-list-head,
.gallery-list-row {
    grid-template-columns: 56px 1fr 220px 120px 120px;
}

.gallery-list-row {
    cursor:    pointer;
    animation: cardIn 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.gallery-list-thumb {
    width:  56px;
    height: 56px;
}
/* END LIST-VIEW */


/* BEGIN DRAG-SCROLL */
.gallery-list             { cursor: grab; scrollbar-width: thin; scrollbar-color: var(--accent) var(--glass); }
.gallery-list.is-dragging { cursor: grabbing; user-select: none; }

.gallery-list::-webkit-scrollbar       { height: 4px; }
.gallery-list::-webkit-scrollbar-track { background: var(--glass); }
.gallery-list::-webkit-scrollbar-thumb { background: var(--accent); border-radius: var(--radius-full); }
/* END DRAG-SCROLL */

/* BEGIN LOADER */
.gallery-loader {
    padding:         var(--space-10) 0;
    display:         flex;
    justify-content: center;
}
/* END LOADER */

/* BEGIN DETAIL-MODAL */
#modal-detail .modal {
    width:      auto;
    max-width:  min(90vw, 1200px);
    min-width:  300px;
    height:     auto;
    max-height: 90vh;
    padding:    0;
    overflow:   visible; /* Tooltips können den Modalrand überlaufen */
    display:    flex;
}
#modal-detail .modal::before { display: none; }

/* Grosses Bild, Info als abgedunkeltes Overlay unten drueber (statt einer
   Info-Sektion mit fester Hoehe/Breite — die wirkt bei manchen
   Seitenverhaeltnissen immer unpassend leer relativ zum Bild) */
.gallery-modal-detail {
    position:       relative;
    display:        flex;
    flex-direction: column;
    max-height:     90vh;
}

.gallery-modal-close {
    position:        absolute;
    top:             var(--space-4);
    right:           var(--space-4);
    width:           34px;
    height:          34px;
    border-radius:   var(--radius-full);
    background:      rgba(10, 6, 20, 0.78);
    border:          1px solid var(--border);
    color:           rgba(255, 255, 255, 0.90);
    display:         flex;
    align-items:     center;
    justify-content: center;
    cursor:          pointer;
    box-shadow:      0 2px 8px rgba(0,0,0,0.6);
    transition:      background var(--transition-fast);
    z-index:         2;
}

.gallery-modal-close:hover {
    background: rgba(10, 6, 20, 0.92);
}

.gallery-modal-img-wrap {
    flex-shrink:              0;
    overflow:                 hidden;
    background:               rgb(18, 18, 20);
    line-height:              0;
    display:                  flex;
    justify-content:          center;
    border-top-left-radius:   var(--radius-lg);
    border-top-right-radius:  var(--radius-lg);
}

.gallery-modal-img {
    display:    block;
    max-width:  min(90vw, 1200px);
    max-height: 62vh;
    width:      auto;
    height:     auto;
}

/* Body liegt über dem Bild (z-index: 1) und hat einen Gradient-Hintergrund:
   oben transparent (Bild scheint durch) → unten solid dark.
   So entsteht der Fade-Effekt ohne Maske auf dem Bild. */
.gallery-modal-body {
    position:                  relative;
    z-index:                   1;
    margin-top:                -160px;
    width:                     0;
    min-width:                 100%;
    display:                   flex;
    flex-direction:            column;
    gap:                       var(--space-2);
    background:                linear-gradient(to bottom, transparent 0%, rgb(18, 18, 20) 160px);
    padding:                   120px var(--space-6) var(--space-6);
    box-sizing:                border-box;
    overflow-y:                visible;
    border-bottom-left-radius:  var(--radius-lg);
    border-bottom-right-radius: var(--radius-lg);
}
.gallery-modal-info-row {
    display:        flex;
    flex-direction: column;
    align-items:    flex-start;
    gap:            var(--space-3);
}
.gallery-modal-title {
    font-size:   var(--text-lg);
    font-weight: 700;
    color:       var(--text-primary);
    margin:      0;
}
.gallery-modal-desc {
    font-size:   var(--text-sm);
    color:       var(--text-secondary);
    line-height: 1.6;
    margin:      0;
}
.gallery-modal-tags {
    display:         flex;
    flex-wrap:       wrap;
    gap:             var(--space-2);
    justify-content: flex-start;
    min-width:       0;
}
.gallery-modal-tags .tag { cursor: pointer; flex-shrink: 0; }

/* Tags sitzen direkt unterm Bild — Tooltip nach oben haette keinen Platz,
   daher hier abweichend nach unten oeffnen statt der Standard-Richtung */
.gallery-modal-tags [data-tooltip]::after {
    bottom: auto;
    top:    calc(100% + 6px);
}
.gallery-modal-footer-meta {
    display:         flex;
    align-items:     center;
    justify-content: flex-start;
    gap:             var(--space-4);
}
.gallery-modal-date,
.gallery-modal-size {
    font-size:   var(--text-xs);
    color:       var(--text-muted);
    font-family: var(--font-mono);
    white-space: nowrap;
}
.gallery-modal-sep {
    width:      1px;
    height:     12px;
    background: var(--border);
}
.gallery-modal-actions { flex-shrink: 0; }
/* END DETAIL-MODAL */

/* BEGIN RESPONSIVE */
@media (max-width: 900px) {
    #modal-detail .modal { max-width: 96vw; min-width: min(300px, 96vw); }
    .gallery-modal-detail { width: 100%; }
    .gallery-modal-img  { max-height: 55vh; }
    .gallery-modal-body { padding-top: 80px; }
}
@media (max-width: 640px) {
    .gallery-masonry { gap: var(--space-3); }
    .gallery-controls { flex-wrap: wrap; }
    .gallery-search   { flex: 1 1 100%; order: -1; }
    .gallery-sort-wrap { flex: 1 1 100%; width: 100%; }
    .gallery-sort-wrap .dropdown { display: block; }
    .gallery-sort-wrap .dropdown-menu { width: 100%; }
    .gallery-sort-btn { width: 100%; }
    .gallery-modal-actions { width: 100%; }
    .gallery-modal-actions .btn-group { width: 100%; }

    .gallery-view-toggle { flex-direction: row; }
    .tag-modal-controls { flex-wrap: wrap; }
    .tag-modal-search.search-bar { width: 100%; flex: 1 1 100%; }
    .tag-modal-controls .dropdown { width: 100%; }
    .tag-modal-sort-btn { width: 100%; min-width: 0; }
    .tag-modal-controls .dropdown-menu { width: 100%; }

    /* Spalten nicht ausblenden — Header und Zeilen bleiben durch gemeinsame min-width synchron */
    .gallery-list-head,
    .gallery-list-row {
        min-width: 760px;
    }
}
/* END RESPONSIVE */