/* =====================================================
   SEQUENT TOURS & TRAVELS
   FILE        : gallery.css
   VERSION     : 1.0
   DESCRIPTION : Gallery Page, CTA and Image Modal
===================================================== */

/* 01. PAGE HERO */
.page-hero{
    width:100%;
    height:300px;
    padding-top:90px;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    overflow:hidden;
    background:linear-gradient(135deg,#F7F7F7,#FFFFFF);
}

.page-hero::before{
    content:"";
    position:absolute;
    top:-220px;
    left:-220px;
    width:500px;
    height:500px;
    background:rgba(217,119,6,.08);
    border-radius:50%;
    pointer-events:none;
}

.page-hero::after{
    content:"";
    position:absolute;
    right:-260px;
    bottom:-260px;
    width:600px;
    height:600px;
    background:rgba(217,119,6,.05);
    border-radius:50%;
    pointer-events:none;
}

.page-overlay{
    position:relative;
    z-index:2;
    max-width:760px;
    padding:0 24px;
    text-align:center;
}

.page-overlay h1{
    margin:0 0 14px;
    color:#222222;
    font-size:48px;
    font-weight:500;
    line-height:1.2;
}

.page-overlay p{
    margin:0;
    color:#6B7280;
    font-size:16px;
    line-height:1.8;
}

/* 02. GALLERY SECTION */
.gallery-section{
    width:100%;
    padding:90px 80px 110px;
    background:#FAFAF8;
    overflow:hidden;
}

/* 03. GALLERY GRID */
.gallery-grid{
    width:100%;
    max-width:1280px;
    margin:0 auto;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:24px;
}

.gallery-card{
    min-width:0;
    height:300px;
    position:relative;
    overflow:hidden;
    cursor:pointer;
    background:#F3F4F6;
    border:1px solid rgba(0,0,0,.045);
    border-radius:20px;
    box-shadow:0 8px 22px rgba(0,0,0,.045),0 20px 45px rgba(0,0,0,.025);
    transition:transform .3s ease,box-shadow .3s ease;
}

.gallery-card::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,transparent 60%,rgba(0,0,0,.12));
    opacity:0;
    pointer-events:none;
    transition:opacity .3s ease;
}

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

.gallery-card:hover{
    transform:translateY(-5px);
    box-shadow:0 14px 30px rgba(0,0,0,.08),0 24px 50px rgba(0,0,0,.04);
}

.gallery-card:hover img{
    transform:scale(1.06);
}

.gallery-card:hover::after{
    opacity:1;
}

/* 04. GALLERY CTA */
.about-cta{
    width:100%;
    max-width:1280px;
    margin:75px auto 0;
    padding:60px 40px;
    position:relative;
    overflow:hidden;
    text-align:center;
    background:#171C26;
    border:1px solid rgba(217,119,6,.12);
    box-shadow:0 10px 28px rgba(0,0,0,.04);
}

.about-cta::before{
    content:"";
    position:absolute;
    top:-120px;
    left:-120px;
    width:280px;
    height:280px;
    border-radius:50%;
    background:rgba(217,119,6,.055);
    pointer-events:none;
}

.about-cta::after{
    content:"";
    position:absolute;
    right:-150px;
    bottom:-150px;
    width:320px;
    height:320px;
    border-radius:50%;
    background:rgba(217,119,6,.04);
    pointer-events:none;
}

.about-cta h2{
    margin:0 0 26px;
    position:relative;
    z-index:2;
    color:white;
    font-size:36px;
    font-weight:500;
    line-height:1.35;
}

.about-cta a{
    min-width:150px;
    min-height:50px;
    padding:14px 28px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    position:relative;
    z-index:2;
    background:#D97706;
    color:#FFFFFF;
    border:1px solid #D97706;
    border-radius:12px;
    font-size:15px;
    font-weight:600;
    text-decoration:none;
    transition:transform .3s ease,box-shadow .3s ease,background .3s ease;
}

.about-cta a:hover{
    transform:translateY(-3px);
    background:#C96D05;
    color:#FFFFFF;
    box-shadow:0 12px 26px rgba(217,119,6,.18);
}

/* 05. GALLERY MODAL */
.gallery-modal{
    position:fixed;
    inset:0;
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:0;
    visibility:hidden;
    background:rgba(0,0,0,.92);
    transition:opacity .3s ease,visibility .3s ease;
    z-index:9999;
    cursor:zoom-out;
}

.gallery-modal.active{
    opacity:1;
    visibility:visible;
}

.gallery-modal-image{
    max-width:85%;
    max-height:80vh;
    object-fit:contain;
    border-radius:14px;
    box-shadow:0 15px 40px rgba(0,0,0,.45);
    animation:galleryZoom .25s ease;
    transition:opacity .25s ease;
    cursor:pointer;
    user-select:none;
    -webkit-user-drag:none;
}

@keyframes galleryZoom{
    from{transform:scale(.92);opacity:0;}
    to{transform:scale(1);opacity:1;}
}

/* 06. MODAL CONTROLS */
.gallery-close{
    position:absolute;
    top:25px;
    right:35px;
    padding:0;
    background:none;
    border:none;
    color:#FFFFFF;
    font-size:48px;
    line-height:1;
    cursor:pointer;
    transition:color .3s ease,transform .3s ease;
}

.gallery-close:hover{
    color:#D97706;
    transform:rotate(90deg);
}

.gallery-arrow{
    width:56px;
    height:56px;
    position:absolute;
    top:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    transform:translateY(-50%);
    border:none;
    border-radius:50%;
    background:rgba(255,255,255,.12);
    color:#FFFFFF;
    font-size:28px;
    cursor:pointer;
    backdrop-filter:blur(8px);
    transition:background .3s ease,transform .3s ease;
}

.gallery-arrow:hover{
    background:#D97706;
}

.gallery-prev{left:30px;}
.gallery-next{right:30px;}

.gallery-counter{
    position:absolute;
    top:28px;
    left:35px;
    color:#FFFFFF;
    font-size:17px;
    font-weight:600;
    letter-spacing:.5px;
}

/* 07. TABLET */
@media(max-width:1024px){
    .gallery-section{padding:80px 50px 100px;}
    .gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;}
    .gallery-card{height:290px;}
    .about-cta{margin-top:65px;}
}

/* 08. MOBILE */
@media(max-width:768px){
    .page-hero{height:280px;padding-top:80px;}
    .page-overlay h1{font-size:38px;}
    .gallery-section{padding:70px 24px 90px;}
    .gallery-grid{grid-template-columns:1fr;gap:20px;}
    .gallery-card{height:300px;}
    .about-cta{margin-top:55px;padding:50px 28px;}
    .about-cta h2{font-size:30px;}
    .gallery-modal-image{max-width:94%;max-height:72vh;}
    .gallery-arrow{width:46px;height:46px;font-size:22px;}
    .gallery-prev{left:12px;}
    .gallery-next{right:12px;}
    .gallery-close{top:16px;right:18px;font-size:40px;}
    .gallery-counter{top:20px;left:18px;font-size:15px;}
}

/* 09. SMALL MOBILE */
@media(max-width:430px){
    .page-hero{height:250px;}
    .page-overlay{padding:0 20px;}
    .page-overlay h1{font-size:31px;}
    .page-overlay p{font-size:15px;}
    .gallery-section{padding:60px 20px 80px;}
    .gallery-card{height:250px;border-radius:18px;}
    .about-cta{margin-top:50px;padding:45px 22px;border-radius:20px;}
    .about-cta h2{font-size:27px;}
    .about-cta a{width:100%;max-width:280px;}
    .gallery-arrow{width:42px;height:42px;font-size:20px;}
}