/* ==========================================================================
   Raiganj University - Gallery grid, filter tabs and filmstrips
   File: assets/css/09-gallery.css
   ======================================================================= */

/* ===== Gallery (Bootstrap grid + filter tabs) ===== */
.gallery-section-bs{
  position:relative;
  --barfi-light:#FBF8F1;
  --barfi-dark:#E9DFC7;
  background-color:var(--barfi-light);
  background-image:
    repeating-linear-gradient(45deg, var(--barfi-dark) 0, var(--barfi-dark) 1px, transparent 1px, transparent 48px),
    repeating-linear-gradient(-45deg, var(--barfi-dark) 0, var(--barfi-dark) 1px, transparent 1px, transparent 48px),
    radial-gradient(var(--barfi-dark) 1.6px, transparent 1.6px);
  background-size:48px 48px, 48px 48px, 48px 48px;
  background-position:0 0, 0 0, 0 0;
}
.gallery-lede{ font-size:16px; color:var(--ink-soft); }
.gallery-filter-btn{
  border:2px solid var(--gold);
  background:#fff;
  color:var(--maroon-dark);
  font-weight:600;
  font-size:14px;
  padding:10px 26px;
  border-radius:999px;
  transition:all .3s ease;
}
.gallery-filter-btn:hover{
  background:var(--gold-soft);
  border-color:var(--gold);
  color:var(--maroon-dark);
}
.gallery-filter-btn.active{
  background:linear-gradient(135deg, var(--gold), #D9A441);
  border-color:var(--gold);
  color:#fff;
  box-shadow:0 8px 20px rgba(200,155,60,.35);
}
.gallery-item{ transition:opacity .35s ease, transform .35s ease; }
.gallery-item.gi-hidden{ display:none !important; }
.gallery-card{
  position:relative;
  border-radius:18px;
  overflow:hidden;
  height:230px;
  box-shadow:0 10px 26px rgba(36,27,21,0.14);
  border:1px solid rgba(255,255,255,0.6);
  cursor:pointer;
  transition:transform .4s ease, box-shadow .4s ease;
}
.gallery-card:hover{ transform:translateY(-8px); box-shadow:0 20px 40px rgba(36,27,21,.24); }
.gallery-card .gc-bg{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  background-size:cover; background-position:center;
  transition:transform .6s cubic-bezier(.2,.8,.2,1);
}
.gallery-card:hover .gc-bg{ transform:scale(1.12); }
.gallery-card .gallery-overlay{
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(20,8,10,0.82) 0%, rgba(20,8,10,0.15) 55%, transparent 78%);
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:18px; color:#fff;
}
.gallery-card .gallery-cat{
  display:inline-block; align-self:flex-start;
  font-family:'IBM Plex Mono', monospace; font-size:10px;
  letter-spacing:.08em; text-transform:uppercase;
  color:#fff; background:var(--maroon);
  padding:3px 10px; border-radius:999px; margin-bottom:8px;
}
.gallery-card h5{ font-size:15.5px; font-weight:700; line-height:1.3; margin:0; }
.gallery-card .gallery-zoom{
  position:absolute; top:14px; right:14px;
  width:36px; height:36px; border-radius:50%;
  background:rgba(255,255,255,0.2); border:1px solid rgba(255,255,255,0.55);
  display:flex; align-items:center; justify-content:center;
  opacity:0; transform:scale(.6);
  transition:opacity .3s ease, transform .3s ease, background .3s ease;
}
.gallery-card:hover .gallery-zoom{ opacity:1; transform:scale(1); background:var(--gold); border-color:var(--gold); }
.gallery-card .gallery-zoom svg{ width:16px; height:16px; }
.gallery-card .play-btn-lg{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:52px; height:52px; border-radius:50%;
  background:rgba(255,255,255,0.95);
  display:flex; align-items:center; justify-content:center;
  transition:transform .3s ease, background .3s ease;
}
.gallery-card .play-btn-lg svg{ width:19px; height:19px; margin-left:3px; }
.gallery-card:hover .play-btn-lg{ transform:translate(-50%,-50%) scale(1.12); background:var(--gold); }
.gallery-card .duration-badge{
  position:absolute; right:12px; bottom:12px; z-index:2;
  font-family:'IBM Plex Mono', monospace; font-size:11px; color:#fff;
  background:rgba(0,0,0,0.6); padding:2px 8px; border-radius:4px;
}
/* ===== Explore Gallery Button ===== */
.gallery-explore-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, #E8A33D, #C87F1D);
    background-color: #C87F1D; /* Solid fallback */
    color: #ffffff !important;
    font-weight: 600;
    font-size: 15px;
    padding: 14px 34px;
    border-radius: 999px;
    border: 2px solid #C87F1D;
    box-shadow: 0 10px 24px rgba(200, 127, 29, .35);
    transition: all .3s cubic-bezier(.4, 0, .2, 1);
    position: relative;
    z-index: 10;
    cursor: pointer;
    text-decoration: none;
    letter-spacing: 0.5px;
}

    .gallery-explore-btn:hover {
        transform: translateY(-3px) scale(1.02);
        box-shadow: 0 16px 40px rgba(200, 127, 29, .5);
        background: linear-gradient(135deg, #F0B84D, #D48F2D);
        background-color: #D48F2D;
        border-color: #E8A33D;
        color: #ffffff !important;
    }

    .gallery-explore-btn:active {
        transform: translateY(0px) scale(0.98);
    }

    .gallery-explore-btn svg {
        width: 18px;
        height: 18px;
        transition: transform .3s ease;
        flex-shrink: 0;
    }

    .gallery-explore-btn:hover svg {
        transform: translateX(4px);
    }

@media (max-width: 575.98px) {
    .gallery-explore-btn {
        padding: 12px 24px;
        font-size: 14px;
        width: 100%;
        justify-content: center;
    }
}

/* ===== Gallery (legacy filmstrip - retained styles, unused markup removed) ===== */
.gallery-section{
  position:relative;
  --barfi-light:#F3E9D2;
  --barfi-dark:#E8D3A0;
  background-color:var(--barfi-light);
  background-image:
    linear-gradient(45deg, var(--barfi-light) 25%, transparent 25%, transparent 75%, var(--barfi-light) 75%, var(--barfi-light)),
    linear-gradient(45deg, var(--barfi-light) 25%, transparent 25%, transparent 75%, var(--barfi-light) 75%, var(--barfi-light));
  background-size:64px 64px;
  background-position:0 0, 32px 32px;
}
.gallery-tabs-wrap{ display:flex; justify-content:center; margin:0 0 40px; }
.gallery-tabs{
  position:relative;
  display:inline-flex; gap:2px;
  padding:6px; background:var(--paper); border:1px solid var(--line);
  border-radius:999px;
}
.gallery-tab-indicator{
  position:absolute; top:6px; bottom:6px; left:6px;
  background:linear-gradient(135deg, var(--maroon), var(--maroon-dark));
  border-radius:999px; z-index:1;
  box-shadow:0 8px 20px rgba(110,20,35,0.32);
  transition:transform .4s cubic-bezier(.4,0,.2,1), width .4s cubic-bezier(.4,0,.2,1);
}
.gallery-tab{
  position:relative; z-index:2;
  padding:13px 30px; font-size:14px; font-weight:600;
  color:var(--ink-soft); background:none; cursor:pointer;
  border:none; border-radius:999px;
  font-family:inherit; display:flex; align-items:center; gap:9px;
  transition:color .3s ease;
}
.gallery-tab svg{ width:17px; height:17px; }
.gallery-tab:hover{ color:var(--maroon-dark); }
.gallery-tab.active{ color:#fff; }
.gallery-panel{ display:none; }
.gallery-panel.active{ display:block; animation:galleryFade .5s ease; }
@keyframes galleryFade{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:translateY(0); } }

/* Draggable filmstrip carousels */
.gallery-stage{ position:relative; padding:0 54px; }
.filmstrip-arrow{
  position:absolute; top:44%; transform:translateY(-50%); z-index:5;
  width:42px; height:42px; border-radius:50%;
  background:#fff; border:1px solid var(--line);
  box-shadow:0 10px 24px rgba(20,10,8,0.14);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:background .25s ease, transform .25s ease, border-color .25s ease;
}
.filmstrip-arrow svg{ width:18px; height:18px; stroke:var(--maroon-dark); transition:stroke .25s ease; }
.filmstrip-arrow:hover{ background:var(--maroon); border-color:var(--maroon); transform:translateY(-50%) scale(1.06); }
.filmstrip-arrow:hover svg{ stroke:#fff; }
.filmstrip-arrow.prev{ left:0; }
.filmstrip-arrow.next{ right:0; }

.progress-track{
  height:3px; background:var(--line); margin-top:6px; position:relative; overflow:hidden;
}
.progress-bar{
  position:absolute; top:0; left:0; height:100%; width:20%;
  background:linear-gradient(90deg, var(--maroon), var(--gold));
  transition:width .15s ease;
}

/* Photo filmstrip */
.photo-filmstrip{
  display:flex; gap:22px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding:8px 4px 28px; scrollbar-width:none;
  cursor:grab; user-select:none;
}
.photo-filmstrip::-webkit-scrollbar{ display:none; }
.photo-card{
  position:relative; flex:0 0 auto; width:320px; height:200px;
  overflow:hidden; scroll-snap-align:start; cursor:pointer;
  border:1px solid var(--line);
}
.photo-card:nth-child(2n){ margin-top:0; }
.photo-card .ph-bg{ position:absolute; inset:0; transition:transform .6s cubic-bezier(.2,.8,.2,1); }
.photo-card:hover .ph-bg{ transform:scale(1.1); }
.photo-card:before{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(0deg, rgba(20,8,10,0.8) 0%, rgba(20,8,10,0.05) 50%, transparent 72%);
}
.photo-card .ph-icon{
  position:absolute; inset:0; z-index:1;
  display:flex; align-items:center; justify-content:center;
  pointer-events:none;
}
.photo-card .ph-icon svg{
  width:48px; height:48px; opacity:.3;
  transition:transform .5s ease, opacity .5s ease;
}
.photo-card:hover .ph-icon svg{ opacity:.18; transform:scale(1.15); }
.photo-card .idx{
  position:absolute; top:14px; left:16px; z-index:2;
  font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:.1em;
  color:rgba(255,255,255,0.7);
}
.photo-card .view-btn{
  position:absolute; top:50%; left:50%; z-index:2;
  transform:translate(-50%,-50%) scale(.5);
  width:42px; height:42px; border-radius:50%;
  background:rgba(255,255,255,0.18); border:1px solid rgba(255,255,255,0.5);
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .3s ease, transform .3s ease, background .3s ease;
}
.photo-card .view-btn svg{ width:17px; height:17px; stroke:#fff; }
.photo-card:hover .view-btn{ opacity:1; transform:translate(-50%,-50%) scale(1); background:var(--gold); border-color:var(--gold); }
.photo-card .cap{
  position:absolute; left:0; right:0; bottom:0; z-index:2; padding:18px; color:#fff;
}
.photo-card .cap .tag{
  display:inline-block; font-family:'IBM Plex Mono', monospace; font-size:10px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--gold-soft); margin-bottom:5px;
}
.photo-card .cap h5{ font-size:16px; font-weight:700; line-height:1.3; }
.photo-card .cap .bar{
  height:2px; width:24px; background:var(--gold); margin-top:10px;
  transition:width .35s ease;
}
.photo-card:hover .cap .bar{ width:56px; }

/* Video filmstrip */
.video-filmstrip{
  display:flex; gap:24px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding:8px 4px 28px; scrollbar-width:none;
  cursor:grab; user-select:none;
}
.video-filmstrip::-webkit-scrollbar{ display:none; }
.video-card{ flex:0 0 auto; width:320px; scroll-snap-align:start; cursor:pointer; }
.video-card .thumb{
  position:relative; width:100%; aspect-ratio:16/9; overflow:hidden;
  border:1px solid var(--line); background:var(--maroon-dark);
}
.video-card .thumb .vt-bg{ position:absolute; inset:0; transition:transform .5s ease; }
.video-card:hover .thumb .vt-bg{ transform:scale(1.08); }
.video-card .thumb:before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(20,8,10,0.55), transparent 60%);
}
.video-card .play-btn-lg{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:58px; height:58px; border-radius:50%;
  background:rgba(255,255,255,0.95);
  display:flex; align-items:center; justify-content:center;
  transition:transform .3s ease, background .3s ease;
}
.video-card .play-btn-lg svg{ width:21px; height:21px; margin-left:3px; }
.video-card:hover .play-btn-lg{ transform:translate(-50%,-50%) scale(1.12); background:var(--gold); }
.video-card .thumb .duration{
  position:absolute; right:10px; bottom:10px;
  font-family:'IBM Plex Mono', monospace; font-size:11px; color:#fff;
  background:rgba(0,0,0,0.6); padding:2px 8px;
}
.video-card .vc-meta{ padding:14px 2px 0; }
.video-card .vc-meta .tag{
  display:block; font-family:'IBM Plex Mono', monospace; font-size:10px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--maroon); margin-bottom:5px;
}
.video-card .vc-meta h5{ font-size:15px; color:var(--maroon-dark); line-height:1.35; }