/* Dimension-style Menu CSS */

/* Global - Hide all scrollbars */
html, body {
    overflow: hidden;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

/* Name Logo - Lower Left */
#name-logo {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 10000;
    opacity: 0.8;
    transition: opacity 0.3s ease-in-out;
}

#name-logo:hover {
    opacity: 1;
}

#name-logo img {
    height: calc(20vw / 5); /* 1/5th of viewport width - same as mg-site */
    width: auto;
    display: block;
}

/* Tagline below MG Logo */
#tagline {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, calc(-50% - 80px)); /* Moved another 100px higher (was +20px, now -80px) */
    z-index: 10000;
    color: #ffffff;
    font-family: 'myriad-pro-light', 'myriad-pro', sans-serif;
    font-weight: 300;
    font-size: 1.2rem;
    letter-spacing: 0.17325em; /* Increased by another 10% (was 0.1575em) */
    text-transform: uppercase;
    text-align: center;
    opacity: 0.9;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    white-space: nowrap;
}

/* Header */
#header {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10001;
    transition: opacity 0.325s ease-in-out;
}

/* Home Button - positioned next to article */
#home-button {
    position: fixed;
    top: 50%;
    left: calc(50% + 25rem + 20px); /* Half article width (25rem) + 20px */
    transform: translateY(-50%);
    z-index: 10001;
    padding: 2rem;
}

/* Responsive: Screens less than 1400px wide */
@media screen and (max-width: 1399px) {
    /* Move header to bottom center */
    #header {
        top: auto;
        bottom: 10px;
        left: 50%;
        right: auto;
        transform: translateX(-50%);
    }
    
    /* Move home button to top right when visible */
    #home-button {
        top: 10px;
        right: 10px;
        left: auto;
        transform: none;
        padding: 0;
    }
    
    /* Move tagline above menu in mobile */
    #tagline {
        top: auto;
        bottom: calc(10px + 2.75rem + 50px); /* Menu bottom padding + menu height + 50px gap (was 25px, now 50px) */
        transform: translateX(-50%);
        font-size: 1rem; /* Slightly smaller on mobile */
    }
    
    /* Hide name SVG logo in mobile */
    #name-logo {
        display: none;
    }
}

#header nav,
#home-button nav {
    text-align: center;
}

#header nav ul,
#home-button nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: inline-flex;
    flex-wrap: wrap;
    background: rgba(27, 31, 34, 0.85);
    border-radius: 4px;
    border: solid 1px rgba(255, 255, 255, 0.15);
    max-width: 90vw; /* Prevent overflow on small screens */
}

#header nav ul li,
#home-button nav ul li {
    display: block;
    margin: 0;
    padding: 0;
    border-left: solid 1px rgba(255, 255, 255, 0.15);
    vertical-align: top;
    flex: 0 0 auto; /* Don't grow or shrink, maintain natural width */
}

#header nav ul li:first-child,
#home-button nav ul li:first-child {
    border-left: 0;
}

#header nav ul li a,
#home-button nav ul li a {
    display: block;
    min-width: 7.5rem;
    height: 2.75rem;
    line-height: 2.75rem;
    padding: 0 1.25rem;
    text-transform: uppercase;
    letter-spacing: 0.2rem;
    font-size: 0.8rem;
    color: #ffffff;
    text-decoration: none;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
    box-sizing: border-box;
}

#header nav ul li a:hover,
#home-button nav ul li a:hover {
    background-color: rgba(255, 255, 255, 0.075);
}

#header nav ul li a.active,
#home-button nav ul li a.active {
    background-color: #ffffff;
    color: #1b1f22;
}

/* Main content area */
#main {
    position: relative;
    max-width: 100rem;
    margin: 5rem auto 0 auto;
    width: calc(100% - 4rem);
}

/* Article panels */
#main article {
    display: none;
    background: rgba(27, 31, 34, 0.85);
    border-radius: 4px;
    padding: 2.5rem;
    margin: 20px auto 0 auto; /* Added 20px top margin for home button clearance */
    max-width: 50rem;
    max-height: 80vh;
    opacity: 0;
    transform: translateY(1rem) scale(0.85);
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
    position: relative;
    overflow: hidden;
}

#main article.active {
    display: block;
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Smooth closing animation */
#main article.closing {
    opacity: 0;
    transform: translateY(1rem) scale(0.85);
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
}

/* Special handling for About article when active */
#about.active {
    display: flex !important;
}


/* Form styling */
#main article form {
    margin: 2rem 0;
}

#main article form .fields {
    display: flex;
    flex-wrap: wrap;
    margin: -1rem;
}

#main article form .field {
    flex-grow: 0;
    flex-shrink: 0;
    padding: 1rem;
    width: 100%;
}

#main article form .field.half {
    width: 50%;
}

#main article form label {
    color: #ffffff;
    display: block;
    font-size: 0.8rem;
    font-weight: 300;
    letter-spacing: 0.2rem;
    line-height: 1.5;
    margin: 0 0 1rem 0;
    text-transform: uppercase;
}

#main article form input[type="text"],
#main article form input[type="email"],
#main article form textarea {
    appearance: none;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    border: solid 1px rgba(255, 255, 255, 0.15);
    color: inherit;
    display: block;
    outline: 0;
    padding: 0 1rem;
    text-decoration: none;
    width: 100%;
    font-family: 'myriad-pro', sans-serif;
}

#main article form input[type="text"]:focus,
#main article form input[type="email"]:focus,
#main article form textarea:focus {
    border-color: #ffffff;
}

#main article form input[type="text"],
#main article form input[type="email"] {
    height: 2.75rem;
}

#main article form textarea {
    padding: 0.75rem 1rem;
}

/* Buttons */
#main article .actions {
    display: flex;
    list-style: none;
    margin: 2rem 0 0 0;
    padding: 0;
}

#main article .actions li {
    padding: 0 1rem 0 0;
}

#main article input[type="submit"],
#main article input[type="reset"],
#main article .button {
    appearance: none;
    background-color: transparent;
    border-radius: 4px;
    border: solid 1px rgba(255, 255, 255, 0.15);
    color: #ffffff !important;
    cursor: pointer;
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 300;
    height: 2.75rem;
    letter-spacing: 0.2rem;
    line-height: 2.75rem;
    outline: 0;
    padding: 0 1.25rem;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

#main article input[type="submit"]:hover,
#main article .button.primary:hover {
    background-color: rgba(255, 255, 255, 0.075);
}

#main article input[type="submit"].primary,
#main article .button.primary {
    background-color: #ffffff;
    color: #1b1f22 !important;
}

/* Headings */
#main article h2.major {
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.3;
    margin: 0 0 1.5rem 0;
    color: #ffffff;
    border-bottom: solid 1px rgba(255, 255, 255, 0.15);
    padding-bottom: 0.5rem;
}

/* Ensure italics work in articles */
#main article i,
#main article em {
    font-style: italic;
}

/* About section specific styling */
#about {
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
}

#about h2,
#about h3,
#about .image.main {
    flex-shrink: 0; /* Keep these fixed */
}

/* Wrapper for scroll container to hold fade overlays */
#about .scroll-wrapper {
    flex: 1;
    position: relative;
    margin-top: 20px;
    overflow: hidden;
    min-height: 0; /* Important for flexbox */
}

/* Create scrollable content container */
#about .content-scroll {
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;
    padding-bottom: 40px; /* Space for bottom fade */
    max-height: calc(80vh - 300px); /* Adjust based on header/image height */
    min-height: 200px;
    
    /* Hide scrollbar */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
}

#about .content-scroll::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

#about p {
    font-size: 1.25em; /* 25% larger */
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

/* Top fade boundary - fixed to wrapper */
#about .scroll-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 40px;
    background: linear-gradient(to bottom, 
        rgba(27, 31, 34, 0.85) 0%,
        rgba(27, 31, 34, 0) 100%);
    pointer-events: none;
    z-index: 10;
}

/* Bottom fade boundary - fixed to wrapper */
#about .scroll-wrapper::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40px;
    background: linear-gradient(to top, 
        rgba(27, 31, 34, 0.85) 0%,
        rgba(27, 31, 34, 0) 100%);
    pointer-events: none;
    z-index: 10;
}

/* Images */
#main article .image.main {
    display: block;
    margin: 0 0 2rem 0;
    width: 30%;
    max-width: 200px;
}

#main article .image.main img {
    border-radius: 4px;
    width: 100%;
}

/* Default desktop - show image in header on the right */
#about .about-header {
    display: flex;
    align-items: flex-start;
    margin-bottom: 1.5rem;
}

#about .about-header .header-text {
    flex: 1;
    padding-right: 1rem;
}

#about .about-header .image.main {
    display: block;
    width: 30%;
    max-width: 200px;
    margin: 0;
    flex-shrink: 0;
}

/* Hide the standalone image since it's now in the header */
#about > span.image.main {
    display: none;
}

/* Mobile layout for About section - smaller image */
@media screen and (max-width: 768px) and (min-width: 550px) {
    #about .about-header .image.main {
        width: 120px;
        max-width: 120px;
    }
    
    #about h2.major {
        margin-bottom: 0.5rem;
        font-size: 1.5rem;
    }
    
    #about h3 {
        margin-bottom: 0;
    }
    
    /* Adjust scroll wrapper to account for new layout */
    #about .scroll-wrapper {
        margin-top: 0;
    }
}

/* Below 550px, return to original stacked layout */
@media screen and (max-width: 549px) {
    #about .about-header {
        display: block;
    }
    
    #about .about-header .image.main {
        display: none;
    }
    
    /* Show the original standalone image */
    #about > span.image.main {
        display: block;
        width: 30%;
        max-width: 200px;
        margin: 0 0 2rem 0;
    }
}

/* Responsive - Force 2x2 grid when menu needs to wrap - keep for smaller tablets */
@media screen and (max-width: 768px) {
    /* Force 2x2 grid when space is limited */
    #header nav ul {
        max-width: 400px;
        justify-content: center;
    }
    
    #header nav ul li {
        flex: 0 0 50%; /* Each button takes exactly 50% width */
        border-left: 0;
        border-top: solid 1px rgba(255, 255, 255, 0.15);
    }
    
    /* Remove top border for first row */
    #header nav ul li:nth-child(1),
    #header nav ul li:nth-child(2) {
        border-top: 0;
    }
    
    /* Add vertical divider between columns */
    #header nav ul li:nth-child(odd) {
        border-right: solid 1px rgba(255, 255, 255, 0.15);
    }
    
    #header nav ul li a {
        min-width: 0;
        width: 100%;
        text-align: center;
    }
    
    /* Reduce padding for mobile */
    #main {
        width: calc(100% - 20px); /* 10px each side */
        margin: 2rem auto 0 auto;
    }
    
    #main article {
        padding: 10px;
        max-width: calc(100% - 20px);
        margin-top: 40px; /* Extra clearance for home button on mobile */
    }
    
    /* Adjust home button padding */
    #home-button {
        padding: 10px;
    }
}

@media screen and (max-width: 600px) {
    /* Adjust name logo for mobile */
    #name-logo img {
        height: calc(30vw / 5); /* Same as mg-site mobile sizing */
    }
    
    /* Adjust tagline for mobile */
    #tagline {
        font-size: 0.9rem;
        letter-spacing: 0.1em;
    }
    
    #header nav ul {
        max-width: 320px;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
    }
    
    /* Force 2x2 grid layout */
    #header nav ul li {
        flex: 0 0 50% !important; /* Exactly half width */
        display: block;
        border-left: 0;
        border-top: solid 1px rgba(255, 255, 255, 0.15);
    }
    
    /* Remove top border for first row */
    #header nav ul li:nth-child(1),
    #header nav ul li:nth-child(2) {
        border-top: 0;
    }
    
    /* Add vertical divider only between columns */
    #header nav ul li:nth-child(odd) {
        border-right: solid 1px rgba(255, 255, 255, 0.15);
    }
    
    #header nav ul li a {
        padding: 0 0.5rem;
        font-size: 0.65rem;
        letter-spacing: 0.1rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 100%;
        box-sizing: border-box;
    }
    
    #main article form .field.half {
        width: 100%;
    }
    
    /* Further reduce padding on smaller mobile */
    #main article {
        padding: 10px;
    }
    
    #about .scroll-wrapper {
        margin-top: 10px;
    }
    
    #about .content-scroll {
        padding-bottom: 20px; /* Reduced from 40px */
    }
}

/* Portfolio Gallery Bar Styling - Parallelism Style */
#portfolio-bar {
    position: fixed;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10002;
    width: min-content;
    max-width: 100vw;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    padding: 5px;
    margin: 0 auto;
    background: transparent;
}

#portfolio-bar {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}

#portfolio-bar::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

/* Items container - matches Parallelism exactly */
#portfolio-bar .items {
    display: flex;
    white-space: nowrap;
    height: 16em;
    align-items: center;
    margin-bottom: 10px;
}

#portfolio-bar .items:last-child {
    margin-bottom: 0;
}

/* Last item in each row gets extra border */
#portfolio-bar .items > :last-child {
    border-right: solid 10px #ffffff;
}

/* Item styling - matches Parallelism exactly */
#portfolio-bar .item {
    flex-grow: 0;
    flex-shrink: 0;
    margin: 5px;
    height: 16em;
    box-shadow: 0 0 0 10px #ffffff;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

#portfolio-bar .item.thumb {
    display: block;
    position: relative;
    background: rgba(255, 255, 255, 0.25);
    cursor: default;
}

/* Span classes - matches Parallelism exactly */
#portfolio-bar .item.span-1 {
    width: 20em;
}

#portfolio-bar .item.span-2 {
    width: 30em;
}

#portfolio-bar .item.span-3 {
    width: 40em;
}

/* Title overlay - matches Parallelism */
#portfolio-bar .item.thumb h2 {
    position: absolute;
    bottom: 0;
    left: 0;
    background: rgba(18, 21, 29, 0.85);
    width: 100%;
    padding: 1em;
    font-weight: 400;
    line-height: 1em;
    z-index: 2;
    color: #fff;
    font-size: 1rem;
    margin: 0;
    opacity: 1;
}

/* Image link */
#portfolio-bar .item.thumb a.image {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
}

/* Image fills container - matches Parallelism */
#portfolio-bar .item.thumb img {
    display: block;
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 0;
    transition: opacity 0.75s ease-in-out;
    transition-delay: 1.25s;
}

/* Images visible after load */
body:not(.is-preload) #portfolio-bar .item.thumb img {
    opacity: 1;
}

/* Fade delay classes */
#portfolio-bar .item.thumb.delay-1 img { transition-delay: 1.375s; }
#portfolio-bar .item.thumb.delay-2 img { transition-delay: 1.5s; }
#portfolio-bar .item.thumb.delay-3 img { transition-delay: 1.625s; }
#portfolio-bar .item.thumb.delay-4 img { transition-delay: 1.75s; }
#portfolio-bar .item.thumb.delay-5 img { transition-delay: 1.875s; }
#portfolio-bar .item.thumb.delay-6 img { transition-delay: 2s; }

/* More indicator - only appears in lightbox, not on thumbnails */

/* Portfolio article hint */
.portfolio-article {
    max-height: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: none !important;
    margin: 0 !important;
}

.portfolio-article h2 {
    display: none !important;
}

.close-portfolio-hint {
    font-size: 0.9rem;
    opacity: 0.7;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* Mobile adjustments for portfolio - only phones, not tablets */
@media screen and (max-width: 600px) {
    /* Portfolio becomes full-screen vertical scroll on mobile */
    #portfolio-bar {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        transform: none;
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
        overflow-y: auto;
        padding: 0;
        padding-top: calc(100vh / 8); /* Space for home bar */
        background: #000;
    }
    
    /* Sticky home bar at top */
    #portfolio-bar::before {
        content: 'HOME';
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: calc(100vh / 8);
        background: linear-gradient(to bottom, rgba(255,255,255,0.95), rgba(255,255,255,0.85));
        color: #000;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
        font-weight: 600;
        letter-spacing: 0.2em;
        z-index: 10004;
        cursor: pointer;
        box-shadow: 0 2px 20px rgba(0,0,0,0.3);
    }
    
    /* Convert to stacked horizontal bars */
    #portfolio-bar .items {
        flex-direction: column;
        width: 100%;
        height: auto;
        margin: 0;
    }
    
    /* Each item becomes a horizontal bar */
    #portfolio-bar .item {
        width: 100% !important;
        height: 25vh;
        margin: 2px 0;
        box-shadow: none;
        border: 2px solid #fff;
    }
    
    /* Adjust span widths - they all become full width */
    #portfolio-bar .item.span-1,
    #portfolio-bar .item.span-2,
    #portfolio-bar .item.span-3 {
        width: 100% !important;
    }
    
    /* Hide scroll zones on mobile */
    .scrollZone {
        display: none !important;
    }
}

/* Very small screens */
@media screen and (max-width: 400px) {
    #header nav ul {
        max-width: 280px;
    }
    
    #header nav ul li a {
        font-size: 0.6rem;
        padding: 0 0.4rem;
        min-height: 2.5rem;
        line-height: 2.5rem;
        letter-spacing: 0.05rem;
    }
}

/* Poptrox Lightbox Fixes */
.poptrox-popup {
    max-height: 85vh !important;
    width: auto !important; /* Let content determine width */
    max-width: 90vw !important;
    display: inline-block !important; /* Shrink to content */
    padding: 10px !important; /* Small padding for visual separation */
    padding-top: 60px !important; /* Space for control bar */
    padding-bottom: 10px !important;
    background: #1a1f2c !important;
    box-shadow: 0px 0px 0px 5px #fff, 0px 10px 60px 10px rgba(8, 11, 19, 0.55) !important; /* White frame */
}

/* Top control bar */
.poptrox-popup::before {
    content: '';
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 50px !important;
    background: rgba(18, 21, 29, 0.95) !important;
    z-index: 100000 !important;
}

.poptrox-popup .closer {
    z-index: 100003 !important;
    position: absolute !important;
    top: 5px !important; /* Center in 50px bar */
    right: 10px !important;
    background: transparent !important;
    width: 40px !important;
    height: 40px !important;
    line-height: 40px !important;
    text-align: center !important;
    font-size: 28px !important;
    color: #fff !important;
    cursor: pointer !important;
    transition: color 0.3s !important;
}

.poptrox-popup .closer:hover {
    color: #FCB45B !important; /* Orange on hover */
}

.poptrox-popup .pic {
    position: relative !important;
    text-align: center !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-block !important; /* Shrink to image size */
    line-height: 0 !important; /* Remove line-height gaps */
}

.poptrox-popup .pic img {
    max-width: calc(90vw - 40px) !important;
    max-height: calc(75vh - 180px) !important; /* Account for top bar and caption */
    width: auto !important;
    height: auto !important;
    display: inline-block !important;
    vertical-align: bottom !important; /* Align to bottom to meet caption */
}

.poptrox-popup .caption {
    position: relative !important;
    bottom: auto !important;
    left: -10px !important; /* Compensate for popup padding */
    right: -10px !important;
    width: calc(100% + 20px) !important; /* Full width including padding */
    max-width: calc(100% + 20px) !important; /* Never exceed parent + padding */
    min-width: 0 !important; /* Allow to shrink with image */
    min-height: auto !important;
    max-height: 120px !important; /* Max height for scrolling */
    height: auto !important; /* Auto expand based on content */
    line-height: 1.4em !important;
    padding: 10px 20px !important;
    margin-top: 10px !important; /* Gap between image and caption */
    overflow-y: auto !important;
    overflow-x: hidden !important;
    background: rgba(18, 21, 29, 0.95) !important;
    z-index: 100000 !important;
    box-sizing: border-box !important;
    font-size: 1em !important;
    text-align: center !important;
    color: #fff !important;
    
    /* Hide scrollbar completely */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
}

/* Hide scrollbar completely */
.poptrox-popup .caption::-webkit-scrollbar {
    display: none !important;
}

.poptrox-popup .more-button,
.more-button {
    position: absolute !important;
    top: 10px !important; /* Center vertically in 50px bar */
    left: 10px !important; /* Left side of bar */
    width: 60px !important; /* 2:1 ratio width */
    height: 30px !important; /* 2:1 ratio height */
    z-index: 100003 !important; /* Same as close button */
    cursor: pointer !important;
    pointer-events: all !important;
    background-color: #FCB45B !important; /* Yellow/orange background */
    border: none !important;
    padding: 3px !important; /* 3px padding as requested */
    box-sizing: border-box !important;
    animation: opacityFade 2s ease-in-out infinite !important;
    overflow: hidden !important;
}

/* Add the more-info.png as a child element with inverted colors */
.more-button::after {
    content: '' !important;
    position: absolute !important;
    top: 3px !important; /* 3px padding */
    left: 3px !important; /* 3px padding */
    width: calc(100% - 6px) !important; /* Full width minus padding */
    height: calc(100% - 6px) !important; /* Full height minus padding */
    background-image: url('../../portfolio/art/more-info.png') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    filter: invert(1) brightness(0) !important; /* Make it pure black */
}

/* Opacity fade animation for more button */
@keyframes opacityFade {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

.more-button:hover {
    animation-play-state: paused !important;
    background-color: #FFCC77 !important;
}

/* Hide original poptrox navigation arrows and any duplicates */
.poptrox-popup .nav-next,
.poptrox-popup .nav-previous,
.poptrox-popup > div[style*="position: absolute"] > div[style*="><"] ,
.poptrox-popup > div[style*="position: absolute"] > div[style*=">>"] {
    display: none !important;
}

/* Mobile-specific lightbox layout */
@media screen and (max-width: 600px) {
    .poptrox-popup {
        position: fixed !important;
        top: 5% !important;
        left: 5% !important;
        right: 5% !important;
        bottom: 5% !important;
        width: 90% !important;
        height: 90% !important;
        max-width: 90% !important;
        max-height: 90% !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        background: #000 !important;
        box-shadow: 0px 0px 0px 2px #fff, 0px 5px 30px 5px rgba(0, 0, 0, 0.8) !important;
    }
    
    /* Top control bar stays at top */
    .poptrox-popup::before {
        position: absolute !important;
        top: 0 !important;
        height: 50px !important;
        z-index: 100000 !important;
    }
    
    /* Image container takes top portion, leaving space for caption */
    .poptrox-popup .pic {
        position: absolute !important;
        top: 50px !important; /* Below control bar */
        left: 0 !important;
        right: 0 !important;
        bottom: 33.33% !important; /* Stop at caption boundary */
        height: auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 10px !important;
        overflow: hidden !important;
    }
    
    .poptrox-popup .pic img {
        max-width: calc(100% - 20px) !important; /* Account for padding */
        max-height: 100% !important;
        width: auto !important;
        height: auto !important;
        object-fit: contain !important;
        display: block !important;
    }
    
    /* Caption takes bottom 1/3 */
    .poptrox-popup .caption {
        position: absolute !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        top: 66.67% !important; /* Start at 2/3 point */
        height: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 20px !important;
        overflow-y: auto !important;
        background: rgba(18, 21, 29, 0.95) !important;
        border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
        z-index: 10 !important; /* Ensure caption is above image */
    }
    
    /* More button and closer stay in control bar */
    .poptrox-popup .closer {
        top: 5px !important;
        right: 10px !important;
    }
    
    .poptrox-popup .more-icon {
        top: 10px !important;
        left: 10px !important;
    }
}

/* Tablet layout - similar to desktop but ensure no overlap */
@media screen and (min-width: 601px) and (max-width: 1024px) {
    .poptrox-popup {
        max-height: 90vh !important;
        max-width: 90vw !important;
    }
    
    /* Ensure image doesn't overflow into caption area */
    .poptrox-popup .pic {
        position: relative !important;
        display: block !important;
        margin-bottom: 10px !important; /* Space before caption */
    }
    
    .poptrox-popup .pic img {
        max-width: calc(90vw - 40px) !important;
        max-height: calc(65vh - 180px) !important; /* Leave room for caption */
        width: auto !important;
        height: auto !important;
    }
    
    /* Ensure caption stays below image */
    .poptrox-popup .caption {
        position: relative !important;
        max-height: 25vh !important; /* Limit caption height on tablets */
    }
}

/* Fix white band at bottom */
body.is-poptrox-visible {
    overflow: hidden !important;
}

.poptrox-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
}
/* Mobile Caption Button and Overlay Styles */
@media screen and (max-width: 600px) {
    /* Caption button - positioned like more button but on the right side of control bar */
    
    /* Caption overlay */
    .caption-overlay {
        position: absolute !important;
        top: 50px !important; /* Below control bar */
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        background: rgba(18, 21, 29, 0.95) !important;
        z-index: 100000 !important;
        display: flex !important;
        flex-direction: column !important;
    }
    
    /* Close button for overlay */
    .caption-overlay-close {
        position: absolute !important;
        top: 15px !important;
        left: 15px !important;
        width: 40px !important;
        height: 40px !important;
        background: rgba(255, 255, 255, 0.1) !important;
        border: 2px solid rgba(255, 255, 255, 0.3) !important;
        border-radius: 50% !important;
        color: #fff !important;
        font-size: 24px !important;
        line-height: 36px !important;
        text-align: center !important;
        cursor: pointer !important;
        transition: all 0.2s !important;
    }
    
    .caption-overlay-close:hover {
        background: rgba(255, 255, 255, 0.2) !important;
        border-color: rgba(255, 255, 255, 0.5) !important;
    }
    
    /* Caption content */
    .caption-overlay-content {
        padding: 70px 20px 20px 20px !important; /* Top padding for close button */
        overflow-y: auto !important;
        flex: 1 !important;
        -webkit-overflow-scrolling: touch !important; /* Smooth scrolling on iOS */
    }
    
    .caption-overlay-title {
        font-size: 1.2em !important;
        font-weight: 600 !important;
        color: #fff !important;
        margin-bottom: 15px !important;
        line-height: 1.4 !important;
    }
    
    .caption-overlay-description {
        font-size: 1em !important;
        color: rgba(255, 255, 255, 0.85) !important;
        line-height: 1.6 !important;
        white-space: pre-wrap !important; /* Preserve formatting */
    }
    
    /* Update image container to use full height when caption is overlay */
    .poptrox-popup .pic {
        position: absolute !important;
        top: 50px !important; /* Below control bar */
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important; /* Use full height */
        height: auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 10px !important;
        overflow: hidden !important;
    }
    
    .poptrox-popup .pic img {
        max-width: calc(100% - 20px) !important;
        max-height: calc(100% - 20px) !important;
        width: auto !important;
        height: auto !important;
        object-fit: contain !important; /* Ensure image fits entirely */
    }
    
    /* Hide original caption completely on mobile */
    .poptrox-popup .caption,
    .poptrox-popup .caption-wrapper {
        display: none !important;
    }
}

/* Also update the more button to ensure it's visible */
@media screen and (max-width: 600px) {
    .poptrox-popup .more-button {
        left: 15px !important; /* Consistent positioning */
    }
}

/* Update Mobile Caption Button to match More Button styling */
@media screen and (max-width: 600px) {
    /* Caption button - matches more button styling */
    .poptrox-popup .caption-button {
        position: absolute !important;
        top: 10px !important;
        left: 78px !important; /* 10px (more button left) + 60px (more button width) + 8px (spacing) */
        width: 60px !important; /* Same as more button */
        height: 30px !important; /* Same as more button */
        z-index: 100003 !important; /* Same as more button */
        cursor: pointer !important;
        pointer-events: all !important;
        background-color: #FCB45B !important; /* Same yellow/orange background */
        border: none !important;
        padding: 3px !important; /* Same 3px padding */
        box-sizing: border-box !important;
        animation: opacityFade 2s ease-in-out infinite !important; /* Same animation */
        overflow: hidden !important;
        text-indent: -9999px !important; /* Hide any text */
    }
    
    /* Caption icon as child element with inverted colors - matching more button style */
    .caption-button::after {
        content: '' !important;
        position: absolute !important;
        top: 3px !important; /* 3px padding */
        left: 3px !important; /* 3px padding */
        width: calc(100% - 6px) !important; /* Full width minus padding */
        height: calc(100% - 6px) !important; /* Full height minus padding */
        background-image: url('/parallelism-threejs/images/caption-icon.png') !important;
        background-size: contain !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
        filter: invert(1) brightness(0) !important; /* Make it pure black like more button */
    }
}

/* Grey out control bar items when caption overlay is open */
@media screen and (max-width: 600px) {
    /* When caption overlay is visible, grey out control bar items */
    .poptrox-popup.caption-active .more-button,
    .poptrox-popup.caption-active .caption-button,
    .poptrox-popup.caption-active .closer {
        opacity: 0.3 !important;
        pointer-events: none !important;
        animation: none !important; /* Stop animation on buttons */
    }
    
    /* Keep the overlay interactive */
    .poptrox-popup.caption-active .caption-overlay {
        pointer-events: all !important;
    }
}

/* Strengthen control disabling when caption is active */
@media screen and (max-width: 600px) {
    /* Create an invisible blocking layer over controls when caption is active */
    .poptrox-popup.caption-active::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 50px; /* Cover the control bar area */
        z-index: 100002; /* Above controls but below overlay */
        pointer-events: all; /* Block all clicks */
    }
    
    /* Ensure caption overlay is on top */
    .poptrox-popup.caption-active .caption-overlay {
        z-index: 100004 !important; /* Higher than everything */
    }
    
    /* Make absolutely sure controls can't be clicked */
    .poptrox-popup.caption-active .more-button,
    .poptrox-popup.caption-active .caption-button,
    .poptrox-popup.caption-active .closer,
    .poptrox-popup.caption-active .nav-next,
    .poptrox-popup.caption-active .nav-previous {
        pointer-events: none !important;
        cursor: default !important;
    }
}

/* Fix touch scrolling for caption overlay on mobile */
@media screen and (max-width: 600px) {
    /* Ensure caption overlay allows touch scrolling */
    .caption-overlay {
        touch-action: pan-y !important; /* Allow vertical scrolling */
        -webkit-overflow-scrolling: touch !important;
        overflow: hidden !important; /* Prevent overlay itself from scrolling */
    }
    
    /* Make content area scrollable with touch */
    .caption-overlay-content {
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        touch-action: pan-y !important;
        max-height: calc(100vh - 120px) !important; /* Account for control bar and padding */
        overscroll-behavior: contain !important; /* Prevent scroll chaining */
    }
    
    /* Ensure close button stays fixed */
    .caption-overlay-close {
        position: fixed !important; /* Changed from absolute to fixed */
        touch-action: manipulation !important; /* Optimize for touch */
    }
    
    /* Fix for iOS momentum scrolling */
    .caption-overlay-content::-webkit-scrollbar {
        display: none; /* Hide scrollbar on mobile for cleaner look */
    }
}