/* =========================================================
   AIC FESTIVAL 2027 — GALLERY
   Curated editorial photography layout
   Page-specific CSS — global components remain untouched
   ========================================================= */

/* ---------- HERO ---------- */

.gallery-hero{
    position:relative;
    min-height:clamp(520px,64vh,690px);
    display:flex;
    align-items:flex-end;
    overflow:hidden;
    background:
        linear-gradient(90deg,rgba(0,0,0,.82) 0%,rgba(0,0,0,.50) 52%,rgba(0,0,0,.22) 100%),
        url("../images/gallery/hero.jpg") center/cover no-repeat;
}

.gallery-hero-content{
    position:relative;
    z-index:2;
    max-width:790px;
    padding:145px 0 78px;
    color:#fff;
}

.gallery-hero-content>span{
    color:#FFC04A;
    font-size:.76rem;
    font-weight:800;
    letter-spacing:.16em;
    text-transform:uppercase;
}

.gallery-hero h1{
    margin:14px 0 18px;
    color:#fff;
    font-size:clamp(3.1rem,6.8vw,5.7rem);
    line-height:.95;
    letter-spacing:-.05em;
}

.gallery-hero h1 em{
    color:#F4A300;
    font-style:normal;
}

.gallery-hero p{
    max-width:650px;
    margin:0;
    color:rgba(255,255,255,.88);
    font-size:clamp(1rem,1.7vw,1.15rem);
    line-height:1.75;
}

.hero-gallery-link{
    display:inline-flex;
    align-items:center;
    gap:9px;
    margin-top:24px;
    color:#FFC04A;
    font-weight:800;
    transition:color .25s ease;
}

.hero-gallery-link:hover{
    color:#fff;
}

/* ---------- INTRO ---------- */

.gallery-intro{
    padding:88px 0;
    background:#fff;
}

.gallery-intro-grid{
    display:grid;
    grid-template-columns:220px minmax(0,760px);
    gap:68px;
    align-items:start;
}

.eyebrow{
    display:inline-block;
    color:#D88900;
    font-size:.75rem;
    font-weight:800;
    letter-spacing:.13em;
    text-transform:uppercase;
}

.gallery-intro h2{
    margin:0 0 18px;
    color:#111;
    font-size:clamp(2.1rem,4vw,3.25rem);
    line-height:1.08;
    letter-spacing:-.03em;
}

.gallery-intro p{
    max-width:760px;
    margin:0;
    color:#666;
    font-size:1.05rem;
    line-height:1.82;
}

/* ---------- CURATED GALLERY ---------- */

.gallery-wall{
    padding:84px 0 96px;
    background:#F7F3EC;
}

.gallery-heading-row{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:32px;
    margin-bottom:34px;
}

.gallery-heading-row h2{
    margin:8px 0 0;
    color:#111;
    font-size:clamp(2rem,4vw,3rem);
    line-height:1.08;
    letter-spacing:-.025em;
}

.gallery-filters{
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-end;
    gap:7px;
}

.filter-btn{
    min-height:40px;
    padding:8px 15px;
    border:1px solid #D8D0C3;
    border-radius:7px;
    background:#fff;
    color:#555;
    cursor:pointer;
    font:inherit;
    font-size:.79rem;
    font-weight:800;
    transition:background .22s ease,border-color .22s ease,color .22s ease;
}

.filter-btn:hover,
.filter-btn.active{
    border-color:#F4A300;
    background:#F4A300;
    color:#111;
}

.filter-btn:focus-visible,
.gallery-open:focus-visible,
.lightbox-close:focus-visible,
.lightbox-prev:focus-visible,
.lightbox-next:focus-visible,
.hero-gallery-link:focus-visible{
    outline:3px solid #F4A300;
    outline-offset:3px;
}

/*
   The source photographs have deliberate native orientations:
   landscape: culture-01, arts-01, tourism-01, tourism-02, performance-02
   portrait: performance-01, arts-02
   square: culture-02

   The layout therefore uses a curated 4-column composition instead
   of forcing every photograph into identical cards.
*/

.gallery-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    grid-template-rows:repeat(4,minmax(150px,1fr));
    grid-template-areas:
        "feature feature portrait top"
        "feature feature portrait side"
        "square wide wide tall"
        "square wide wide tall";
    gap:14px;
    min-height:720px;
}

.gallery-item{
    position:relative;
    min-width:0;
    min-height:0;
    margin:0;
    overflow:hidden;
    background:#171717;
    border-radius:6px;
    box-shadow:0 4px 14px rgba(0,0,0,.07);
}

.gallery-item:nth-child(1){grid-area:feature;}
.gallery-item:nth-child(2){grid-area:portrait;}
.gallery-item:nth-child(3){grid-area:top;}
.gallery-item:nth-child(4){grid-area:side;}
.gallery-item:nth-child(5){grid-area:square;}
.gallery-item:nth-child(6){grid-area:wide;}
.gallery-item:nth-child(7){grid-area:tall;}
.gallery-item:nth-child(8){grid-area:wide2;}

/* Replace the repeated area above for the final image with a stable
   second wide row. */
.gallery-item:nth-child(8){
    grid-column:2 / 4;
    grid-row:4;
}

.gallery-item.is-hidden{
    display:none;
}

.gallery-open{
    position:relative;
    display:block;
    width:100%;
    height:100%;
    padding:0;
    border:0;
    background:#171717;
    cursor:pointer;
    text-align:left;
}

.gallery-open img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    transition:transform .55s ease;
}

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

/* Quiet caption treatment */

.gallery-overlay{
    position:absolute;
    inset:auto 0 0;
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:14px;
    padding:58px 17px 15px;
    background:linear-gradient(transparent,rgba(0,0,0,.82));
    color:#fff;
    opacity:0;
    transform:translateY(3px);
    transition:opacity .24s ease,transform .24s ease;
}

.gallery-item:hover .gallery-overlay,
.gallery-open:focus-visible .gallery-overlay{
    opacity:1;
    transform:none;
}

.gallery-overlay small{
    color:#FFC04A;
    font-size:.66rem;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.gallery-overlay h3{
    margin:3px 0 0;
    color:#fff;
    font-size:1rem;
    line-height:1.24;
}

.view-icon{
    width:36px;
    height:36px;
    flex:0 0 36px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(255,255,255,.48);
    border-radius:50%;
    color:#fff;
}

.image-fallback{
    position:absolute;
    inset:0;
    display:none;
    align-items:center;
    justify-content:center;
    background:#D88900;
    color:#fff;
    font-size:.85rem;
    font-weight:800;
    letter-spacing:.15em;
}

.gallery-message{
    min-height:24px;
    margin-top:20px;
    color:#666;
    text-align:center;
    font-weight:700;
}

/* ---------- STORY ---------- */

.gallery-story{
    padding:92px 0;
    background:#111;
    color:#fff;
}

.story-grid{
    display:grid;
    grid-template-columns:minmax(0,1.05fr) minmax(300px,.95fr);
    gap:72px;
    align-items:center;
}

.story-copy h2{
    max-width:720px;
    margin:14px 0 20px;
    color:#fff;
    font-size:clamp(2.15rem,4.3vw,3.5rem);
    line-height:1.07;
    letter-spacing:-.03em;
}

.story-copy p{
    max-width:690px;
    margin:0;
    color:#c9c9c9;
    line-height:1.8;
}

.story-copy .btn-primary{
    margin-top:24px;
}

.story-points{
    border-top:1px solid #333;
}

.story-points div{
    padding:20px 0;
    border-bottom:1px solid #333;
}

.story-points strong{
    display:block;
    color:#F4A300;
    font-size:1.04rem;
}

.story-points span{
    display:block;
    margin-top:3px;
    color:#bbb;
    line-height:1.55;
}

/* ---------- CTA ---------- */

.gallery-cta{
    padding:88px 0;
    background:#FFF8EE;
    border-top:1px solid #E8D7B8;
    text-align:center;
}

.cta-content{
    max-width:800px;
    margin:auto;
}

.cta-content>span{
    color:#D88900;
    font-size:.77rem;
    font-weight:800;
    letter-spacing:.13em;
    text-transform:uppercase;
}

.cta-content h2{
    margin:14px 0 15px;
    color:#111;
    font-size:clamp(2.15rem,4.5vw,3.3rem);
    line-height:1.08;
    letter-spacing:-.025em;
}

.cta-content p{
    max-width:670px;
    margin:0 auto 27px;
    color:#666;
    line-height:1.8;
}

.cta-buttons{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:12px;
}

/* ---------- LIGHTBOX ---------- */

.gallery-lightbox{
    position:fixed;
    inset:0;
    z-index:9999;
    display:none;
    align-items:center;
    justify-content:center;
    padding:22px;
}

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

.lightbox-backdrop{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.95);
    backdrop-filter:blur(4px);
}

.lightbox-panel{
    position:relative;
    z-index:2;
    width:min(1160px,94vw);
    max-height:92vh;
    display:flex;
    align-items:center;
    justify-content:center;
}

.lightbox-panel figure{
    max-width:100%;
    max-height:90vh;
    margin:0;
    text-align:center;
}

.lightbox-panel figure img{
    display:block;
    max-width:100%;
    max-height:76vh;
    margin:auto;
    object-fit:contain;
    border-radius:3px;
}

.lightbox-panel figcaption{
    display:flex;
    flex-direction:column;
    align-items:center;
    margin-top:11px;
    color:#fff;
}

.lightbox-panel figcaption small{
    color:#FFC04A;
    font-size:.7rem;
    font-weight:800;
    letter-spacing:.1em;
    text-transform:uppercase;
}

.lightbox-panel figcaption strong{
    margin-top:3px;
    color:#fff;
    font-size:1.08rem;
}

.lightbox-close,
.lightbox-prev,
.lightbox-next{
    position:absolute;
    z-index:3;
    display:flex;
    align-items:center;
    justify-content:center;
    width:46px;
    height:46px;
    border:1px solid rgba(255,255,255,.35);
    border-radius:50%;
    background:rgba(0,0,0,.5);
    color:#fff;
    cursor:pointer;
    transition:background .22s ease,border-color .22s ease,color .22s ease;
}

.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover{
    background:#F4A300;
    border-color:#F4A300;
    color:#111;
}

.lightbox-close{top:-8px;right:-8px;}
.lightbox-prev{left:8px;}
.lightbox-next{right:8px;}

body.no-scroll{overflow:hidden;}

/* ---------- TABLET ---------- */

@media(max-width:1050px){
    .gallery-intro-grid{
        grid-template-columns:190px minmax(0,1fr);
        gap:42px;
    }

    .gallery-grid{
        grid-template-columns:repeat(4,minmax(0,1fr));
        grid-template-rows:repeat(5,minmax(130px,1fr));
        grid-template-areas:
            "feature feature portrait portrait"
            "feature feature portrait portrait"
            "top top side side"
            "square wide wide tall"
            "square wide wide tall";
        min-height:650px;
    }

    .gallery-item:nth-child(1){grid-area:feature;}
    .gallery-item:nth-child(2){grid-area:portrait;}
    .gallery-item:nth-child(3){grid-area:top;}
    .gallery-item:nth-child(4){grid-area:side;}
    .gallery-item:nth-child(5){grid-area:square;}
    .gallery-item:nth-child(6){grid-area:wide;}
    .gallery-item:nth-child(7){grid-area:tall;}
    .gallery-item:nth-child(8){
        grid-column:2 / 4;
        grid-row:5;
    }
}

/* ---------- MOBILE ---------- */

@media(max-width:700px){
    .gallery-hero{
        min-height:555px;
    }

    .gallery-hero-content{
        padding:104px 0 54px;
    }

    .gallery-hero h1{
        font-size:clamp(2.85rem,13vw,4.15rem);
    }

    .gallery-hero p{
        line-height:1.68;
    }

    .gallery-intro,
    .gallery-wall,
    .gallery-story,
    .gallery-cta{
        padding:68px 0;
    }

    .gallery-intro-grid{
        grid-template-columns:1fr;
        gap:17px;
    }

    /* Mobile story section: stack the editorial copy above the
       category list instead of retaining the desktop two-column layout. */
    .story-grid{
        grid-template-columns:1fr;
        gap:34px;
        align-items:start;
    }

    .story-copy{
        max-width:100%;
    }

    .story-copy h2{
        max-width:100%;
        font-size:clamp(2.2rem,10vw,3.1rem);
        line-height:1.04;
    }

    .story-copy p{
        max-width:100%;
    }

    .story-points{
        width:100%;
    }

    .story-points div{
        padding:16px 0;
    }

    .gallery-heading-row{
        flex-direction:column;
        align-items:flex-start;
        gap:21px;
        margin-bottom:27px;
    }

    .gallery-filters{
        justify-content:flex-start;
    }

    /*
       One-column mobile photography.
       Aspect ratios follow the source image orientation instead
       of creating narrow, tall two-column crops.
    */
    .gallery-grid{
        display:grid;
        grid-template-columns:1fr;
        grid-template-rows:none;
        grid-template-areas:none;
        gap:12px;
        min-height:0;
    }

    .gallery-item,
    .gallery-item:nth-child(n){
        grid-area:auto;
        grid-column:auto;
        grid-row:auto;
        width:100%;
    }

    .gallery-item:nth-child(1){
        aspect-ratio:3 / 2;
    }

    .gallery-item:nth-child(2),
    .gallery-item:nth-child(6){
        aspect-ratio:3 / 4;
    }

    .gallery-item:nth-child(3),
    .gallery-item:nth-child(4),
    .gallery-item:nth-child(8){
        aspect-ratio:3 / 2;
    }

    .gallery-item:nth-child(5){
        aspect-ratio:1 / 1;
    }

    .gallery-item:nth-child(7){
        aspect-ratio:16 / 9;
    }

    .gallery-overlay{
        opacity:1;
        transform:none;
        padding:48px 12px 12px;
        background:linear-gradient(transparent,rgba(0,0,0,.78));
    }

    .gallery-overlay small{
        font-size:.61rem;
    }

    .gallery-overlay h3{
        font-size:.9rem;
    }

    .view-icon{
        width:34px;
        height:34px;
        flex-basis:34px;
    }

    .gallery-lightbox{
        padding:10px;
    }

    .lightbox-panel{
        width:100%;
    }

    .lightbox-panel figure img{
        max-height:68vh;
    }

    .lightbox-close{
        top:-3px;
        right:-3px;
    }

    .lightbox-prev{left:1px;}
    .lightbox-next{right:1px;}

    .cta-buttons{
        flex-direction:column;
        align-items:stretch;
    }

    .cta-buttons a{
        width:100%;
    }
}

/* ---------- SMALL PHONES ---------- */

@media(max-width:380px){
    .gallery-grid{
        gap:10px;
    }

    .gallery-overlay{
        padding:42px 10px 10px;
    }

    .gallery-overlay h3{
        font-size:.82rem;
    }
}

/* ---------- REDUCED MOTION ---------- */

@media(prefers-reduced-motion:reduce){
    .hero-gallery-link,
    .gallery-open img,
    .gallery-overlay,
    .filter-btn,
    .lightbox-close,
    .lightbox-prev,
    .lightbox-next{
        transition:none;
    }

    .gallery-item:hover .gallery-open img{
        transform:none;
    }

    .gallery-overlay{
        transform:none;
    }
}