/* =========================================================
   MUMSY BRAIDS STUDIO
   GALLERY PAGE
   gallery.css
   ========================================================= */

:root {

    --gallery-brown:
        #2d2521;

    --gallery-brown-light:
        #75675e;

    --gallery-gold:
        #a47b3e;

    --gallery-gold-light:
        #cba760;

    --gallery-cream:
        #fffdf9;

    --gallery-beige:
        #f8eee4;

    --gallery-border:
        rgba(177,138,69,.18);

}


/* =========================================================
   RESET
   ========================================================= */

* {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {

    margin: 0;

    min-height: 100vh;

    color:
        var(--gallery-brown);

    background:
        linear-gradient(
            180deg,
            #fffdf9 0%,
            #faf3eb 100%
        );

    font-family:
        "Inter",
        Arial,
        sans-serif;

}


/* =========================================================
   HEADER
   ========================================================= */

.gallery-header {

    position:
        sticky;

    top: 0;

    z-index: 1000;

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

    backdrop-filter:
        blur(12px);

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

    border-bottom:
        1px solid
        rgba(177,138,69,.12);

}


.gallery-header-inner {

    width:
        min(1180px, calc(100% - 40px));

    min-height:
        76px;

    margin:
        0 auto;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        30px;

}


/* =========================================================
   BRAND
   ========================================================= */

.gallery-brand {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    color:
        var(--gallery-brown);

    text-decoration:
        none;

    white-space:
        nowrap;

}


.brand-symbol {

    width:
        38px;

    height:
        38px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    background:
        linear-gradient(
            135deg,
            var(--gallery-gold),
            var(--gallery-gold-light)
        );

    color:
        white;

    font-size:
        17px;

    box-shadow:
        0 7px 20px
        rgba(150,111,54,.18);

}


.gallery-brand strong {

    display:
        block;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        16px;

    font-weight:
        600;

}


.gallery-brand small {

    display:
        block;

    margin-top:
        2px;

    color:
        var(--gallery-gold);

    font-size:
        8px;

    letter-spacing:
        2px;

    text-transform:
        uppercase;

}


/* =========================================================
   DESKTOP NAV
   ========================================================= */

.gallery-nav {

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

}


.gallery-nav a {

    position:
        relative;

    padding:
        9px 11px;

    color:
        var(--gallery-brown-light);

    font-size:
        11px;

    font-weight:
        600;

    text-decoration:
        none;

    transition:
        color .2s ease;

}


.gallery-nav a::after {

    content:
        "";

    position:
        absolute;

    left:
        11px;

    right:
        11px;

    bottom:
        3px;

    height:
        1px;

    background:
        var(--gallery-gold);

    transform:
        scaleX(0);

    transform-origin:
        center;

    transition:
        transform .25s ease;

}


.gallery-nav a:hover,
.gallery-nav a.active {

    color:
        var(--gallery-gold);
}


.gallery-nav a:hover::after,
.gallery-nav a.active::after {

    transform:
        scaleX(1);

}


.gallery-nav .gallery-nav-book {

    margin-left:
        5px;

    padding:
        11px 17px;

    border-radius:
        999px;

    background:
        linear-gradient(
            135deg,
            #8c6732,
            #cba760
        );

    color:
        white;

    box-shadow:
        0 7px 18px
        rgba(150,111,54,.18);

}


.gallery-nav .gallery-nav-book::after {

    display:
        none;

}


.gallery-nav .gallery-nav-book:hover {

    color:
        white;

    transform:
        translateY(-1px);

}


/* =========================================================
   MOBILE MENU BUTTON
   ========================================================= */

.gallery-menu-button {

    display:
        none;

    width:
        42px;

    height:
        42px;

    padding:
        8px;

    border:
        1px solid
        var(--gallery-border);

    border-radius:
        12px;

    background:
        var(--gallery-cream);

    cursor:
        pointer;

}


.gallery-menu-button span {

    display:
        block;

    width:
        100%;

    height:
        2px;

    margin:
        5px 0;

    background:
        var(--gallery-brown);

    border-radius:
        5px;

}


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

.gallery-mobile-menu {

    position:
        fixed;

    top:
        76px;

    left:
        14px;

    right:
        14px;

    z-index:
        999;

    display:
        flex;

    flex-direction:
        column;

    padding:
        10px;

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

    border:
        1px solid
        var(--gallery-border);

    border-radius:
        18px;

    box-shadow:
        0 20px 50px
        rgba(50,35,25,.14);

    opacity:
        0;

    visibility:
        hidden;

    transform:
        translateY(-10px);

    transition:
        opacity .25s ease,
        visibility .25s ease,
        transform .25s ease;

}


.gallery-mobile-menu.open {

    opacity:
        1;

    visibility:
        visible;

    transform:
        translateY(0);

}


.gallery-mobile-menu a {

    padding:
        14px 15px;

    border-radius:
        11px;

    color:
        var(--gallery-brown-light);

    font-size:
        12px;

    font-weight:
        600;

    text-decoration:
        none;

}


.gallery-mobile-menu a:hover,
.gallery-mobile-menu a.active {

    background:
        var(--gallery-beige);

    color:
        var(--gallery-gold);

}


.gallery-mobile-menu .mobile-book {

    margin-top:
        6px;

    text-align:
        center;

    background:
        linear-gradient(
            135deg,
            #8c6732,
            #cba760
        );

    color:
        white;

}


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

.gallery-hero {

    position:
        relative;

    padding:
        95px 20px 65px;

    text-align:
        center;

    overflow:
        hidden;

}


.gallery-hero::before {

    content:
        "";

    position:
        absolute;

    width:
        340px;

    height:
        340px;

    top:
        -170px;

    left:
        50%;

    transform:
        translateX(-50%);

    border-radius:
        50%;

    background:
        rgba(203,167,96,.10);

    filter:
        blur(5px);

}


.gallery-hero-decoration {

    position:
        relative;

    margin-bottom:
        15px;

    color:
        var(--gallery-gold);

    font-size:
        20px;

}


.gallery-kicker {

    position:
        relative;

    margin:
        0 0 10px;

    color:
        var(--gallery-gold);

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        3px;

}


.gallery-hero h1 {

    position:
        relative;

    margin:
        0;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(38px, 6vw, 62px);

    font-weight:
        500;

    line-height:
        1.05;

    color:
        var(--gallery-brown);

}


.gallery-divider {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        13px;

    margin:
        22px auto;

    color:
        var(--gallery-gold);

    font-size:
        12px;

}


.gallery-divider span {

    width:
        55px;

    height:
        1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--gallery-gold)
        );

}


.gallery-divider span:last-child {

    background:
        linear-gradient(
            90deg,
            var(--gallery-gold),
            transparent
        );

}


.gallery-intro {

    max-width:
        560px;

    margin:
        0 auto;

    color:
        var(--gallery-brown-light);

    font-size:
        13px;

    line-height:
        1.8;

}


/* =========================================================
   GALLERY SECTION
   ========================================================= */

.gallery-section {

    width:
        min(1120px, calc(100% - 40px));

    margin:
        0 auto;

    padding:
        10px 0 90px;

}


/* =========================================================
   FILTERS
   ========================================================= */

.gallery-filters {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex-wrap:
        wrap;

    gap:
        8px;

    margin-bottom:
        42px;

}


.gallery-filter {

    padding:
        10px 17px;

    border:
        1px solid
        var(--gallery-border);

    border-radius:
        999px;

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

    color:
        var(--gallery-brown-light);

    font-family:
        inherit;

    font-size:
        10px;

    font-weight:
        700;

    cursor:
        pointer;

    transition:
        background .2s ease,
        color .2s ease,
        transform .2s ease,
        border-color .2s ease;

}


.gallery-filter:hover {

    transform:
        translateY(-1px);

    border-color:
        rgba(177,138,69,.35);

}


.gallery-filter.active {

    background:
        linear-gradient(
            135deg,
            #8c6732,
            #cba760
        );

    border-color:
        transparent;

    color:
        white;

    box-shadow:
        0 7px 18px
        rgba(150,111,54,.18);

}


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

.gallery-grid {

    display:
        grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap:
        28px;

}


/* =========================================================
   CARD
   ========================================================= */

.gallery-card {

    overflow:
        hidden;

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

    border:
        1px solid
        var(--gallery-border);

    border-radius:
        24px;

    box-shadow:
        0 12px 35px
        rgba(55,40,30,.07);

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

}


.gallery-card:hover {

    transform:
        translateY(-6px);

    box-shadow:
        0 22px 50px
        rgba(55,40,30,.12);

}


/* =========================================================
   IMAGE
   ========================================================= */

.gallery-image-button {

    position:
        relative;

    display:
        block;

    width:
        100%;

    height:
        390px;

    padding:
        0;

    border:
        none;

    background:
        #eee5dc;

    overflow:
        hidden;

    cursor:
        pointer;

}


.gallery-image-button img {

    width:
        100%;

    height:
        100%;

    display:
        block;

    object-fit:
        cover;

    transition:
        transform .55s
        cubic-bezier(.22,1,.36,1);

}


.gallery-card:hover
.gallery-image-button img {

    transform:
        scale(1.045);

}


/* =========================================================
   IMAGE OVERLAY
   ========================================================= */

.gallery-image-button::after {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            180deg,
            transparent 55%,
            rgba(30,22,18,.48)
        );

    opacity:
        0;

    transition:
        opacity .3s ease;

}


.gallery-card:hover
.gallery-image-button::after {

    opacity:
        1;

}


.gallery-view {

    position:
        absolute;

    left:
        50%;

    bottom:
        22px;

    z-index:
        2;

    transform:
        translate(-50%, 10px);

    padding:
        10px 16px;

    border-radius:
        999px;

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

    color:
        var(--gallery-gold);

    font-size:
        10px;

    font-weight:
        700;

    opacity:
        0;

    transition:
        opacity .3s ease,
        transform .3s ease;

}


.gallery-card:hover
.gallery-view {

    opacity:
        1;

    transform:
        translate(-50%, 0);

}


/* =========================================================
   CARD CONTENT
   ========================================================= */

.gallery-card-content {

    padding:
        25px 25px 24px;

}


.gallery-card-number {

    margin:
        0 0 7px;

    color:
        var(--gallery-gold);

    font-size:
        8px;

    font-weight:
        700;

    letter-spacing:
        2px;

}


.gallery-card-content h2 {

    margin:
        0 0 7px;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        25px;

    font-weight:
        500;

}


.gallery-card-content > p:not(.gallery-card-number) {

    margin:
        0;

    color:
        var(--gallery-brown-light);

    font-size:
        11px;

    line-height:
        1.6;

}


/* =========================================================
   BOOK STYLE
   ========================================================= */

.gallery-book-style {

    margin-top:
        17px;

    padding:
        0;

    border:
        none;

    background:
        transparent;

    color:
        var(--gallery-gold);

    font-family:
        inherit;

    font-size:
        10px;

    font-weight:
        700;

    cursor:
        pointer;

}


.gallery-book-style span {

    display:
        inline-block;

    margin-left:
        5px;

    transition:
        transform .2s ease;

}


.gallery-book-style:hover span {

    transform:
        translateX(4px);

}


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

.gallery-cta {

    padding:
        80px 20px;

    background:
        linear-gradient(
            135deg,
            #f4e6d6,
            #fffaf4
        );

    border-top:
        1px solid
        var(--gallery-border);

    border-bottom:
        1px solid
        var(--gallery-border);

    text-align:
        center;

}


.gallery-cta-inner {

    max-width:
        650px;

    margin:
        0 auto;

}


.cta-star {

    color:
        var(--gallery-gold);

    font-size:
        18px;

}


.gallery-cta p {

    margin:
        14px 0 8px;

    color:
        var(--gallery-gold);

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        2.5px;

}


.gallery-cta h2 {

    margin:
        0 auto 25px;

    max-width:
        500px;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(28px, 4vw, 42px);

    font-weight:
        500;

    line-height:
        1.2;

}


.gallery-main-book {

    padding:
        13px 24px;

    border:
        none;

    border-radius:
        999px;

    background:
        linear-gradient(
            135deg,
            #8c6732,
            #cba760
        );

    color:
        white;

    font-family:
        inherit;

    font-size:
        11px;

    font-weight:
        700;

    cursor:
        pointer;

    box-shadow:
        0 10px 25px
        rgba(150,111,54,.20);

    transition:
        transform .2s ease,
        box-shadow .2s ease;

}


.gallery-main-book span {

    margin-left:
        6px;

}


.gallery-main-book:hover {

    transform:
        translateY(-2px);

    box-shadow:
        0 15px 30px
        rgba(150,111,54,.28);

}


/* =========================================================
   FOOTER
   ========================================================= */

.gallery-footer {

    background:
        #2d2521;

    color:
        white;

}


.gallery-footer-inner {

    width:
        min(1120px, calc(100% - 40px));

    min-height:
        100px;

    margin:
        0 auto;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        30px;

}


.footer-brand {

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        17px;

}


.gallery-footer p {

    margin:
        5px 0 0;

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

    font-size:
        9px;

}


.footer-copyy {

    text-align:
        right;

}


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

.gallery-lightbox {

    position:
        fixed;

    inset:
        0;

    z-index:
        1000000;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        25px;

    background:
        rgba(25,20,17,.86);

    backdrop-filter:
        blur(10px);

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

    opacity:
        0;

    visibility:
        hidden;

    pointer-events:
        none;

    transition:
        opacity .3s ease,
        visibility .3s ease;

}


.gallery-lightbox.open {

    opacity:
        1;

    visibility:
        visible;

    pointer-events:
        auto;

}


.gallery-lightbox-content {

    position:
        relative;

    max-width:
        850px;

    width:
        100%;

    max-height:
        92vh;

    text-align:
        center;

    transform:
        scale(.92)
        translateY(20px);

    transition:
        transform .4s
        cubic-bezier(.22,1,.36,1);

}


.gallery-lightbox.open
.gallery-lightbox-content {

    transform:
        scale(1)
        translateY(0);

}


.gallery-lightbox-content img {

    display:
        block;

    width:
        100%;

    max-height:
        72vh;

    object-fit:
        contain;

    border-radius:
        18px;

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

}


.gallery-lightbox-close {

    position:
        absolute;

    top:
        -15px;

    right:
        -15px;

    z-index:
        5;

    width:
        40px;

    height:
        40px;

    border:
        none;

    border-radius:
        50%;

    background:
        #fffdf9;

    color:
        #5b4d45;

    font-size:
        26px;

    line-height:
        1;

    cursor:
        pointer;

    box-shadow:
        0 8px 25px
        rgba(0,0,0,.20);

}


.lightbox-caption {

    padding-top:
        17px;

    color:
        white;

}


.lightbox-caption span {

    color:
        #cba760;

    font-size:
        8px;

    font-weight:
        700;

    letter-spacing:
        2px;

}


.lightbox-caption h2 {

    margin:
        5px 0 0;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        25px;

    font-weight:
        500;

}


/* =========================================================
   HIDDEN FILTER CARDS
   ========================================================= */

.gallery-card.filtered-out {

    display:
        none;

}


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

@media (max-width: 850px) {

    .gallery-nav {

        display:
            none;

    }


    .gallery-menu-button {

        display:
            block;

    }


    .gallery-header-inner {

        min-height:
            70px;

    }


    .gallery-mobile-menu {

        top:
            70px;

    }


    .gallery-grid {

        grid-template-columns:
            1fr;

        max-width:
            600px;

        margin:
            0 auto;

    }


    .gallery-image-button {

        height:
            430px;

    }

}


@media (max-width: 520px) {

    .gallery-header-inner {

        width:
            calc(100% - 28px);

    }


    .gallery-section {

        width:
            calc(100% - 28px);

    }


    .gallery-hero {

        padding:
            65px 18px 45px;

    }


    .gallery-hero h1 {

        font-size:
            38px;

    }


    .gallery-intro {

        font-size:
            11px;

    }


    .gallery-filters {

        justify-content:
            flex-start;

        overflow-x:
            auto;

        flex-wrap:
            nowrap;

        padding-bottom:
            5px;

        scrollbar-width:
            none;

    }


    .gallery-filters::-webkit-scrollbar {

        display:
            none;

    }


    .gallery-filter {

        flex:
            0 0 auto;

    }


    .gallery-image-button {

        height:
            360px;

    }


    .gallery-card-content {

        padding:
            21px 20px;

    }


    .gallery-card-content h2 {

        font-size:
            23px;

    }


    .gallery-footer-inner {

        flex-direction:
            column;

        align-items:
            flex-start;

        justify-content:
            center;

        padding:
            25px 0;

    }


    .footer-copyy {

        text-align:
            left;

    }


    .gallery-lightbox {

        padding:
            14px;

    }


    .gallery-lightbox-close {

        top:
            -7px;

        right:
            -7px;

    }

}

/* =========================================================
   GALLERY SLIDER
   ========================================================= */

.gallery-slider-stage {

    position: relative;

    width: 100%;

    max-height: 72vh;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    border-radius: 18px;

    touch-action: pan-y;

}


.gallery-slider-stage img {

    display: block;

    width: 100%;

    max-height: 72vh;

    object-fit: contain;

    border-radius: 18px;

    user-select: none;

    -webkit-user-drag: none;

}


/* =========================================================
   SLIDE ANIMATIONS
   ========================================================= */

.gallery-slider-stage.slide-next img {

    animation:
        gallerySlideNext .32s
        cubic-bezier(.22,1,.36,1);

}


.gallery-slider-stage.slide-prev img {

    animation:
        gallerySlidePrev .32s
        cubic-bezier(.22,1,.36,1);

}


@keyframes gallerySlideNext {

    0% {

        opacity: 0;

        transform:
            translateX(45px);

    }

    100% {

        opacity: 1;

        transform:
            translateX(0);

    }

}


@keyframes gallerySlidePrev {

    0% {

        opacity: 0;

        transform:
            translateX(-45px);

    }

    100% {

        opacity: 1;

        transform:
            translateX(0);

    }

}


/* =========================================================
   SLIDER ARROWS
   ========================================================= */

.gallery-slider-arrow {

    position: absolute;

    top: 50%;

    z-index: 20;

    width: 48px;

    height: 48px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 0;

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

    border-radius: 50%;

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

    color:
        #5b4d45;

    cursor: pointer;

    transform:
        translateY(-50%);

    box-shadow:
        0 8px 25px
        rgba(0,0,0,.22);

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

}


.gallery-slider-arrow span {

    display: block;

    margin-top: -3px;

    font-family:
        Arial,
        sans-serif;

    font-size: 35px;

    font-weight: 300;

    line-height: 1;

}


.gallery-slider-arrow:hover {

    background:
        #ffffff;

    box-shadow:
        0 12px 30px
        rgba(0,0,0,.28);

}


.gallery-slider-prev {

    left: 15px;

}


.gallery-slider-next {

    right: 15px;

}


/* =========================================================
   COUNTER
   ========================================================= */

.gallery-counter {

    margin-top: 9px;

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

    font-size: 10px;

    font-weight: 600;

    letter-spacing: 1px;

}


/* =========================================================
   DOTS
   ========================================================= */

.gallery-slider-dots {

    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    gap: 5px;

    max-width: 500px;

    margin: 14px auto 0;

}


.gallery-slider-dot {

    width: 6px;

    height: 6px;

    padding: 0;

    border: none;

    border-radius: 50%;

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

    cursor: pointer;

    transition:
        width .25s ease,
        background .25s ease,
        transform .25s ease;

}


.gallery-slider-dot.active {

    width: 19px;

    border-radius: 999px;

    background:
        #cba760;

}


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

@media (max-width: 600px) {

    .gallery-lightbox {

        padding:
            10px;

    }


    .gallery-lightbox-content {

        width:
            100%;

        max-width:
            100%;

    }


    .gallery-slider-stage {

        max-height:
            70vh;

        border-radius:
            14px;

    }


    .gallery-slider-stage img {

        max-height:
            70vh;

        border-radius:
            14px;

    }


    .gallery-slider-arrow {

        width:
            42px;

        height:
            42px;

    }


    .gallery-slider-arrow span {

        font-size:
            30px;

    }


    .gallery-slider-prev {

        left:
            8px;

    }


    .gallery-slider-next {

        right:
            8px;

    }


    .gallery-lightbox-close {

        top:
            -3px;

        right:
            -3px;

        width:
            38px;

        height:
            38px;

    }


    .lightbox-caption {

        padding-top:
            12px;

    }


    .lightbox-caption h2 {

        font-size:
            22px;

    }


    .gallery-slider-dots {

        max-width:
            280px;

    }

}


/* =========================================================
   VERY SMALL PHONES
   ========================================================= */

@media (max-width: 380px) {

    .gallery-slider-arrow {

        width:
            38px;

        height:
            38px;

    }


    .gallery-slider-prev {

        left:
            5px;

    }


    .gallery-slider-next {

        right:
            5px;

    }


    .gallery-slider-stage {

        max-height:
            66vh;

    }


    .gallery-slider-stage img {

        max-height:
            66vh;

    }

}