/* ============================================================
   gallery.css — Galerie-Grid, Lightbox & Galerie-Kommentare
   Quelle: ausgelagert aus galerie.php + templates/gallery_comments.php
   ============================================================ */

/* ── Galerie-Grid & Lightbox (aus galerie.php) ── */
.gallery-page { max-width: 1400px; margin: 0 auto; padding: 40px 20px; }
.gallery-header { text-align: center; margin-bottom: 40px; }
.gallery-header h1 { font-size: 2rem; margin-bottom: 8px; }
.gallery-header p { color: rgba(255,255,255,0.5); font-size: 15px; }

.gallery-filters { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 36px; }
.gallery-filter-btn {
    padding: 8px 18px; border-radius: 30px; font-size: 13px; font-weight: 600;
    border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.04);
    color: rgba(255,255,255,0.6); cursor: pointer; text-decoration: none;
    transition: all 0.2s;
}
.gallery-filter-btn:hover,
.gallery-filter-btn.active { background: rgba(167,139,250,0.15); border-color: var(--accent); color: var(--accent); }

/* Spalten-Masonry – organisch durchgewürfelt wie im Original */
.gallery-grid { columns: 4; column-gap: 14px; }
@media(max-width:1200px) { .gallery-grid { columns: 3; } }
@media(max-width:800px)  { .gallery-grid { columns: 2; } }

.gallery-item {
    break-inside: avoid; margin-bottom: 14px;
    border-radius: 14px; overflow: hidden;
    border: 1px solid rgba(255,255,255,0.06);
    position: relative; cursor: pointer;
    background: transparent;
    transition: transform 0.25s, box-shadow 0.25s;
}

/* Echte Banner (sehr breit, ab 2.5:1) über die volle Breite – cineastischer Streifen (Fallback) */
.gallery-item--banner { column-span: all; }

/* Zukunftssicher: natives CSS-Masonry ("Grid Lanes") – behält das Durcheinander UND legt
   Banner über GENAU 2 Spalten (beliebig viele, ohne volle Streifen). Aktiviert sich automatisch,
   sobald der Browser es kann (Safari 26 jetzt, Chrome/Firefox im Lauf von 2026). */
@supports (grid-template-rows: masonry) or (display: grid-lanes) {
    .gallery-grid {
        columns: auto;
        display: grid;
        display: grid-lanes;            /* moderne Syntax; ältere Engines nutzen die Zeile darunter */
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: masonry;
        gap: 14px;
    }
    @media(max-width:1200px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); } }
    @media(max-width:800px)  { .gallery-grid { grid-template-columns: repeat(2, 1fr); } }
    .gallery-item { margin: 0; break-inside: auto; }
    .gallery-item--banner { column-span: none; grid-column: span 2; }
}
.gallery-item:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(0,0,0,0.5); }
.gallery-item img {
    width: 100%; display: block;
    transform: scale(1.08);
    transform-origin: center top;
    transition: transform 0.4s ease;
    object-fit: cover;
    object-position: center top;
    vertical-align: bottom;
}
.gallery-item:hover img { transform: scale(1.13); }
.gallery-item-info {
    position: absolute; bottom: 0; left: 0; right: 0;
    padding: 28px 14px 12px;
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, transparent 100%);
}
.gallery-item-title { font-size: 13px; font-weight: 700; color: #fff; margin-bottom: 2px; text-shadow: 0 1px 4px rgba(0,0,0,0.8); }
.gallery-item-tag { font-size: 11px; color: rgba(167,139,250,0.9); }

/* Lightbox */
.lightbox { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.92); z-index:2147483647;
    align-items:flex-start; justify-content:center; padding:20px 20px 80px;
    backdrop-filter:blur(8px); overflow-y:auto; }
.lightbox.open { display:flex; }
.lightbox-inner { max-width:1000px; width:100%; position:relative; margin:auto; padding:40px 0; }
.lightbox-img { width:100%; border-radius:12px; box-shadow:0 20px 60px rgba(0,0,0,0.6); }
.lightbox-close { position:absolute; top:-40px; right:0; color:#fff; font-size:28px; cursor:pointer; opacity:.7; }
.lightbox-close:hover { opacity:1; }
.lightbox-title { color:#fff; font-size:1.1rem; font-weight:700; margin:16px 0 4px; }
.lightbox-desc { color:rgba(255,255,255,0.5); font-size:14px; margin-bottom:16px; }
.lightbox-tag { display:inline-block; font-size:12px; background:rgba(167,139,250,0.15); color:var(--accent);
    padding:3px 10px; border-radius:20px; margin-bottom:16px; }

/* Einzelbild-Seite */
.single-image-wrap { max-width:900px; margin:0 auto; padding:40px 20px; }
.single-image-wrap img { width:100%; border-radius:16px; margin-bottom:24px; }

/* ── Galerie-Kommentare (aus gallery_comments.php) ── */
.comments-section { margin-top:48px; padding-top:32px; border-top:1px solid rgba(255,255,255,0.08); }
.comments-title { font-size:1.3rem; margin-bottom:24px; color:#fff; }
.comments-title span { opacity:.4; font-weight:400; }
.comment-form-box {
    background: linear-gradient(135deg, rgba(20,22,30,0.95), rgba(15,17,25,0.98));
    border: 1px solid rgba(167,139,250,0.2); border-radius: 16px; padding: 24px; margin-bottom: 32px;
}
.comment-textarea {
    width:100%; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.12);
    border-radius:10px; color:#fff; padding:14px; font-family:inherit; font-size:14px;
    resize:vertical; min-height:100px; margin-bottom:12px;
}
.comment-textarea:focus { outline:none; border-color:var(--accent); }
.comment-submit { padding:12px 24px; background:linear-gradient(135deg,var(--accent),#8b5cf6);
    color:#fff; border:none; border-radius:10px; font-weight:700; cursor:pointer; }
.comment-item {
    display:flex; gap:14px; margin-bottom:20px; padding-bottom:20px;
    border-bottom:1px solid rgba(255,255,255,0.05);
}
.comment-avatar { width:36px; height:36px; border-radius:50%; background:rgba(167,139,250,0.2);
    display:flex; align-items:center; justify-content:center; font-size:14px; flex-shrink:0; overflow:hidden; }
.comment-avatar img { width:100%; height:100%; object-fit:cover; }
.comment-username { font-weight:700; font-size:13px; color:var(--accent); margin-bottom:2px; }
.comment-date { font-size:11px; opacity:.4; margin-bottom:6px; }
.comment-text { font-size:14px; line-height:1.6; color:rgba(255,255,255,0.8); }
.comment-reply-btn { background:none; border:none; color:rgba(255,255,255,0.4); font-size:12px; cursor:pointer; padding:4px 8px; border-radius:6px; transition:color 0.2s; }
.comment-reply-btn:hover { color:var(--accent); }
.reply-form-box { margin-top:10px; margin-left:50px; background:rgba(255,255,255,0.02); border:1px solid rgba(167,139,250,0.15); border-radius:12px; padding:14px; display:none; }
.reply-form-box.open { display:block; }
.comment-reply { margin-left:50px; margin-top:10px; padding:12px 16px; background:rgba(255,255,255,0.02); border-left:2px solid rgba(167,139,250,0.3); border-radius:0 10px 10px 0; }