/* =============================================================================
   GALLERY PAGE STYLES - Ean Walston Portfolio Website
   =============================================================================
   
   Styles for the main gallery page (collections/index.html). This page requires
   complex layout management for tabbed navigation, collapsible year sections,
   and responsive grid layouts for artwork display.
   
   Key design principles:
   - Clean tabbed interface for medium filtering
   - Collapsible year sections for chronological organization
   - Responsive grid system for artwork thumbnails
   - Accessible keyboard navigation for all interactive elements
   - Consistent with overall site aesthetic
   ============================================================================= */

/* =============================================================================
   PAGE HEADER SECTION
   =============================================================================
   
   Gallery page header with introduction to the portfolio. Sets context
   for the comprehensive collection that follows.
   ============================================================================= */

.page-header {
  padding: 4rem 0 3rem; /* Generous top padding, moderate bottom */
  background-color: #ffffff; /* Clean white background */
  border-bottom: 1px solid #d4d4d4; /* Subtle section separator */
  text-align: center; /* Center align header content */
}

/* Main page title */
.page-title {
  font-family: 'Tanker', Impact, sans-serif; /* Display font for impact */
  font-size: 3rem; /* Large, prominent heading */
  font-weight: 400; /* Normal weight for Tanker */
  color: #000000; /* Black text for high contrast */
  margin-bottom: 0.75rem; /* Space below title */
  line-height: 1.1; /* Tight line height for display text */
}

/* Page subtitle */
.page-subtitle {
  font-family: 'Space Grotesk', sans-serif; /* Body font */
  font-size: 1.25rem; /* Larger than body text but smaller than title */
  font-weight: 500; /* Medium weight for better readability while keeping color */
  color: #c6a98d; /* Original sandstone accent color - artistic spark preserved */
  text-transform: uppercase; /* Uppercase for distinction */
  letter-spacing: 0.1em; /* Spaced tracking for readability */
  margin-bottom: 1.5rem; /* Space before introduction */
}

/* Gallery introduction text */
.gallery-intro {
  font-family: 'Space Grotesk', sans-serif; /* Body font */
  font-size: 1.125rem; /* Slightly larger than body for emphasis */
  line-height: 1.6; /* Comfortable line height */
  color: #000000; /* Black text */
  max-width: 700px; /* Optimal reading width */
  margin: 0 auto; /* Center text */
}

.page-header {
  padding: 4rem 0 3rem; /* Generous top padding, moderate bottom */
  background-color: #ffffff; /* Clean white background */
  border-bottom: 1px solid #d4d4d4; /* Subtle section separator */
  text-align: center; /* Center align header content */
}

/* Main page title */
.page-title {
  font-family: 'Tanker', Impact, sans-serif; /* Display font for impact */
  font-size: 3rem; /* Large, prominent heading */
  font-weight: 400; /* Normal weight for Tanker */
  color: #000000; /* Black text for high contrast */
  margin-bottom: 0.75rem; /* Space below title */
  line-height: 1.1; /* Tight line height for display text */
}

/* =============================================================================
   GALLERY NAVIGATION TABS
   =============================================================================
   
   Tabbed interface for filtering portfolio by medium. Accessible design
   with proper ARIA attributes and keyboard navigation support.
   ============================================================================= */

.gallery-nav {
  padding: 2rem 0 0; /* Remove bottom padding for cleaner look */
  background-color: #ffffff; /* Clean white background */
  border-bottom: 1px solid #e5e5e5; /* Subtle modern border */
  position: relative; /* For modern styling */
}

/* Add a subtle shadow to the nav area */
.gallery-nav::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(198, 169, 141, 0.2) 50%, transparent);
}

/* Tab container */
.gallery-tabs {
  display: flex; /* Horizontal flexbox layout */
  justify-content: center; /* Center align tabs */
  flex-wrap: nowrap; /* Prevent wrapping to keep all tabs on one line */
  gap: 0; /* No gap - tabs should connect */
  max-width: 1000px; /* Increased width to accommodate 6 tabs */
  margin: 0 auto; /* Center tab container */
  overflow-x: auto; /* Allow horizontal scroll on very small screens if needed */
}

/* Individual gallery tabs */
.gallery-tab {
  font-family: 'Space Grotesk', sans-serif; /* Body font */
  font-size: 0.95rem; /* Slightly smaller font for better fit */
  font-weight: 500; /* Medium weight for emphasis */
  color: #666666; /* Grey for inactive tabs */
  background-color: transparent; /* Transparent background for modern look */
  border: none; /* Remove all borders for clean modern style */
  border-bottom: 2px solid transparent; /* Invisible bottom border as base */
  padding: 1.25rem 1.25rem 1rem; /* More top padding, less bottom for modern proportions */
  cursor: pointer; /* Pointer cursor for interactivity */
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* Modern easing curve */
  position: relative; /* For pseudo-elements */
  border-radius: 0; /* No border radius for clean look */
  flex: 1; /* Equal width for all tabs */
  text-align: center; /* Center text in tabs */
  white-space: nowrap; /* Prevent text wrapping */
  text-transform: uppercase; /* Modern uppercase styling */
  letter-spacing: 0.5px; /* Subtle letter spacing */
  overflow: hidden; /* For ripple effects */
}

/* Remove default button styling */
.gallery-tab {
  appearance: none; /* Remove default button appearance */
  -webkit-appearance: none; /* Remove default WebKit button appearance */
}

/* Modern active tab styling with underline accent */
.gallery-tab.active {
  color: #000000; /* Black text for active tab */
  background-color: rgba(198, 169, 141, 0.08); /* Very subtle sandstone background */
  border-bottom: 2px solid #c6a98d; /* Sandstone underline accent */
  font-weight: 600; /* Slightly bolder for active state */
}

/* Modern hover states with subtle animation */
.gallery-tab:hover:not(.active) {
  color: #000000; /* Black text on hover */
  background-color: rgba(198, 169, 141, 0.05); /* Subtle hover background */
  border-bottom: 2px solid rgba(198, 169, 141, 0.4); /* Subtle underline preview */
  transform: translateY(-1px); /* Subtle lift effect */
}

/* Tab focus states for accessibility */
.gallery-tab:focus {
  outline: 2px solid #c6a98d; /* Sandstone focus outline */
  outline-offset: 2px; /* Space between element and outline */
  z-index: 2; /* Ensure focused tab appears above others */
  background-color: rgba(198, 169, 141, 0.08); /* Focus background */
}

/* Active tab focus state */
.gallery-tab.active:focus {
  outline-color: #8b7355; /* Darker outline for active focused tab */
}

/* Modern ripple effect on click */
.gallery-tab::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background-color: rgba(198, 169, 141, 0.2);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
  pointer-events: none;
}

.gallery-tab:active::before {
  width: 300px;
  height: 300px;
}

/* =============================================================================
   GALLERY CONTENT PANELS
   =============================================================================
   
   Main content area containing the portfolio organized by year sections.
   Each panel corresponds to a tab and contains filterable content.
   ============================================================================= */

.gallery-content {
  padding: 3rem 0; /* Comfortable section padding */
  background-color: #ffffff; /* White background */
}

/* Gallery panels - one for each tab */
.gallery-panel {
  display: block; /* Block display by default */
}

.gallery-panel:not(.active) {
  display: none; /* Hide inactive panels */
}

/* Panel introduction text */
.panel-intro {
  max-width: 700px; /* Optimal reading width */
  margin: 0 auto 3rem; /* Center and add bottom margin */
  text-align: center; /* Center align intro text */
  padding: 0 1rem; /* Side padding for mobile */
}

.panel-intro p {
  font-family: 'Space Grotesk', sans-serif; /* Body font */
  font-size: 1.125rem; /* Slightly larger text */
  line-height: 1.6; /* Comfortable line height */
  color: #666666; /* Grey for descriptive text */
  margin: 0; /* Remove default margin */
}

/* =============================================================================
   YEAR SECTIONS
   =============================================================================
   
   Collapsible sections organized by year. Clean accordion-style interface
   with clear visual hierarchy and smooth interactions.
   ============================================================================= */

/* Year section containers */
.year-section {
  margin-bottom: 2rem; /* Space between year sections */
  border: 1px solid #d4d4d4; /* Light border around sections */
  background-color: #ffffff; /* White background */
}

/* Year section headings */
.year-heading {
  margin: 0; /* Remove default margin */
}

/* Year toggle buttons */
.year-toggle {
  width: 100%; /* Full width toggle */
  font-family: 'Tanker', Impact, sans-serif; /* Display font */
  font-size: 1.5rem; /* Prominent year headings */
  font-weight: 400; /* Normal weight */
  color: #000000; /* Black text */
  background-color: #fafafa; /* Light grey background */
  border: none; /* No border */
  padding: 1.5rem; /* Comfortable padding */
  text-align: left; /* Left align text */
  cursor: pointer; /* Pointer cursor */
  transition: background-color 0.3s ease; /* Smooth background transition */
  display: flex; /* Flexbox for layout */
  justify-content: space-between; /* Space between year and icon */
  align-items: center; /* Vertically center content */
}

/* Year toggle hover state */
.year-toggle:hover {
  background-color: #f0f0f0; /* Slightly darker grey on hover */
}

/* Year toggle focus state */
.year-toggle:focus {
  outline: 2px solid #c6a98d; /* Sandstone focus outline */
  outline-offset: -2px; /* Inside the element */
}

/* Toggle icons */
.toggle-icon {
  font-family: monospace; /* Monospace for consistent icon sizing */
  font-size: 1.25rem; /* Slightly larger than text */
  font-weight: bold; /* Bold for visibility */
  color: #c6a98d; /* Sandstone color for icons */
  transition: transform 0.3s ease; /* Smooth rotation if needed */
}

/* Year content containers */
.year-content {
  padding: 2rem; /* Comfortable padding around content */
  border-top: 1px solid #d4d4d4; /* Separator from toggle */
  /* Default to hidden - JavaScript will show expanded sections */
  display: none;
}

/* Hide year content when parent year-section has data-collapsed="true" */
.year-section[data-collapsed="true"] .year-content {
  display: none !important;
}

/* Show year content when parent year-section has data-collapsed="false" */
.year-section[data-collapsed="false"] .year-content {
  display: block !important;
}

/* =============================================================================
   WORKS GRID
   =============================================================================
   
   Responsive grid layout for displaying artwork thumbnails. Optimized
   for various screen sizes while maintaining consistent aspect ratios.
   ============================================================================= */

/* Works grid container */
.works-grid {
  display: grid; /* CSS Grid layout */
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); 
  /* Responsive grid - minimum 280px columns, fill available space */
  gap: 2rem; /* Space between grid items */
}

/* Individual work items */
.work-item {
  background-color: #ffffff; /* White background */
  border: 1px solid #d4d4d4; /* Subtle border */
  transition: transform 0.3s ease, box-shadow 0.3s ease; 
  /* Smooth hover transitions */
  overflow: hidden; /* Ensure content doesn't overflow */
}

/* Work item hover effects */
.work-item:hover {
  transform: translateY(-4px); /* Subtle lift effect */
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1); 
  /* Soft shadow for depth */
}

/* Work item links */
.work-link {
  display: block; /* Block display for full clickable area */
  text-decoration: none; /* Remove underline */
  color: inherit; /* Inherit text color */
}

.work-link:focus {
  outline: 2px solid #c6a98d; /* Focus outline for accessibility */
  outline-offset: 2px; /* Space between element and outline */
}

/* Work image containers */
.work-image {
  width: 100%; /* Full width */
  aspect-ratio: 4/3; /* Consistent 4:3 aspect ratio for thumbnails */
  overflow: hidden; /* Crop images to fit */
  background-color: #f8f8f8; /* Light background for placeholders */
}

/* Actual images within work containers */
.work-image img {
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  object-fit: contain; /* Fit entire image within container */
  object-position: center; /* Center the image */
}

/* Image placeholders */
.image-placeholder {
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  display: flex; /* Flexbox for centering */
  flex-direction: column; /* Stack content vertically */
  justify-content: center; /* Center vertically */
  align-items: center; /* Center horizontally */
  background-color: #f8f8f8; /* Light grey background */
  border: 2px dashed #d4d4d4; /* Dashed border for placeholder */
  color: #666666; /* Grey text */
  font-family: 'Space Grotesk', sans-serif; /* Body font */
  text-align: center; /* Center text */
}

.placeholder-size {
  font-size: 0.75rem; /* Small size indicator text */
  color: #999999; /* Lighter grey */
  margin-top: 0.25rem; /* Small space above */
}

/* Work information section */
.work-info {
  padding: 1.5rem; /* Comfortable padding */
}

/* =============================================================================
   ENHANCED ORGANIZATION STYLES
   =============================================================================
   
   Styles for technique sections, badges, and enhanced metadata display
   to support the improved portfolio organization.
   ============================================================================= */

/* Technique section containers */
.technique-section {
  margin-bottom: 3rem; /* Space between technique sections */
}

/* Technique headings */
.technique-heading {
  font-family: 'Space Grotesk', sans-serif; /* Body font */
  font-size: 1.25rem; /* Medium size */
  font-weight: 600; /* Semi-bold */
  color: #c6a98d; /* Sandstone color for technique headings */
  margin-bottom: 1.5rem; /* Space below heading */
  padding-bottom: 0.5rem; /* Padding for border */
  border-bottom: 2px solid #e5e5e5; /* Subtle underline */
  text-transform: uppercase; /* Uppercase for emphasis */
  letter-spacing: 0.5px; /* Slight letter spacing */
}

/* Technique and feature badges */
.technique-badge,
.featured-badge {
  position: absolute; /* Absolute positioning */
  top: 0.75rem; /* Distance from top */
  font-family: 'Space Grotesk', sans-serif; /* Body font */
  font-size: 0.75rem; /* Small badge text */
  font-weight: 600; /* Semi-bold */
  padding: 0.25rem 0.5rem; /* Compact padding */
  border-radius: 4px; /* Rounded corners */
  text-transform: uppercase; /* Uppercase text */
  letter-spacing: 0.3px; /* Slight letter spacing */
  z-index: 1; /* Above image */
}

.technique-badge {
  left: 0.75rem; /* Left side positioning */
  background-color: rgba(198, 169, 141, 0.9); /* Sandstone background */
  color: #ffffff; /* White text */
}

.featured-badge {
  right: 0.75rem; /* Right side positioning */
  background-color: rgba(0, 0, 0, 0.8); /* Dark background */
  color: #ffffff; /* White text */
}

/* Featured work highlighting */
.featured-work {
  border: 2px solid #c6a98d; /* Sandstone border for featured works */
}

.featured-work:hover {
  border-color: #8b7355; /* Darker border on hover */
  transform: translateY(-6px); /* More prominent lift */
  box-shadow: 0 12px 32px rgba(198, 169, 141, 0.2); /* Sandstone-tinted shadow */
}

/* Enhanced work metadata */
.work-dimensions {
  font-family: 'Space Grotesk', sans-serif; /* Body font */
  font-size: 0.875rem; /* Slightly smaller */
  color: #666666; /* Grey text */
  margin: 0.25rem 0; /* Small vertical margins */
  font-style: italic; /* Italic for dimensions */
}

.work-note {
  font-family: 'Space Grotesk', sans-serif; /* Body font */
  font-size: 0.875rem; /* Slightly smaller */
  color: #c6a98d; /* Sandstone for awards/notes */
  font-weight: 500; /* Medium weight */
  margin-top: 0.5rem; /* Space above note */
  padding: 0.5rem; /* Padding around note */
  background-color: rgba(198, 169, 141, 0.1); /* Very light sandstone background */
  border-radius: 4px; /* Rounded corners */
}

/* Upcoming work notice styling */
.upcoming-notice {
  text-align: center; /* Center the upcoming notice */
  padding: 2rem; /* Generous padding */
  background-color: rgba(198, 169, 141, 0.05); /* Very subtle sandstone background */
  border: 1px dashed #c6a98d; /* Dashed border in sandstone color */
  border-radius: 8px; /* Rounded corners */
  margin: 1rem 0; /* Vertical spacing */
}

.upcoming-notice p {
  font-family: 'Space Grotesk', sans-serif; /* Body font */
  font-size: 1rem; /* Normal size */
  color: #666; /* Subtle gray text */
  margin: 0; /* Remove default margins */
  font-style: italic; /* Italic styling already in HTML */
}

/* Enhanced work image positioning for badges */
.work-image {
  position: relative; /* Relative for absolute badge positioning */
}

/* Work titles */
.work-title {
  font-family: 'Tanker', Impact, sans-serif; /* Display font */
  font-size: 1.125rem; /* Prominent but not overwhelming */
  font-weight: 400; /* Normal weight */
  color: #000000; /* Black text */
  margin-bottom: 0.5rem; /* Space below title */
  line-height: 1.3; /* Comfortable line height for titles */
}

/* Work medium information */
.work-medium {
  font-family: 'Space Grotesk', sans-serif; /* Body font */
  font-size: 0.9rem; /* Slightly smaller text */
  color: #666666; /* Grey for secondary information */
  margin-bottom: 0.25rem; /* Small space below */
  font-style: italic; /* Italic for medium information */
}

/* Work piece count */
.work-count {
  font-family: 'Space Grotesk', sans-serif; /* Body font */
  font-size: 0.875rem; /* Small text */
  color: #999999; /* Light grey for count */
  margin: 0; /* Remove default margin */
}

/* =============================================================================
   RESPONSIVE DESIGN
   =============================================================================
   
   Mobile-first responsive design ensuring the gallery works well across
   all devices. Special attention to tab navigation and grid layouts.
   ============================================================================= */

/* Tablet adjustments */
@media (min-width: 768px) {
  /* Page header adjustments */
  .page-header {
    padding: 5rem 0 4rem; /* More generous padding */
  }
  
  .page-title {
    font-size: 3.5rem; /* Larger title */
  }
  
  /* Gallery navigation adjustments */
  .gallery-nav {
    padding: 2.5rem 0; /* More padding */
  }
  
  .gallery-tab {
    padding: 1.5rem 1.5rem 1.25rem; /* Increased padding on larger screens */
    font-size: 1rem; /* Slightly larger font */
    letter-spacing: 0.75px; /* More letter spacing on larger screens */
  }
  
  /* Gallery content adjustments */
  .gallery-content {
    padding: 4rem 0; /* More section padding */
  }
  
  /* Works grid adjustments */
  .works-grid {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
    /* Slightly larger minimum column width */
    gap: 2.5rem; /* More space between items */
  }
  
  /* Year toggle adjustments */
  .year-toggle {
    padding: 2rem; /* More padding */
    font-size: 1.75rem; /* Larger year headings */
  }
  
  .year-content {
    padding: 2.5rem; /* More content padding */
  }
}

/* Large desktop adjustments */
@media (min-width: 1200px) {
  /* More generous spacing on large screens */
  .page-header {
    padding: 6rem 0 5rem;
  }
  
  .gallery-content {
    padding: 5rem 0;
  }
  
  /* Works grid can have more columns on very large screens */
  .works-grid {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); 
    /* Even larger minimum on very large screens */
    gap: 3rem; /* More space between items */
  }
}

/* Tablet and medium screen adjustments for tab layout */
@media (min-width: 768px) and (max-width: 1199px) {
  .gallery-tabs {
    max-width: 900px; /* Slightly larger on tablets */
  }
  
  .gallery-tab {
    font-size: 0.9rem; /* Slightly smaller font on tablets */
    padding: 1.25rem 1.1rem 1rem; /* Optimized padding for 6 tabs */
    letter-spacing: 0.4px; /* Adjusted letter spacing */
  }
}

/* Mobile adjustments */
@media (max-width: 767px) {
  /* Smaller page header on mobile */
  .page-header {
    padding: 3rem 0 2rem; /* Less padding */
  }
  
  .page-title {
    font-size: 2.5rem; /* Smaller title */
  }
  
  .page-subtitle {
    font-size: 1.125rem; /* Smaller subtitle */
  }
  
  .gallery-intro {
    font-size: 1rem; /* Standard size on mobile */
  }
  
  /* Gallery navigation mobile adjustments */
  .gallery-nav {
    padding: 1.5rem 0; /* Less padding */
  }
  
  .gallery-tabs {
    flex-direction: column; /* Stack tabs vertically on mobile */
    max-width: none; /* Remove max-width constraint */
    gap: 2px; /* Small gap between stacked tabs */
  }
  
  .gallery-tab {
    border-bottom: none; /* Remove bottom borders for modern mobile look */
    border-radius: 8px; /* Add subtle border radius on mobile */
    margin-bottom: 8px; /* Space between stacked tabs */
    padding: 1rem; /* Comfortable mobile padding */
    background-color: #f8f8f8; /* Light background for mobile tabs */
    font-weight: 500; /* Standard weight on mobile */
    letter-spacing: 0.3px; /* Subtle letter spacing */
  }
  
  .gallery-tab.active {
    background-color: #c6a98d; /* Sandstone background for active mobile tab */
    color: #ffffff; /* White text for contrast */
    border-bottom: none; /* Remove underline on mobile */
    transform: none; /* No transform on mobile */
  }
  
  .gallery-tab:hover:not(.active) {
    background-color: #e8e8e8; /* Subtle hover on mobile */
    transform: none; /* No transform on mobile */
    border-bottom: none; /* No underline on mobile */
  }
  
  /* Gallery content mobile adjustments */
  .gallery-content {
    padding: 2rem 0; /* Less section padding */
  }
  
  /* Works grid mobile adjustments */
  .works-grid {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 
    /* Smaller minimum on mobile */
    gap: 1.5rem; /* Less space on mobile */
  }
  
  /* Enhanced organization mobile adjustments */
  .technique-section {
    margin-bottom: 2rem; /* Less space between sections on mobile */
  }
  
  .technique-heading {
    font-size: 1.125rem; /* Smaller technique headings on mobile */
    margin-bottom: 1rem; /* Less space below */
  }
  
  .technique-badge,
  .featured-badge {
    font-size: 0.6875rem; /* Smaller badge text on mobile */
    padding: 0.2rem 0.4rem; /* Smaller badge padding */
    top: 0.5rem; /* Closer to top */
  }
  
  .technique-badge {
    left: 0.5rem; /* Closer to left edge */
  }
  
  .featured-badge {
    right: 0.5rem; /* Closer to right edge */
  }
  
  .work-note {
    font-size: 0.8125rem; /* Smaller note text on mobile */
    padding: 0.375rem; /* Less padding on mobile */
  }
  
  /* Year section mobile adjustments */
  .year-toggle {
    padding: 1.25rem; /* Less padding */
    font-size: 1.25rem; /* Smaller year headings */
  }
  
  .year-content {
    padding: 1.5rem; /* Less content padding */
  }
  
  /* Work information adjustments */
  .work-title {
    font-size: 1rem; /* Smaller titles on mobile */
  }
  
  .work-medium, .work-count {
    font-size: 0.825rem; /* Smaller secondary text */
  }
}

/* =============================================================================
   ACCESSIBILITY ENHANCEMENTS
   =============================================================================
   
   Additional styles to ensure the gallery is accessible to all users,
   including keyboard navigation and screen reader support.
   ============================================================================= */

/* Focus management for tab panels */
.gallery-panel[aria-hidden="true"] {
  display: none; /* Ensure hidden panels are not displayed */
}

/* Enhanced focus states */
.work-item:focus-within {
  outline: 2px solid #c6a98d; /* Focus outline when any child is focused */
  outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .work-item, .year-section {
    border-width: 2px; /* Thicker borders in high contrast mode */
  }
  
  .gallery-tab {
    border-width: 2px; /* Thicker tab borders */
  }
  
  .image-placeholder {
    border-width: 3px; /* Thicker placeholder borders */
  }
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  .work-item, .gallery-tab, .year-toggle {
    transition: none; /* Remove transitions */
  }
  
  .work-item:hover {
    transform: none; /* Remove hover transform */
  }
}

/* =============================================================================
   IMAGE LIGHTBOX
   =============================================================================
   
   Fullscreen image viewer for portfolio images. Provides clean, distraction-free
   viewing experience with smooth animations and proper accessibility.
   ============================================================================= */

/* Lightbox overlay */
.lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  padding: 40px;
  box-sizing: border-box;
}

/* Show lightbox */
.lightbox.active {
  opacity: 1;
  visibility: visible;
}

/* Lightbox content container */
.lightbox-content {
  display: flex;
  align-items: center;
  gap: 2rem;
  max-width: 100%;
  max-height: 100%;
}

/* Lightbox image */
.lightbox img {
  max-width: 70vw;
  max-height: 80vh;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  flex-shrink: 0;
}

/* Close button */
.lightbox-close {
  position: absolute;
  top: 20px;
  right: 30px;
  font-size: 2rem;
  color: white;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 1001;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.5);
  transition: background-color 0.2s ease;
}

.lightbox-close:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

/* Image info panel */
.lightbox-info {
  color: white;
  text-align: left;
  background-color: rgba(0, 0, 0, 0.7);
  padding: 2rem;
  border-radius: 8px;
  min-width: 250px;
  max-width: 300px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.lightbox-title {
  font-size: 1.4rem;
  font-weight: 600;
  margin-bottom: 1rem;
  color: #c6a98d; /* Match your site's accent color */
}

.lightbox-details {
  font-size: 1rem;
  line-height: 1.6;
  opacity: 0.9;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .lightbox {
    padding: 20px;
  }
  
  .lightbox-content {
    flex-direction: column;
    gap: 1rem;
  }
  
  .lightbox img {
    max-width: 90vw;
    max-height: 60vh;
  }
  
  .lightbox-info {
    min-width: auto;
    max-width: 90vw;
    text-align: center;
  }
}

/* =============================================================================
   MEDIA CATEGORY ORGANIZATION
   =============================================================================
   
   Simple category folders within years for organized presentation of different
   media types (Prints, Photography, etc.) while maintaining clean hierarchy.
   ============================================================================= */

/* Media category container */
.media-category {
  margin-bottom: 3rem;
}

.media-category:last-child {
  margin-bottom: 0;
}

/* Media category headings */
.media-heading {
  font-family: 'Tanker', sans-serif;
  font-size: 1.3rem;
  color: #c6a98d;
  margin-bottom: 1.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #c6a98d;
  letter-spacing: 0.5px;
}

/* Works grid within media categories */
.media-category .works-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 2rem;
  margin-top: 0;
}

/* Adjust work item title sizes within categories */
.media-category .work-title {
  font-size: 1.1rem;
}

/* =============================================================================
   CASCADING FOLDER SYSTEM
   =============================================================================
   
   File system-like hierarchical organization for media types with expandable
   folders and subfolders. Creates intuitive navigation structure.
   ============================================================================= */

/* Media folder container */
.media-folder {
  margin-bottom: 1.5rem;
  border-left: 2px solid #e5e5e5;
  padding-left: 1rem;
}

.media-folder:last-child {
  margin-bottom: 0;
}

/* Folder heading with toggle button */
.folder-heading {
  margin: 0 0 0.5rem 0;
}

.folder-toggle {
  background: none;
  border: none;
  padding: 0.5rem 0;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.1rem;
  font-weight: 600;
  color: #333333;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  text-align: left;
  transition: color 0.2s ease;
}

.folder-toggle:hover {
  color: #c6a98d;
}

.folder-toggle:focus {
  outline: 2px solid #c6a98d;
  outline-offset: 2px;
  border-radius: 2px;
}

/* Folder icons */
.folder-icon {
  font-size: 1rem;
  line-height: 1;
}

/* Toggle icons for folders */
.folder-toggle .toggle-icon {
  margin-left: auto;
  font-size: 1rem;
  transition: transform 0.2s ease;
}

.folder-toggle[aria-expanded="true"] .toggle-icon {
  transform: rotate(45deg);
}

/* Folder content (initially hidden) */
.folder-content {
  margin-left: 1rem;
  padding-left: 1rem;
  border-left: 1px solid #f0f0f0;
  display: none;
}

/* Show folder content when toggle is expanded OR when forced open */
.folder-toggle[aria-expanded="true"] + .folder-content,
.folder-content.folder-open {
  display: block !important;
}

/* Subfolder system for deeper hierarchy */
.subfolder {
  margin-bottom: 1rem;
  margin-left: 0.5rem;
}

.subfolder:last-child {
  margin-bottom: 0;
}

/* Subfolder heading with toggle */
.subfolder-heading {
  margin: 0 0 0.5rem 0;
}

.subfolder-toggle {
  background: #e6f3ff; /* Light blue background for subfolders */
  border: 1px solid #c6a98d; /* Sandstone border */
  padding: 8px; /* Compact padding */
  border-radius: 4px; /* Slight rounding for modern look */
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.95rem; /* Slightly smaller than main folder toggle */
  font-weight: 500;
  color: #000000; /* Black text for better contrast */
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between; /* Space between text and icon */
  width: 100%;
  text-align: left;
  transition: all 0.3s ease; /* Smooth transitions */
}

.subfolder-toggle:hover {
  background: #d1e9ff; /* Slightly darker blue on hover */
  border-color: #a89077; /* Darker sandstone border */
  color: #000000; /* Keep black text */
}

.subfolder-toggle:focus {
  outline: 2px solid #c6a98d;
  outline-offset: 2px;
  border-radius: 4px; /* Match border radius */
}

/* Subfolder toggle icons */
.subfolder-toggle .toggle-icon {
  margin-left: auto;
  font-size: 0.9rem;
  transition: transform 0.2s ease;
}

.subfolder-toggle[aria-expanded="true"] .toggle-icon {
  transform: rotate(45deg);
}

/* Subfolder content */
.subfolder-content {
  margin-left: 1rem;
  padding-left: 0.5rem;
  border-left: 1px dotted #e0e0e0;
  display: none;
}

/* Show subfolder content when toggle is expanded OR when forced open */
.subfolder-toggle[aria-expanded="true"] + .subfolder-content,
.subfolder-content.subfolder-open {
  display: block !important;
}

/* Works grid within folders */
.folder-content .works-grid,
.subfolder-content .works-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 2rem;
  margin-top: 1rem;
}

/* Adjust work item titles within folder hierarchy */
.folder-content .work-title,
.subfolder-content .work-title {
  font-size: 1rem;
}

/* Adjust heading levels within folder hierarchy */
.subfolder-content h6 {
  font-size: 1rem;
  margin-bottom: 0.5rem;
}

/* Responsive adjustments for media categories */
@media (max-width: 768px) {
  .media-category {
    margin-bottom: 2rem;
  }
  
  .media-heading {
    font-size: 1.1rem;
    margin-bottom: 1rem;
  }
  
  .media-category .works-grid {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1.5rem;
  }
  
  /* Folder system responsive adjustments */
  .media-folder {
    margin-bottom: 1rem;
    padding-left: 0.75rem;
  }
  
  .folder-toggle {
    font-size: 1rem;
    padding: 0.4rem 0;
  }
  
  .subfolder-toggle {
    font-size: 0.9rem;
  }
  
  .folder-content,
  .subfolder-content {
    margin-left: 0.75rem;
    padding-left: 0.75rem;
  }
  
  .folder-content .works-grid,
  .subfolder-content .works-grid {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1.5rem;
  }
}

@media (max-width: 480px) {
  .media-category .works-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .media-folder {
    border-left: 1px solid #e5e5e5;
    padding-left: 0.5rem;
  }
  
  .folder-content,
  .subfolder-content {
    margin-left: 0.5rem;
    padding-left: 0.5rem;
  }
  
  .folder-content .works-grid,
  .subfolder-content .works-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}