/* ===== CATEGORIZED PHOTO GALLERY STYLES ===== */

       /* Hero Section */
       .nsbphotogallery-hero {
           background-color: var(--nsb-primary);
           color: var(--nsb-white);
           padding: var(--spacing-xl) 0;
           min-height: 300px;
           display: flex;
           align-items: center;
           justify-content: center;
           text-align: center;
       }

       .nsbphotogallery-hero-content {
           max-width: 800px;
           padding: 0 var(--spacing-md);
       }

       .nsbphotogallery-title {
           font-family: var(--font-primary);
           font-size: 2.8rem;
           font-weight: var(--font-weight-bold);
           margin-bottom: var(--spacing-sm);
           line-height: 1.2;
           color: var(--nsb-white);
       }

       .nsbphotogallery-subtitle {
           font-family: var(--font-primary);
           font-size: 1.5rem;
           font-weight: var(--font-weight-medium);
           opacity: 0.9;
           line-height: 1.4;
           color: var(--nsb-white);
       }

       /* Intro Section */
       .nsbphotogallery-intro {
           padding: var(--spacing-xl) 0;
           background-color: var(--nsb-background);
       }

       .nsbphotogallery-intro-content {
           max-width: 900px;
           margin: 0 auto;
           padding: 0 var(--spacing-md);
       }

       .nsbphotogallery-intro-content h2 {
           font-family: var(--font-primary);
           font-size: 2rem;
           font-weight: var(--font-weight-bold);
           color: var(--nsb-primary);
           margin-bottom: var(--spacing-md);
           line-height: 1.3;
           text-align: center;
       }

       .nsbphotogallery-intro-content p {
           font-family: var(--font-secondary);
           font-size: 1.1rem;
           line-height: 1.7;
           color: var(--nsb-text-primary);
           margin-bottom: var(--spacing-md);
           text-align: center;
       }

       /* Stats Bar */
       .photo-stats {
           background-color: var(--nsb-accent);
           color: var(--nsb-white);
           padding: var(--spacing-sm) 0;
           text-align: center;
           margin-bottom: var(--spacing-sm);
       }

       .photo-stats-content {
           max-width: 1200px;
           margin: 0 auto;
           padding: 0 var(--spacing-md);
           display: flex;
           justify-content: center;
           align-items: center;
           gap: var(--spacing-lg);
           flex-wrap: wrap;
       }

       .stat-item {
           display: flex;
           flex-direction: column;
           align-items: center;
       }

       .stat-number {
           font-family: var(--font-primary);
           font-size: 2rem;
           font-weight: var(--font-weight-bold);
       }

       .stat-label {
           font-family: var(--font-secondary);
           font-size: 0.9rem;
           opacity: 0.9;
       }

       /* Category Navigation */
       .category-nav {
           background-color: var(--nsb-white);
           padding: 1rem 0;
           margin-bottom: var(--spacing-xl);
           border-top: 2px solid var(--nsb-accent);
           border-bottom: 2px solid var(--nsb-accent);
           position: sticky;
           top: 70px;
           z-index: 100;
           width: 100%;
       }

       .category-nav .container {
           padding: 0 1rem;
           max-width: 100%;
       }

       .category-nav-title {
           font-family: var(--font-primary);
           font-size: 1.2rem;
           font-weight: var(--font-weight-semi-bold);
           color: var(--nsb-primary);
           margin-bottom: var(--spacing-sm);
           text-align: center;
       }

       .category-tabs {
           display: flex;
           justify-content: center;
           align-items: center;
           gap: 0.5rem;
           flex-wrap: wrap;
           max-width: 100%;
           overflow-x: auto;
           padding: 0.25rem 0;
           -webkit-overflow-scrolling: touch;
       }

       .category-tab {
           padding: 0.35rem 1rem;
           background-color: transparent;
           border: 2px solid var(--nsb-light);
           border-radius: 4px;
           font-family: var(--font-secondary);
           font-size: 0.85rem;
           font-weight: var(--font-weight-medium);
           color: var(--nsb-text-secondary);
           cursor: pointer;
           transition: all var(--transition-fast);
           white-space: nowrap;
           min-width: fit-content;
       }

       .category-tab:hover {
           border-color: var(--nsb-accent);
           color: var(--nsb-primary);
           background-color: transparent;
           transform: translateY(-1px);
       }

       .category-tab.active {
           background-color: var(--nsb-primary);
           color: var(--nsb-white);
           border-color: var(--nsb-primary);
       }

       .category-tab-count {
    background-color: var(--nsb-light);
    color: var(--nsb-text-secondary);
    padding: 1px 6px;
    border-radius: 10px;
    font-size: 0.7rem;
    margin-left: 4px;
    font-weight: var(--font-weight-semi-bold);
}

       .category-tab.active .category-tab-count {
           background-color: var(--nsb-accent);
           color: var(--nsb-white);
       }

       /* Category Sections */
       .category-section {
           margin-bottom: var(--spacing-xl);
           display: none;
           animation: fadeIn 0.5s ease;
       }

       .category-section.active {
           display: block;
       }

       @keyframes fadeIn {
           from {
               opacity: 0;
           }

           to {
               opacity: 1;
           }
       }

       .category-header {
           display: flex;
           align-items: center;
           margin-bottom: var(--spacing-lg);
           padding-bottom: var(--spacing-sm);
           border-bottom: 3px solid var(--nsb-accent);
       }

       .category-icon {
           font-size: 2rem;
           color: var(--nsb-accent);
           margin-right: var(--spacing-md);
           width: 50px;
           text-align: center;
       }

       .category-title {
           font-family: var(--font-primary);
           font-size: 1.8rem;
           font-weight: var(--font-weight-bold);
           color: var(--nsb-primary);
           margin: 0;
       }

       .category-count {
           font-family: var(--font-secondary);
           font-size: 1rem;
           color: var(--nsb-text-secondary);
           margin-left: var(--spacing-sm);
       }

       /* Photo Gallery Grid */
       .photo-gallery-section {
           padding: var(--spacing-sm) 0;
           background-color: var(--nsb-background);
           min-height: 500px;
       }

       .nsbphotogallery-container {
           max-width: 1400px;
           margin: 0 auto;
           padding: 0 var(--spacing-md);
       }

       /* 3-column grid for desktop, 2 for tablet, 1 for mobile */
       .photo-grid {
           display: grid;
           grid-template-columns: repeat(1, 1fr);
           gap: var(--spacing-md);
           justify-content: center;
       }

       /* Photo Card - Landscape focus with NSB accent border */
       .photo-card {
           background-color: var(--nsb-white);
           border-radius: 8px;
           border: 3px solid var(--nsb-accent);
           box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
           transition: all var(--transition-normal);
           overflow: hidden;
           display: flex;
           flex-direction: column;
           break-inside: avoid;
       }

       .photo-card:hover {
           transform: translateY(-5px);
           box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
           border-color: var(--nsb-primary);
       }

       /* Image Container - Maintains aspect ratio */
       .photo-image-container {
           position: relative;
           width: 100%;
           padding-top: 56.25%;
           /* 16:9 Aspect Ratio */
           overflow: hidden;
           background-color: var(--nsb-light);
           display: flex;
           align-items: center;
           justify-content: center;
       }

       .photo-img {
           position: absolute;
           top: 0;
           left: 0;
           width: 100%;
           height: 100%;
           object-fit: cover;
           transition: transform 0.5s ease;
       }

       .photo-card:hover .photo-img {
           transform: scale(1.05);
       }

       /* Loading placeholder */
       .photo-loading {
           width: 100%;
           height: 200px;
           background: linear-gradient(90deg, var(--nsb-light) 25%, var(--nsb-white) 50%, var(--nsb-light) 75%);
           background-size: 200% 100%;
           animation: loading 1.5s infinite;
       }

       @keyframes loading {
           0% {
               background-position: 200% 0;
           }

           100% {
               background-position: -200% 0;
           }
       }

       /* Photo Info */
       .photo-info {
           padding: var(--spacing-sm);
           text-align: center;
           border-top: 1px solid var(--nsb-light);
       }

       .photo-filename {
           font-family: var(--font-secondary);
           font-size: 0.9rem;
           color: var(--nsb-text-secondary);
           margin: 0;
           word-break: break-all;
       }

       /* Load More Button */
       .load-more-container {
           text-align: center;
           margin-top: var(--spacing-xl);
           padding: var(--spacing-lg) 0;
       }

       .load-more-btn {
           display: inline-block;
           background-color: var(--nsb-accent);
           color: var(--nsb-white);
           padding: 0.75rem 2.5rem;
           border-radius: 4px;
           text-decoration: none;
           font-family: var(--font-primary);
           font-weight: var(--font-weight-semi-bold);
           font-size: 1.1rem;
           transition: all var(--transition-normal);
           border: none;
           cursor: pointer;
           min-width: 200px;
       }

       .load-more-btn:hover:not(:disabled) {
           background-color: var(--nsb-primary);
           transform: translateY(-2px);
           box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
       }

       .load-more-btn:disabled {
           opacity: 0.6;
           cursor: not-allowed;
       }

       .loading-spinner {
           display: inline-block;
           width: 20px;
           height: 20px;
           border: 3px solid rgba(255, 255, 255, 0.3);
           border-radius: 50%;
           border-top-color: var(--nsb-white);
           animation: spin 1s ease-in-out infinite;
           margin-right: 10px;
           vertical-align: middle;
       }

       @keyframes spin {
           to {
               transform: rotate(360deg);
           }
       }

       /* No Images Message */
       .no-images-message {
           text-align: center;
           padding: var(--spacing-xl);
           background-color: var(--nsb-white);
           border-radius: 8px;
           border: 2px solid var(--nsb-accent);
           max-width: 600px;
           margin: 0 auto;
       }

       .no-images-icon {
           font-size: 3rem;
           color: var(--nsb-accent);
           margin-bottom: var(--spacing-md);
       }

       .no-images-title {
           font-family: var(--font-primary);
           font-size: 1.8rem;
           color: var(--nsb-primary);
           margin-bottom: var(--spacing-sm);
       }

       .no-images-text {
           font-family: var(--font-secondary);
           font-size: 1.1rem;
           color: var(--nsb-text-secondary);
       }

       /* Responsive Design */
       @media (max-width: 767px) {
           .nsbphotogallery-title {
               font-size: 2.2rem;
           }

           .nsbphotogallery-subtitle {
               font-size: 1.2rem;
           }

           .nsbphotogallery-intro-content h2 {
               font-size: 1.6rem;
           }

           .stat-number {
               font-size: 1.5rem;
           }

           .photo-stats-content {
               gap: var(--spacing-md);
           }

           .photo-grid {
               gap: var(--spacing-sm);
           }

           .photo-card {
               max-width: 100%;
           }

           .category-tabs {
               justify-content: flex-start;
               overflow-x: auto;
               padding-bottom: 10px;
           }

           .category-tab {
               padding: 0.4rem 1rem;
               font-size: 0.85rem;
           }
       }

       @media (min-width: 768px) {
           .nsbphotogallery-title {
               font-size: 3.2rem;
           }

           .nsbphotogallery-subtitle {
               font-size: 1.7rem;
           }

           .nsbphotogallery-intro-content h2 {
               font-size: 2.2rem;
           }

           .photo-grid {
               grid-template-columns: repeat(2, 1fr);
               gap: var(--spacing-md);
           }

           .photo-card {
               max-width: 100%;
           }
       }

       @media (min-width: 1024px) {
           .nsbphotogallery-title {
               font-size: 3.5rem;
           }

           .nsbphotogallery-subtitle {
               font-size: 1.8rem;
           }

           .photo-grid {
               grid-template-columns: repeat(3, 1fr);
               gap: var(--spacing-lg);
           }
       }

       /* Reduced Motion Support */
       @media (prefers-reduced-motion: reduce) {

           .photo-card,
           .photo-img,
           .load-more-btn,
           .category-tab {
               transition: none;
           }

           .photo-card:hover {
               transform: none;
           }

           .photo-card:hover .photo-img {
               transform: none;
           }

           .load-more-btn:hover:not(:disabled) {
               transform: none;
           }

           .category-tab:hover {
               transform: none;
           }

           .loading-spinner {
               animation: none;
           }
       }

       /* Option 1: Target both elements */
       .stat-number,
       .stat-label {
           color: var(--nsb-primary) !important;
       }

       /* Option 2: Target only the stats section */
       .photo-stats .stat-item {
           color: var(--nsb-primary);
       }

       .photo-stats .stat-number {
           color: var(--nsb-primary);
       }

       .photo-stats .stat-label {
           color: var(--nsb-primary);
           opacity: 0.9;
       }