/* ===========================================================
   GALLERY HERO
===========================================================*/

.gallery-hero{
    position:relative;
    min-height:320px;
    overflow:hidden;

    background:
    linear-gradient(
        90deg,
        rgba(6,10,20,.95) 0%,
        rgba(6,10,20,.8) 32%,
        rgba(6,10,20,.3) 62%,
        transparent 100%
    ),
    url("../images/hero/Gallery\ banner.webp");

    background-repeat:no-repeat;
    background-size:cover;
    background-position:center 30%;
}

.gallery-hero>.container{
    position:relative;
    z-index:5;
    width:100%;
    max-width:1320px;
    margin:auto;
    padding:var(--space-6) 40px;
}

.gallery-hero-copy h1{
    font-size:3rem;
    font-weight:800;
    letter-spacing:2px;
    line-height:1.05;
    background:linear-gradient(90deg, #E8ECF2, #9AA3B5);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    margin-bottom:4px;
}

.gallery-hero-copy .subtitle{
    color:var(--color-gold);
    font-weight:700;
    font-size:1rem;
    letter-spacing:0.25em;
    margin-bottom:var(--space-3);
}

.gallery-hero-copy .tagline{
    font-size:0.95rem;
    color:#C7CCD8;
    max-width:480px;
    line-height:1.6;
}

/* ===========================================================
   CATEGORY FILTER ROW
===========================================================*/

.gallery-filter-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--space-4);
    flex-wrap:wrap;
    margin-top:var(--space-6);
}

.gallery-categories{
    display:flex;
    align-items:center;
    gap:var(--space-2);
    flex:1 1 auto;
    flex-wrap:wrap;
    position:relative;
}

.gallery-cat-btn{
    display:flex;
    align-items:center;
    gap:7px;
    padding:var(--space-3) var(--space-4);
    border-radius:var(--radius-md);
    border:1px solid var(--color-border);
    background:var(--color-surface);
    color:var(--color-text-muted);
    font-size:var(--fs-small);
    font-weight:var(--fw-medium);
    white-space:nowrap;
    cursor:pointer;
}

.gallery-cat-btn.active{
    background:linear-gradient(90deg, var(--color-gold), #F5D68A);
    color:#1A1305;
    border-color:transparent;
    font-weight:var(--fw-bold);
}

.gallery-season-select{
    width:auto;
    flex-shrink:0;
    padding:10px var(--space-4);
}

/* ===========================================================
   SECTION HEADERS
===========================================================*/

.gallery-section{
    margin-top:var(--space-7);
    scroll-margin-top:100px;
}

.gallery-section-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:var(--space-3);
    flex-wrap:wrap;
    margin-bottom:var(--space-5);
}

.gallery-section-head h2{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:1.3rem;
}

.gallery-grid-controls{
    display:flex;
    gap:var(--space-2);
    flex-wrap:wrap;
}

.gallery-grid-controls select{
    width:auto;
    padding:8px var(--space-3);
    font-size:var(--fs-small);
}

/* ===========================================================
   TILE TEXTURE — shared placeholder look for every photo tile
   (no real match photos exist yet; this is a deliberate CSS
   texture, not a stand-in for a real photo)
===========================================================*/

.gallery-tile-img{
    position:relative;
    overflow:hidden;
    background:
        radial-gradient(circle at 20% 25%, rgba(255,255,255,0.3) 0, rgba(255,255,255,0.3) 2px, transparent 3px),
        radial-gradient(circle at 80% 20%, rgba(255,255,255,0.22) 0, rgba(255,255,255,0.22) 2px, transparent 3px),
        radial-gradient(circle at 60% 70%, rgba(255,255,255,0.18) 0, rgba(255,255,255,0.18) 2px, transparent 3px),
        radial-gradient(circle at 30% 85%, rgba(255,255,255,0.14) 0, rgba(255,255,255,0.14) 2px, transparent 3px),
        radial-gradient(circle at 90% 65%, rgba(255,255,255,0.18) 0, rgba(255,255,255,0.18) 2px, transparent 3px),
        radial-gradient(ellipse at 30% 100%, var(--tile-accent, rgba(232,170,61,.35)), transparent 60%),
        linear-gradient(135deg, var(--tile-accent-soft, rgba(232,170,61,.22)), rgba(11,18,32,.94));
    display:flex;
    align-items:center;
    justify-content:center;
}

.gallery-tile-img::after{
    content:"";
    position:absolute;
    inset:0;
    background:repeating-linear-gradient(
        115deg,
        rgba(255,255,255,0.03) 0px,
        rgba(255,255,255,0.03) 1px,
        transparent 1px,
        transparent 5px
    );
}

.gallery-tile-icon{
    position:relative;
    z-index:2;
    font-size:1.6rem;
    opacity:0.85;
}

.gallery-play-btn{
    position:relative;
    z-index:2;
    width:44px;
    height:44px;
    border-radius:50%;
    background:rgba(0,0,0,0.5);
    border:2px solid var(--color-gold);
    color:var(--color-gold);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.1rem;
    cursor:pointer;
}

.gallery-tile-cat-tag{
    position:absolute;
    top:10px;
    left:10px;
    z-index:2;
    display:flex;
    align-items:center;
    gap:5px;
    background:rgba(6,10,20,0.65);
    backdrop-filter:blur(2px);
    color:#fff;
    font-size:var(--fs-tiny);
    font-weight:600;
    padding:4px 9px;
    border-radius:var(--radius-sm);
}

/* Per-category accent colors, applied via inline style variables */
.cat-match-moments{ --tile-accent: rgba(59,130,246,.4); --tile-accent-soft: rgba(59,130,246,.22); }
.cat-players{ --tile-accent: rgba(220,38,38,.4); --tile-accent-soft: rgba(220,38,38,.22); }
.cat-teams{ --tile-accent: rgba(124,58,237,.4); --tile-accent-soft: rgba(124,58,237,.22); }
.cat-trophy-awards{ --tile-accent: rgba(232,170,61,.4); --tile-accent-soft: rgba(232,170,61,.24); }
.cat-fans{ --tile-accent: rgba(236,72,153,.4); --tile-accent-soft: rgba(236,72,153,.22); }
.cat-behind-the-scenes{ --tile-accent: rgba(20,184,166,.4); --tile-accent-soft: rgba(20,184,166,.22); }
.cat-events{ --tile-accent: rgba(249,115,22,.4); --tile-accent-soft: rgba(249,115,22,.22); }

/* ===========================================================
   FEATURED MOMENTS
===========================================================*/

.featured-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:var(--space-4);
}

.featured-card{
    border:1px solid var(--color-border);
    border-radius:var(--radius-lg);
    overflow:hidden;
}

.featured-card .gallery-tile-img{
    height:170px;
}

.featured-info{
    padding:var(--space-3) var(--space-4);
}

.featured-info .name{
    font-weight:600;
    font-size:var(--fs-small);
    margin-bottom:2px;
}

.featured-info .detail{
    display:flex;
    align-items:center;
    gap:5px;
    font-size:var(--fs-tiny);
    color:var(--color-text-faint);
}

/* ===========================================================
   PHOTO GALLERY GRID
===========================================================*/

.photo-grid{
    display:grid;
    grid-template-columns:repeat(6, 1fr);
    gap:var(--space-4);
}

.photo-card{
    border:1px solid var(--color-border);
    border-radius:var(--radius-lg);
    overflow:hidden;
}

.photo-card .gallery-tile-img{
    height:120px;
}

.photo-info{
    padding:var(--space-3);
}

.photo-info .name{
    font-weight:600;
    font-size:var(--fs-tiny);
    margin-bottom:2px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.photo-info .detail{
    display:flex;
    align-items:center;
    gap:4px;
    font-size:10px;
    color:var(--color-text-faint);
}

.gallery-no-match-note{
    grid-column:1 / -1;
    text-align:center;
    color:var(--color-text-muted);
    font-size:var(--fs-small);
    padding:var(--space-5);
}

/* ===========================================================
   TOAST — honest feedback for the play-button placeholders
===========================================================*/

.gallery-toast{
    position:fixed;
    left:50%;
    bottom:32px;
    transform:translateX(-50%) translateY(20px);
    background:var(--color-surface-alt);
    border:1px solid var(--color-border);
    color:var(--color-text);
    padding:var(--space-3) var(--space-5);
    border-radius:var(--radius-md);
    font-size:var(--fs-small);
    font-weight:var(--fw-medium);
    box-shadow:0 8px 24px rgba(0,0,0,0.4);
    opacity:0;
    pointer-events:none;
    transition:opacity 0.25s ease, transform 0.25s ease;
    z-index:999;
    white-space:nowrap;
}

.gallery-toast.show{
    opacity:1;
    transform:translateX(-50%) translateY(0);
}

@media (max-width: 480px){
    .gallery-toast{
        white-space:normal;
        width:calc(100% - 48px);
        text-align:center;
    }
}

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

@media (max-width: 1300px){
    .photo-grid{
        grid-template-columns:repeat(4, 1fr);
    }

    .featured-grid{
        grid-template-columns:repeat(2, 1fr);
    }
}

@media (max-width: 1024px){
    /* Keep all category pills on one line, app-style — shrink to fit
       rather than wrap messily or scroll off-edge with no hint (same
       fix pattern used on Statistics / Hall of Fame quick-nav bars). */
    .gallery-filter-row{
        flex-direction:column;
        flex-wrap:nowrap;
        align-items:stretch;
    }

    .gallery-categories{
        flex-wrap:nowrap;
        overflow-x:auto;
        gap:6px;
        min-width:0;
        -webkit-mask-image:linear-gradient(90deg, #000 92%, transparent 100%);
        mask-image:linear-gradient(90deg, #000 92%, transparent 100%);
    }

    .gallery-cat-btn{
        flex:0 0 auto;
        font-size:12px;
        padding:var(--space-2) var(--space-3);
    }

    .gallery-season-select{
        width:100%;
    }
}

@media (max-width: 900px){
    .gallery-hero>.container{
        padding:var(--space-6) 24px;
    }

    .photo-grid{
        grid-template-columns:repeat(3, 1fr);
    }
}

@media (max-width: 720px){
    .gallery-hero-copy h1{
        font-size:2.1rem;
    }

    .featured-grid{
        grid-template-columns:1fr;
    }

    .gallery-section-head{
        flex-direction:column;
        align-items:flex-start;
    }
}

@media (max-width: 560px){
    .photo-grid{
        grid-template-columns:repeat(2, 1fr);
    }
}