/* ==========================================================================
   ferminezcurdia.com - Dark Portfolio Stylesheet (Photocrati Original Aesthetic)
   Dark background, sidebar beside the hero slideshow on desktop,
   high-contrast white/light typography for optimal photographic viewing.
   ========================================================================== */

:root {
    --bg-color: #161616;
    --card-bg: #222222;
    --text-color: #e6e6e6;
    --text-muted: #888888;
    --text-title: #ffffff;
    --link-color: #9e9e9e;
    --link-hover: #ffffff;
    --active-link: #ffffff;
    --sidebar-bg: rgba(14, 14, 14, 0.65);
    --sidebar-border: rgba(255, 255, 255, 0.08);
    --sidebar-shadow: 0 0 25px rgba(0, 0, 0, 0.7);
    --sidebar-width: 250px;
    --font-heading: 'Droid Serif', Georgia, serif;
    --font-nav: 'Oswald', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-body: 'Droid Serif', Georgia, serif;
    --gallery-row-height: 180px;
    --gallery-gap: 6px;
}

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

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.6;
    overflow-x: hidden;
}

/* --------------------------------------------------------------------------
   Layout Structure
   -------------------------------------------------------------------------- */
#layout-container {
    display: flex;
    min-height: 100vh;
    position: relative;
}

/* --------------------------------------------------------------------------
   Sidebar Header & Navigation (Fixed on Desktop, Translucent Dark)
   -------------------------------------------------------------------------- */
#site-header {
    width: var(--sidebar-width);
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    background-color: var(--sidebar-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 45px 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    z-index: 100;
    border-right: none;
    box-shadow: 4px 0 25px rgba(0, 0, 0, 0.45);
}

/* Higher contrast & clear separation inside galleries */
.page-gallery #site-header {
    background-color: #0b0b0b;
    border-right: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 6px 0 32px rgba(0, 0, 0, 0.75);
}

.branding .site-title {
    text-decoration: none;
    color: var(--text-title);
    display: inline-block;
}

.branding .logo-heading {
    margin: 0;
    padding: 0;
    font-size: 0;
    line-height: 0;
}

.branding .site-logo {
    display: block;
    width: 180px;
    max-width: 100%;
    height: auto;
    margin-bottom: 35px;
    transition: opacity 0.2s ease, transform 0.2s ease;
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.7));
}

.branding .site-title:hover .site-logo {
    opacity: 0.92;
    transform: scale(1.02);
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Mobile menu toggle */
#menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
}

#menu-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background-color: #ffffff;
    margin: 5px 0;
    transition: 0.3s;
}

/* Navigation List */
#site-nav {
    display: flex;
    flex-direction: column;
    flex: 1;
    justify-content: space-between;
}

#site-nav ul {
    list-style: none;
}

#site-nav li {
    margin-bottom: 14px;
}

#site-nav a {
    font-family: var(--font-nav);
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--link-color);
    text-decoration: none;
    transition: color 0.25s ease, letter-spacing 0.25s ease, transform 0.25s ease;
    display: inline-block;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}

#site-nav a:hover {
    color: var(--link-hover);
    letter-spacing: 2.5px;
    transform: translateX(2px);
}

#site-nav li.active a {
    color: var(--active-link);
    font-weight: 500;
    border-bottom: 1px solid rgba(255, 255, 255, 0.8);
    padding-bottom: 3px;
}

/* --------------------------------------------------------------------------
   Classic Colored Social Brand Icons
   -------------------------------------------------------------------------- */
.social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    padding: 8px;
    border-radius: 6px;
    transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
}

.social-link:hover,
.social-link:focus-visible {
    transform: scale(1.18);
    opacity: 0.95;
}

.social-link:active {
    transform: scale(1.05);
}

.social-link svg {
    display: block;
    width: 22px;
    height: 22px;
}

.social-link.instagram .instagram-icon-box {
    width: 22px;
    height: 22px;
    border-radius: 5.5px;
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

.social-link.instagram svg {
    width: 15px;
    height: 15px;
}

.social-link.lumenira .lumenira-icon-img {
    display: block;
    width: 26px;
    height: auto;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5));
}

.menu-social-nav {
    margin-top: auto;
    padding-top: 30px;
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Footer Credit */
#site-footer {
    margin-top: 30px;
    font-size: 11px;
    color: var(--text-muted);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    line-height: 1.5;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

#site-footer a {
    color: #aaaaaa;
    text-decoration: none;
    border-bottom: 1px dotted #555555;
    transition: color 0.2s ease;
}

#site-footer a:hover {
    color: #ffffff;
    border-bottom-color: #ffffff;
}

/* --------------------------------------------------------------------------
   Main Content Area
   -------------------------------------------------------------------------- */
#main-content {
    margin-left: var(--sidebar-width);
    flex: 1;
    min-width: 0;
}

.gallery-main {
    padding: 45px 35px 70px 45px;
    width: 100%;
}

.gallery-title {
    font-family: var(--font-heading);
    font-size: 28px;
    font-weight: 400;
    margin-bottom: 28px;
    letter-spacing: 1.5px;
    color: var(--text-title);
    text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Home Page Fullscreen Slideshow
   -------------------------------------------------------------------------- */
.page-home {
    background-color: #0c0c0c;
    overflow: hidden;
    --sidebar-width: auto;
}

.page-home #site-header {
    width: auto;
}

.home-main {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    z-index: 0; /* Placed cleanly behind the sidebar */
}

#slideshow-container {
    width: 100%;
    height: 100%;
    position: relative;
    background-color: #0c0c0c;
}

.slide-item {
    position: absolute;
    inset: 0;
    opacity: 0;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    transition: opacity 1.4s ease-in-out;
}

.slide-item.active {
    opacity: 1;
}

#home-mobile-footer {
    display: none;
}

/* --------------------------------------------------------------------------
   Photo Gallery - Masonry Grid Layout
   -------------------------------------------------------------------------- */
.masonry-grid {
    position: relative;
    width: 100%;
    margin-top: 10px;
    transition: height 0.25s ease;
}

.gallery-item {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    background-color: var(--card-bg);
    border-radius: 2px;
    opacity: 0;
    transition: opacity 0.35s ease, transform 0.25s ease;
}

.gallery-item.laid-out {
    opacity: 1;
}

.gallery-item a {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    position: relative;
}

.gallery-item picture,
.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.gallery-item img {
    transition: transform 0.4s ease, filter 0.4s ease;
}

.gallery-item:hover img {
    transform: scale(1.035);
    filter: brightness(1.08);
}

/* Hover caption overlay (subtle) */
.caption-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 10px 12px;
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.2) 70%, transparent 100%);
    color: #ffffff;
    font-size: 12px;
    font-family: var(--font-heading);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    text-shadow: 0 1px 3px rgba(0,0,0,0.9);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gallery-item:hover .caption-overlay {
    opacity: 1;
}

/* --------------------------------------------------------------------------
   PhotoSwipe v5 Custom Caption & Theme Adjustments
   -------------------------------------------------------------------------- */
.pswp__custom-caption {
    background: rgba(14, 14, 14, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #ffffff;
    font-size: 15px;
    font-family: var(--font-heading);
    padding: 10px 26px;
    border-radius: 4px;
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    max-width: 85%;
    width: max-content;
    white-space: nowrap;
    text-align: center;
    pointer-events: none;
    letter-spacing: 0.8px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.7);
    z-index: 1050;
    line-height: 1.4;
}

@media (max-width: 600px) {
    .pswp__custom-caption {
        white-space: normal;
        width: auto;
        bottom: 16px;
        font-size: 13px;
        padding: 8px 16px;
    }
}

/* --------------------------------------------------------------------------
   Responsive Mobile Adjustments
   -------------------------------------------------------------------------- */
@media (max-width: 900px), (orientation: landscape) and (max-height: 600px) {
    :root {
        --gallery-row-height: 140px;
    }

    #layout-container {
        flex-direction: column;
    }

    #site-header {
        position: sticky;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: auto;
        bottom: auto;
        padding: 16px 24px;
        background-color: rgba(12, 12, 12, 0.74);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
        z-index: 1000;
    }

    .page-home {
        min-height: 100%;
        overflow-x: hidden;
    }

    .page-home #layout-container {
        display: flex;
        flex-direction: column;
        width: 100%;
        min-height: 100%;
        min-height: 100dvh;
        min-height: var(--app-height, 100dvh);
        position: relative;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        box-sizing: border-box;
    }

    .page-home #site-header {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        bottom: auto;
        width: 100%;
        flex: 0 0 auto;
        z-index: 1000;
        background-color: rgba(12, 12, 12, 0.74);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
        padding: 16px 24px;
        box-sizing: border-box;
    }

    .page-home .home-main {
        position: relative;
        flex: 1 1 auto;
        min-height: 250px;
        top: auto;
        left: auto;
        width: 100%;
        overflow: hidden;
        z-index: 1;
        box-sizing: border-box;
    }

    .page-home #slideshow-container {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
    }

    /* Mobile Portrait Bottom Bar for Social Links */
    .page-home #home-mobile-footer {
        display: flex !important;
        align-items: center;
        justify-content: center;
        position: relative;
        width: 100%;
        min-height: 52px;
        flex: 0 0 auto;
        background-color: #0c0c0c;
        border-top: 1px solid rgba(255, 255, 255, 0.12);
        box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.7);
        z-index: 100;
        padding-top: 12px;
        padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px) + var(--bottom-bar-offset, 0px));
        box-sizing: border-box;
    }

    .has-bottom-bar .page-home #home-mobile-footer {
        padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px));
    }

    .home-social-nav {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 32px;
        width: 100%;
        max-width: 360px;
        margin: 0 auto;
    }

    .page-gallery #site-header {
        background-color: rgba(12, 12, 12, 0.75);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
        box-shadow: 0 4px 18px rgba(0, 0, 0, 0.65);
    }

    .branding {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
    }

    .branding .site-title {
        display: flex;
        align-items: center;
    }

    .branding .site-logo {
        width: auto;
        height: 38px;
        max-height: 38px;
        margin-bottom: 0;
    }

    #menu-toggle {
        display: block;
    }

    #site-nav {
        display: none;
    }

    #site-nav.open {
        display: block;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background-color: rgba(12, 12, 12, 0.74);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.65);
        padding: 22px 24px 26px 24px;
        margin-top: 0;
        max-height: calc(var(--app-height, 100dvh) - 80px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        z-index: 1000;
    }

    #site-nav.open ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    #site-nav.open li {
        margin-bottom: 14px;
    }

    #site-nav.open a {
        font-size: 13px;
        letter-spacing: 2px;
        display: inline-block;
        padding: 4px 0;
        text-shadow: 0 1px 4px rgba(0, 0, 0, 0.85);
    }

    #site-nav.open .menu-social-nav {
        margin-top: 22px;
        padding-top: 18px;
        border-top: 1px solid rgba(255, 255, 255, 0.12);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 28px;
        width: 100%;
    }

    #site-footer {
        display: none;
    }

    #main-content {
        margin-left: 0;
    }

    .gallery-main {
        padding: 25px 15px 50px 15px;
    }

    .gallery-title {
        font-size: 22px;
        margin-bottom: 18px;
    }
}

/* --------------------------------------------------------------------------
   Home Page - Mobile Landscape Orientation
   Left sidebar navigation and slideshow fitting dynamic viewport height (no overlay)
   -------------------------------------------------------------------------- */
@media (orientation: landscape) and (max-height: 600px) {
    .page-home {
        --sidebar-width: clamp(190px, 25vw, 225px);
    }

    .page-home #layout-container {
        position: relative;
        flex-direction: row;
        min-height: 100vh;
        min-height: 100svh;
        min-height: 100dvh;
        height: auto;
    }

    /* Fixed Left Sidebar on Home (Desktop Photocrati style) */
    .page-home #site-header {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        right: auto;
        width: var(--sidebar-width);
        height: 100vh;
        height: 100svh;
        height: 100dvh;
        padding: 20px 16px 20px 22px;
        background-color: rgba(11, 11, 11, 0.95);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        border-right: 1px solid rgba(255, 255, 255, 0.12);
        border-bottom: none;
        box-shadow: 4px 0 25px rgba(0, 0, 0, 0.7);
        z-index: 100;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        overflow-y: auto;
        overflow-x: hidden;
    }

    /* Branding Logo */
    .page-home .branding {
        display: block;
        margin-bottom: 18px;
    }

    .page-home .site-logo {
        width: 140px;
        height: auto;
        margin-bottom: 0;
    }

    /* Hide the hamburger button (menu is always visible in sidebar) */
    .page-home #menu-toggle {
        display: none !important;
    }

    /* Persistent Navigation Menu */
    .page-home #site-nav {
        display: flex !important;
        flex-direction: column !important;
        flex: 1 !important;
        position: static !important;
        margin-top: 0;
        padding-top: 0;
        border-top: none;
        border-bottom: none !important;
        background: transparent !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        max-height: none;
        overflow: visible;
        padding: 0 !important;
    }

    .page-home #site-nav ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .page-home #site-nav li {
        margin-bottom: 8px;
    }

    .page-home #site-nav a {
        font-size: 11px;
        letter-spacing: 1.5px;
    }

    .page-home #site-nav .menu-social-nav {
        margin-top: auto;
        padding-top: 14px;
        display: flex;
        align-items: center;
        gap: 12px;
    }

    /* Main Slideshow Area: Placed cleanly to the right of the sidebar */
    .page-home .home-main {
        position: fixed;
        top: 0;
        left: var(--sidebar-width);
        right: 0;
        bottom: 0;
        width: auto;
        height: 100vh;
        height: 100svh;
        height: 100dvh; /* Dynamic viewport height: respects mobile browser URL / navigation bars */
        overflow: hidden;
        z-index: 1;
        background-color: #0c0c0c;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .page-home #slideshow-container {
        width: 100%;
        height: 100%;
        position: relative;
        inset: auto;
        background-color: #0c0c0c;
    }

    /* Scaled to fit viewport height and width with zero cropping */
    .page-home .slide-item {
        position: absolute;
        inset: 0;
        background-size: contain;
        background-position: center center;
        background-repeat: no-repeat;
    }

    .page-home #home-mobile-footer {
        display: none !important;
    }
}

/* --------------------------------------------------------------------------
   Home Page - Desktop
   The menu keeps its own column on the left and the slideshow fills the
   space to its right. Each photo fits the full viewport height (or the
   available width, for very wide panoramas) without any cropping.
   Matches every width where the mobile layouts above do not apply.
   -------------------------------------------------------------------------- */
@media (min-width: 901px) and (min-height: 601px), (min-width: 901px) and (orientation: portrait) {
    .page-home {
        --sidebar-width: 250px;
    }

    .page-home #site-header {
        width: var(--sidebar-width);
        background-color: #0b0b0b;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border-right: 1px solid rgba(255, 255, 255, 0.12);
        box-shadow: 6px 0 32px rgba(0, 0, 0, 0.75);
    }

    .page-home #main-content {
        left: var(--sidebar-width);
        width: auto;
        right: 0;
        margin-left: 0;
    }

    .page-home .slide-item {
        background-size: contain;
    }
}

/* --------------------------------------------------------------------------
   Gallery Pages - Mobile Landscape Orientation
   Slim header (50% height), scaled logo & hamburger, 75% frosted glass blur
   -------------------------------------------------------------------------- */
@media (orientation: landscape) and (max-height: 600px) {
    .page-gallery #layout-container {
        flex-direction: column;
    }

    .page-gallery #site-header {
        position: sticky;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: auto;
        bottom: auto;
        padding: 5px 16px;
        background-color: rgba(12, 12, 12, 0.75);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
        z-index: 1000;
        box-sizing: border-box;
    }

    .page-gallery .branding {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        margin-bottom: 0;
    }

    .page-gallery .site-logo {
        width: auto;
        height: 24px;
        max-height: 24px;
        margin-bottom: 0;
    }

    .page-gallery #menu-toggle {
        display: block !important;
        padding: 3px 5px;
    }

    .page-gallery #menu-toggle span {
        width: 18px;
        height: 2px;
        margin: 3px 0;
    }

    .page-gallery #site-nav {
        display: none;
    }

    .page-gallery #site-nav.open {
        display: block;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background-color: rgba(12, 12, 12, 0.75);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7);
        padding: 10px 18px 14px 18px;
        max-height: calc(100vh - 40px);
        max-height: calc(100dvh - 40px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        z-index: 1000;
    }

    .page-gallery #site-nav.open li {
        margin-bottom: 8px;
    }

    .page-gallery #site-nav.open a {
        font-size: 11px;
        letter-spacing: 1.5px;
        padding: 2px 0;
    }

    .page-gallery #site-nav.open .menu-social-nav {
        margin-top: 10px;
        padding-top: 10px;
        gap: 16px;
    }

    .page-gallery #site-nav.open .menu-social-nav img {
        width: 18px;
        height: 18px;
    }

    .page-gallery #main-content {
        margin-left: 0;
    }

    .page-gallery .gallery-main {
        padding: 18px 14px 35px 14px;
    }

    .page-gallery .gallery-title {
        font-size: 18px;
        margin-bottom: 12px;
    }
}

/* --------------------------------------------------------------------------
   End-of-Gallery Navigation (Pagination)
   -------------------------------------------------------------------------- */
.gallery-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 55px;
    padding-top: 35px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    gap: 20px;
}

.pagination-link {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: var(--text-color);
    padding: 14px 22px;
    background-color: rgba(22, 22, 22, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 4px;
    transition: all 0.25s ease;
    min-width: 180px;
}

.pagination-link.next {
    margin-left: auto;
    text-align: right;
}

.pagination-sub {
    font-size: 11px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 4px;
}

.pagination-title {
    font-family: var(--font-nav);
    font-size: 14px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #ffffff;
}

.pagination-link:hover {
    background-color: rgba(35, 35, 35, 0.8);
    border-color: rgba(255, 255, 255, 0.25);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

@media (max-width: 600px) {
    .gallery-pagination {
        flex-direction: column;
        align-items: stretch;
    }
    .pagination-link.next {
        text-align: left;
    }
}

/* --------------------------------------------------------------------------
   Floating Back to Top Button
   -------------------------------------------------------------------------- */
#back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: rgba(18, 18, 18, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.25s ease;
    z-index: 99;
}

#back-to-top.visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

#back-to-top:hover {
    background-color: rgba(45, 45, 45, 0.95);
    border-color: rgba(255, 255, 255, 0.35);
    transform: translateY(-3px);
}

/* --------------------------------------------------------------------------
   Lightbox High-Res Photo Copy Protection
   -------------------------------------------------------------------------- */
.pswp__img {
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;
    user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}