/* ===========================
GALLERY: masonry + overlay + lightbox + reels + filters + load more
Fixes "thin line" tiles by using .photo-inner for overflow clipping
=========================== */

/* Masonry columns */
.masonry{
    columns: 3;
    column-gap: 1rem;
    margin-top: 1.25rem;
}

@media (max-width: 900px){ .masonry{ columns: 2; } }
@media (max-width: 520px){ .masonry{ columns: 1; } }

/* IMPORTANT: in CSS columns, use inline-block for stable height */
.masonry .photo{
    display: inline-block;
    width: 100%;
    margin: 0 0 1rem;
    vertical-align: top;

    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;

    cursor: zoom-in;
}

/* Inner wrapper handles radius + clipping (prevents collapsed "line") */
.photo-inner{
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--line);
    background: rgba(255,255,255,.02);
}

/* Image must contribute height */
.photo-inner img{
    width: 100%;
    height: auto;
    display: block;
    transform: scale(1);
    transition: transform .35s ease, filter .35s ease;
}

/* Overlay */
.photo-inner .overlay{
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: .75rem;
    padding: .85rem;
    background: linear-gradient(to top, rgba(0,0,0,.68), rgba(0,0,0,0) 60%);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .2s ease, transform .2s ease;
}

.photo:hover .photo-inner img{
    transform: scale(1.03);
    filter: saturate(1.05);
}

.photo:hover .photo-inner .overlay{
    opacity: 1;
    transform: translateY(0);
}

.tag{
    display: inline-flex;
    align-items: center;
    padding: .35rem .6rem;
    border-radius: 999px;
    font-weight: 900;
    font-size: .9rem;
    color: #fff;
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(0,0,0,.28);
    backdrop-filter: blur(8px);
}

.hint{
    color: rgba(255,255,255,.85);
    font-weight: 800;
    font-size: .9rem;
}

/* CTA banner */
.gallery-cta{
    margin-top: 1.75rem;
    padding: 1.25rem;
    border-radius: var(--radius-lg);
    border: 1px solid var(--line);
    background:
            radial-gradient(900px 300px at 20% 0%, rgba(255, 77, 227, .18), rgba(0,0,0,0)),
            radial-gradient(900px 300px at 80% 100%, rgba(181, 107, 255, .18), rgba(0,0,0,0)),
            rgba(255,255,255,.02);
    box-shadow: var(--shadow);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

:root[data-theme="light"] .gallery-cta{
    background:
            radial-gradient(900px 300px at 20% 0%, rgba(255, 77, 227, .14), rgba(0,0,0,0)),
            radial-gradient(900px 300px at 80% 100%, rgba(181, 107, 255, .14), rgba(0,0,0,0)),
            var(--surface);
}

@media (max-width: 800px){
    .gallery-cta{ flex-direction: column; align-items: flex-start; }
}

/* ===========================
FILTERS + LOAD MORE
=========================== */

.gallery-controls{
    display:flex;
    align-items:flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1rem;
}

.filter-bar{
    display:flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.filter-btn{
    appearance:none;
    border: 1px solid var(--line);
    background: rgba(255,255,255,.02);
    color: var(--fg);
    border-radius: 999px;
    padding: .45rem .75rem;
    font-weight: 800;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, transform .08s ease;
}

.filter-btn:hover{ background: rgba(255,255,255,.05); }
.filter-btn:active{ transform: translateY(1px); }

.filter-btn.is-active{
    border-color: rgba(255, 77, 227, .35);
    background: linear-gradient(135deg, rgba(255, 77, 227, .22), rgba(181, 107, 255, .18));
}

.load-more-wrap{
    display:flex;
    justify-content:center;
    margin-top: 1.25rem;
}

@media (max-width: 700px){
    .gallery-controls{ flex-direction: column; align-items: flex-start; }
}

/* ===========================
LIGHTBOX
=========================== */

.lightbox{
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    background: rgba(0,0,0,.72);
    backdrop-filter: blur(8px);
}

.lightbox.is-open{ display: flex; }

.lb-stage{
    width: min(980px, calc(100% - 3rem));
    max-height: calc(100% - 3.5rem);
    background: rgba(15,17,24,.72);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 30px 90px rgba(0,0,0,.55);
    position: relative;
}

:root[data-theme="light"] .lb-stage{
    background: rgba(255,255,255,.92);
    border-color: rgba(18,20,39,.16);
}

.lb-img{
    width: 100%;
    height: auto;
    max-height: calc(100vh - 9rem);
    object-fit: contain;
    display: block;
    background: rgba(0,0,0,.12);
}

.lb-meta{
    padding: .85rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-top: 1px solid rgba(255,255,255,.10);
}

:root[data-theme="light"] .lb-meta{
    border-top-color: rgba(18,20,39,.10);
}

.lb-tag{
    display: inline-flex;
    padding: .35rem .65rem;
    border-radius: 999px;
    font-weight: 900;
    border: 1px solid rgba(255,255,255,.16);
    background: rgba(255,255,255,.06);
}

:root[data-theme="light"] .lb-tag{
    border-color: rgba(18,20,39,.12);
    background: rgba(18,20,39,.04);
}

.lb-close{
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(0,0,0,.22);
    color: #fff;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
}

.lb-nav{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 46px;
    height: 46px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(0,0,0,.22);
    color: #fff;
    font-size: 28px;
    cursor: pointer;
}

.lb-prev{ left: 1rem; }
.lb-next{ right: 1rem; }

@media (max-width: 700px){
    .lb-prev, .lb-next{ display:none; }
}

/* ===========================
REELS GRID (Instagram-style)
=========================== */

.reels-wrap{
    margin-top: 2.25rem;
}

.reels-head{
    display:flex;
    align-items:flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.reels-grid{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

@media (max-width: 900px){
    .reels-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px){
    .reels-grid{ grid-template-columns: 1fr; }
}

.reel{
    position: relative;
    display: block;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--line);
    background: rgba(255,255,255,.02);
    text-decoration: none;
}

.reel img{
    width: 100%;
    aspect-ratio: 9 / 16;
    object-fit: cover;
    display:block;
    transition: transform .35s ease, filter .35s ease;
}

.reel:hover img{
    transform: scale(1.04);
    filter: saturate(1.05);
}

.reel-badge{
    position: absolute;
    top: .75rem;
    left: .75rem;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .35rem .6rem;
    border-radius: 999px;
    font-weight: 900;
    font-size: .9rem;
    color: #fff;
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(0,0,0,.30);
    backdrop-filter: blur(8px);
}

.reel-badge svg{
    width: 1.05rem;
    height: 1.05rem;
}

.reel-title{
    position: absolute;
    left: .85rem;
    right: .85rem;
    bottom: .75rem;
    color: rgba(255,255,255,.92);
    font-weight: 900;
    text-shadow: 0 10px 30px rgba(0,0,0,.55);
}

/* Make filters work: hidden must actually hide tiles */
.masonry .photo[hidden]{
    display: none !important;
}

.photo{
  opacity: 1;
  transform: translateY(0);
  transition: opacity .25s ease, transform .25s ease;
}

.photo[hidden]{
  opacity: 0;
  transform: translateY(8px);
}

@media (hover: none){
  .photo .overlay{
    opacity: 1;
    transform: none;
  }
}