/* =====================================================
   NORTHERN SAMAR GEOPARK SITES v8
   Smaller center Swiper + larger active-image background
   Individual site gallery + lightbox zoom
===================================================== */

.nsg-showcase{
    --nsg-green:#17654c;
    --nsg-navy:#0b1d3a;
    --nsg-orange:#f39a1e;
    position:relative;
    min-height:720px;
    overflow:hidden;
    isolation:isolate;
    background:#07111f;
}

.nsg-showcase-background{
    position:absolute;
    inset:-70px;
    z-index:-3;
    background-color:#07111f;
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    filter:blur(5px) saturate(1.05);
    transform:scale(1.12);
    opacity:.82;
    transition:background-image .85s ease,opacity .45s ease,transform .8s ease;
}

.nsg-showcase-background::after{
    content:"";
    position:absolute;
    inset:0;
    background:rgba(5,16,29,.12);
}

.nsg-showcase-overlay{
    position:absolute;
    inset:0;
    z-index:-2;
    background:
        linear-gradient(90deg,rgba(3,13,26,.55),rgba(3,13,26,.12) 50%,rgba(3,13,26,.50)),
        linear-gradient(180deg,rgba(3,13,26,.08),rgba(3,13,26,.52));
}

.nsg-showcase-inner{
    max-width:1500px;
    margin:0 auto;
    padding:65px 30px 105px;
}

.nsg-swiper{
    width:100%;
    padding:55px 0 75px;
}

/* Smaller cards so more of the active-image background is visible. */
.nsg-slide{
    width:310px;
    height:430px;
    transition:opacity .7s ease,transform .7s ease,filter .7s ease;
    opacity:.42;
    filter:saturate(.78);
}

.nsg-slide.swiper-slide-active{
    opacity:1;
    filter:saturate(1);
}

.nsg-card{
    position:relative;
    display:block;
    width:100%;
    height:100%;
    overflow:hidden;
    border-radius:26px;
    background:#111;
    border:1px solid rgba(255,255,255,.24);
    box-shadow:0 28px 70px rgba(0,0,0,.42);
    text-decoration:none;
    color:#fff;
}

.nsg-image,
.nsg-image img{
    width:100%;
    height:100%;
}

.nsg-image img{
    display:block;
    object-fit:cover;
    transition:transform .8s ease;
}

.nsg-slide.swiper-slide-active .nsg-image img{
    transform:scale(1.035);
}

.nsg-card::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.88) 100%);
    pointer-events:none;
}

.nsg-card-title{
    position:absolute;
    left:24px;
    right:24px;
    bottom:24px;
    z-index:2;
}

.nsg-card-title h3{
    margin:5px 0 9px;
    color:#fff;
    font-size:26px;
    line-height:1.08;
    text-shadow:0 2px 12px rgba(0,0,0,.4);
}

.nsg-location{
    margin:0;
    color:#fff;
    font-size:12px;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.nsg-explore{
    display:inline-flex;
    gap:7px;
    align-items:center;
    color:#fff;
    font-size:13px;
    font-weight:700;
}

.nsg-nav{
    width:48px;
    height:48px;
    border-radius:50%;
    background:rgba(255,255,255,.96);
    color:var(--nsg-green);
    box-shadow:0 10px 30px rgba(0,0,0,.25);
}

.nsg-nav::after{
    font-size:17px;
    font-weight:900;
}

.nsg-pagination .swiper-pagination-bullet{
    background:#fff;
    opacity:.55;
}

.nsg-pagination .swiper-pagination-bullet-active{
    background:var(--nsg-orange);
    opacity:1;
}

.nsg-empty{
    padding:40px;
    background:#f4f1e8;
    border-radius:20px;
}

/* =====================================================
   INDIVIDUAL SITE
===================================================== */

.nsg-single-site{
    background:#f7f5ef;
}

.nsg-single-hero{
    position:relative;
    min-height:580px;
    display:flex;
    align-items:flex-end;
    background-image:var(--nsg-hero-image);
    background-size:cover;
    background-position:center;
}

.nsg-single-hero-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,rgba(5,18,31,.06),rgba(5,18,31,.90));
}

.nsg-single-hero-content{
    position:relative;
    z-index:1;
    width:min(1180px,calc(100% - 40px));
    margin:0 auto;
    padding:80px 0 65px;
    color:#fff;
}

.nsg-single-kicker{
    margin:0 0 10px;
    color:#f6aa36;
    font-size:13px;
    font-weight:800;
    letter-spacing:.15em;
    text-transform:uppercase;
}

.nsg-single-hero h1{
    max-width:900px;
    margin:0;
    color:#fff;
    font-size:clamp(42px,6vw,76px);
    line-height:.98;
}

.nsg-single-location{
    margin:18px 0 0;
    font-size:19px;
}

.nsg-single-container{
    width:min(1180px,calc(100% - 40px));
    margin:0 auto;
    padding:90px 0 110px;
}

.nsg-single-description,
.nsg-site-gallery,
.nsg-site-map{
    margin-bottom:90px;
}

.nsg-single-section-heading span{
    display:block;
    margin-bottom:8px;
    color:#17654c;
    font-size:12px;
    font-weight:800;
    letter-spacing:.16em;
    text-transform:uppercase;
}

.nsg-single-section-heading h2{
    margin:0 0 28px;
    color:#10294b;
    font-size:clamp(30px,4vw,48px);
}

.nsg-prose{
    max-width:900px;
    color:#333;
    font-size:18px;
    line-height:1.85;
}

/* =====================================================
   GALLERY - FEATURED FIRST IMAGE + MANY THUMBNAILS
===================================================== */

.nsg-gallery-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    grid-auto-rows:190px;
    gap:14px;
}

.nsg-gallery-item{
    position:relative;
    display:block;
    width:100%;
    height:100%;
    padding:0;
    border:0;
    border-radius:18px;
    overflow:hidden;
    cursor:pointer;
    background:#ddd;
}

.nsg-gallery-item:first-child{
    grid-column:span 2;
    grid-row:span 2;
}

.nsg-gallery-item::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.25));
    opacity:0;
    transition:opacity .3s ease;
}

.nsg-gallery-item:hover::after{
    opacity:1;
}

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

.nsg-gallery-item:hover img{
    transform:scale(1.07);
}

.nsg-gallery-count{
    margin-top:15px;
    color:#6b716d;
    font-size:14px;
}

.nsg-map-wrap{
    overflow:hidden;
    border-radius:24px;
    min-height:450px;
    box-shadow:0 20px 50px rgba(0,0,0,.14);
}

.nsg-map-wrap iframe{
    display:block;
    width:100%;
    height:450px;
    border:0;
}

.nsg-map-button{
    display:inline-block;
    margin-top:18px;
    padding:13px 22px;
    border-radius:999px;
    background:#17654c;
    color:#fff;
    text-decoration:none;
    font-weight:700;
}

/* =====================================================
   LIGHTBOX + ZOOM
===================================================== */

body.nsg-lightbox-open{
    overflow:hidden;
}

.nsg-lightbox{
    position:fixed;
    inset:0;
    z-index:999999;
    display:none;
    align-items:center;
    justify-content:center;
    background:rgba(2,7,14,.96);
    padding:35px 80px;
}

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

.nsg-lightbox-stage{
    width:min(88vw,1450px);
    height:min(86vh,900px);
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    cursor:grab;
}

.nsg-lightbox-stage.is-zoomed{
    cursor:zoom-out;
}

.nsg-lightbox-image{
    max-width:100%;
    max-height:100%;
    object-fit:contain;
    border-radius:10px;
    box-shadow:0 30px 100px rgba(0,0,0,.55);
    transform:scale(1);
    transition:transform .25s ease;
    user-select:none;
}

.nsg-lightbox-image.is-zoomed{
    transform:scale(1.8);
    cursor:zoom-out;
}

.nsg-lightbox-close,
.nsg-lightbox-prev,
.nsg-lightbox-next,
.nsg-lightbox-zoom{
    position:absolute;
    z-index:2;
    border:0;
    color:#fff;
    background:rgba(255,255,255,.13);
    cursor:pointer;
    border-radius:50%;
    backdrop-filter:blur(8px);
}

.nsg-lightbox-close{
    top:20px;
    right:22px;
    width:48px;
    height:48px;
    font-size:32px;
}

.nsg-lightbox-prev,
.nsg-lightbox-next{
    top:50%;
    transform:translateY(-50%);
    width:58px;
    height:58px;
    font-size:42px;
    line-height:1;
}

.nsg-lightbox-prev{left:18px}
.nsg-lightbox-next{right:18px}

.nsg-lightbox-zoom{
    bottom:25px;
    right:25px;
    width:48px;
    height:48px;
    font-size:22px;
}

.nsg-lightbox-counter{
    position:absolute;
    left:50%;
    bottom:30px;
    transform:translateX(-50%);
    color:#fff;
    font-size:14px;
    font-weight:700;
    letter-spacing:.08em;
}

@media(max-width:1100px){
    .nsg-slide{width:285px;height:420px}
    .nsg-gallery-grid{grid-template-columns:repeat(3,1fr)}
}

@media(max-width:900px){
    .nsg-showcase{min-height:650px}
    .nsg-showcase-inner{padding:45px 18px 85px}
    .nsg-gallery-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:180px}
}

@media(max-width:600px){
    .nsg-showcase{min-height:610px}
    .nsg-showcase-background{filter:blur(3px) saturate(1.05);opacity:.78}
    .nsg-slide{height:405px;width:270px}
    .nsg-nav{width:42px;height:42px}
    .nsg-card-title h3{font-size:24px}
    .nsg-single-hero{min-height:480px}
    .nsg-single-container{padding-top:60px}
    .nsg-gallery-grid{grid-template-columns:1fr 1fr;grid-auto-rows:145px;gap:9px}
    .nsg-gallery-item:first-child{grid-column:span 2;grid-row:span 2}
    .nsg-map-wrap iframe{height:360px}
    .nsg-lightbox{padding:15px 8px}
    .nsg-lightbox-stage{width:94vw;height:82vh}
    .nsg-lightbox-prev{left:5px}
    .nsg-lightbox-next{right:5px}
}

/* =====================================================
   INDIVIDUAL SITE NAVIGATOR
   Same carousel concept remains available on every site page.
===================================================== */
.nsg-site-navigator{
    background:#102b43;
    padding:55px 0 65px;
    overflow:hidden;
}

.nsg-site-navigator-inner{
    width:min(1280px,calc(100% - 40px));
    margin:0 auto;
}

.nsg-navigator-heading{
    margin-bottom:22px;
}

.nsg-navigator-heading span{
    color:#f3a126;
    font-size:12px;
    font-weight:800;
    letter-spacing:.16em;
    text-transform:uppercase;
}

.nsg-navigator-heading h2{
    margin:7px 0 0;
    color:#fff;
    font-size:clamp(26px,3vw,38px);
}

.nsg-site-swiper{
    position:relative;
    padding:22px 42px 38px;
    overflow:hidden;
}

.nsg-site-nav-slide{
    width:235px;
    opacity:.52;
    transition:opacity .45s ease,transform .45s ease;
}

.nsg-site-nav-slide.swiper-slide-active,
.nsg-site-nav-slide.is-current{
    opacity:1;
}

.nsg-site-nav-card{
    display:block;
    height:295px;
    overflow:hidden;
    border-radius:20px;
    background:#17384f;
    border:1px solid rgba(255,255,255,.18);
    color:#fff;
    text-decoration:none;
    box-shadow:0 18px 40px rgba(0,0,0,.22);
    transition:transform .4s ease,box-shadow .4s ease,border-color .4s ease;
}

.nsg-site-nav-slide.swiper-slide-active .nsg-site-nav-card{
    transform:translateY(-6px);
    border-color:#f3a126;
    box-shadow:0 24px 55px rgba(0,0,0,.35);
}

.nsg-site-nav-image{
    height:190px;
    background:#243f52;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
}

.nsg-site-nav-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:transform .6s ease;
}

.nsg-site-nav-slide:hover .nsg-site-nav-image img{
    transform:scale(1.06);
}

.nsg-site-nav-content{
    padding:15px 17px;
}

.nsg-site-nav-content small{
    display:block;
    margin-bottom:5px;
    color:#cbd9d5;
    font-size:10px;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.nsg-site-nav-content strong{
    display:block;
    color:#fff;
    font-size:17px;
    line-height:1.15;
}

.nsg-site-nav-prev,
.nsg-site-nav-next{
    width:42px;
    height:42px;
    margin-top:-21px;
    border-radius:50%;
    background:#fff;
    color:#17654c;
    box-shadow:0 10px 25px rgba(0,0,0,.22);
}

.nsg-site-nav-prev::after,
.nsg-site-nav-next::after{
    font-size:15px;
    font-weight:900;
}

/* Gallery polish */
.nsg-gallery-item{position:relative}
.nsg-gallery-expand{
    position:absolute;
    right:12px;
    bottom:10px;
    width:32px;
    height:32px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:rgba(0,0,0,.52);
    color:#fff;
    font-size:16px;
    opacity:0;
    transition:opacity .25s ease,transform .25s ease;
    z-index:2;
}
.nsg-gallery-item:hover .nsg-gallery-expand{opacity:1;transform:scale(1.05)}

@media(max-width:700px){
    .nsg-site-navigator{padding:42px 0 50px}
    .nsg-site-swiper{padding-left:8px;padding-right:8px}
    .nsg-site-nav-slide{width:210px}
    .nsg-site-nav-card{height:270px}
    .nsg-site-nav-image{height:170px}
}