/* =========================================================
   SANTE BEAUTY — GALERIE
   CLEAN FINAL CSS
   ========================================================= */

:root{
    --g-brown:#5b4030;
    --g-cocoa:#4b3428;
    --g-gold:#a77752;
    --g-cream:#f8f2eb;
    --g-paper:#fffdf9;
    --g-line:#eaded3;
    --g-muted:#7c6e64;
}


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

.gallery-page{
    width:100%;
    background:#fff;
    color:var(--g-cocoa);
    overflow:visible;
}


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

.gallery-hero{
    position:relative;
    width:100%;
    overflow:hidden;
    isolation:isolate;
    text-align:center;

    background:
        radial-gradient(
            circle at 10% 30%,
            rgba(186,151,120,.12),
            transparent 25%
        ),
        radial-gradient(
            circle at 90% 22%,
            rgba(190,155,125,.13),
            transparent 22%
        ),
        linear-gradient(
            120deg,
            #fbf6f0,
            #fffdf9 52%,
            #f4e9df
        );
}


/* decorative circles */

.gallery-hero::before,
.gallery-hero::after{
    content:"";
    position:absolute;

    width:380px;
    height:380px;

    border:1px solid rgba(169,119,82,.12);
    border-radius:50%;

    pointer-events:none;
    z-index:0;
}

.gallery-hero::before{
    left:-230px;
    top:-190px;
}

.gallery-hero::after{
    right:-230px;
    bottom:-250px;
}


/* HERO CONTENT */

.gallery-hero-inner{
    position:relative;
    z-index:3;

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

    box-sizing:border-box;

    margin:0 auto;
    padding:70px 24px 46px;
}


/* KICKER */

.gallery-kicker{
    font:500 10px/1 "DM Sans",sans-serif;
    letter-spacing:5px;
    text-transform:uppercase;

    color:#9c6e4d;
}


/* TITLE */

.gallery-hero h1{
    margin:18px 0 8px;

    font:400 clamp(52px,6vw,86px)/.98
        "Playfair Display",serif;

    color:#493329;
}


/* SUBTITLE */

.gallery-hero p{
    margin:0;

    font:400 17px/1.5
        "Playfair Display",serif;

    color:#6d584a;
}


/* SANTE BEAUTY BERLIN */

.gallery-brand{
    display:flex;
    align-items:center;
    justify-content:center;

    gap:15px;
    margin-top:20px;

    font:500 9px/1
        "DM Sans",sans-serif;

    letter-spacing:4px;

    color:#a17455;
}

.gallery-brand i{
    display:block;

    width:38px;
    height:1px;

    background:#d8c2af;
}


/* =========================================================
   FLOWERS
   ========================================================= */

.gallery-hero-flower{
    position:absolute;

    display:block;

    height:auto;

    object-fit:contain;

    pointer-events:none;
    user-select:none;

    z-index:1;
}


/* LEFT FLOWER */

.gallery-flower-left{
    width:340px;

    left:-70px;
    top:20px;

    opacity:.32;
}


/* RIGHT FLOWER */

.gallery-flower-right{
    width:350px;

    right:-55px;
    top:5px;

    opacity:.45;
}


/* =========================================================
   BEAUTY IS A FEELING — DESKTOP
   ========================================================= */

.gallery-script{
    position:absolute;

    left:55px;
    right:auto;

    top:50%;

    width:max-content;
    margin:0;

    font:400 42px/1
        "Allura",cursive;

    color:#b08363;

    transform:
        translateY(-50%)
        rotate(-7deg);

    white-space:nowrap;

    z-index:5;
}


/* =========================================================
   GALLERY CONTENT
   ========================================================= */

.gallery-content{
    width:100%;
    max-width:none;

    box-sizing:border-box;

    margin:0;
    padding:0 14px 20px;

    overflow:visible;
}


/* =========================================================
   FILTER BAR
   ========================================================= */

.gallery-filters{
    position:sticky;

    /* desktop header */
    top:72px;

    z-index:900;

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

    flex-wrap:nowrap;

    gap:12px;

    width:100%;
    box-sizing:border-box;

    padding:18px 10px;

    background:rgba(255,253,249,.96);

    -webkit-backdrop-filter:blur(14px);
    backdrop-filter:blur(14px);

    border-bottom:
        1px solid rgba(169,119,82,.12);

    box-shadow:
        0 8px 25px rgba(75,52,40,.05);
}


/* FILTER BUTTON */

.gallery-filters button{
    flex:0 0 auto;

    border:0;

    padding:11px 25px;

    border-radius:30px;

    background:#f6eee7;

    color:#725c4d;

    font:500 10px/1
        "DM Sans",sans-serif;

    cursor:pointer;

    transition:
        transform .35s ease,
        background .35s ease,
        box-shadow .35s ease;
}

.gallery-filters button:hover{
    transform:translateY(-2px);
    background:#efe1d5;
}

.gallery-filters button.active{
    color:#fff;

    background:
        linear-gradient(
            135deg,
            #8e603f,
            #ae7b55
        );

    box-shadow:
        0 10px 28px rgba(95,63,43,.15);
}


/* =========================================================
   GALLERY GRID
   ========================================================= */

.gallery-grid{
    display:grid;

    grid-template-columns:
        repeat(4,1fr);

    grid-auto-rows:245px;
    grid-auto-flow:dense;

    gap:8px;

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

    margin:0 auto;
}


/* CARD */

.gallery-card{
    position:relative;

    overflow:hidden;

    background:#eadfd5;

    cursor:zoom-in;

    opacity:0;

    transform:
        translateY(28px);

    transition:
        opacity .85s cubic-bezier(.22,.61,.36,1),
        transform .85s cubic-bezier(.22,.61,.36,1);
}

.gallery-card.gallery-visible{
    opacity:1;
    transform:translateY(0);
}

.gallery-card.tall{
    grid-row:span 2;
}

.gallery-card.wide{
    grid-column:span 2;
}


/* IMAGE */

.gallery-card img{
    display:block;

    width:100%;
    height:100%;

    object-fit:cover;

    transform:scale(1.025);

    transition:
        transform 1.2s cubic-bezier(.22,.61,.36,1),
        filter .7s ease;
}

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


/* DARK OVERLAY */

.gallery-card::after{
    content:"";

    position:absolute;
    inset:0;

    background:
        linear-gradient(
            180deg,
            transparent 42%,
            rgba(39,24,16,.72)
        );

    transition:
        background .45s ease;
}

.gallery-card:hover::after{
    background:
        linear-gradient(
            180deg,
            rgba(121,82,54,.03) 25%,
            rgba(39,24,16,.79)
        );
}


/* CARD TEXT */

.gallery-overlay{
    position:absolute;

    z-index:2;

    left:22px;
    right:20px;
    bottom:20px;

    display:flex;

    gap:14px;

    align-items:flex-start;

    color:#fff;

    transform:translateY(3px);

    transition:
        transform .4s ease;
}

.gallery-card:hover .gallery-overlay{
    transform:translateY(-3px);
}

.gallery-overlay > span{
    font:400 24px/1
        "Playfair Display",serif;

    color:#f3dfce;
}

.gallery-overlay b{
    display:block;

    font:500 11px/1.3
        "DM Sans",sans-serif;

    letter-spacing:1.5px;
    text-transform:uppercase;
}

.gallery-overlay p{
    margin:6px 0 0;

    font:300 10px/1.45
        "DM Sans",sans-serif;

    color:#f0e3da;
}


/* FILTER HIDDEN */

.gallery-hidden{
    display:none !important;
}


/* =========================================================
   CTA
   ========================================================= */

.gallery-cta{
    position:relative;

    text-align:center;

    padding:72px 20px 82px;

    background:
        radial-gradient(
            circle at 15% 80%,
            rgba(177,137,103,.11),
            transparent 25%
        ),
        radial-gradient(
            circle at 88% 30%,
            rgba(177,137,103,.12),
            transparent 24%
        ),
        #fbf6f0;
}

.gallery-cta h2{
    margin:20px 0 8px;

    font:400 clamp(48px,5vw,70px)/1
        "Allura",cursive;

    color:#8d6246;

    transform:rotate(-2deg);
}

.gallery-cta p{
    max-width:590px;

    margin:0 auto 25px;

    font:400 12px/1.7
        "DM Sans",sans-serif;

    color:#7c6e64;
}


/* CTA BUTTONS */

.gallery-cta-actions{
    display:flex;

    justify-content:center;

    gap:13px;

    flex-wrap:wrap;
}

.gallery-cta-actions a{
    display:inline-flex;

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

    gap:18px;

    min-width:190px;
    height:46px;

    border-radius:30px;

    font:500 10px/1
        "DM Sans",sans-serif;

    letter-spacing:.5px;

    transition:
        transform .35s ease,
        box-shadow .35s ease;
}

.gallery-instagram{
    border:1px solid #9b765d;

    color:#705544;

    background:
        rgba(255,255,255,.45);
}

.gallery-book{
    color:#fff;

    background:
        linear-gradient(
            135deg,
            #8d5e3e,
            #ad7952
        );

    box-shadow:
        0 12px 30px
        rgba(93,62,42,.16);
}

.gallery-cta-actions a:hover{
    transform:translateY(-3px);

    box-shadow:
        0 16px 35px
        rgba(93,62,42,.18);
}


/* =========================================================
   LIGHTBOX
   ========================================================= */

.gallery-lightbox{
    position:fixed;

    inset:0;

    z-index:10050;

    display:flex;

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

    padding:35px;

    background:
        rgba(28,19,14,.93);

    opacity:0;
    visibility:hidden;

    transition:.35s ease;
}

.gallery-lightbox.open{
    opacity:1;
    visibility:visible;
}

.gallery-lightbox figure{
    max-width:min(1100px,82vw);
    max-height:88vh;

    margin:0;

    text-align:center;
}

.gallery-lightbox img{
    display:block;

    max-width:100%;
    max-height:80vh;

    object-fit:contain;

    box-shadow:
        0 30px 80px
        rgba(0,0,0,.35);
}

.gallery-lightbox figcaption{
    margin-top:15px;

    font:400 12px/1
        "DM Sans",sans-serif;

    letter-spacing:2px;
    text-transform:uppercase;

    color:#ead8c8;
}


/* LIGHTBOX BUTTONS */

.lightbox-close,
.lightbox-prev,
.lightbox-next{
    position:absolute;

    border:0;

    background:transparent;

    color:#fff;

    cursor:pointer;

    font-family:"DM Sans",sans-serif;
    font-weight:300;
}

.lightbox-close{
    right:28px;
    top:20px;

    font-size:36px;
}

.lightbox-prev,
.lightbox-next{
    top:50%;

    font-size:52px;

    transform:
        translateY(-50%);
}

.lightbox-prev{
    left:24px;
}

.lightbox-next{
    right:24px;
}

body.lightbox-open{
    overflow:hidden;
}


/* =========================================================
   MOBILE BOTTOM NAV
   ========================================================= */

.gallery-bottom-nav{
    display:none;
}


/* =========================================================
   TABLET
   ========================================================= */

@media
(max-width:1000px)
and
(min-width:701px){

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

        grid-auto-rows:235px;
    }

    .gallery-script{
        left:35px;
        font-size:32px;
    }

    .gallery-flower-left{
        width:270px;
    }

    .gallery-flower-right{
        width:280px;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:700px){

    body{
        padding-bottom:70px;
    }


    /* -------------------------
       HERO MOBILE
       ------------------------- */

    .gallery-hero{
        height:auto;
        min-height:0;
    }

    .gallery-hero-inner{
        width:100%;
        max-width:none;

        margin:0;

        padding:
            27px 20px
            25px;

        box-sizing:border-box;
    }


    .gallery-kicker{
        font-size:8px;
        letter-spacing:4px;
    }


    .gallery-hero h1{
        max-width:330px;

        margin:
            13px auto 8px;

        font-size:43px;
        line-height:.95;
    }


    .gallery-hero p{
        margin:0;

        font-size:14px;
        line-height:1.4;
    }


    .gallery-brand{
        gap:9px;

        margin-top:15px;

        font-size:7px;
        letter-spacing:2.7px;
    }


    .gallery-brand i{
        width:22px;
    }


    /* -------------------------
       BEAUTY IS A FEELING MOBILE
       ------------------------- */

    .gallery-script{
        position:relative;

        left:auto;
        right:auto;
        top:auto;
        bottom:auto;

        display:block;

        width:max-content;

        max-width:90%;

        margin:
            17px auto 0;

        font:400 28px/1
            "Allura",cursive;

        color:#b08363;

        text-align:center;

        transform:
            rotate(-5deg);

        white-space:nowrap;

        z-index:5;
    }


    /* -------------------------
       FLOWERS MOBILE
       ------------------------- */

    .gallery-flower-left{
        width:155px;

        left:-42px;
        top:5px;

        opacity:.23;
    }


    .gallery-flower-right{
        width:155px;

        right:-42px;
        top:27px;

        opacity:.26;
    }


    /* -------------------------
       CONTENT
       ------------------------- */

    .gallery-content{
        width:100%;

        padding:
            0 6px 12px;

        overflow:visible;
    }


    /* -------------------------
       STICKY FILTER
       ngay dưới header SANTE
       ------------------------- */

    .gallery-filters{
        position:sticky;

        top:62px;

        z-index:9500;

        width:
            calc(100% + 12px);

        margin-left:-6px;

        display:flex;

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

        flex-wrap:nowrap;

        gap:5px;

        padding:
            9px 5px;

        box-sizing:border-box;

        overflow:hidden;

        background:
            rgba(255,253,249,.97);

        -webkit-backdrop-filter:
            blur(16px);

        backdrop-filter:
            blur(16px);

        border-bottom:
            1px solid
            rgba(169,119,82,.12);

        box-shadow:
            0 7px 20px
            rgba(75,52,40,.06);
    }


    .gallery-filters button{
        flex:
            0 1 auto;

        min-width:0;

        padding:
            8px 10px;

        white-space:nowrap;

        font-size:8px;
    }


    /* -------------------------
       MOBILE GRID
       ------------------------- */

 /* -------------------------
   MOBILE GRID — FIX
   ------------------------- */

.gallery-grid{
    grid-template-columns:repeat(2, 1fr);

    /* QUAN TRỌNG */
    grid-auto-rows:205px;

    grid-auto-flow:row dense;

    gap:5px;
}


/* CARD CAO */
.gallery-card.tall{
    grid-row:span 2;
}


/* CARD NGANG */
.gallery-card.wide{
    grid-column:1 / -1;

    height:205px;
}

    .gallery-overlay{
        left:12px;
        right:10px;
        bottom:12px;

        gap:8px;
    }


    .gallery-overlay > span{
        font-size:18px;
    }


    .gallery-overlay b{
        font-size:8px;
        letter-spacing:.8px;
    }


    .gallery-overlay p{
        margin-top:3px;
        font-size:8px;
    }


    /* -------------------------
       CTA MOBILE
       ------------------------- */

    .gallery-cta{
        padding:
            52px 20px 105px;
    }


    .gallery-cta h2{
        margin-top:17px;
        font-size:46px;
    }


    .gallery-cta p{
        max-width:300px;
        font-size:10px;
    }


    .gallery-cta-actions{
        flex-direction:column;
        align-items:center;
    }


    .gallery-cta-actions a{
        width:min(290px,86vw);
    }


    /* -------------------------
       LIGHTBOX MOBILE
       ------------------------- */

    .gallery-lightbox{
        padding:
            55px 14px 90px;
    }


    .gallery-lightbox figure{
        max-width:100%;
    }


    .gallery-lightbox img{
        max-height:72vh;
    }


    .lightbox-prev{
        left:8px;
    }


    .lightbox-next{
        right:8px;
    }


    .lightbox-prev,
    .lightbox-next{
        font-size:38px;
    }


    .lightbox-close{
        right:14px;
        top:12px;
    }


    /* =====================================================
       MOBILE BOTTOM NAV
       ===================================================== */

    .gallery-bottom-nav{
        position:fixed;

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

        z-index:9998;

        display:grid;

        grid-template-columns:
            repeat(5,1fr);

        height:68px;

        background:
            rgba(255,252,248,.98);

        border-top:
            1px solid #eadfd5;

        box-shadow:
            0 -5px 22px
            rgba(70,48,33,.06);
    }


    .gallery-bottom-nav > a{
        display:flex;

        flex-direction:column;

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

        gap:4px;

        color:#6d5c51;

        font:500 8px/1
            "DM Sans",sans-serif;
    }


    .gallery-bottom-nav > a.active{
        color:#956847;
    }


    .gallery-bottom-nav svg{
        width:21px;
        height:21px;

        fill:none;

        stroke:currentColor;

        stroke-width:1.45;

        stroke-linecap:round;
        stroke-linejoin:round;
    }


    /* CENTER BOOKING */

    .gallery-bottom-nav .book{
        position:relative;

        padding-top:3px;
    }


    .gallery-bottom-nav .book i{
        display:flex;

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

        width:48px;
        height:48px;

        margin-top:-24px;

        border:
            5px solid #fff;

        border-radius:50%;

        background:#986b47;

        color:#fff;

        box-shadow:
            0 6px 18px
            rgba(78,52,36,.18);
    }


    .gallery-bottom-nav .book svg{
        width:22px;
        height:22px;
    }
}


/* =========================================================
   ACCESSIBILITY — REDUCED MOTION
   ========================================================= */

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

    .gallery-card{
        opacity:1;
        transform:none;
        transition:none;
    }

    .gallery-card img,
    .gallery-cta-actions a,
    .gallery-filters button{
        transition:none !important;
    }
}

/* =====================================================
   SANTE GALLERY — MOBILE FINAL OVERRIDE
   CHỈ ĐIỆN THOẠI
   ===================================================== */

@media (max-width:700px){

    /* Cho sticky hoạt động */
    html,
    body{
        overflow-x:hidden !important;
        overflow-y:visible !important;
    }

    .gallery-page{
        overflow:visible !important;
    }

    .gallery-content{
        position:relative !important;

        width:100% !important;
        max-width:none !important;

        margin:0 !important;
        padding:0 6px 12px !important;

        overflow:visible !important;
    }


    /* ===== HERO GỌN ===== */

    .gallery-hero{
        position:relative !important;
        height:auto !important;
        min-height:0 !important;
        overflow:hidden !important;
    }

    .gallery-hero-inner{
        width:100% !important;
        max-width:none !important;
        height:auto !important;

        margin:0 !important;
        padding:26px 20px 24px !important;

        box-sizing:border-box !important;
    }

    .gallery-hero h1{
        max-width:330px !important;

        margin:13px auto 8px !important;

        font-size:43px !important;
        line-height:.96 !important;
    }

    .gallery-hero p{
        margin:0 !important;
        font-size:14px !important;
    }

    .gallery-brand{
        margin-top:15px !important;
    }


    /* Beauty is a feeling nằm giữa */

    .gallery-script{
        position:relative !important;

        left:auto !important;
        right:auto !important;
        top:auto !important;
        bottom:auto !important;

        display:block !important;

        width:fit-content !important;
        max-width:90% !important;

        margin:16px auto 0 !important;

        text-align:center !important;

        font-size:28px !important;

        transform:rotate(-5deg) !important;

        white-space:nowrap !important;
    }


    /* ===== HOA ===== */

    .gallery-flower-left{
        width:155px !important;

        left:-42px !important;
        top:5px !important;

        opacity:.23 !important;
    }

    .gallery-flower-right{
        width:155px !important;

        right:-42px !important;
        top:25px !important;

        opacity:.26 !important;
    }


    /* =============================================
       FILTER STICKY
       ============================================= */


    /* GRID không ảnh hưởng sticky */

    .gallery-grid{
        position:relative !important;

        width:100% !important;

        margin:0 auto !important;

        overflow:visible !important;
    }
}
/* ==========================================
   MOBILE FILTER FIXED UNDER HEADER
   ========================================== */

@media (max-width:700px){

    .gallery-filters{
        position:relative !important;
        top:auto !important;

        width:calc(100% + 12px) !important;
        margin-left:-6px !important;

        display:flex !important;
        justify-content:center !important;
        align-items:center !important;
        flex-wrap:nowrap !important;

        gap:4px !important;
        padding:9px 5px !important;

        box-sizing:border-box !important;

        background:rgba(255,253,249,.98) !important;
        border-bottom:1px solid rgba(169,119,82,.12) !important;

        z-index:9500 !important;
    }

    .gallery-filters.mobile-filter-fixed{
        position:fixed !important;

        top:62px !important;
        left:0 !important;
        right:0 !important;

        width:100% !important;
        margin:0 !important;

        z-index:9997 !important;

        box-shadow:0 7px 20px rgba(75,52,40,.08) !important;

        -webkit-backdrop-filter:blur(16px);
        backdrop-filter:blur(16px);
    }

    .gallery-filters button{
        flex:0 1 auto !important;
        min-width:0 !important;

        white-space:nowrap !important;

        padding:8px 9px !important;

        font-size:8px !important;
        line-height:1 !important;
    }

    /* giữ chỗ khi filter chuyển thành fixed */
    .gallery-filter-placeholder{
        display:none;
    }

    .gallery-filter-placeholder.active{
        display:block;
        height:51px;
    }
}
 /* =========================================================
   GALLERY CTA — SANTE PREMIUM
   ========================================================= */

.gallery-cta-services{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;

    gap:10px;

    margin:2px auto 28px;

    font:500 9px/1.4 "DM Sans",sans-serif;
    letter-spacing:2.2px;

    color:#a17455;
}

.gallery-cta-services i{
    font-style:normal;
    opacity:.5;
}


/* Instagram icon */

.gallery-instagram svg{
    width:17px;
    height:17px;

    fill:none;
    stroke:currentColor;
    stroke-width:1.5;
}


/* booking arrow */

.gallery-book-arrow{
    margin-left:8px;
    font-size:16px;
}


/* =========================================================
   BENEFITS
   ========================================================= */

.gallery-benefits{
    display:grid;

    grid-template-columns:repeat(3,1fr);

    width:min(680px,90%);
    margin:34px auto 0;
}


.gallery-benefit{
    position:relative;

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

    gap:11px;

    padding:2px 20px;

    color:#806552;
}


.gallery-benefit + .gallery-benefit::before{
    content:"";

    position:absolute;

    left:0;
    top:8%;

    width:1px;
    height:84%;

    background:rgba(167,119,82,.27);
}


.gallery-benefit svg{
    flex:0 0 auto;

    width:32px;
    height:32px;

    fill:none;

    stroke:#a77752;
    stroke-width:1.3;

    stroke-linecap:round;
    stroke-linejoin:round;
}


.gallery-benefit span{
    max-width:120px;

    text-align:left;

    font:400 10px/1.4
        "DM Sans",sans-serif;

    color:#75665c;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:700px){

    .gallery-cta{
        padding:
            48px 16px
            108px;
    }


    .gallery-cta-services{
        gap:6px;

        margin:
            2px auto 25px;

        font-size:7px;
        letter-spacing:1.25px;
    }


    .gallery-cta-actions{
        gap:12px;
    }


    .gallery-cta-actions a{
        width:min(310px,88vw);
        height:48px;
    }


    .gallery-benefits{
        grid-template-columns:repeat(3,1fr);

        width:min(340px,96%);

        margin-top:30px;
    }


    .gallery-benefit{
        flex-direction:column;

        gap:7px;

        padding:0 7px;
    }


    .gallery-benefit svg{
        width:27px;
        height:27px;
    }


    .gallery-benefit span{
        max-width:95px;

        text-align:center;

        font-size:8px;
        line-height:1.35;
    }

}