/* =========================================================
   CURIOUS EXPLORER — HIDDEN GEMS
   Premium Discovery / Adventure Design
========================================================= */


/* =========================================================
   PAGE FOUNDATION
========================================================= */

.hidden-gems-page{

    font-family:'Inter', sans-serif;

    background:
        linear-gradient(
            180deg,
            #f7fbf7 0%,
            #eef7f1 48%,
            #fffaf0 100%
        );

    color:#173b32;

}


/* =========================================================
   CINEMATIC HERO
========================================================= */

.hidden-gems-hero{

    position:relative;

    width:100%;
    height:86vh;
    min-height:600px;

    overflow:hidden;

    background:#173b32;

}


.hidden-gems-hero .hero-video{

    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;

    transform:scale(1.04);

    filter:
        brightness(1.08)
        saturate(1.12)
        contrast(.97);

}


.hidden-gems-hero .hero-overlay{

    position:absolute;

    inset:0;

    z-index:2;

    background:

        linear-gradient(
            180deg,
            rgba(7,40,28,.20) 0%,
            rgba(7,50,35,.08) 35%,
            rgba(4,30,22,.72) 100%
        );

}


.hidden-gems-hero::after{

    content:"";

    position:absolute;

    left:0;
    right:0;
    bottom:-1px;

    height:140px;

    z-index:3;

    pointer-events:none;

    background:
        linear-gradient(
            to bottom,
            transparent,
            #f7fbf7
        );

}


/* =========================================================
   HERO SCROLL INDICATOR
========================================================= */

.hidden-gems-hero .scroll-indicator{

    position:absolute;

    left:50%;
    bottom:42px;

    transform:translateX(-50%);

    width:34px;
    height:58px;

    border:2px solid rgba(255,255,255,.8);

    border-radius:30px;

    z-index:10;

    display:flex;

    justify-content:center;

    padding-top:9px;

}


.hidden-gems-hero .scroll-indicator span{

    width:6px;
    height:12px;

    border-radius:10px;

    background:#fff;

    animation:
        hiddenScroll 1.8s infinite ease-in-out;

}


@keyframes hiddenScroll{

    0%{

        transform:translateY(0);

        opacity:1;

    }

    60%{

        transform:translateY(20px);

        opacity:.25;

    }

    100%{

        transform:translateY(0);

        opacity:1;

    }

}


/* =========================================================
   SECTION TITLES
========================================================= */

.hidden-gems-page .section-title{

    max-width:760px;

    margin-left:auto;
    margin-right:auto;

}


.hidden-gems-page .section-title h2{

    font-family:'Plus Jakarta Sans', sans-serif;

    font-size:clamp(2rem,4vw,3.2rem);

    font-weight:800;

    color:#173b32;

    margin-bottom:15px;

}


.hidden-gems-page .section-title h2::after{

    content:"";

    display:block;

    width:65px;
    height:4px;

    margin:18px auto 0;

    border-radius:20px;

    background:

        linear-gradient(
            90deg,
            #278b5b,
            #d7a928,
            #e56b35
        );

}


.hidden-gems-page .section-title p{

    color:#61776c;

    line-height:1.8;

}


/* =========================================================
   DISCOVERY INTRO
========================================================= */

.gems-intro{

    position:relative;

    padding:80px 0;

    background:#f7fbf7;

}


.gems-intro-content{

    max-width:850px;

    margin:auto;

    text-align:center;

}


.gems-intro-content .intro-icon{

    width:75px;
    height:75px;

    display:flex;

    align-items:center;
    justify-content:center;

    margin:0 auto 25px;

    border-radius:50%;

    background:

        linear-gradient(
            135deg,
            #e1f4e7,
            #fff0c5
        );

    color:#278b5b;

    font-size:1.8rem;

    box-shadow:
        0 10px 30px rgba(39,139,91,.12);

}


.gems-intro-content h2{

    font-family:'Plus Jakarta Sans', sans-serif;

    font-size:clamp(2rem,4vw,3rem);

    font-weight:800;

    color:#173b32;

}


.gems-intro-content p{

    max-width:720px;

    margin:20px auto 0;

    color:#65786e;

    font-size:1.05rem;

    line-height:1.9;

}


/* =========================================================
   GEM CATEGORY CARDS
========================================================= */

.gem-card{

    position:relative;

    height:100%;

    min-height:450px;

    overflow:hidden;

    border-radius:28px;

    background:#173b32;

    box-shadow:

        0 18px 50px rgba(20,60,45,.12);

    transition:

        transform .5s cubic-bezier(.22,1,.36,1),
        box-shadow .5s ease;

}


.gem-card:hover{

    transform:translateY(-12px);

    box-shadow:

        0 30px 70px rgba(20,60,45,.22);

}


.gem-card img{

    width:100%;
    height:100%;

    min-height:450px;

    object-fit:cover;

    transition:

        transform .8s cubic-bezier(.22,1,.36,1);

}


.gem-card:hover img{

    transform:scale(1.09);

}


.gem-card::after{

    content:"";

    position:absolute;

    inset:0;

    background:

        linear-gradient(
            to top,
            rgba(5,32,23,.94),
            rgba(5,32,23,.40) 45%,
            transparent 75%
        );

    z-index:1;

}


.gem-card-content{

    position:absolute;

    left:0;
    right:0;
    bottom:0;

    z-index:2;

    padding:70px 28px 28px;

    color:#fff;

}


.gem-card-icon{

    width:52px;
    height:52px;

    display:flex;

    align-items:center;
    justify-content:center;

    margin-bottom:15px;

    border-radius:50%;

    background:rgba(255,255,255,.16);

    border:1px solid rgba(255,255,255,.30);

    backdrop-filter:blur(8px);

    color:#ffd166;

}


.gem-card-content span{

    display:inline-block;

    margin-bottom:9px;

    font-size:.75rem;

    font-weight:800;

    letter-spacing:1px;

    text-transform:uppercase;

    color:#ffd166;

}


.gem-card-content h3{

    font-family:'Plus Jakarta Sans', sans-serif;

    font-size:1.7rem;

    font-weight:800;

    margin-bottom:10px;

}


.gem-card-content p{

    margin:0;

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

    line-height:1.7;

}


/* =========================================================
   FEATURED HIDDEN GEMS
========================================================= */

.featured-gems{

    background:#fff;

}


.featured-gem-card{

    height:100%;

    overflow:hidden;

    border-radius:26px;

    background:#fff;

    border:1px solid rgba(30,90,60,.10);

    box-shadow:

        0 12px 40px rgba(20,60,45,.08);

    transition:

        transform .45s ease,
        box-shadow .45s ease;

}


.featured-gem-card:hover{

    transform:translateY(-9px);

    box-shadow:

        0 25px 55px rgba(20,60,45,.15);

}


.featured-gem-image{

    position:relative;

    overflow:hidden;

}


.featured-gem-image img{

    width:100%;
    height:270px;

    object-fit:cover;

    transition:
        transform .7s ease;

}


.featured-gem-card:hover .featured-gem-image img{

    transform:scale(1.08);

}


.featured-gem-badge{

    position:absolute;

    left:18px;
    top:18px;

    padding:7px 13px;

    border-radius:30px;

    background:rgba(255,255,255,.94);

    color:#23794f;

    font-size:.72rem;

    font-weight:800;

    text-transform:uppercase;

    letter-spacing:.7px;

    box-shadow:

        0 5px 15px rgba(0,0,0,.10);

}


.featured-gem-content{

    padding:25px;

}


.featured-gem-content h3{

    font-family:'Plus Jakarta Sans', sans-serif;

    color:#173b32;

    font-size:1.4rem;

    font-weight:800;

    margin-bottom:10px;

}


.featured-gem-content p{

    color:#687a70;

    line-height:1.75;

}


.featured-gem-content .gem-location{

    display:block;

    margin-bottom:12px;

    color:#278b5b;

    font-size:.82rem;

    font-weight:700;

}


.featured-gem-content .btn{

    margin-top:8px;

    border-radius:50px;

    padding:9px 20px;

    font-weight:700;

    background:#278b5b;

    border-color:#278b5b;

    transition:.3s;

}


.featured-gem-content .btn:hover{

    background:#1e7049;

    border-color:#1e7049;

    transform:translateY(-3px);

}


/* =========================================================
   DISCOVERY STORY SECTION
========================================================= */

.gem-story{

    position:relative;

    overflow:hidden;

    background:

        linear-gradient(
            135deg,
            #edf8f1,
            #ffffff 55%,
            #fff8df
        );

}


.gem-story::before{

    content:"";

    position:absolute;

    width:420px;
    height:420px;

    border-radius:50%;

    top:-230px;
    right:-130px;

    background:rgba(39,139,91,.12);

    filter:blur(70px);

}


.gem-story-image{

    position:relative;

}


.gem-story-image img{

    width:100%;

    border-radius:30px;

    box-shadow:

        0 25px 65px rgba(20,70,45,.16);

}


.gem-story-image::after{

    content:"";

    position:absolute;

    width:120px;
    height:120px;

    right:-20px;
    bottom:-20px;

    border-radius:50%;

    background:#ffd166;

    opacity:.25;

    z-index:0;

}


.gem-story-image img{

    position:relative;

    z-index:1;

}


.gem-story-content{

    position:relative;

    z-index:2;

}


.gem-story-content .story-label{

    display:inline-block;

    margin-bottom:14px;

    color:#278b5b;

    font-size:.78rem;

    font-weight:800;

    letter-spacing:1.2px;

    text-transform:uppercase;

}


.gem-story-content h2{

    font-family:'Plus Jakarta Sans', sans-serif;

    color:#173b32;

    font-size:clamp(2rem,4vw,3rem);

    font-weight:800;

    margin-bottom:20px;

}


.gem-story-content p{

    color:#65786e;

    line-height:1.9;

}


.gem-story-list{

    list-style:none;

    padding:0;

    margin:25px 0 0;

}


.gem-story-list li{

    display:flex;

    align-items:flex-start;

    gap:13px;

    margin-bottom:15px;

    color:#405e50;

    line-height:1.6;

}


.gem-story-list i{

    color:#278b5b;

    margin-top:4px;

}


/* =========================================================
   WHY DISCOVER HIDDEN GEMS
========================================================= */

.why-gems{

    background:#fff;

}


.why-gem-card{

    position:relative;

    height:100%;

    padding:35px 25px;

    text-align:center;

    border-radius:25px;

    background:#fff;

    border:1px solid rgba(39,139,91,.10);

    box-shadow:

        0 12px 35px rgba(20,60,45,.07);

    transition:.4s;

    overflow:hidden;

}


.why-gem-card:hover{

    transform:translateY(-9px);

    box-shadow:

        0 25px 55px rgba(20,60,45,.14);

}


.why-gem-card::before{

    content:"";

    position:absolute;

    width:90px;
    height:90px;

    top:-45px;
    right:-35px;

    border-radius:50%;

    background:rgba(255,209,102,.18);

}


.why-gem-card i{

    display:flex;

    align-items:center;
    justify-content:center;

    width:70px;
    height:70px;

    margin:0 auto 20px;

    border-radius:50%;

    background:

        linear-gradient(
            135deg,
            #e1f4e7,
            #fff2c9
        );

    color:#278b5b;

    font-size:1.55rem;

}


.why-gem-card h5{

    font-weight:800;

    color:#173b32;

    margin-bottom:12px;

}


.why-gem-card p{

    margin:0;

    color:#6b7d73;

    line-height:1.7;

}


/* =========================================================
   DISCOVERY TIPS
========================================================= */

.gem-tips{

    background:

        linear-gradient(
            180deg,
            #f2f9f4,
            #fff
        );

}


.gem-tip-card{

    height:100%;

    padding:30px 25px;

    border-radius:24px;

    background:rgba(255,255,255,.90);

    border:1px solid rgba(39,139,91,.10);

    box-shadow:

        0 10px 35px rgba(20,60,45,.07);

    transition:.4s;

}


.gem-tip-card:hover{

    transform:translateY(-8px);

    box-shadow:

        0 20px 50px rgba(20,60,45,.13);

}


.gem-tip-card i{

    color:#d49b18;

    font-size:1.6rem;

    margin-bottom:18px;

}


.gem-tip-card h5{

    color:#173b32;

    font-weight:800;

}


.gem-tip-card p{

    color:#687a70;

    line-height:1.7;

    margin:0;

}


/* =========================================================
   GEM GALLERY
========================================================= */

.gems-gallery{

    background:#fff;

}


.gems-gallery-item{

    position:relative;

    display:block;

    overflow:hidden;

    border-radius:23px;

}


.gems-gallery-item img{

    width:100%;
    height:280px;

    object-fit:cover;

    transition:

        transform .7s cubic-bezier(.22,1,.36,1),
        filter .5s ease;

}


.gems-gallery-item::after{

    content:"";

    position:absolute;

    inset:0;

    background:

        linear-gradient(
            to top,
            rgba(8,40,28,.60),
            transparent 55%
        );

    opacity:0;

    transition:.4s;

}


.gems-gallery-item:hover img{

    transform:scale(1.08);

    filter:saturate(1.12);

}


.gems-gallery-item:hover::after{

    opacity:1;

}


/* =========================================================
   HIDDEN GEMS CTA
========================================================= */

.hidden-gems-cta{

    position:relative;

    overflow:hidden;

    padding:110px 0;

    color:#fff;

    background:

        radial-gradient(
            circle at 15% 25%,
            rgba(255,209,102,.24),
            transparent 28%
        ),

        radial-gradient(
            circle at 85% 75%,
            rgba(53,190,120,.22),
            transparent 30%
        ),

        linear-gradient(
            135deg,
            #164b38,
            #23794f 50%,
            #125c4d
        );

}


.hidden-gems-cta::before{

    content:"";

    position:absolute;

    width:400px;
    height:400px;

    border-radius:50%;

    top:-220px;
    right:-120px;

    background:rgba(255,255,255,.08);

    filter:blur(20px);

}


.hidden-gems-cta::after{

    content:"";

    position:absolute;

    width:260px;
    height:260px;

    border-radius:50%;

    left:-100px;
    bottom:-150px;

    background:rgba(255,209,102,.12);

    filter:blur(20px);

}


.hidden-gems-cta .container{

    position:relative;

    z-index:2;

}


.hidden-gems-cta h2{

    font-family:'Plus Jakarta Sans', sans-serif;

    font-size:clamp(2rem,4vw,3.4rem);

    font-weight:800;

    margin-bottom:15px;

}


.hidden-gems-cta p{

    max-width:680px;

    margin:0 auto 30px;

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

    line-height:1.8;

}


.hidden-gems-cta .btn{

    padding:14px 30px;

    border:0;

    border-radius:50px;

    background:#ffd166;

    color:#173b32;

    font-weight:800;

    box-shadow:

        0 12px 30px rgba(0,0,0,.16);

    transition:.35s;

}


.hidden-gems-cta .btn:hover{

    transform:
        translateY(-5px)
        scale(1.03);

    background:#fff;

    color:#23794f;

}


/* =========================================================
   REVEAL ANIMATION
========================================================= */

.gem-reveal{

    opacity:0;

    transform:translateY(45px);

    transition:

        opacity .9s ease,

        transform .9s cubic-bezier(.22,1,.36,1);

}


.gem-reveal.visible{

    opacity:1;

    transform:translateY(0);

}


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

@media(max-width:991px){

    .hidden-gems-hero{

        height:78vh;

        min-height:540px;

    }

    .gem-card{

        min-height:420px;

    }

    .gem-card img{

        min-height:420px;

    }

}


@media(max-width:768px){

    .hidden-gems-hero{

        height:70vh;

        min-height:480px;

    }

    .hidden-gems-hero::after{

        height:100px;

    }

    .gem-card{

        min-height:400px;

        border-radius:23px;

    }

    .gem-card img{

        min-height:400px;

    }

    .gem-card-content{

        padding:60px 22px 22px;

    }

    .featured-gem-image img{

        height:240px;

    }

    .gems-gallery-item img{

        height:230px;

    }

    .hidden-gems-cta{

        padding:80px 20px;

    }

}


@media(max-width:576px){

    .hidden-gems-hero{

        height:65vh;

        min-height:430px;

    }

    .hidden-gems-hero .scroll-indicator{

        bottom:25px;

    }

    .gem-card{

        min-height:380px;

    }

    .gem-card img{

        min-height:380px;

    }

    .gem-card-content h3{

        font-size:1.45rem;

    }

    .featured-gem-image img{

        height:220px;

    }

    .gems-gallery-item img{

        height:210px;

    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media(prefers-reduced-motion:reduce){

    .gem-card,
    .featured-gem-card,
    .why-gem-card,
    .gem-tip-card,
    .gems-gallery-item img{

        transition:none;

    }

    .hidden-gems-hero .scroll-indicator span{

        animation:none;

    }

}