/* ============================================================
   Gallery Page — Gallery.css
   Extends : style.css  (Satyadeo College Gouripur)
   Sections : Banner · Controls · Grid · Lightbox · Responsive
   ============================================================ */

/* ============================================================
   INNER PAGE BANNER  (exact pattern from Principal-Message.css)
   ============================================================ */
.inner-page-banner {
    background: linear-gradient(135deg,
        var(--primary-blue-dark),
        var(--primary-blue),
        var(--primary-blue-light)),
        url('../images/mini-banner.png');
    background-size   : cover;
    background-position: center;
    background-repeat : no-repeat;
    padding   : 72px 0 60px;
    position  : relative;
    overflow  : hidden;
}

.inner-page-banner::before {
    content       : '';
    position      : absolute;
    top: -60px; right: -60px;
    width: 340px; height: 340px;
    border-radius : 50%;
    background    : rgba(253, 163, 27, 0.10);
    pointer-events: none;
}

.inner-page-banner::after {
    content       : '';
    position      : absolute;
    bottom: -80px; left: -40px;
    width: 260px; height: 260px;
    border-radius : 50%;
    background    : rgba(255, 255, 255, 0.05);
    pointer-events: none;
}

.inner-banner-pretitle {
    display        : inline-flex;
    align-items    : center;
    gap            : 8px;
    font-size      : 0.78rem;
    font-weight    : 800;
    letter-spacing : 0.18em;
    text-transform : uppercase;
    color          : var(--primary-orange-light);
    margin-bottom  : 14px;
}
.inner-banner-pretitle i { font-size: 0.9rem; }

.inner-banner-title {
    font-family   : var(--font-display);
    font-size     : 2.8rem;
    font-weight   : 900;
    color         : var(--white);
    line-height   : 1.2;
    margin-bottom : 12px;
}
.inner-banner-title span { color: var(--primary-orange-light); }

.inner-banner-breadcrumb {
    display    : flex;
    align-items: center;
    gap        : 8px;
    font-size  : 0.85rem;
    font-weight: 600;
    color      : rgba(255, 255, 255, 0.7);
    margin-top : 10px;
    flex-wrap  : wrap;
}
.inner-banner-breadcrumb a {
    color      : rgba(255, 255, 255, 0.85);
    transition : var(--transition);
}
.inner-banner-breadcrumb a:hover { color: var(--primary-orange-light); }
.inner-banner-breadcrumb .separator {
    color    : var(--primary-orange);
    font-size: 0.7rem;
}

/* Decorative dots */
.banner-dots {
    position : absolute;
    right    : 8%;
    top      : 50%;
    transform: translateY(-50%);
    display  : grid;
    grid-template-columns: repeat(5, 1fr);
    gap      : 10px;
    opacity  : 0.18;
}
.banner-dots span {
    display      : block;
    width        : 7px;
    height       : 7px;
    background   : var(--white);
    border-radius: 50%;
}

/* ============================================================
   GALLERY CONTROLS SECTION
   ============================================================ */
.gallery-controls-section {
    background: var(--white);
    padding   : 44px 0 36px;
    border-bottom: 1px solid var(--light-grey);
}

/* Stats row */
.gallery-stats-row {
    display        : flex;
    align-items    : center;
    justify-content: center;
    gap            : 0;
    background     : var(--light-bg);
    border         : 1px solid var(--light-grey);
    border-radius  : 16px;
    overflow       : hidden;
    margin-bottom  : 32px;
    max-width      : 560px;
    margin-left    : auto;
    margin-right   : auto;
}

.gallery-stat {
    flex          : 1;
    display       : flex;
    flex-direction: column;
    align-items   : center;
    gap           : 4px;
    padding       : 18px 10px;
    text-align    : center;
}

.gallery-stat > i {
    font-size: 1.2rem;
    color    : var(--primary-orange);
    margin-bottom: 2px;
}

.gs-num {
    font-family: var(--font-display);
    font-size  : 1.65rem;
    font-weight: 900;
    color      : var(--primary-blue);
    line-height: 1;
}

.gs-lbl {
    font-size     : 0.72rem;
    font-weight   : 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color         : var(--text-light);
}

.gallery-stat-divider {
    width     : 1px;
    height    : 44px;
    background: var(--light-grey);
    flex-shrink: 0;
}

/* Filter label */
.gallery-filter-label {
    font-size     : 0.78rem;
    font-weight   : 800;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color         : var(--text-light);
    margin-bottom : 14px;
    text-align    : center;
}

/* Filter pill buttons */
.gallery-filters {
    display        : flex;
    align-items    : center;
    justify-content: center;
    flex-wrap      : wrap;
    gap            : 10px;
}

.gf-btn {
    display        : inline-flex;
    align-items    : center;
    gap            : 7px;
    font-size      : 0.82rem;
    font-weight    : 700;
    padding        : 9px 20px;
    border-radius  : 30px;
    border         : 2px solid var(--light-grey);
    background     : var(--white);
    color          : var(--text-medium);
    cursor         : pointer;
    transition     : var(--transition);
    white-space    : nowrap;
}

.gf-btn i { font-size: 0.78rem; }

.gf-btn:hover {
    border-color: var(--primary-blue);
    color       : var(--primary-blue);
    background  : rgba(17, 110, 99, 0.05);
    transform   : translateY(-2px);
}

.gf-btn.active {
    background  : linear-gradient(135deg, var(--primary-blue), var(--primary-blue-dark));
    border-color: var(--primary-blue);
    color       : var(--white);
    box-shadow  : 0 6px 18px rgba(17, 110, 99, 0.30);
    transform   : translateY(-2px);
}

/* ============================================================
   GALLERY GRID SECTION
   ============================================================ */
.gallery-grid-section {
    background: var(--light-bg);
    padding   : 50px 0 80px;
}

/* CSS Grid layout — auto-fill columns, variable row spans */
.gallery-grid {
    display              : grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    grid-auto-rows       : 220px;
    gap                  : 16px;
}

/* Wide card spans 2 columns */
.gallery-item--wide {
    grid-column: span 2;
}

/* Tall card spans 2 rows */
.gallery-item--tall {
    grid-row: span 2;
}

/* ---- Each item ---- */
.gallery-item {
    border-radius: 14px;
    overflow     : hidden;
    cursor       : pointer;
    position     : relative;
}

.gallery-item-inner {
    width   : 100%;
    height  : 100%;
    position: relative;
    overflow: hidden;
    border-radius: 14px;
    background: var(--light-grey);
}

.gallery-img {
    width     : 100%;
    height    : 100%;
    object-fit: cover;
    display   : block;
    transition: transform 0.50s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
}

.gallery-item:hover .gallery-img {
    transform: scale(1.08);
}

/* Overlay */
.gallery-item-overlay {
    position  : absolute;
    inset     : 0;
    background: linear-gradient(
        to top,
        rgba(10, 72, 64, 0.88) 0%,
        rgba(10, 72, 64, 0.30) 50%,
        rgba(10, 72, 64, 0.00) 100%
    );
    display        : flex;
    align-items    : flex-end;
    justify-content: flex-start;
    opacity        : 0;
    transition     : opacity 0.35s ease;
    border-radius  : 14px;
    padding        : 18px;
}

.gallery-item:hover .gallery-item-overlay {
    opacity: 1;
}

.gallery-item-overlay-content {
    display       : flex;
    flex-direction: column;
    gap           : 5px;
    width         : 100%;
}

/* Zoom button — top-right on hover */
.gallery-zoom-btn {
    position     : absolute;
    top          : 14px;
    right        : 14px;
    width        : 38px;
    height       : 38px;
    border-radius: 50%;
    background   : rgba(255, 255, 255, 0.20);
    border       : 2px solid rgba(255, 255, 255, 0.50);
    backdrop-filter: blur(6px);
    color        : var(--white);
    font-size    : 0.9rem;
    display      : flex;
    align-items  : center;
    justify-content: center;
    cursor       : pointer;
    transition   : var(--transition);
}

.gallery-zoom-btn:hover {
    background  : var(--primary-orange);
    border-color: var(--primary-orange);
    transform   : scale(1.12);
}

.gallery-item-caption {
    font-family: var(--font-display);
    font-size  : 0.95rem;
    font-weight: 800;
    color      : var(--white);
    margin     : 0;
    line-height: 1.3;
    text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}

.gallery-item-cat {
    display       : inline-flex;
    align-items   : center;
    font-size     : 0.70rem;
    font-weight   : 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    background    : var(--primary-orange);
    color         : var(--white);
    padding       : 3px 10px;
    border-radius : 20px;
    width         : fit-content;
}

/* Empty state */
.gallery-empty {
    display       : flex;
    flex-direction: column;
    align-items   : center;
    justify-content: center;
    gap           : 14px;
    padding       : 80px 20px;
    color         : var(--text-light);
}

.gallery-empty i {
    font-size: 3rem;
    color    : var(--light-grey);
}

.gallery-empty p {
    font-size  : 1rem;
    font-weight: 600;
    margin     : 0;
}

/* ============================================================
   LIGHTBOX
   ============================================================ */
.glightbox-overlay {
    position  : fixed;
    inset     : 0;
    z-index   : 9999;
    background: rgba(5, 20, 18, 0.97);
    display   : flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    /* Hidden by default */
    opacity   : 0;
    visibility: hidden;
    transition: opacity 0.30s ease, visibility 0.30s ease;
}

.glightbox-overlay.active {
    opacity   : 1;
    visibility: visible;
}

/* Prevent body scroll when lightbox open */
body.glb-open { overflow: hidden; }

/* ---- Top bar ---- */
.glb-topbar {
    position       : absolute;
    top            : 0;
    left           : 0;
    right          : 0;
    height         : 56px;
    display        : flex;
    align-items    : center;
    padding        : 0 20px;
    gap            : 16px;
    background     : rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(10px);
    z-index        : 2;
    border-bottom  : 1px solid rgba(255, 255, 255, 0.07);
}

.glb-counter {
    font-size  : 0.82rem;
    font-weight: 700;
    color      : rgba(255, 255, 255, 0.60);
    white-space: nowrap;
    min-width  : 60px;
}

.glb-caption-top {
    flex       : 1;
    font-family: var(--font-display);
    font-size  : 0.95rem;
    font-weight: 800;
    color      : var(--white);
    text-align : center;
    white-space: nowrap;
    overflow   : hidden;
    text-overflow: ellipsis;
}

.glb-close {
    width        : 40px;
    height       : 40px;
    border-radius: 50%;
    background   : rgba(255, 255, 255, 0.10);
    border       : 1px solid rgba(255, 255, 255, 0.20);
    color        : var(--white);
    font-size    : 1rem;
    display      : flex;
    align-items  : center;
    justify-content: center;
    cursor       : pointer;
    transition   : var(--transition);
    flex-shrink  : 0;
}

.glb-close:hover {
    background  : var(--primary-orange);
    border-color: var(--primary-orange);
    transform   : rotate(90deg) scale(1.1);
}

/* ---- Image stage ---- */
.glb-stage {
    position      : relative;
    width         : 100%;
    max-width     : 1100px;
    flex          : 1;
    display       : flex;
    align-items   : center;
    justify-content: center;
    padding       : 72px 80px 80px;
    overflow      : hidden;
}

.glb-img {
    max-width  : 100%;
    max-height : 100%;
    object-fit : contain;
    border-radius: 10px;
    display    : block;
    box-shadow : 0 20px 60px rgba(0, 0, 0, 0.6);
    transition : opacity 0.25s ease;
    cursor     : default;
}

/* Loader spinner */
.glb-loader {
    position      : absolute;
    inset         : 0;
    display       : flex;
    align-items   : center;
    justify-content: center;
    z-index       : 3;
}

.glb-spinner {
    width       : 42px;
    height      : 42px;
    border      : 3px solid rgba(255, 255, 255, 0.15);
    border-top  : 3px solid var(--primary-orange);
    border-radius: 50%;
    animation   : glb-spin 0.75s linear infinite;
}

@keyframes glb-spin {
    to { transform: rotate(360deg); }
}

/* ---- Prev / Next arrows ---- */
.glb-arrow {
    position     : absolute;
    top          : 50%;
    transform    : translateY(-50%);
    width        : 52px;
    height       : 52px;
    border-radius: 50%;
    background   : rgba(255, 255, 255, 0.10);
    border       : 1px solid rgba(255, 255, 255, 0.18);
    color        : var(--white);
    font-size    : 1.1rem;
    display      : flex;
    align-items  : center;
    justify-content: center;
    cursor       : pointer;
    z-index      : 4;
    transition   : var(--transition);
    backdrop-filter: blur(6px);
}

.glb-arrow:hover:not(:disabled) {
    background  : var(--primary-orange);
    border-color: var(--primary-orange);
    transform   : translateY(-50%) scale(1.08);
}

.glb-arrow:disabled {
    opacity: 0.25;
    cursor : not-allowed;
}

.glb-prev { left : 18px; }
.glb-next { right: 18px; }

/* ---- Bottom caption bar ---- */
.glb-bottombar {
    position       : absolute;
    bottom         : 56px; /* above thumbstrip */
    left           : 0;
    right          : 0;
    display        : flex;
    align-items    : center;
    justify-content: center;
    gap            : 12px;
    padding        : 10px 20px;
    background     : rgba(0, 0, 0, 0.40);
    backdrop-filter: blur(8px);
    flex-wrap      : wrap;
}

.glb-caption-main {
    font-family: var(--font-display);
    font-size  : 0.9rem;
    font-weight: 800;
    color      : var(--white);
    margin     : 0;
}

.glb-cat-badge {
    font-size     : 0.68rem;
    font-weight   : 800;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    background    : var(--primary-orange);
    color         : var(--white);
    padding       : 3px 12px;
    border-radius : 20px;
}

/* ---- Thumbnail strip ---- */
.glb-thumbstrip {
    position       : absolute;
    bottom         : 0;
    left           : 0;
    right          : 0;
    height         : 56px;
    background     : rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(10px);
    border-top     : 1px solid rgba(255, 255, 255, 0.07);
    display        : flex;
    align-items    : center;
    gap            : 6px;
    padding        : 6px 12px;
    overflow-x     : auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.2) transparent;
}

.glb-thumbstrip::-webkit-scrollbar { height: 3px; }
.glb-thumbstrip::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.25); border-radius: 2px; }

.glb-thumb {
    flex-shrink  : 0;
    width        : 70px;
    height       : 44px;
    border-radius: 6px;
    overflow     : hidden;
    cursor       : pointer;
    opacity      : 0.5;
    border       : 2px solid transparent;
    transition   : var(--transition);
}

.glb-thumb img {
    width     : 100%;
    height    : 100%;
    object-fit: cover;
    display   : block;
}

.glb-thumb:hover  { opacity: 0.85; }
.glb-thumb.active {
    opacity     : 1;
    border-color: var(--primary-orange);
    box-shadow  : 0 0 0 2px rgba(253, 163, 27, 0.40);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* ── Tablet ≤ 991px ── */
@media (max-width: 991px) {
    .inner-banner-title { font-size: 2.2rem; }

    .gallery-grid {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        grid-auto-rows       : 190px;
    }

    .gallery-item--wide { grid-column: span 2; }
    .gallery-item--tall { grid-row   : span 2; }

    .glb-stage { padding: 68px 64px 80px; }
    .glb-arrow { width: 44px; height: 44px; font-size: 1rem; }
}

/* ── Phablet ≤ 767px ── */
@media (max-width: 767px) {
    .inner-page-banner  { padding: 52px 0 44px; }
    .inner-banner-title { font-size: 1.8rem; }
    .banner-dots        { display: none; }

    .gallery-controls-section { padding: 36px 0 28px; }

    /* Collapse to 2 columns on mobile */
    .gallery-grid {
        grid-template-columns: 1fr 1fr;
        grid-auto-rows       : 160px;
        gap                  : 10px;
    }

    /* Keep wide/tall on medium-mobile */
    .gallery-item--wide { grid-column: span 2; }
    .gallery-item--tall { grid-row   : span 2; }

    /* Filter pills smaller */
    .gf-btn { font-size: 0.76rem; padding: 7px 14px; }

    /* Lightbox */
    .glb-stage  { padding: 60px 54px 88px; }
    .glb-arrow  { width: 38px; height: 38px; font-size: 0.9rem; }
    .glb-prev   { left : 8px; }
    .glb-next   { right: 8px; }
    .glb-thumb  { width: 56px; height: 36px; }
    .glb-bottombar { bottom: 50px; }
    .glb-thumbstrip { height: 50px; }
}

/* ── Mobile ≤ 575px ── */
@media (max-width: 575px) {
    .inner-banner-title { font-size: 1.6rem; }

    .gallery-grid {
        grid-template-columns: 1fr 1fr;
        grid-auto-rows       : 130px;
        gap                  : 8px;
    }

    /* On very small screens collapse wide to normal */
    .gallery-item--wide { grid-column: span 2; }
    .gallery-item--tall { grid-row   : span 2; }

    .gs-num  { font-size: 1.35rem; }
    .gs-lbl  { font-size: 0.65rem; }

    .gallery-stats-row { max-width: 100%; }

    /* Lightbox fullscreen */
    .glb-stage  { padding: 58px 10px 90px; }
    .glb-img    { border-radius: 6px; }

    .glb-arrow  { width: 34px; height: 34px; font-size: 0.8rem; }
    .glb-prev   { left : 4px; }
    .glb-next   { right: 4px; }

    .glb-thumb      { width: 46px; height: 30px; }
    .glb-thumbstrip { height: 44px; gap: 4px; padding: 4px 8px; }
    .glb-bottombar  { bottom: 44px; padding: 8px 12px; }
    .glb-caption-main { font-size: 0.82rem; }
}

/* ── Very small ≤ 400px ── */
@media (max-width: 400px) {
    .inner-banner-title { font-size: 1.4rem; }

    .gallery-grid {
        grid-template-columns: 1fr;
        grid-auto-rows       : 200px;
    }

    /* Single column: no spanning */
    .gallery-item--wide,
    .gallery-item--tall {
        grid-column: span 1;
        grid-row   : span 1;
    }

    .gf-btn { font-size: 0.72rem; padding: 6px 12px; }
}