/* =====================================================
   GALLERY PAGE — PAGE-SPECIFIC STYLES
   Shared reset/header/CTA/footer are loaded from common.css.
===================================================== */

/* =====================================================
   3. GALLERY HERO
===================================================== */

.gallery-hero {
    background:
        linear-gradient(
            to bottom,
            rgba(0,0,0,.25),
            rgba(0,0,0,.55)
        ),
        url("../../images/gallery/gallery-hero.webp")
        center center / cover no-repeat;
}

.hero-overlay{

    position:absolute;

    inset:0;

    background:transparent;

}

.hero-content{

    position:relative;

    width:100%;
    max-width:760px;

    margin:0 auto;

    z-index:2;

}

.hero-label{

    display:block;

    margin-bottom:16px;

    color:#f1d28a;

    font-size:13px;

    font-weight:700;

    letter-spacing:4px;

    text-transform:uppercase;

    text-shadow:0 2px 8px rgba(0,0,0,.65);

}

.hero-content h1{

    max-width:680px;

    margin:0 auto 22px;

    color:#ffffff;

    
    font-size:50px;

    font-weight:400;

    line-height:1.15;

}

.hero-content p{

    max-width:620px;

    margin:0 auto;

    color:rgba(255,255,255,.92);

    font-size:16px;

    line-height:1.8;

}


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

@media (max-width:900px){

    .gallery-hero{

        min-height:420px;

        padding:95px 20px 60px;

    }

    .hero-content h1{

        font-size:42px;

    }

}

@media (max-width:650px){

    .gallery-hero{

        min-height:320px;

        padding:85px 20px 45px;

    }

    .hero-label{

        font-size:10px;

        letter-spacing:3px;

    }

    .hero-content h1{

        max-width:340px;

        font-size:34px;

    }

    .hero-content p{

        max-width:320px;

        font-size:14px;

        line-height:1.75;

    }

}

@media (max-width:480px){

    .gallery-hero{

        min-height:300px;

    }

    .hero-content h1{

        font-size:30px;

    }

    .hero-content p{

        font-size:13px;

    }

}
/* =====================================================
   4. GALLERY INTRODUCTION
===================================================== */

.gallery-intro{

    padding:85px 20px 80px;

    background:#ffffff;

    text-align:center;

}

.gallery-intro-container{

    width:100%;

    max-width:820px;

    margin:0 auto;

}

.gallery-subtitle{

    display:block;

    margin-bottom:16px;

    color:#b68b42;

    font-size:11px;

    font-weight:700;

    letter-spacing:3px;

    text-transform:uppercase;

}

.gallery-intro h2{

    margin:0 0 22px;

    color:#222222;

    
    font-size:42px;

    font-weight:400;

    line-height:1.22;

}

.gallery-intro p{

    max-width:700px;

    margin:0 auto;

    color:#666666;

    font-size:16px;

    line-height:1.85;

}


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

@media (max-width:900px){

    .gallery-intro{

        padding:75px 20px 70px;

    }

    .gallery-intro h2{

        font-size:38px;

    }

}

@media (max-width:650px){

    .gallery-intro{

        padding:65px 20px 60px;

    }

    .gallery-subtitle{

        font-size:10px;

        letter-spacing:2.5px;

    }

    .gallery-intro h2{

        font-size:31px;

        line-height:1.28;

    }

    .gallery-intro p{

        max-width:340px;

        font-size:14px;

        line-height:1.75;

    }

}

@media (max-width:480px){

    .gallery-intro{

        padding:55px 18px;

    }

    .gallery-intro h2{

        font-size:28px;

    }

    .gallery-intro p{

        font-size:13px;

    }

}
/* =====================================================
   5. TRAVEL GALLERY
===================================================== */

.travel-gallery{

    padding:90px 5%;

    background:#f7f5f1;

}

.travel-gallery-container{

    width:100%;
    max-width:1280px;
    margin:0 auto;

}

.travel-gallery-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);
    grid-auto-rows:auto;
    gap:24px;

}


.gallery-large{

    grid-column:span 2;

}

.gallery-item{
  position:relative;
  width:100%;
  height:100%;
  min-width:0;
  overflow:hidden;
  background:#eeeeee;

  border-radius:12px;
  box-shadow:0 10px 30px rgba(0,0,0,0.08);
}

.gallery-item img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  transition:transform .8s ease;

  border-radius:12px;
}

.gallery-item-overlay{

    position:absolute;

    inset:0;

    display:flex;

    flex-direction:column;

    justify-content:flex-end;

    padding:30px;

    background:linear-gradient(
        to top,
        rgba(0,0,0,.72),
        rgba(0,0,0,.18),
        transparent
    );
    border-radius:12px;

}

.gallery-item-overlay span{

    display:block;

    margin-bottom:8px;

    color:#d6ad63;

    font-size:11px;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

}

.gallery-item-overlay h3{

    color:#ffffff;

    
    font-size:30px;

    font-weight:400;

    line-height:1.25;

}


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

@media (max-width:1000px){

    .travel-gallery{

        padding:80px 20px;

    }

    .travel-gallery-grid{

        grid-template-columns:1fr 1fr;

        gap:20px;

    }

    .gallery-large{

        grid-column:span 2;

    }

}

@media (max-width:650px){

    .travel-gallery{

        padding:70px 20px;

    }

    .travel-gallery-grid{

        grid-template-columns:1fr;

        gap:18px;

    }

    .gallery-large{

        grid-column:span 1;

    }

    .gallery-item{

        aspect-ratio:4/3;

    }

    .gallery-item-overlay{

        padding:22px;

    }

    .gallery-item-overlay span{

        font-size:10px;

        letter-spacing:2px;

    }

    .gallery-item-overlay h3{

        font-size:24px;

    }

}

@media (max-width:480px){

    .gallery-item-overlay{

        padding:18px;

    }

    .gallery-item-overlay h3{

        font-size:22px;

    }

}
/* =====================================================
   6. GALLERY QUOTE
===================================================== */

.gallery-quote{

    padding:90px 5%;

    background:#ffffff;

    text-align:center;

}

.gallery-quote-container{

    width:100%;
    max-width:850px;

    margin:0 auto;

}

.gallery-quote-container span{

    display:block;

    margin-bottom:16px;

    color:#b68b42;

    font-size:11px;

    font-weight:700;

    letter-spacing:3px;

    text-transform:uppercase;

}

.gallery-quote-container h2{

    margin-bottom:22px;

    color:#222222;

    
    font-size:46px;

    font-weight:400;

    line-height:1.25;

}

.gallery-quote-container p{

    max-width:700px;

    margin:0 auto;

    color:#666666;

    font-size:15px;

    line-height:1.9;

}


/* =====================================================
   GALLERY QUOTE RESPONSIVE
===================================================== */

@media (max-width:900px){

    .gallery-quote{

        padding:80px 20px;

    }

    .gallery-quote-container h2{

        font-size:40px;

    }

}

@media (max-width:650px){

    .gallery-quote{

        padding:70px 20px;

    }

    .gallery-quote-container span{

        font-size:10px;

        letter-spacing:2.5px;

    }

    .gallery-quote-container h2{

        font-size:32px;

    }

    .gallery-quote-container p{

        font-size:14px;

        line-height:1.8;

    }

}

@media (max-width:480px){

    .gallery-quote-container h2{

        font-size:28px;

    }

}

/* =====================================================
   9.8 PREMIUM POLISH — GALLERY
===================================================== */

.gallery-hero .hero-content h1,
.gallery-intro h2,
.gallery-quote-container h2,
.gallery-item-overlay h3{
    text-wrap:balance;
}

.gallery-hero .hero-content p,
.gallery-intro p,
.gallery-quote-container p{
    text-wrap:pretty;
}

.gallery-item{
    border-radius:6px;
    box-shadow:0 8px 24px rgba(0,0,0,.07);
}

.gallery-item:hover{
    box-shadow:0 14px 34px rgba(0,0,0,.11);
}