/* =========================================================
   JULIXREYZ
   PREMIUM GALLERY PAGE
   ========================================================= */


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

.gallery-page {
    min-height: 100vh;

    background: #090806;

    color: #ffffff;
}


/* =========================================================
   BACKGROUND
   ========================================================= */

.gallery-background {
    position: fixed;

    inset: 0;

    z-index: -3;

    background-image: url("Assets/Hero2.png");
    background-size: cover;

    background-position:
        center center;

    background-repeat:
        no-repeat;
}


/* No glow.
   Just enough darkness to make the artwork readable. */

.gallery-background-overlay {
    position: fixed;

    inset: 0;

    z-index: -2;

    background:
        rgba(14, 9, 5, 0.24);

    backdrop-filter:
        blur(1px);

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


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

.gallery-shell {
    position: relative;

    min-height: 100vh;

    z-index: 1;
}


/* =========================================================
   NAVIGATION
   ========================================================= */

.gallery-header .navbar {
    opacity: 1;

    transform: none;

    animation: none;

    padding-top: 25px;
    padding-bottom: 20px;
}


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

.gallery-content {
    width: 100%;

    max-width: 1600px;

    margin: 0 auto;

    padding:
        30px 5vw 45px;
}


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

.gallery-intro {
    margin-bottom: 26px;
}

.gallery-eyebrow {
    margin-bottom: 7px;

    font-size: 0.64rem;

    font-weight: 600;

    letter-spacing: 0.34em;

    text-transform: uppercase;

    color:
        rgba(255, 255, 255, 0.68);
}

.gallery-intro h1 {
    margin-bottom: 10px;

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

    font-size:
        clamp(4.5rem,
            7vw,
            7.2rem);

    font-weight: 400;

    line-height: 0.88;

    letter-spacing: -0.055em;

    color: #ffffff;
}

.gallery-intro p {
    font-size: 0.93rem;

    letter-spacing: 0.03em;

    color:
        rgba(255, 255, 255, 0.74);
}


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

.gallery-grid {
    display: grid;

    grid-template-columns:
        1fr 1fr 1.5fr 1fr 0.82fr;

    grid-template-rows:
        290px 245px;

    gap: 14px;
}


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

.card-one {
    grid-column: 1;
    grid-row: 1 / 3;
}

.card-two {
    grid-column: 2;
    grid-row: 1;
}

.card-three {
    grid-column: 3;
    grid-row: 1;
}

.card-four {
    grid-column: 4;
    grid-row: 1;
}

.card-five {
    grid-column: 2;
    grid-row: 2;
}

.card-six {
    grid-column: 3;
    grid-row: 2;
}

.card-seven {
    grid-column: 4;
    grid-row: 2;
}

.card-eight {
    grid-column: 5;
    grid-row: 1 / 3;
}


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

.gallery-card {
    position: relative;

    min-width: 0;

    overflow: hidden;

    border-radius: 16px;

    border:
        1px solid rgba(255, 255, 255, 0.35);

    background:
        rgba(24, 18, 14, 0.30);

    backdrop-filter:
        blur(12px) saturate(105%);

    -webkit-backdrop-filter:
        blur(12px) saturate(105%);

    box-shadow:
        0 15px 36px rgba(0, 0, 0, 0.26),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);

    transition:
        transform 0.35s ease,
        border-color 0.35s ease,
        background 0.35s ease;
}

.gallery-card:hover {
    transform:
        translateY(-4px);

    border-color:
        rgba(255, 255, 255, 0.60);

    background:
        rgba(30, 22, 17, 0.38);
}


/* =========================================================
   BUTTON
   ========================================================= */

.gallery-artwork {
    width: 100%;
    height: 100%;

    display: flex;
    flex-direction: column;

    padding: 11px;

    border: 0;

    background: transparent;

    color: #ffffff;

    text-align: left;
}


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

.gallery-image {
    flex: 1;

    min-height: 0;

    overflow: hidden;

    border-radius: 10px;

    background: rgba(0, 0, 0, 0.15);
}

.gallery-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.gallery-card:hover .gallery-image img {
    transform: scale(1.025);
}


/* Show complete image for landscape pieces */

.card-three .gallery-image img,
.card-six .gallery-image img {
    object-fit: contain;

    background:
        rgba(12, 8, 5, 0.38);
}


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

.gallery-card-bottom {
    min-height: 42px;

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

    gap: 14px;

    padding:
        12px 4px 2px;

    font-size: 0.73rem;

    color:
        rgba(255, 255, 255, 0.90);
}

.gallery-arrow {
    font-size: 1.15rem;

    color:
        rgba(255, 255, 255, 0.78);

    transition:
        transform 0.3s ease;
}

.gallery-card:hover .gallery-arrow {
    transform:
        translateX(4px);
}

.gallery-view {
    font-size: 0.68rem;

    color:
        rgba(255, 255, 255, 0.60);
}


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

.gallery-commission {
    width: min(850px, 100%);

    margin:
        20px auto 0;

    min-height: 108px;

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

    gap: 35px;

    padding:
        24px 32px;

    border-radius: 16px;

    border:
        1px solid rgba(255, 255, 255, 0.32);

    background:
        rgba(30, 22, 16, 0.34);

    backdrop-filter:
        blur(15px) saturate(105%);

    -webkit-backdrop-filter:
        blur(15px) saturate(105%);

    box-shadow:
        0 15px 40px rgba(0, 0, 0, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

.gallery-commission h2 {
    margin-bottom: 8px;

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

    font-size:
        clamp(1.7rem,
            2.8vw,
            2.6rem);

    font-weight: 400;
}

.gallery-commission p {
    font-size: 0.60rem;

    letter-spacing: 0.32em;

    text-transform: uppercase;

    color:
        rgba(255, 255, 255, 0.53);
}


/* =========================================================
   CUSTOM BUTTON
   ========================================================= */

.gallery-custom-button {
    min-height: 53px;

    flex-shrink: 0;

    display: flex;
    align-items: center;

    gap: 22px;

    padding:
        0 25px;

    border-radius: 100px;

    border:
        1px solid rgba(255, 255, 255, 0.48);

    background:
        rgba(255, 255, 255, 0.07);

    color: #ffffff;

    font-size: 0.69rem;

    transition:
        background 0.25s ease,
        transform 0.25s ease,
        border-color 0.25s ease;
}

.gallery-custom-button:hover {
    transform:
        translateY(-2px);

    background:
        rgba(255, 255, 255, 0.12);

    border-color:
        rgba(255, 255, 255, 0.70);
}


/* =========================================================
   ARTWORK VIEWER
   ========================================================= */

.artwork-viewer {
    position: fixed;

    inset: 0;

    z-index: 800;

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

    padding: 25px;

    opacity: 0;

    visibility: hidden;

    transition:
        opacity 0.3s ease,
        visibility 0.3s ease;
}

.artwork-viewer.active {
    opacity: 1;

    visibility: visible;
}


/* =========================================================
   VIEWER BACKDROP
   ========================================================= */

.artwork-viewer-backdrop {
    position: absolute;

    inset: 0;

    background:
        rgba(5, 4, 3, 0.70);

    backdrop-filter:
        blur(18px);

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


/* =========================================================
   VIEWER PANEL
   ========================================================= */

.artwork-viewer-panel {
    position: relative;

    z-index: 2;

    width:
        min(1000px, 100%);

    max-height: 92vh;

    padding: 15px;

    border-radius: 22px;

    border:
        1px solid rgba(255, 255, 255, 0.30);

    background:
        rgba(22, 18, 15, 0.46);

    backdrop-filter:
        blur(24px);

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

    box-shadow:
        0 30px 90px rgba(0, 0, 0, 0.46);

    transform:
        translateY(25px) scale(0.98);

    transition:
        transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.artwork-viewer.active .artwork-viewer-panel {
    transform:
        translateY(0) scale(1);
}


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

.artwork-viewer-image {
    height: min(72vh, 680px);

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

    overflow: hidden;

    border-radius: 13px;

    background:
        rgba(0, 0, 0, 0.30);
}

.artwork-viewer-image img {
    width: 100%;
    height: 100%;

    object-fit: contain;
}


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

.artwork-viewer-footer {
    min-height: 90px;

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

    gap: 25px;

    padding:
        15px 8px 2px;
}

.artwork-viewer-footer span {
    display: block;

    margin-bottom: 4px;

    font-size: 0.55rem;

    letter-spacing: 0.20em;

    text-transform: uppercase;

    color:
        rgba(255, 255, 255, 0.48);
}

.artwork-viewer-footer h2 {
    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 1.8rem;

    font-weight: 400;
}

.artwork-viewer-footer a {
    min-height: 47px;

    display: flex;
    align-items: center;

    padding:
        0 20px;

    border-radius: 100px;

    border:
        1px solid rgba(255, 255, 255, 0.38);

    background:
        rgba(255, 255, 255, 0.06);

    color: #ffffff;

    text-decoration: none;

    font-size: 0.64rem;

    text-transform: uppercase;

    letter-spacing: 0.08em;
}


/* =========================================================
   VIEWER CLOSE
   ========================================================= */

.artwork-viewer-close {
    position: absolute;

    top: 22px;
    right: 22px;

    z-index: 4;

    width: 42px;
    height: 42px;

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

    border-radius: 50%;

    border:
        1px solid rgba(255, 255, 255, 0.25);

    background:
        rgba(10, 8, 7, 0.45);

    color: #ffffff;

    font-size: 1.5rem;

    backdrop-filter:
        blur(10px);

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


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

@media (min-width: 768px) and (max-width: 1100px) {

    .gallery-content {
        padding:
            30px 3vw 45px;
    }


    .gallery-intro h1 {
        font-size: 5.4rem;
    }


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

        grid-template-rows:
            330px 260px 300px;

        gap: 12px;
    }


    .card-one {
        grid-column: 1;
        grid-row: 1 / 3;
    }

    .card-two {
        grid-column: 2;
        grid-row: 1;
    }

    .card-three {
        grid-column: 3;
        grid-row: 1;
    }

    .card-four {
        grid-column: 2;
        grid-row: 2;
    }

    .card-five {
        grid-column: 3;
        grid-row: 2;
    }

    .card-six {
        grid-column: 1 / 2;
        grid-row: 3;
    }

    .card-seven {
        grid-column: 2;
        grid-row: 3;
    }

    .card-eight {
        grid-column: 3;
        grid-row: 3;
    }


    .gallery-commission {
        width: 90%;
    }
}


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

@media (max-width: 767px) {

    .gallery-background {
        background-image:
            url("Hero(mobile).png");

        background-position:
            center center;
    }


    .gallery-background-overlay {
        background:
            rgba(12, 8, 5, 0.38);

        backdrop-filter:
            blur(2px);

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


    .gallery-content {
        padding:
            25px 15px 35px;
    }


    .gallery-intro {
        margin-bottom: 22px;
    }


    .gallery-eyebrow {
        font-size: 0.55rem;
    }


    .gallery-intro h1 {
        font-size:
            clamp(4.3rem,
                20vw,
                5.6rem);
    }


    .gallery-intro p {
        font-size: 0.82rem;
    }


    /* ONE LARGE ARTWORK PER ROW */

    .gallery-grid {
        display: flex;

        flex-direction: column;

        gap: 14px;
    }


    .gallery-card {
        width: 100%;

        min-height: auto;
    }


    .gallery-artwork {
        padding: 10px;
    }


    .gallery-image {
        height: auto;

        aspect-ratio: 4 / 5;
    }


    .card-three .gallery-image,
    .card-six .gallery-image {
        aspect-ratio: 16 / 10;
    }


    .gallery-image img {
        object-fit: contain;

        background:
            rgba(10, 7, 5, 0.25);
    }


    .gallery-card-bottom {
        min-height: 44px;
    }


    /* CTA */

    .gallery-commission {
        width: 100%;

        display: block;

        margin-top: 15px;

        padding:
            28px 22px;
    }


    .gallery-commission h2 {
        font-size: 2rem;
    }


    .gallery-custom-button {
        width: 100%;

        justify-content: space-between;

        margin-top: 23px;
    }


    /* Viewer */

    .artwork-viewer {
        padding: 10px;
    }


    .artwork-viewer-panel {
        max-height: 95svh;

        padding: 10px;

        overflow-y: auto;
    }


    .artwork-viewer-image {
        height: 70svh;
    }


    .artwork-viewer-footer {
        display: block;

        padding:
            17px 5px 5px;
    }


    .artwork-viewer-footer a {
        width: 100%;

        justify-content: center;

        margin-top: 15px;
    }
}

/* =========================================================
   PREMIUM GALLERY REVEAL ANIMATIONS
   ========================================================= */


/* ---------------------------------------------------------
   KEEP BACKGROUND COMPLETELY STILL
   --------------------------------------------------------- */

.gallery-background {
    transform: none !important;
    animation: none !important;
    transition: none !important;

    will-change: auto;
}


/* ---------------------------------------------------------
   INTRO
   --------------------------------------------------------- */

.gallery-intro {
    opacity: 0;

    transform: translateY(18px);

    animation:
        galleryIntroReveal 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;

    animation-delay: 0.15s;
}

@keyframes galleryIntroReveal {

    from {
        opacity: 0;

        transform:
            translateY(18px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }
}


/* ---------------------------------------------------------
   ARTWORK CARDS
   JS adds .is-visible when each card should appear
   --------------------------------------------------------- */

.gallery-card {
    opacity: 0;

    transform:
        translateY(28px) scale(0.985);

    filter: blur(5px);

    transition:
        opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1),

        transform 0.85s cubic-bezier(0.22, 1, 0.36, 1),

        filter 0.85s cubic-bezier(0.22, 1, 0.36, 1),

        border-color 0.35s ease,

        background 0.35s ease;
}


/* Revealed state */

.gallery-card.is-visible {
    opacity: 1;

    transform:
        translateY(0) scale(1);

    filter: blur(0);
}


/* Keep your original hover after reveal */

.gallery-card.is-visible:hover {
    transform:
        translateY(-4px) scale(1);
}


/* ---------------------------------------------------------
   IMAGE ITSELF
   Slightly settles as card appears
   --------------------------------------------------------- */

.gallery-card .gallery-image img {
    transform: scale(1.035);

    transition:
        transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.gallery-card.is-visible .gallery-image img {
    transform: scale(1);
}


/* Existing premium hover */

.gallery-card.is-visible:hover .gallery-image img {
    transform: scale(1.025);
}


/* ---------------------------------------------------------
   CARD TEXT
   Comes just after its artwork
   --------------------------------------------------------- */

.gallery-card-bottom {
    opacity: 0;

    transform:
        translateY(8px);

    transition:
        opacity 0.55s ease 0.25s,
        transform 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.25s;
}

.gallery-card.is-visible .gallery-card-bottom {
    opacity: 1;

    transform:
        translateY(0);
}


/* =========================================================
   COMMISSION CTA REVEAL
   ========================================================= */

.gallery-commission {
    opacity: 0;

    transform:
        translateY(30px) scale(0.985);

    filter: blur(4px);

    transition:
        opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),

        transform 0.9s cubic-bezier(0.22, 1, 0.36, 1),

        filter 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.gallery-commission.is-visible {
    opacity: 1;

    transform:
        translateY(0) scale(1);

    filter: blur(0);
}


/* CTA words reveal */

.gallery-commission h2,
.gallery-commission p {
    opacity: 0;

    transform:
        translateY(10px);

    transition:
        opacity 0.6s ease,
        transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.gallery-commission.is-visible h2 {
    opacity: 1;

    transform: translateY(0);

    transition-delay: 0.18s;
}

.gallery-commission.is-visible p {
    opacity: 1;

    transform: translateY(0);

    transition-delay: 0.28s;
}


/* CTA BUTTON */

.gallery-custom-button {
    opacity: 0;

    transform:
        translateX(18px);

    transition:
        opacity 0.65s ease,
        transform 0.65s cubic-bezier(0.22, 1, 0.36, 1),
        background 0.25s ease,
        border-color 0.25s ease;
}

.gallery-commission.is-visible .gallery-custom-button {
    opacity: 1;

    transform:
        translateX(0);

    transition-delay:
        0.35s,
        0.35s,
        0s,
        0s;
}


/* Preserve button hover */

.gallery-commission.is-visible .gallery-custom-button:hover {
    transform:
        translateY(-2px);
}


/* =========================================================
   FOOTER REVEAL
   Works whenever we add/use .gallery-footer
   ========================================================= */

.gallery-footer {
    opacity: 0;

    transform:
        translateY(20px);

    transition:
        opacity 0.8s ease,
        transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.gallery-footer.is-visible {
    opacity: 1;

    transform:
        translateY(0);
}


/* =========================================================
   MOBILE
   Slightly shorter motion
   ========================================================= */

@media (max-width: 767px) {

    .gallery-card {
        transform:
            translateY(22px) scale(0.99);
    }

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

    .gallery-commission {
        transform:
            translateY(22px);
    }

    .gallery-commission.is-visible {
        transform:
            translateY(0);
    }

    .gallery-custom-button {
        transform:
            translateY(10px);
    }

    .gallery-commission.is-visible .gallery-custom-button {
        transform:
            translateY(0);
    }
}


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

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

    .gallery-intro,
    .gallery-card,
    .gallery-card .gallery-image img,
    .gallery-card-bottom,
    .gallery-commission,
    .gallery-commission h2,
    .gallery-commission p,
    .gallery-custom-button,
    .gallery-footer {
        opacity: 1 !important;

        transform: none !important;

        filter: none !important;

        animation: none !important;

        transition: none !important;
    }
}

/* =========================================================
   GALLERY NAVBAR PREMIUM ENTRANCE
   ========================================================= */


/* Keep navbar container stable */
.gallery-header .navbar {
    opacity: 1;
    transform: none;
    animation: none;
}


/* =========================================================
   LOGO / BRAND
   Comes in first
   ========================================================= */

.gallery-header .brand {
    opacity: 0;

    transform:
        translateX(-22px) translateY(-8px);

    animation:
        galleryBrandReveal 0.85s cubic-bezier(0.22, 1, 0.36, 1) forwards;

    animation-delay: 0.15s;
}

@keyframes galleryBrandReveal {

    from {
        opacity: 0;

        transform:
            translateX(-22px) translateY(-8px);
    }

    to {
        opacity: 1;

        transform:
            translateX(0) translateY(0);
    }
}


/* Slight logo settle */

.gallery-header .brand-logo {
    transform: scale(0.92);

    animation:
        galleryLogoReveal 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;

    animation-delay: 0.15s;
}

@keyframes galleryLogoReveal {

    from {
        transform: scale(0.92);
    }

    to {
        transform: scale(1);
    }
}


/* =========================================================
   NAVIGATION ITEMS
   One after another
   ========================================================= */

.gallery-header .nav-links li {
    opacity: 0;

    transform: translateY(-14px);

    animation:
        galleryNavReveal 0.65s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.gallery-header .nav-links li:nth-child(1) {
    animation-delay: 0.38s;
}

.gallery-header .nav-links li:nth-child(2) {
    animation-delay: 0.48s;
}

.gallery-header .nav-links li:nth-child(3) {
    animation-delay: 0.58s;
}

.gallery-header .nav-links li:nth-child(4) {
    animation-delay: 0.68s;
}

.gallery-header .nav-links li:nth-child(5) {
    animation-delay: 0.78s;
}


@keyframes galleryNavReveal {

    from {
        opacity: 0;
        transform: translateY(-14px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


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

.gallery-header .menu-toggle {
    opacity: 0;

    transform:
        translateX(14px) scale(0.94);

    animation:
        galleryMenuReveal 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;

    animation-delay: 0.45s;
}

@keyframes galleryMenuReveal {

    from {
        opacity: 0;

        transform:
            translateX(14px) scale(0.94);
    }

    to {
        opacity: 1;

        transform:
            translateX(0) scale(1);
    }
}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

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

    .gallery-header .brand,
    .gallery-header .brand-logo,
    .gallery-header .nav-links li,
    .gallery-header .menu-toggle {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }
}

/* =========================================================
   MINIMAL GLASS FOOTER
   ========================================================= */

.gallery-footer {
    width: min(900px, 100%);

    min-height: 74px;

    margin:
        16px auto 0;

    padding:
        16px 24px;

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

    gap: 25px;

    border-radius: 15px;

    border:
        1px solid rgba(255, 255, 255, 0.22);

    background:
        rgba(25, 19, 15, 0.28);

    backdrop-filter:
        blur(14px) saturate(105%);

    -webkit-backdrop-filter:
        blur(14px) saturate(105%);

    box-shadow:
        0 12px 35px rgba(0, 0, 0, 0.20),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}


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

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

    gap: 10px;
}

.gallery-footer-brand img {
    width: 34px;
    height: 34px;

    object-fit: contain;
}

.gallery-footer-brand>div {
    display: flex;
    flex-direction: column;
}

.gallery-footer-name {
    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 0.82rem;

    letter-spacing: 0.14em;

    text-transform: uppercase;

    color:
        rgba(255, 255, 255, 0.90);
}

.gallery-footer-subtitle {
    margin-top: 3px;

    font-size: 0.46rem;

    letter-spacing: 0.28em;

    text-transform: uppercase;

    color:
        rgba(255, 255, 255, 0.42);
}


/* =========================================================
   COPYRIGHT
   ========================================================= */

.gallery-footer-copy {
    font-size: 0.58rem;

    letter-spacing: 0.11em;

    color:
        rgba(255, 255, 255, 0.38);
}


/* =========================================================
   SOCIAL ICONS
   ========================================================= */

.gallery-socials {
    display: flex;
    align-items: center;

    gap: 18px;
}

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

    color:
        rgba(255, 255, 255, 0.55);

    text-decoration: none;

    transition:
        color 0.25s ease,
        transform 0.25s ease;
}

.gallery-socials a:hover {
    color: #ffffff;

    transform:
        translateY(-2px);
}

.gallery-socials svg {
    width: 18px;
    height: 18px;

    display: block;
}


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

@media (max-width: 767px) {

    .gallery-footer {
        padding:
            18px 20px;

        flex-wrap: wrap;

        gap: 15px;
    }


    .gallery-footer-brand {
        flex: 1;
    }


    .gallery-footer-copy {
        width: 100%;

        order: 3;

        padding-top: 12px;

        border-top:
            1px solid rgba(255, 255, 255, 0.08);
    }


    .gallery-socials {
        gap: 16px;
    }
}

/* =========================================================
   ROW WRAPPERS
   DESKTOP + TABLET: visually do nothing
   ========================================================= */

.gallery-row {
    display: contents;
}


/* =========================================================
   MOBILE GALLERY LAYOUT ONLY
   ========================================================= */

@media (max-width: 767px) {


    /* Turn off desktop gallery grid */

    .gallery-grid {
        display: block;

        width: 100%;
    }


    /* =====================================================
       CAROUSEL ROW 1 + ROW 2
       ===================================================== */

    .gallery-row-one,
    .gallery-row-two {
        display: flex;

        align-items: stretch;

        gap: 12px;

        width: calc(100% + 15px);

        margin-right: -15px;
        margin-bottom: 17px;

        padding-right: 32px;
        padding-bottom: 4px;

        overflow-x: auto;
        overflow-y: hidden;

        scroll-snap-type: x mandatory;

        overscroll-behavior-x: contain;

        -webkit-overflow-scrolling: touch;

        scrollbar-width: none;
    }


    .gallery-row-one::-webkit-scrollbar,
    .gallery-row-two::-webkit-scrollbar {
        display: none;
    }


    /* Carousel cards */

    .gallery-row-one .gallery-card,
    .gallery-row-two .gallery-card {
        flex: 0 0 76vw;

        width: 76vw;

        max-width: 300px;

        height: 390px;

        min-height: 390px;

        scroll-snap-align: start;

        scroll-snap-stop: always;
    }


    /* Reset old desktop positions */

    .gallery-row-one .gallery-card,
    .gallery-row-two .gallery-card,
    .gallery-final-row .gallery-card {
        grid-column: auto !important;
        grid-row: auto !important;
    }


    /* Main carousel artwork area */

    .gallery-row-one .gallery-image,
    .gallery-row-two .gallery-image {
        flex: 1;

        width: 100%;

        min-height: 0;

        aspect-ratio: auto;
    }


    .gallery-row-one .gallery-image img,
    .gallery-row-two .gallery-image img {
        width: 100%;
        height: 100%;

        object-fit: cover;
    }


    /* Landscape paintings */

    .gallery-row-one .card-three .gallery-image img,
    .gallery-row-two .card-six .gallery-image img {
        object-fit: contain;

        background:
            rgba(10, 7, 5, 0.28);
    }



    /* =====================================================
       FINAL TWO ARTWORKS
       ===================================================== */

    .gallery-final-row {
        display: grid;

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

        gap: 10px;

        width: 100%;

        margin-top: 2px;
        margin-bottom: 17px;
    }


    .gallery-final-row .gallery-card {
        width: 100%;

        height: 255px;

        min-height: 255px;
    }


    .gallery-final-row .gallery-artwork {
        height: 100%;
    }


    .gallery-final-row .gallery-image {
        flex: 1;

        min-height: 0;

        aspect-ratio: auto;
    }


    .gallery-final-row .gallery-image img {
        width: 100%;
        height: 100%;

        object-fit: cover;
    }


    /* Artwork 07 is landscape */

    .gallery-final-row .card-seven .gallery-image img {
        object-fit: contain;

        background:
            rgba(10, 7, 5, 0.28);
    }



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

    .gallery-card-bottom {
        min-height: 42px;

        padding:
            10px 3px 1px;

        font-size: 0.65rem;
    }


    .gallery-arrow {
        font-size: 1rem;
    }

}

/* =========================================================
   FIX GALLERY BACKGROUND
   ========================================================= */

.gallery-page {
    position: relative;
    background: #090806;
}


/* Actual Hero2 background */

.gallery-background {
    position: fixed;

    inset: 0;

    z-index: 0;

    background-image: url("Hero2.png");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;

    pointer-events: none;

    animation: none !important;
    transform: none !important;
}


/* Slight dark layer so text/cards remain readable */

.gallery-background-overlay {
    position: fixed;

    inset: 0;

    z-index: 1;

    background: rgba(10, 7, 5, 0.24);

    pointer-events: none;
}


/* Everything on the page sits ABOVE the background */

.gallery-shell {
    position: relative;

    z-index: 2;
}


/* Viewer/menu/WhatsApp must remain above everything */

.mobile-drawer,
.menu-overlay,
.artwork-viewer,
.commission-modal,
.whatsapp-float {
    position: fixed;
    z-index: 100;
}


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

@media (max-width: 767px) {

    .gallery-background {
        background-image: url("Hero(mobile).png");
        background-position: center center;
    }

    .gallery-background-overlay {
        background: rgba(10, 7, 5, 0.30);
    }
}