/* =========================================================
   GORKHA KANCHAN VIEW HOMESTAY
   Main stylesheet
   ========================================================= */

:root
{
    --forest: #0b3024;
    --forest-dark: #062219;
    --cream: #f4efe5;
    --paper: #fbf9f4;
    --gold: #c9953e;
    --gold-light: #e4bd71;
    --ink: #13211b;
    --muted: #66716b;
    --white: #ffffff;
    --rail-width: 212px;
    --ease: cubic-bezier(.2,.8,.2,1);
}

*
{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html
{
    scroll-behavior: smooth;
}

body
{
    font-family: "DM Sans", sans-serif;
    color: var(--ink);
    background: var(--paper);
    line-height: 1.6;
    overflow-x: hidden;
}

    body.menu-open
    {
        overflow: hidden;
    }

a
{
    color: inherit;
    text-decoration: none;
}

button
{
    font: inherit;
}

.skip-link
{
    position: fixed;
    left: 1rem;
    top: -100px;
    z-index: 9999;
    background: var(--gold);
    color: #111;
    padding: .7rem 1rem;
}

    .skip-link:focus
    {
        top: 1rem;
    }

.site-header
{
    min-height: 100vh;
    position: relative;
    background: var(--forest);
}

.side-rail
{
    width: var(--rail-width);
    height: 100vh;
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 50;
    color: var(--white);
    background: linear-gradient(rgba(6,34,25,.95), rgba(6,34,25,.98));
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.brand
{
    height: 250px;
    padding: 25px 20px 20px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .brand a
    {
        display: block;
    }
.brand-logo
{
    display: block;
    width: 155px;
    margin: 0 auto;
}

    .brand-logo img
    {
        display: block;
        width: 100%;
        height: auto;
    }
.brand-mark svg
{
    width: 100px;
    height: 58px;
    fill: none;
    stroke: var(--gold-light);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.brand-name
{
    display: block;
    font-family: "Playfair Display", serif;
    font-size: 20px;
    line-height: 1.08;
    letter-spacing: .02em;
}

.brand-sub
{
    display: block;
    margin-top: 5px;
    font-size: 11px;
    letter-spacing: .38em;
    color: var(--gold-light);
}

.brand-location
{
    display: inline-block;
    margin-top: 13px;
    padding-top: 10px;
    border-top: 1px solid rgba(228,189,113,.6);
    font-size: 9px;
    letter-spacing: .35em;
}

.desktop-nav
{
    flex: 1;
    display: flex;
    flex-direction: column;
}

.nav-link
{
    min-height: 53px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    gap: 17px;
    border-left: 4px solid transparent;
    color: rgba(255,255,255,.82);
    font-size: 13px;
    transition: .3s var(--ease);
}

    .nav-link:hover,
    .nav-link.active
    {
        color: var(--white);
        background: rgba(255,255,255,.055);
        border-left-color: var(--gold);
    }

.nav-icon
{
    width: 20px;
    color: var(--gold-light);
    font-size: 21px;
    text-align: center;
}

.rail-footer
{
    min-height: 150px;
    padding: 0 30px 24px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background: linear-gradient(to top, rgba(5,28,21,.95), transparent), url("../images/mountain-silhouette.svg") bottom/100% auto no-repeat;
}

.rail-line
{
    width: 35px;
    height: 1px;
    background: var(--gold);
    margin-bottom: 15px;
}

.rail-footer p
{
    font-family: "Playfair Display", serif;
    font-style: italic;
    font-size: 18px;
    line-height: 1.25;
    color: rgba(255,255,255,.7);
}

.hero
{
    min-height: 100vh;
    margin-left: var(--rail-width);
    position: relative;
    overflow: hidden;
    isolation: isolate;
    display: flex;
    align-items: center;
}

.hero-image
{
    position: absolute;
    inset: 0;
    z-index: -3;
    background: linear-gradient(90deg, rgba(247,240,225,.96) 0%, rgba(247,240,225,.83) 27%, rgba(247,240,225,.08) 68%, rgba(6,27,20,.2) 100%), url("../images/hero.jpg") center/cover no-repeat;
    transform: scale(1.01);
}

.hero-overlay
{
    position: absolute;
    inset: 0;
    z-index: -2;
    background: linear-gradient(180deg, rgba(3,20,14,.14), transparent 38%, rgba(3,20,14,.28));
    pointer-events: none;
}

.hero-content
{
    width: min(720px, 62%);
    margin-left: clamp(42px, 8vw, 125px);
    padding: 120px 0 100px;
}

.eyebrow
{
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 34px;
    font-size: 11px;
    letter-spacing: .34em;
    font-weight: 600;
    color: #26372f;
}

.pin
{
    font-size: 20px;
    color: var(--gold);
}

.display-kicker
{
    margin-bottom: 4px;
    font-size: 12px;
    letter-spacing: .25em;
    text-transform: uppercase;
    color: #5b5548;
}

.hero h1
{
    max-width: 700px;
    font-family: "Playfair Display", serif;
    font-size: clamp(64px, 7vw, 112px);
    font-weight: 500;
    letter-spacing: -.055em;
    line-height: .86;
    color: #103225;
}

    .hero h1 span
    {
        display: block;
        margin-left: .18em;
        color: #7d4e13;
    }

.heading-rule
{
    width: 80px;
    height: 1px;
    background: #7d4e13;
    margin: 34px 0 20px;
}

.seo-heading h2
{
    max-width: 590px;
    font-family: "Playfair Display", serif;
    font-size: clamp(25px, 2.2vw, 36px);
    font-weight: 500;
    line-height: 1.1;
    color: #122b20;
}

.seo-heading p
{
    max-width: 560px;
    margin-top: 12px;
    font-size: 16px;
    color: #28382f;
}

.hero-actions
{
    display: flex;
    gap: 13px;
    margin-top: 29px;
    flex-wrap: wrap;
}

.btn
{
    min-height: 54px;
    padding: 0 24px;
    border-radius: 40px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}

    .btn:hover
    {
        transform: translateY(-3px);
        box-shadow: 0 12px 25px rgba(0,0,0,.15);
    }

    .btn b
    {
        margin-left: 9px;
        font-size: 19px;
        font-weight: 400;
    }

.btn-primary
{
    color: white;
    background: #bb8733;
}

.btn-whatsapp
{
    color: white;
    background: #14753e;
}

.hero-contact
{
    position: absolute;
    top: 28px;
    right: 28px;
    z-index: 3;
    min-height: 48px;
    padding: 0 22px;
    border: 1px solid rgba(255,255,255,.85);
    border-radius: 30px;
    display: flex;
    align-items: center;
    gap: 11px;
    color: white;
    background: rgba(15,31,25,.18);
    backdrop-filter: blur(9px);
    font-size: 11px;
    letter-spacing: .02em;
}

    .hero-contact a:hover
    {
        color: var(--gold-light);
    }

    .hero-contact i
    {
        width: 1px;
        height: 14px;
        background: rgba(255,255,255,.6);
    }

.phone-symbol
{
    color: white;
}

.address-card
{
    position: absolute;
    right: 30px;
    bottom: 28px;
    z-index: 3;
    min-width: 340px;
    padding: 15px 18px;
    border-radius: 50px;
    color: white;
    background: rgba(20,25,21,.57);
    backdrop-filter: blur(12px);
    display: flex;
    align-items: center;
    gap: 14px;
    transition: .3s var(--ease);
}

    .address-card:hover
    {
        background: rgba(20,25,21,.78);
        transform: translateY(-2px);
    }

.address-icon
{
    width: 40px;
    height: 40px;
    border: 1px solid var(--gold-light);
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: var(--gold-light);
    font-size: 21px;
}

.address-card span:nth-child(2)
{
    display: flex;
    flex-direction: column;
}

.address-card strong
{
    font-size: 11px;
}

.address-card small
{
    margin-top: 2px;
    color: rgba(255,255,255,.75);
    font-size: 10px;
}

.address-card b
{
    margin-left: auto;
    color: var(--gold-light);
    font-size: 23px;
    font-weight: 400;
}

.scroll-cue
{
    position: absolute;
    bottom: 31px;
    left: 5%;
    display: flex;
    align-items: center;
    gap: 14px;
    color: rgba(20,39,30,.8);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .28em;
}

.scroll-mouse
{
    width: 25px;
    height: 43px;
    border: 1px solid currentColor;
    border-radius: 20px;
    position: relative;
}

    .scroll-mouse i
    {
        position: absolute;
        left: 50%;
        top: 7px;
        width: 4px;
        height: 8px;
        transform: translateX(-50%);
        border-radius: 4px;
        background: currentColor;
        animation: scrollDot 1.8s infinite;
    }

@keyframes scrollDot
{
    0%,100%
    {
        opacity: 0;
        transform: translate(-50%,0);
    }

    25%
    {
        opacity: 1;
    }

    75%
    {
        opacity: 1;
        transform: translate(-50%,15px);
    }
}

.mobile-header, .mobile-menu
{
    display: none;
}

.section
{
    padding: clamp(80px, 9vw, 145px) clamp(25px, 8vw, 130px);
}

.section-label
{
    font-size: 10px;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: #8c6630;
    font-weight: 700;
}

.intro-section
{
    background: var(--paper);
}

.intro-grid
{
    max-width: 1100px;
    margin: 35px auto 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 100px;
}

.overline
{
    margin-bottom: 12px;
    font-size: 11px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--muted);
}

.intro-grid h2,
.section-heading h2,
.location-section h2,
.contact-card h2
{
    font-family: "Playfair Display", serif;
    font-size: clamp(45px, 5vw, 74px);
    line-height: .98;
    font-weight: 500;
    letter-spacing: -.04em;
}

em
{
    color: #8a5a1d;
    font-style: italic;
}

.lead
{
    font-family: "Playfair Display", serif;
    font-size: 24px;
    line-height: 1.35;
    margin-bottom: 22px;
}

.intro-grid p:not(.overline):not(.lead)
{
    color: var(--muted);
    max-width: 580px;
}

.text-link
{
    display: inline-flex;
    gap: 18px;
    margin-top: 25px;
    padding-bottom: 5px;
    border-bottom: 1px solid #9b7a47;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

    .text-link span
    {
        font-size: 18px;
        line-height: .7;
    }

.rooms-section
{
    background: #efe8da;
}

.section-heading
{
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 40px;
    margin-bottom: 55px;
}

    .section-heading > p
    {
        max-width: 330px;
        color: var(--muted);
    }

.room-grid
{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    max-width: 1250px;
    margin: auto;
}

.room-card
{
    background: var(--paper);
    transition: transform .35s var(--ease);
}

    .room-card:hover
    {
        transform: translateY(-8px);
    }

    .room-card.featured
    {
        transform: translateY(-20px);
    }

        .room-card.featured:hover
        {
            transform: translateY(-28px);
        }

.room-image
{
    height: 330px;
    background-size: cover;
    background-position: center;
}

.room-one
{
    background-image: url("../images/room-standard.jpg");
}

.room-two
{
    background-image: url("../images/room-deluxe.jpg");
}

.room-three
{
    background-image: url("../images/room-family.jpg");
}

.room-body
{
    padding: 25px;
}

    .room-body > span
    {
        font-size: 10px;
        color: var(--gold);
        letter-spacing: .15em;
    }

    .room-body h3
    {
        margin: 5px 0 8px;
        font-family: "Playfair Display", serif;
        font-size: 28px;
        font-weight: 500;
    }

    .room-body p
    {
        min-height: 51px;
        color: var(--muted);
        font-size: 13px;
    }

    .room-body a
    {
        display: inline-flex;
        gap: 12px;
        margin-top: 20px;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .12em;
    }

.feature-strip
{
    background: var(--forest);
    color: white;
}

.feature-grid
{
    margin-top: 55px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    border-top: 1px solid rgba(255,255,255,.18);
}

.feature
{
    min-height: 230px;
    padding: 25px 20px;
    border-right: 1px solid rgba(255,255,255,.18);
}

    .feature:last-child
    {
        border-right: 0;
    }

    .feature span
    {
        color: var(--gold-light);
        font-size: 10px;
    }

    .feature h3
    {
        margin: 60px 0 10px;
        font-family: "Playfair Display", serif;
        font-size: 24px;
        font-weight: 500;
    }

    .feature p
    {
        color: rgba(255,255,255,.62);
        font-size: 12px;
    }

.places-section
{
    background: var(--paper);
}

.places-list
{
    max-width: 1250px;
    margin: auto;
    border-top: 1px solid #d8d0c2;
}

    .places-list > div
    {
        min-height: 72px;
        display: grid;
        grid-template-columns: 70px 1fr 190px;
        align-items: center;
        border-bottom: 1px solid #d8d0c2;
    }

    .places-list span
    {
        color: var(--gold);
        font-size: 11px;
    }

    .places-list strong
    {
        font-family: "Playfair Display", serif;
        font-size: 22px;
        font-weight: 500;
    }

    .places-list small
    {
        color: var(--muted);
        font-size: 11px;
    }

.gallery-section
{
    background: #e9e1d2;
}

.gallery-placeholder
{
    max-width: 1250px;
    min-height: 520px;
    margin: auto;
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 15px;
}

.gallery-main
{
    min-height: 520px;
    display: grid;
    place-items: center;
    background: #d0c5b2;
    color: #716a5f;
    letter-spacing: .2em;
    font-size: 11px;
}

.gallery-side
{
    display: grid;
    grid-template-rows: repeat(3, 1fr);
    gap: 15px;
}

    .gallery-side span
    {
        display: grid;
        place-items: center;
        background: #c3b6a1;
        color: #665f54;
        font-size: 11px;
        letter-spacing: .2em;
    }

.contact-section
{
    background: var(--paper);
}

.contact-card
{
    max-width: 1100px;
    margin: auto;
    padding: clamp(35px, 6vw, 80px);
    color: white;
    background: var(--forest);
    display: grid;
    grid-template-columns: 1fr .7fr;
    gap: 70px;
}

    .contact-card em
    {
        color: var(--gold-light);
    }

.contact-info
{
    align-self: end;
}

    .contact-info p
    {
        color: rgba(255,255,255,.65);
        margin-bottom: 20px;
    }

    .contact-info > a:not(.contact-whatsapp)
    {
        display: block;
        font-family: "Playfair Display", serif;
        font-size: 25px;
        margin-bottom: 5px;
    }

.contact-whatsapp
{
    display: inline-block;
    margin-top: 20px;
    color: var(--gold-light);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.location-section
{
    background: #e9e1d2;
    text-align: center;
}

    .location-section h2
    {
        margin: 25px 0 20px;
    }

    .location-section p
    {
        color: var(--muted);
    }

.site-footer
{
    padding: 35px 6%;
    color: rgba(255,255,255,.7);
    background: var(--forest-dark);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

    .site-footer strong
    {
        display: block;
        color: white;
        font-family: "Playfair Display", serif;
        letter-spacing: .06em;
    }

    .site-footer span
    {
        font-size: 9px;
        letter-spacing: .2em;
        color: var(--gold-light);
    }

    .site-footer p
    {
        font-size: 10px;
    }

@media (max-width: 1100px)
{
    :root
    {
        --rail-width: 180px;
    }

    .brand-name
    {
        font-size: 17px;
    }

    .nav-link
    {
        padding-left: 14px;
        gap: 11px;
    }

    .hero-content
    {
        width: 72%;
        margin-left: 7%;
    }

    .hero h1
    {
        font-size: clamp(58px, 7vw, 88px);
    }

    .hero-contact
    {
        right: 20px;
    }

        .hero-contact a:nth-of-type(n+2), .hero-contact i
        {
            display: none;
        }

    .feature-grid
    {
        grid-template-columns: repeat(3, 1fr);
    }

    .feature:nth-child(3)
    {
        border-right: 0;
    }
}

@media (max-width: 800px)
{
    .side-rail
    {
        display: none;
    }

    .mobile-header
    {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        z-index: 100;
        height: 76px;
        padding: 0 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: white;
    }

    .mobile-brand
    {
        font-family: "Playfair Display", serif;
        font-size: 16px;
        line-height: 1;
        text-shadow: 0 2px 12px rgba(0,0,0,.35);
    }

        .mobile-brand span
        {
            color: var(--gold-light);
        }

    .menu-toggle
    {
        width: 48px;
        height: 48px;
        border: 1px solid rgba(255,255,255,.8);
        border-radius: 50%;
        background: rgba(0,0,0,.18);
        backdrop-filter: blur(8px);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 5px;
        cursor: pointer;
    }

        .menu-toggle span
        {
            width: 18px;
            height: 1px;
            background: white;
            transition: .25s;
        }

    .mobile-menu
    {
        position: fixed;
        inset: 0;
        z-index: 90;
        padding: 100px 35px 40px;
        background: rgba(6,34,25,.98);
        display: none;
    }

        .mobile-menu.open
        {
            display: block;
        }

        .mobile-menu nav
        {
            display: grid;
        }

        .mobile-menu a
        {
            padding: 15px 0;
            border-bottom: 1px solid rgba(255,255,255,.12);
            color: white;
            font-family: "Playfair Display", serif;
            font-size: 28px;
        }
    /* =========================================================
   HERO
========================================================= */
    .hero
    {
        min-height: 100vh;
        margin-left: 0;
        position: relative;
        overflow: hidden;
        isolation: isolate;
        display: flex;
        align-items: center;
    }

    .hero-image
    {
        background: linear-gradient(90deg, rgba(247,240,225,.9), rgba(247,240,225,.28) 90%), url("../images/hero.jpg") center/cover no-repeat;
    }

    .hero-content
    {
        width: 90%;
        margin: 0 auto;
        padding: 120px 0 100px;
    }

    .eyebrow
    {
        margin-bottom: 22px;
        font-size: 9px;
        letter-spacing: .2em;
    }

    .display-kicker
    {
        font-size: 10px;
    }

    .hero h1
    {
        font-size: clamp(53px, 15vw, 78px);
    }

    .seo-heading h2
    {
        font-size: 25px;
    }

    .seo-heading p
    {
        font-size: 14px;
    }

    .hero-actions
    {
        gap: 9px;
    }

    .btn
    {
        min-height: 48px;
        padding: 0 16px;
        font-size: 10px;
    }

    .hero-contact
    {
        top: 87px;
        right: 20px;
        min-height: 36px;
        padding: 0 13px;
        font-size: 9px;
    }

        .hero-contact .phone-symbol
        {
            display: none;
        }

    .address-card
    {
        left: 20px;
        right: 20px;
        bottom: 20px;
        min-width: 0;
        border-radius: 15px;
        padding: 11px 13px;
    }

    .scroll-cue
    {
        display: none;
    }

    .section
    {
        padding: 80px 22px;
    }

    .intro-grid, .contact-card
    {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .intro-grid
    {
        margin-top: 28px;
    }

    .lead
    {
        font-size: 20px;
    }

    .section-heading
    {
        display: block;
        margin-bottom: 35px;
    }

        .section-heading > p
        {
            margin-top: 20px;
        }

    .room-grid
    {
        grid-template-columns: 1fr;
    }

    .room-card.featured, .room-card.featured:hover
    {
        transform: none;
    }

    .room-image
    {
        height: 270px;
    }

    .feature-grid
    {
        grid-template-columns: 1fr 1fr;
    }

    .feature:nth-child(2n)
    {
        border-right: 0;
    }

    .feature
    {
        min-height: 200px;
    }

        .feature h3
        {
            margin-top: 45px;
        }

    .places-list > div
    {
        grid-template-columns: 42px 1fr;
        padding: 14px 0;
    }

    .places-list small
    {
        grid-column: 2;
    }

    .gallery-placeholder
    {
        grid-template-columns: 1fr;
        min-height: 600px;
    }

    .gallery-main
    {
        min-height: 360px;
    }

    .gallery-side
    {
        min-height: 220px;
    }

    .site-footer
    {
        display: block;
    }

        .site-footer p
        {
            margin-top: 18px;
        }

    main,
    .site-footer
    {
        margin-left: 0;
    }
}

@media (max-width: 480px)
{
    .hero-contact a
    {
        font-size: 8px;
    }

    .hero h1
    {
        font-size: 53px;
    }

        .hero h1 span
        {
            margin-left: .08em;
        }

    .hero-actions .btn
    {
        width: 100%;
        justify-content: center;
    }

    .feature-grid
    {
        grid-template-columns: 1fr;
    }

    .feature
    {
        border-right: 0;
        border-bottom: 1px solid rgba(255,255,255,.18);
    }

        .feature:last-child
        {
            border-bottom: 0;
        }

    .address-card strong
    {
        font-size: 9px;
    }

    .address-card small
    {
        font-size: 8px;
    }
}


/* =========================================================
   DESKTOP CONTENT OFFSET
   Keeps the fixed navigation rail from covering content.
   IMPORTANT: desktop only — do not apply to mobile/tablet.
========================================================= */

@media (min-width: 801px)
{
    main,
    .site-footer
    {
        margin-left: var(--rail-width);
    }
}

/* =========================================================
   ENHANCED PLACES, GALLERY LIGHTBOX & EXPERIENCE ICONS
========================================================= */
.places-grid
{
    max-width: 1250px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
}

.place-card
{
    background: #fff;
    border: 1px solid #ded6c8;
    overflow: hidden;
    transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}

.place-card:hover
{
    transform: translateY(-6px);
    box-shadow: 0 18px 45px rgba(31,45,37,.10);
}

.place-image
{
    height: 250px;
    position: relative;
    overflow: hidden;
    background: #d7cdbd;
}

.place-image img
{
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform .55s var(--ease);
}

.place-card:hover .place-image img
{
    transform: scale(1.05);
}

.place-image > span
{
    position: absolute;
    left: 16px;
    top: 16px;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: white;
    background: rgba(6,34,25,.85);
    font-size: 10px;
    letter-spacing: .08em;
}

.place-body
{
    padding: 24px 25px 26px;
}

.place-body h3
{
    font-family: "Playfair Display", serif;
    font-size: 25px;
    line-height: 1.15;
    font-weight: 500;
    margin-bottom: 10px;
}

.place-body p
{
    color: var(--muted);
    font-size: 13px;
    line-height: 1.7;
    min-height: 66px;
}

.place-body small
{
    display: inline-block;
    margin-top: 15px;
    color: var(--gold);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.feature
{
    position: relative;
    overflow: hidden;
}

.feature::before
{
    content: "";
    position: absolute;
    top: 22px;
    right: 18px;
    width: 64px;
    height: 64px;
    border: 1px solid rgba(228,189,113,.28);
    border-radius: 50%;
}

.feature-icon
{
    width: 48px;
    height: 48px;
    margin-top: 8px;
    display: grid;
    place-items: center;
    color: var(--gold-light);
    border: 1px solid rgba(228,189,113,.55);
    border-radius: 50%;
    font-size: 21px;
}

.feature h3
{
    margin-top: 25px;
}

.gallery-main,
.gallery-side a
{
    position: relative;
    display: block;
    overflow: hidden;
    cursor: zoom-in;
    text-decoration: none;
}

.gallery-main img,
.gallery-side a img
{
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform .5s var(--ease), filter .35s ease;
}

.gallery-main:hover img,
.gallery-side a:hover img
{
    transform: scale(1.04);
    filter: brightness(.82);
}

.gallery-main .gallery-caption,
.gallery-side a span
{
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 18px;
    color: white;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .16em;
    text-shadow: 0 2px 10px rgba(0,0,0,.55);
}

.gallery-main .gallery-caption b,
.gallery-side a span b
{
    float: right;
    font-size: 17px;
    font-weight: 400;
}

.gallery-modal
{
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 40px 80px;
    background: rgba(4,17,12,.94);
}

.gallery-modal.open
{
    display: flex;
}

.gallery-modal figure
{
    max-width: min(1100px, 92vw);
    max-height: 88vh;
    margin: 0;
    text-align: center;
}

.gallery-modal figure img
{
    max-width: 100%;
    max-height: 78vh;
    display: block;
    object-fit: contain;
    margin: auto;
    box-shadow: 0 25px 70px rgba(0,0,0,.4);
}

.gallery-modal figcaption
{
    margin-top: 14px;
    color: rgba(255,255,255,.8);
    font-size: 11px;
    letter-spacing: .15em;
    text-transform: uppercase;
}

.gallery-close,
.gallery-prev,
.gallery-next
{
    position: absolute;
    border: 1px solid rgba(255,255,255,.4);
    background: rgba(255,255,255,.08);
    color: white;
    cursor: pointer;
    border-radius: 50%;
    display: grid;
    place-items: center;
    transition: .25s ease;
}

.gallery-close:hover,
.gallery-prev:hover,
.gallery-next:hover
{
    background: var(--gold);
    color: #111;
    border-color: var(--gold);
}

.gallery-close
{
    top: 25px;
    right: 25px;
    width: 48px;
    height: 48px;
    font-size: 28px;
}

.gallery-prev,
.gallery-next
{
    top: 50%;
    transform: translateY(-50%);
    width: 52px;
    height: 52px;
    font-size: 35px;
}

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

body.lightbox-open
{
    overflow: hidden;
}

@media (max-width: 800px)
{
    .places-grid
    {
        grid-template-columns: 1fr;
    }

    .place-image
    {
        height: 230px;
    }

    .place-body p
    {
        min-height: 0;
    }

    .feature-icon
    {
        margin-top: 5px;
    }

    .feature h3
    {
        margin-top: 20px;
    }

    .gallery-modal
    {
        padding: 60px 18px 30px;
    }

    .gallery-prev,
    .gallery-next
    {
        width: 42px;
        height: 42px;
        font-size: 28px;
    }

    .gallery-prev { left: 12px; }
    .gallery-next { right: 12px; }
}
/* =========================================================
   FLOATING CALL & WHATSAPP BUTTONS
========================================================= */

.floating-contact
{
    position: fixed;
    right: 22px;
    bottom: 25px;
    z-index: 999;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.floating-btn
{
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #ffffff;
    box-shadow: 0 8px 25px rgba(0,0,0,.22);
    transition: all .3s ease;
    overflow: hidden;
}

.floating-icon
{
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 21px;
}

.floating-text
{
    display: none;
    white-space: nowrap;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding-right: 17px;
}

.floating-call
{
    background: var(--forest);
}

.floating-whatsapp
{
    background: #25D366;
}

.floating-btn:hover
{
    width: 135px;
    border-radius: 30px;
    color: #ffffff;
    transform: translateY(-3px);
}

    .floating-btn:hover .floating-text
    {
        display: block;
    }

.floating-call:hover
{
    background: var(--forest-dark);
}

.floating-whatsapp:hover
{
    background: #20bd5a;
}

/* Mobile */
@media (max-width: 800px)
{
    .floating-contact
    {
        right: 15px;
        bottom: 18px;
        gap: 10px;
    }

    .floating-btn
    {
        width: 48px;
        height: 48px;
    }

    .floating-icon
    {
        width: 48px;
        height: 48px;
        font-size: 19px;
    }

    .floating-btn:hover
    {
        width: 48px;
        border-radius: 50%;
        transform: none;
    }

        .floating-btn:hover .floating-text
        {
            display: none;
        }
}