/* =============================================================================
   SERIES PAGE STYLES - Ean Walston Portfolio Website
   =============================================================================
   
   Styles specifically for individual series pages. Creates a clean gallery
   presentation with 3-column responsive grid layout and proper image captions.
   Consistent with overall site aesthetic while providing focused artwork display.
   
   Key features:
   - Responsive 3-column grid (1 column on mobile)
   - Clean image presentation with captions
   - Series introduction and statement styling
   - Consistent typography and spacing
   ============================================================================= */

/* =============================================================================
   SERIES INTRODUCTION SECTION
   =============================================================================
   
   Header area for series pages with title, breadcrumb, and introduction text.
   ============================================================================= */

.series-intro {
  max-width: 800px; /* Optimal reading width */
  margin: 0 auto; /* Center content */
  padding: 0 1rem; /* Side padding */
  text-align: center; /* Center align text */
}

.series-statement {
  font-family: 'Space Grotesk', sans-serif; /* Body font */
  font-size: 1.125rem; /* Slightly larger than body text */
  line-height: 1.6; /* Comfortable line height */
  color: #000000; /* Black text */
  margin-bottom: 2rem; /* Space below statement */
}

/* =============================================================================
   SERIES GRID LAYOUT
   =============================================================================
   
   Responsive grid system for displaying artwork in series pages.
   3 columns on desktop, 1 column on mobile.
   ============================================================================= */

.series-grid {
  display: grid; /* CSS Grid layout */
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Responsive columns */
  gap: 2rem; /* Space between grid items */
  margin-top: 3rem; /* Space above grid */
}

/* Individual series items */
.series-item {
  background-color: #ffffff; /* White background */
  border: 1px solid #d4d4d4; /* Subtle border */
  overflow: hidden; /* Contain image overflow */
  transition: transform 0.2s ease, box-shadow 0.2s ease; /* Smooth hover effect */
}

.series-item:hover {
  transform: translateY(-2px); /* Slight lift on hover */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Subtle shadow on hover */
}

/* =============================================================================
   SERIES IMAGES
   =============================================================================
   
   Styling for artwork images within the series grid.
   ============================================================================= */

.series-image {
  width: 100%; /* Full width of container */
  aspect-ratio: 3/4; /* Consistent aspect ratio for grid */
  overflow: hidden; /* Hide overflow */
  background-color: #f8f8f8; /* Light grey placeholder background */
  display: flex; /* Flexbox for image centering */
  align-items: center; /* Vertically center image */
  justify-content: center; /* Horizontally center image */
}

.series-image img {
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  object-fit: cover; /* Cover entire area while maintaining aspect ratio */
  transition: transform 0.3s ease; /* Smooth zoom effect */
}

.series-item:hover .series-image img {
  transform: scale(1.02); /* Slight zoom on hover */
}

/* =============================================================================
   SERIES CAPTIONS
   =============================================================================
   
   Typography and spacing for artwork captions and details.
   ============================================================================= */

.series-caption {
  padding: 1.5rem; /* Comfortable padding around caption */
}

.series-title {
  font-family: 'Tanker', Impact, sans-serif; /* Display font for titles */
  font-size: 1.125rem; /* Prominent size */
  font-weight: 400; /* Normal weight for Tanker */
  margin-bottom: 0.5rem; /* Space below title */
  color: #000000; /* Black text */
  line-height: 1.2; /* Tight line height for titles */
}

.series-details {
  font-family: 'Space Grotesk', sans-serif; /* Body font */
  font-size: 0.9rem; /* Smaller than body text */
  color: #666666; /* Medium grey for details */
  line-height: 1.4; /* Comfortable line height */
}

/* =============================================================================
   SERIES NAVIGATION
   =============================================================================
   
   Navigation section for series pages with back link to portfolio.
   ============================================================================= */

.series-navigation {
  margin-top: 4rem; /* Space above navigation */
  border-top: 1px solid #d4d4d4; /* Subtle top border */
  padding-top: 3rem; /* Space below border */
}

.nav-actions {
  text-align: center; /* Center navigation actions */
  padding: 3rem 0; /* Vertical padding */
}

/* =============================================================================
   RESPONSIVE DESIGN
   =============================================================================
   
   Breakpoint adjustments for optimal display across all screen sizes.
   ============================================================================= */

/* Desktop - 3 column grid */
@media (min-width: 768px) {
  .series-grid {
    grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
  }
}

/* Mobile - single column */
@media (max-width: 767px) {
  .series-grid {
    grid-template-columns: 1fr; /* Single column */
    gap: 1.5rem; /* Reduced gap for mobile */
  }
  
  .series-intro {
    padding: 0; /* Remove side padding on mobile */
  }
  
  .series-statement {
    font-size: 1rem; /* Slightly smaller text on mobile */
  }
}

/* Very small screens */
@media (max-width: 480px) {
  .series-grid {
    gap: 1rem; /* Even smaller gap */
    margin-top: 2rem; /* Reduced top margin */
  }
  
  .series-caption {
    padding: 1rem; /* Reduced caption padding */
  }
}