/* Gallery-only styles. Layout, title, search/filter bar, modal and lightbox
   come from common.css, search_filter.css and common_specific.css. */
/* ── GALLERY GRID ────────────────────────────────────────────── */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
    margin: 3rem 0 2.5rem;
}

/* ── CARDS ───────────────────────────────────────────────────── */
.gallery-card {
    background:rgba(255,255,255,.03); border-radius:2px;
    border:1px solid rgba(255,255,255,.05); overflow:hidden;
    cursor:pointer; transition:var(--transition);
}
.gallery-card:hover {
    transform:translateY(-6px);
    box-shadow:0 12px 30px rgba(255,117,24,.18);
    border-color:rgba(255,117,24,.35);
}

.card-img-wrap { position:relative; aspect-ratio:4/3; overflow:hidden; background:#1a1c1e; }
.card-img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s ease; }
.gallery-card:hover .card-img { transform:scale(1.06); }

.cat-badge {
    position:absolute; top:.65rem; left:.65rem;
    font-size:.62rem; font-weight:600; text-transform:uppercase;
    letter-spacing:.07em; padding:.2rem .6rem; border-radius:var(--radius-pill);
}
.cat-astrophotography  { background:#085041; color:#9FE1CB; }
.cat-events            { background:#0C447C; color:#B5D4F4; }
.cat-behind-the-scenes { background:#3C3489; color:#CECBF6; }
.cat-posters           { background:#712B13; color:#F5C4B3; }
.cat-default           { background:#2a2a2a; color:#cccccc; }   /* any new category */

.card-body { padding:0.5rem 1.25rem 0.2rem; }

.card-title {
    font-size:.95rem; font-weight:600; color:var(--text);
    margin:0 0 .4rem; white-space:nowrap; overflow:hidden;
    text-overflow:ellipsis; transition:color .3s ease;
}
.gallery-card:hover .card-title { color:var(--primary); }

.card-desc {
    font-size:.82rem; color:rgba(229,229,229,.65); line-height:1.55;
    margin:0 0 .75rem; display:-webkit-box; -webkit-line-clamp:2;
    -webkit-box-orient:vertical; overflow:hidden; font-weight:300;
}


.card-foot {
    display:flex; justify-content:space-between; align-items:center;
    padding-top:.75rem; border-top:1px solid rgba(255,255,255,.07);
}

.card-year { 
    /* font-family:'Caveat',cursive;  */
    font-size:.9rem; 
    color:var(--primary); }
.card-credit { font-size:.7rem; color:var(--text-muted); font-style:italic; max-width:130px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ── EMPTY STATE ─────────────────────────────────────────────── */
.no-results { text-align:center; padding:5rem 2rem; font-size:1.1rem; color:var(--text-muted); }
.no-results a {
    display:inline-block; margin-top:1rem; padding:10px 24px;
    border-radius:var(--radius-pill); background:var(--primary);
    border:2px solid var(--primary-2-hsl); color:var(--bg);
    text-decoration:none; font-size:.9rem; font-weight:600; transition:var(--transition);
}
.no-results a:hover { background:#0c0a1a; color:var(--primary); }

/* ── PAGINATION ─────────────────────────────────────────────── */
.pagination {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: .45rem;
    margin: 4rem 0 2rem;
    flex-wrap: wrap;
    width: 100%;
    list-style: none;
}

.pagination > a,
.pagination > span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    flex-shrink: 0;
    flex-grow: 0;
    border-radius: 8px;
    border: 2px solid rgba(255,255,255,.1);
    background: rgba(255,255,255,.05);
    color: var(--text) !important;
    font-size: .88rem !important;
    font-weight: 500;
    text-decoration: none;
    transition: var(--transition);
    cursor: pointer;
    user-select: none;
    box-sizing: border-box;
    line-height: 1;
    text-align: center;
}

.pagination > a:hover {
    background: rgba(255,255,255,.12);
    border-color: var(--primary);
    transform: translateY(-2px);
    color: var(--text) !important;
}

.pagination > span.pg-active {
    background: var(--primary) !important;
    border-color: var(--primary-2-hsl) !important;
    color: #000 !important;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(255,117,24,.4);
    cursor: default;
    pointer-events: none;
    transform: none !important;
}

.pagination > span.pg-disabled {
    opacity: .28;
    cursor: default;
    pointer-events: none;
    transform: none !important;
}

.pagination > span.pg-ellipsis {
    border-color: transparent !important;
    background: transparent !important;
    width: 28px !important;
    color: var(--text-muted) !important;
    cursor: default;
    pointer-events: none;
    letter-spacing: 0;
    font-size: 1rem !important;
}

.pagination > a.pg-nav,
.pagination > span.pg-nav {
    font-size: 1.2rem !important;
    font-weight: 400;
}

/* ── ALBUM CARD EXTRAS ───────────────────────────────────────── */
.count-badge {
    position:absolute; top:.65rem; right:.65rem;
    font-size:.62rem; font-weight:600; letter-spacing:.05em;
    padding:.2rem .6rem; border-radius:var(--radius-pill);
    background:rgba(0,0,0,.65); border:1px solid rgba(255,255,255,.18); color:#fff;
}

/* ── ALBUM MODAL / LIGHTBOX ───────────────────────────────────
   The modal grid + lightbox reuse the exact classes from projects.php
   (gallery-modal, modal-wrapper, modal-header, modal-grid, modal-item,
   img-num, lightbox, lightbox-img, lightbox-close, lb-nav), so they are
   styled by the same shared stylesheet. Only the gallery-specific
   details (badge, description, date, credit) are styled here.        */
.album-info { margin:0 0 1.5rem; }
.album-badge {
    display:inline-block; font-size:.62rem; font-weight:600;
    text-transform:uppercase; letter-spacing:.07em;
    padding:.2rem .6rem; border-radius:var(--radius-pill); margin-bottom:.75rem;
}
.album-desc {
    font-size:.92rem; color:rgba(229,229,229,.65);
    line-height:1.65; margin:0 0 1rem; font-weight:300;
}
.album-meta {
    display:flex; flex-wrap:wrap; gap:.4rem 1.5rem; padding-top:.75rem;
    border-top:1px solid rgba(255,255,255,.07);
}
.album-meta span { font-size:.85rem; color:var(--text-muted); }
.album-meta span:first-child { color:var(--primary); }

/* details strip under the photo in the slide view */
.lightbox .lightbox-img { max-height:calc(100vh - 11rem); }
.lb-details {
    position:fixed; left:0; right:0; bottom:0; z-index:5;
    padding:3rem 1.5rem 1.25rem; text-align:center; pointer-events:none;
    background:linear-gradient(to top, rgba(0,0,0,.88) 35%, transparent);
}
.lbd-badge {
    display:inline-block; font-size:.62rem; font-weight:600;
    text-transform:uppercase; letter-spacing:.07em;
    padding:.2rem .6rem; border-radius:var(--radius-pill); margin-bottom:.5rem;
}
.lbd-title { font-size:1.05rem; font-weight:700; color:var(--text); margin:0 0 .3rem; }
.lbd-desc  { font-size:.85rem; color:rgba(229,229,229,.7); font-weight:300; margin:0 auto .5rem; max-width:700px; line-height:1.55; }
.lbd-meta  { display:flex; justify-content:center; flex-wrap:wrap; gap:.25rem 1.25rem; }
.lbd-meta span { font-size:.8rem; color:var(--text-muted); }
.lbd-meta span:first-child { color:var(--primary); }

/* ── RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width:1024px) {
    .gallery-grid { grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); }
}

@media (max-width:768px) {
    .gallery-grid { grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:1rem; }
}

@media (max-width:600px) {
    .gallery-grid { grid-template-columns:1fr 1fr; gap:.75rem; }
    .card-desc { display:none; }
    .card-body { padding:.75rem .9rem .9rem; }
    .card-title { font-size:.88rem; }
    .lb-details { padding:2.5rem 1rem 1rem; }
    .lbd-desc { font-size:.8rem; margin-bottom:.4rem; }          /* caption stays visible on mobile */
    .lightbox .lightbox-img { max-height:calc(100vh - 14rem); }  /* leave room for the caption */

    .pagination { gap:.3rem; margin:3rem 0 1.5rem; }
    .pagination > a,
    .pagination > span {
        width: 34px !important;
        height: 34px !important;
        font-size: .78rem !important;
        border-radius: 6px;
    }
    .pagination > a.pg-nav,
    .pagination > span.pg-nav {
        font-size: 1.05rem !important;
        width: 38px !important;
    }
    .pagination > span.pg-ellipsis {
        width: 22px !important;
    }
}

@media (max-width:400px) {
    .gallery-grid { grid-template-columns:1fr; gap:.75rem; }
}