/* Bela Module Gallery — Frontend styles */

/* ─── Filters ─── */
.bela-gallery-filters { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.bela-gallery-filters--cats { margin-bottom:24px; }
.bela-gallery-filters__item { padding:6px 16px; border-radius:20px; font-size:13px; font-weight:500; color:var(--bela-text-secondary); background:var(--bela-bg-alt); text-decoration:none; transition:all .15s; }
.bela-gallery-filters__item:hover, .bela-gallery-filters__item--active { background:var(--bela-primary); color:#fff; text-decoration:none; }

/* ─── Album grid ─── */
.bela-gallery-album-grid { display:grid; grid-template-columns:repeat(var(--gallery-cols, 4), 1fr); gap:16px; margin-bottom:32px; }

.bela-gallery-card { background:var(--bela-surface); border:1px solid var(--bela-border); border-radius:12px; overflow:hidden; transition:box-shadow .2s, transform .2s; }
.bela-gallery-card:hover { box-shadow:0 8px 24px rgba(0,0,0,.1); transform:translateY(-2px); }
.bela-gallery-card--featured { border:2px solid var(--bela-accent); }

.bela-gallery-card__cover { display:block; position:relative; aspect-ratio:4/3; overflow:hidden; }
.bela-gallery-card__img { width:100%; height:100%; object-fit:cover; transition:transform .3s; }
.bela-gallery-card:hover .bela-gallery-card__img { transform:scale(1.05); }
.bela-gallery-card__placeholder { width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:48px; background:var(--bela-bg-alt); }

.bela-gallery-card__count { position:absolute; bottom:8px; right:8px; background:rgba(0,0,0,.7); color:#fff; font-size:12px; font-weight:600; padding:4px 10px; border-radius:20px; }

.bela-gallery-card__body { padding:12px 14px; }
.bela-gallery-card__cat { font-size:11px; font-weight:600; text-transform:uppercase; color:var(--bela-secondary); }
.bela-gallery-card__title { font-size:15px; font-weight:600; margin:4px 0; }
.bela-gallery-card__title a { color:var(--bela-text); text-decoration:none; }
.bela-gallery-card__title a:hover { color:var(--bela-primary); text-decoration:underline; }
.bela-gallery-card__date { font-size:12px; color:var(--bela-text-muted); font-family:var(--bela-font-mono); }

/* ─── Single album ─── */
.bela-gallery-single__header { margin-bottom:16px; }
.bela-gallery-single__title { font-size:clamp(24px,4vw,36px); margin-top:8px; }
.bela-gallery-single__content { font-size:16px; line-height:1.7; margin:16px 0 24px; }

/* ─── Meta ─── */
.bela-gallery-meta { display:grid; grid-template-columns:auto 1fr; gap:6px 16px; font-size:14px; margin:16px 0 24px; padding:16px; background:var(--bela-bg-alt); border-radius:8px; }
.bela-gallery-meta dt { font-weight:600; color:var(--bela-primary); }
.bela-gallery-meta dd { margin:0; }
.bela-gallery-meta a { color:var(--bela-secondary); }

/* ─── Photo grid ─── */
.bela-gallery-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); gap:6px; margin:20px 0; }
.bela-gallery-grid__item { display:block; aspect-ratio:4/3; border-radius:6px; overflow:hidden; cursor:pointer; }
.bela-gallery-grid__item img { width:100%; height:100%; object-fit:cover; transition:transform .2s; }
.bela-gallery-grid__item:hover img { transform:scale(1.08); }

.bela-gallery-count { font-size:13px; color:var(--bela-text-muted); text-align:center; }

/* ─── Badge ─── */
.bela-gallery-badge { display:inline-block; padding:3px 10px; border-radius:4px; font-size:12px; font-weight:700; }
.bela-gallery-badge--featured { background:var(--bela-accent); color:#fff; }

/* ─── Navigation ─── */
.bela-gallery-single__nav { display:flex; justify-content:space-between; gap:20px; margin-top:32px; padding-top:20px; border-top:1px solid var(--bela-border); font-size:14px; }
.bela-gallery-single__nav a { color:var(--bela-secondary); font-weight:500; text-decoration:none; max-width:45%; }
.bela-gallery-single__nav a:hover { text-decoration:underline; }

/* ─── Lightbox ─── */
.bela-lightbox { position:fixed; inset:0; z-index:99999; background:rgba(0,0,0,.92); display:flex; align-items:center; justify-content:center; }
.bela-lightbox[hidden] { display:none; }
.bela-lightbox__content { max-width:90vw; max-height:85vh; display:flex; align-items:center; justify-content:center; }
.bela-lightbox__img { max-width:100%; max-height:85vh; object-fit:contain; border-radius:4px; }
.bela-lightbox__close { position:absolute; top:16px; right:16px; background:none; border:none; color:#fff; font-size:28px; cursor:pointer; z-index:10; padding:8px; }
.bela-lightbox__prev, .bela-lightbox__next { position:absolute; top:50%; transform:translateY(-50%); background:rgba(255,255,255,.15); border:none; color:#fff; font-size:24px; cursor:pointer; padding:12px 16px; border-radius:50%; transition:background .15s; }
.bela-lightbox__prev:hover, .bela-lightbox__next:hover { background:rgba(255,255,255,.3); }
.bela-lightbox__prev { left:16px; }
.bela-lightbox__next { right:16px; }
.bela-lightbox__counter { position:absolute; bottom:16px; left:50%; transform:translateX(-50%); color:rgba(255,255,255,.7); font-size:14px; font-family:var(--bela-font-mono); }

/* ─── Empty ─── */
.bela-gallery-empty { text-align:center; padding:48px 20px; color:var(--bela-text-muted); }

/* ─── Responsive ─── */
@media(max-width:768px) {
    .bela-gallery-album-grid { grid-template-columns:repeat(2, 1fr); gap:10px; }
    .bela-gallery-grid { grid-template-columns:repeat(3, 1fr); }
    .bela-gallery-single__nav { flex-direction:column; }
    .bela-gallery-single__nav a { max-width:100%; }
    .bela-lightbox__prev, .bela-lightbox__next { padding:8px 12px; font-size:18px; }
}
@media(max-width:480px) {
    .bela-gallery-album-grid { grid-template-columns:1fr; }
    .bela-gallery-grid { grid-template-columns:repeat(2, 1fr); }
}