.gallery-container {
             padding: 20px;
             max-width: 1400px;
             margin: 0 auto;
         }

         .gallery-grid {
             columns: 4;
             column-gap: 15px;
             break-inside: avoid;
         }         .gallery-item {
             background: rgba(47, 59, 66, 0.4);
             border-radius: 12px;
             overflow: hidden;
             box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
             transition: all 0.3s ease;
             position: relative;
             display: inline-block;
             width: 100%;
             min-width: 0;
             margin-bottom: 15px;
             break-inside: avoid;
             page-break-inside: avoid;
             cursor: pointer;
         }

         .gallery-item:hover {
             transform: translateY(-8px) scale(1.02);
             box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
             background: rgba(47, 59, 66, 0.6);
         }

         .gallery-item img {
             width: 100%;
             height: auto;
             display: block;
             transition: filter 0.3s ease;
         }

         .gallery-item:hover img {
             filter: brightness(1.1) contrast(1.05);
         }

         /* Prevent purple/blue link colors on gallery items */
         .gallery-item {
             text-decoration: none !important;
             color: inherit !important;
         }

         .gallery-item:link,
         .gallery-item:visited,
         .gallery-item:hover,
         .gallery-item:active {
             text-decoration: none !important;
             color: inherit !important;
         }

         .gallery-item img {
             text-decoration: none !important;
             color: inherit !important;
         }

         .image-overlay {
             position: absolute;
             bottom: 0;
             left: 0;
             right: 0;
             background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
             color: var(--text-light);
             padding: 20px 15px 15px;
             opacity: 0;
             transition: opacity 0.3s ease;
             font-size: 0.9rem;
             font-weight: 500;
             line-height: 1.3;
             max-width: 100%;
             overflow: hidden;
             display: -webkit-box;
             -webkit-line-clamp: 2;
             -webkit-box-orient: vertical;
             overflow-wrap: break-word;
             word-break: normal;
             -webkit-hyphens: none;
             hyphens: none;
         }

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

         /* Lightbox Styles */
         .lightbox {
             display: none;
             position: fixed;
             top: 0;
             left: 0;
             width: 100%;
             height: 100%;
             background: rgba(0, 0, 0, 0.95);
             z-index: 1000;
             opacity: 0;
             transition: opacity 0.3s ease;
         }

         .lightbox.active {
             display: flex;
             opacity: 1;
         }

         .lightbox-content {
             position: relative;
             max-width: 95%;
             max-height: 90%;
             margin: auto;
             display: flex;
             flex-direction: row;
             background: var(--main-bg);
             border-radius: 12px;
             overflow: hidden;
             box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
         }

         .lightbox-content.fullscreen-mode {
             position: fixed !important;
             top: 0 !important;
             left: 0 !important;
             right: 0 !important;
             bottom: 0 !important;
             width: 100vw !important;
             height: 100vh !important;
             max-width: 100vw !important;
             max-height: 100vh !important;
             margin: 0 !important;
             border-radius: 0 !important;
             z-index: 99999 !important;
             background: #000 !important;
             flex-direction: column !important;
         }

         .lightbox-content.fullscreen-mode .lightbox-info {
             display: none !important;
         }

         /* Updated fullscreen button with SVG icon */
         .image-fullscreen-btn {
             position: absolute;
             bottom: 15px;
             right: 15px;
             width: 40px;
             height: 40px;
             background: none;
             border: none;
             color: var(--accent-green);
             cursor: pointer;
             display: flex;
             align-items: center;
             justify-content: center;
             z-index: 1001;
             transition: opacity 0.3s ease;
             pointer-events: auto;
         }

         .image-fullscreen-btn:hover {
             color: #fff;
         }

         /* fullscreen button SVG corners */
         .image-fullscreen-btn svg {
             overflow: visible;
         }

         .image-fullscreen-btn .corner {
             fill: none;
             stroke: currentColor;
             stroke-width: 2;
             transition: transform .35s ease;
         }

         /* individual origins so each "L" flips in place */
         .image-fullscreen-btn .corner.tl { transform-origin: 3px 3px; }
         .image-fullscreen-btn .corner.tr { transform-origin: 21px 3px; }
         .image-fullscreen-btn .corner.bl { transform-origin: 3px 21px; }
         .image-fullscreen-btn .corner.br { transform-origin: 21px 21px; }

         /* on fullscreen rotate each L 180° */
         .image-fullscreen-btn.fullscreen .corner {
             transform: rotate(180deg);
         }

         /* NEW close button styles */
         .image-close-btn {
             position: absolute;
             bottom: 15px;
             right: 60px;
             width: 40px;
             height: 40px;
             background: none;
             border: none;
             color: var(--accent-green);
             cursor: pointer;
             display: flex;
             align-items: center;
             justify-content: center;
             z-index: 1001;
             transition: opacity 0.3s ease;
             pointer-events: auto;
             font-size: 28px;
             line-height: 0;
         }

         .image-close-btn:hover {
             color: #fff;
         }

         /* --- DESKTOP: unify colour & size of fullscreen button --- */
         @media (min-width:769px){
             .image-fullscreen-btn{                       /* identical colour */
                 color:var(--accent-green) !important;
             }
             .image-fullscreen-btn .corner{               /* force green stroke */
                 stroke:var(--accent-green) !important;
                  stroke-width:2.5;
             }
              .image-close-btn{
                 font-size:34px;             /* was 28px */
                 line-height:0;              /* keep centred */
                 font-weight:700;            /* bolder stroke */
             }
              /* make the SVG icon fill the 40px control box */
             .image-fullscreen-btn svg{width:28px;height:28px;}
         }

         /* hide via JS */
         .controls-hidden {
             opacity: 0 !important;
             pointer-events: none !important;
         }

         /* fullscreen + close buttons (visible by default) */
         .image-fullscreen-btn,
         .image-close-btn{
             width:40px;height:40px;background:none;border:none;
             color:var(--accent-green);display:flex;align-items:center;
             justify-content:center;cursor:pointer;z-index:1001;
             transition:opacity .3s ease;
         }

         /* touch-devices: show buttons immediately (no :hover) */
         @media(max-width:768px){
             .image-fullscreen-btn,
             .image-close-btn{opacity:1;}         /* start visible */
         }

         /* hide close button in fullscreen */
         .lightbox-content.fullscreen-mode .image-close-btn{display:none;}

         /* Mobile-specific fullscreen optimizations */
         @media (max-width: 768px) {
             .lightbox-content.fullscreen-mode .lightbox-image {
                 max-width: 95vw !important;
                 max-height: 90vh !important;
             }
         }

         /* Landscape-specific adjustments */
         @media (orientation: landscape) and (max-width: 1024px) {
             .lightbox-content.fullscreen-mode .lightbox-image {
                 max-width: 90vw !important;
                 max-height: 85vh !important;
             }
         }

         .lightbox-info {
             width: 350px;
             padding: 30px;
             background: var(--dark-slate-gray);
             color: var(--text-light);
             overflow-y: auto;
             flex-shrink: 0;
             min-width: 0;
         }

         /* ─── CUSTOM SCROLLBAR FOR DESCRIPTION AREA ─── */
         .lightbox-info::-webkit-scrollbar {
             width: 8px;
         }
         
         .lightbox-info::-webkit-scrollbar-track {
             background: rgba(255, 255, 255, 0.1);
             border-radius: 4px;
         }
         
         .lightbox-info::-webkit-scrollbar-thumb {
             background: #B2D8B4;
             border-radius: 4px;
         }
         
         .lightbox-info::-webkit-scrollbar-thumb:hover {
             background: #9fc9a1;
         }

         /* Firefox scrollbar styling */
         .lightbox-info {
             scrollbar-width: thin;
             scrollbar-color: #B2D8B4 rgba(255, 255, 255, 0.1);
         }

         .lightbox-title {
             font-size: 1.4rem;
             color: var(--accent-green);
             margin-bottom: 15px;
             margin-top: 8px;
             padding-top: 8px;
             font-family: 'Montserrat', sans-serif;
             line-height: 1.3;
             max-width: 100%;
             overflow-wrap: break-word;
             word-break: normal;
             -webkit-hyphens: none;
             hyphens: none;
         }

         .lightbox-description {
             line-height: 1.6;
             color: var(--light-gray);
             font-size: 0.95rem;
             max-width: 100%;
             overflow-wrap: break-word;
             word-break: normal;
             -webkit-hyphens: none;
             hyphens: none;
         }

         /* Mobile responsiveness */
         @media (max-width: 768px) {
             .lightbox-content {
                 flex-direction: column;
                 max-width: 95%;
                 max-height: 95%;
             }

             .lightbox-info {
                 width: 100%;
                 max-height: none; /* Remove height restriction for more description space */
                 font-size: 1.5rem;
                 flex: 1; /* Allow description to take remaining space */
             }

             .lightbox-title {
                 font-size: 2.1rem;
             }

             .lightbox-description {
                 font-size: 1.43rem;
             }

             .lightbox-image-container {
                 height: 40vh;
                 max-height: 40vh;
                 display: flex;
                 align-items: center;
                 justify-content: center;
                 background: transparent;     /* remove black background */
                 position: relative; /* Ensure relative positioning for absolute children */
             }

             .lightbox-image {
                 width: auto;
                 height: auto;
                 max-width: 100%;
                 max-height: 40vh;
                 object-fit: cover;           /* fill container, crop if needed */
                 display: block;
             }

             /* Ensure description is always visible on mobile */
             .lightbox-content {
                 min-height: auto;
             }

             .lightbox-info {
                 min-height: 150px;
                 order: 2;
             }

             .lightbox-image-container {
                 order: 1;
                 flex: none;
             }
         }

         /* Responsive adjustments */
         @media (max-width: 1200px) {
             .gallery-grid {
                 columns: 3;
                 column-gap: 12px;
             }
             .gallery-item {
                 margin-bottom: 12px;
             }
         }

         @media (max-width: 768px) {
             .gallery-grid {
                 columns: 2;
                 column-gap: 10px;
             }
             .gallery-item {
                 margin-bottom: 10px;
             }
         }

         @media (max-width: 480px) {
             .gallery-grid {
                 columns: 1;
                 column-gap: 0;
             }
         }

         /* Fallback for better browser support */
         @supports not (columns: 4) {
             .gallery-grid {
                 display: grid;
                 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
                 gap: 15px;
                 grid-auto-rows: masonry;
             }
         }

         /* NEW – anchor buttons to image area on all screens */
         .lightbox-image-container{
             position:relative;                 /* make it the positioning context   */
             display:flex;align-items:center;justify-content:center;
             background:#000;                   /* keep black surround */
         }

         /* ------- NEW: keep fullscreen button visible by default -------- */
         /* The JS timer still toggles .controls-hidden to fade it out.     */
         .lightbox-image-container .image-fullscreen-btn{
             opacity:1;                    /* override any “hidden until :hover” rule */
         }         /* hide cursor when auto-hide triggers */
         .cursor-none { cursor: none; }

         /* ─── SERIES NAVIGATION ARROWS ─── */
         .series-nav-btn {
             position: absolute;
             top: 50%;
             transform: translateY(-50%);
             width: 50px;
             height: 50px;
             background: rgba(0, 0, 0, 0.6);
             border: none;
             border-radius: 50%;
             color: var(--accent-green);
             font-size: 20px;
             cursor: pointer;
             z-index: 100;
             display: flex;
             align-items: center;
             justify-content: center;
             transition: all 0.3s ease;
             opacity: 0;
             pointer-events: none;
             font-family: Arial, sans-serif;
             line-height: 1;
             text-align: center;
         }
         
         /* Create a centered arrow using CSS pseudo-element */
         .series-nav-btn::before {
             content: '';
             width: 0;
             height: 0;
             border-left: 8px solid var(--accent-green);
             border-top: 6px solid transparent;
             border-bottom: 6px solid transparent;
             margin-left: 2px; /* Slight offset to visually center the triangle */
         }

         .series-nav-btn:hover {
             background: rgba(0, 0, 0, 0.8);
             color: white;
             transform: translateY(-50%) scale(1.1);
         }
         
         .series-nav-btn:hover::before {
             border-left-color: white;
         }

         .series-nav-btn.next {
             right: 20px;
         }

         .series-nav-btn.show {
             opacity: 1;
             pointer-events: auto;
         }

         /* Hide navigation arrows in fullscreen */
         .lightbox-content.fullscreen-mode .series-nav-btn {
             display: none !important;
         }

         /* Mobile adjustments for navigation arrows */
         @media (max-width: 768px) {
             .series-nav-btn {
                 width: 40px;
                 height: 40px;
                 font-size: 16px;
             }
             
             .series-nav-btn::before {
                 border-left: 6px solid var(--accent-green);
                 border-top: 5px solid transparent;
                 border-bottom: 5px solid transparent;
                 margin-left: 1px;
             }
             
             .series-nav-btn:hover::before {
                 border-left-color: white;
             }
             
             .series-nav-btn.next {
                 right: 10px;
             }
         }

         /* ─── SERIES INDICATOR ─── */
         .series-indicator {
             background: var(--accent-green);
             color: var(--main-bg);
             font-size: 0.7rem;
             padding: 2px 6px;
             border-radius: 3px;
             font-weight: 600;
             margin-left: 8px;
             white-space: nowrap;
         }

         /* Inline indicator (when title has space) */
         .series-indicator.inline {
             display: inline-block;
             margin-top: 0;
             margin-left: 8px;
             vertical-align: middle;
         }
           
         /* Block indicator (when title is too long) */
         .series-indicator.block {
             display: block;
             margin-top: 4px;
             margin-left: 0;
             width: fit-content;
         }

         /* ─── IMAGE TRANSITION OVERLAY ─── */
         .image-transition-overlay {
             position: absolute;
             top: 0;
             left: 0;
             right: 0;
             bottom: 0;
             background: #000;
             opacity: 0;
             pointer-events: none;
             z-index: 50;
             transition: opacity 0.1s ease;
         }
         
         .image-transition-overlay.active {
             opacity: 1;
         }

         /* ─── DESCRIPTION TRANSITION OVERLAY ─── */
         .description-transition-overlay {
             position: absolute;
             top: 0;
             left: 0;
             right: 0;
             bottom: 0;
             background: var(--dark-slate-gray);
             opacity: 0;
             pointer-events: none;
             z-index: 50;
             transition: opacity 0.1s ease;
         }
         
         .description-transition-overlay.active {
             opacity: 1;
         }

        /* ─── LIGHTBOX IMAGE SIZING (no side bars) ─── */
        .lightbox-content:not(.fullscreen-mode) .lightbox-image-container{
            /* let flexbox size it to the real image width */
            flex:0 0 auto;          /* no stretching */
            max-width:none;         /* remove calc(100vw-390px) constraint */
            background:transparent; /* no grey background */
        }

        /* Image itself: keep inside viewport and description space */
        .lightbox-content:not(.fullscreen-mode) .lightbox-image{
            width:auto;             /* natural width → container follows */
            height:auto;
            max-width:calc(100vw - 390px); /* still never overlap description */
            max-height:90vh;
            object-fit:contain;     /* show full image */
            opacity:1;
            transition:opacity .18s ease;
        }

        .lightbox-image.is-loading{
            opacity:0;
        }

        /* ─── FULLSCREEN: give image full viewport ─── */
		.lightbox-content.fullscreen-mode .lightbox-image-container{
			width:100vw !important;
			height:100vh !important;
			max-width:none !important;
			max-height:none !important;
			background: transparent;         /* remove black background */
		}

		.lightbox-content.fullscreen-mode .lightbox-image{
			width:100vw !important;
			height:100vh !important;
			max-width:100vw !important;
			max-height:100vh !important;
			object-fit:contain;       /* was cover → cut off on mobile */
		}

        /* ─── NEW: mobile override – allow full width again ─── */
        @media (max-width:768px){
            .lightbox-content:not(.fullscreen-mode) .lightbox-image-container{
                max-width:100% !important;   /* keep full width on phones */
                flex:1 1 auto;
            }
            .lightbox-image{
                object-fit:contain;        /* keep full picture */
                max-width:100% !important; /* ← override desktop rule */
                width:100%;               /* ensure it occupies the container */
            }
        }

        /* widen light-box to full viewport (removes side bars) */
        .lightbox-content:not(.fullscreen-mode){
            width:auto;                           /* drop the previous 100 vw */
            max-width:calc(100vw - 40px);         /* small viewport margin   */
            margin:auto;                          /* keep centred            */
        }

         /* ─── GALLERY WIDTH FIX ─── */
    /* overwrite the earlier 1400 px cap + centred margin */
    .gallery-container{
        max-width:none;   /* fill the whole viewport */
        margin:0;         /* no auto-centering gaps  */
        padding:20px 0;   /* keep vertical padding, remove left/right */
    }

    /* optional: keep a small side padding on very small screens */
    @media(max-width:600px){
        .gallery-container{padding:20px 10px;}
    }

    /* ─── MOBILE:  max-50 vh image, matching background, stable controls ─── */
@media (max-width:768px){
	/* 1. title header spacing – cut in half */
	.lightbox-title{
		/* ...existing code... */
		margin-top:8px;           /* was 16px */
		padding-top:8px;          /* was 16px */
	}

	/* 2. image holder shrinks to image height (≤50 vh) */
	.lightbox-content:not(.fullscreen-mode) .lightbox-image-container{
		/* height:50vh;              ← remove fixed height */
		max-height:50vh;           /* keep upper bound        */
		height:auto;               /* natural height          */
		background:#000;
	}

	/* 3. image keeps inside that cap */
	.lightbox-content:not(.fullscreen-mode) .lightbox-image{
		max-height:50vh;           /* align with container cap */
		max-width:100%;
		object-fit:contain;
	}

	/* 4. buttons a bit lower */
	.image-fullscreen-btn,
	.image-close-btn{
		bottom:5px !important;     /* lower by 10 px */
		top:auto !important;
	}
}
        .image-close-btn{
            font-size:0 !important;
            line-height:1 !important;
            position:absolute;
        }

        .image-close-btn::before,
        .image-close-btn::after{
            content:"";
            position:absolute;
            top:50%;
            left:50%;
            width:24px;
            height:3px;
            border-radius:999px;
            background:currentColor;
            transform:translate(-50%, -50%) rotate(45deg);
        }

        .image-close-btn::after{
            transform:translate(-50%, -50%) rotate(-45deg);
        }

        @media (min-width:769px){
            .image-close-btn::before,
            .image-close-btn::after{
                width:28px;
                height:4px;
            }
        }