/* =============================================================================
   HOMEPAGE STYLES - Ean Walston Portfolio Website
   =============================================================================
   
   Styles specific to the homepage (index.html). This file builds upon the
   global styles in styles.css to create a compelling landing page that
   showcases Ean's work and artistic vision.
   
   Key design principles:
   - Hero section with strong visual hierarchy
   - Clean grid layouts for featured work
   - Generous whitespace reflecting printmaking precision
   - Subtle animations that enhance without distracting
   - Mobile-first responsive design
   ============================================================================= */

/* =============================================================================
   HERO SECTION
   =============================================================================
   
   The hero section is the first thing visitors see. It establishes Ean's
   identity as an artist and provides clear paths to explore his work.
   Design balances impact with restraint, reflecting printmaking aesthetics.
   
   HERO BACKGROUND IMAGE REQUIREMENTS:
   - Dimensions: 1920x1080px (16:9 aspect ratio)
   - File format: JPG recommended for photographs
   - File size: Optimize to under 500KB for web performance
   - Content: Should work well with dark overlay and white text
   - Location: Place image at /images/hero-background.jpg
   ============================================================================= */

.hero {
  padding: 4rem 0 6rem; /* Generous vertical padding for impact */
  background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), 
                    url('../images/hero-background.jpg'); /* Hero background with overlay */
  background-size: max(calc(100% - 60px), 1200px) auto; /* Minimum 1200px width, constrained by 30px on larger screens */
  background-position: center center;
  background-repeat: no-repeat;
  background-color: #ffffff; /* White background for 30px borders on each side */
  min-height: 100vh; /* Full viewport height for impact */
  display: flex; /* Flexbox for vertical centering */
  align-items: center; /* Vertically center content */
  position: relative; /* For overlay elements */
}

/* Hero content container using flexbox for responsive layout */
.hero-content {
  display: flex; /* Flexbox layout */
  flex-direction: column; /* Stack vertically on mobile */
  align-items: center; /* Center align content */
  text-align: center; /* Center text alignment */
  max-width: 800px; /* Limit content width for readability */
  margin: 0 auto; /* Center the content container */
  gap: 2rem; /* Space between content sections */
  position: relative; /* For z-index positioning */
  z-index: 2; /* Above the overlay */
}

/* Main hero title - artist name with maximum impact */
.hero-title {
  font-family: 'Tanker', Impact, sans-serif; /* Bold display font */
  font-size: 3.5rem; /* Large, impactful size */
  font-weight: 400; /* Tanker is already bold */
  color: #ffffff; /* White text for visibility against background */
  margin-bottom: 0.5rem; /* Tight spacing to subtitle */
  line-height: 1.1; /* Tight line height for impact */
  letter-spacing: -0.02em; /* Slight negative tracking for cohesion */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Text shadow for better readability */
}

/* Artist discipline subtitle */
.hero-subtitle {
  font-family: 'Space Grotesk', sans-serif; /* Clean body font */
  font-size: 1.5rem; /* Prominent but secondary to title */
  font-weight: 500; /* Medium weight for better readability while keeping color */
  color: #c6a98d; /* Sandstone accent color - artistic spark preserved */
  margin-bottom: 1.5rem; /* Space before description */
  text-transform: uppercase; /* Uppercase for emphasis */
  letter-spacing: 0.1em; /* Spaced tracking for readability */
  background: rgba(0, 0, 0, 0.3); /* Semi-transparent dark background */
  padding: 0.5rem 1rem; /* Padding around text */
  border-radius: 4px; /* Subtle rounded corners */
  display: inline-block; /* Keep background tight to text */
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7); /* Text shadow for better readability */
}

/* Hero description paragraph */
.hero-description {
  font-family: 'Space Grotesk', sans-serif; /* Body font */
  font-size: 1.125rem; /* Slightly larger than body text */
  line-height: 1.7; /* Generous line height for readability */
  color: #ffffff; /* White text for visibility against background */
  max-width: 600px; /* Limit line length for optimal reading */
  margin-bottom: 2rem; /* Space before action buttons */
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7); /* Text shadow for better readability */
}

/* Hero action buttons container */
.hero-actions {
  display: flex; /* Horizontal layout */
  gap: 1rem; /* Space between buttons */
  flex-wrap: wrap; /* Wrap on small screens */
  justify-content: center; /* Center align buttons */
}

/* =============================================================================
   FEATURED WORK SECTION
   =============================================================================
   
   Showcases selected works to give visitors a taste of Ean's portfolio.
   Grid layout provides visual organization while maintaining clean aesthetics.
   ============================================================================= */

.featured-work {
  padding: 6rem 0; /* Generous section padding */
  background-color: #ffffff; /* White background */
}

/* Section titles - consistent across all homepage sections */
.section-title {
  font-family: 'Tanker', Impact, sans-serif; /* Display font */
  font-size: 2.5rem; /* Large but not overwhelming */
  text-align: center; /* Center alignment */
  margin-bottom: 1rem; /* Space below title */
  color: #000000; /* Black text */
}

/* Section descriptions */
.section-description {
  font-family: 'Space Grotesk', sans-serif; /* Body font */
  font-size: 1.125rem; /* Slightly larger than body */
  text-align: center; /* Center alignment */
  color: #000000; /* Black text */
  max-width: 600px; /* Limit line length */
  margin: 0 auto 3rem; /* Center and add bottom margin */
  line-height: 1.6; /* Comfortable line height */
}

/* Featured work grid container */
.featured-grid {
  display: grid; /* CSS Grid for responsive layout */
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
  /* Responsive grid - minimum 300px columns, fill available space */
  gap: 2rem; /* Space between grid items */
  margin-bottom: 3rem; /* Space before action buttons */
}

/* Individual featured work items */
.featured-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 spill out */
}

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

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

/* Actual images within featured work containers */
.featured-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 placeholder styling */
.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 */
}

/* Featured work content area */
.featured-content {
  padding: 1.5rem; /* Comfortable padding around text */
}

/* Featured work titles */
.featured-title {
  font-family: 'Tanker', Impact, sans-serif; /* Display font */
  font-size: 1.25rem; /* Prominent but not overwhelming */
  margin-bottom: 0.5rem; /* Space below title */
  color: #000000; /* Black text */
}

/* Featured work medium and year information */
.featured-medium, .featured-year {
  font-family: 'Space Grotesk', sans-serif; /* Body font */
  font-size: 0.875rem; /* Smaller informational text */
  color: #666666; /* Grey for secondary information */
  margin-bottom: 0.25rem; /* Small spacing between items */
}

/* Actions section for featured work */
.featured-actions {
  text-align: center; /* Center align action buttons */
}

/* =============================================================================
   ABOUT PREVIEW SECTION
   =============================================================================
   
   Brief introduction to the artist that encourages visitors to read more.
   Clean typography and generous spacing for comfortable reading.
   ============================================================================= */

.about-preview {
  padding: 6rem 0; /* Generous section padding */
  background-color: #fafafa; /* Very light grey background for subtle contrast */
  border-top: 1px solid #d4d4d4; /* Subtle top border */
}

/* About content container */
.about-content {
  max-width: 700px; /* Comfortable reading width */
  margin: 0 auto; /* Center content */
  text-align: center; /* Center align text */
}

/* About text paragraphs */
.about-text {
  font-family: 'Space Grotesk', sans-serif; /* Body font */
  font-size: 1.125rem; /* Slightly larger for emphasis */
  line-height: 1.7; /* Generous line height for readability */
  color: #000000; /* Black text */
  margin-bottom: 1.5rem; /* Space between paragraphs */
}

/* About actions */
.about-actions {
  margin-top: 2rem; /* Space above action button */
}

/* =============================================================================
   RESPONSIVE DESIGN
   =============================================================================
   
   Mobile-first responsive adjustments for optimal viewing across devices.
   Maintains readability and usability while adapting layout for screen size.
   ============================================================================= */

/* Tablet and small desktop adjustments */
@media (min-width: 768px) {
  /* Hero section adjustments */
  .hero {
    padding: 6rem 0 8rem; /* More padding on larger screens */
  }
  
  .hero-content {
    text-align: center; /* Keep center alignment */
    align-items: center; /* Vertically center content */
  }
  
  .hero-actions {
    justify-content: center; /* Center align buttons */
  }
  
  /* Featured grid adjustments */
  .featured-grid {
    grid-template-columns: repeat(3, 1fr); 
    /* 3 equal columns on larger screens */
    gap: 2.5rem; /* More space between items */
  }
}

/* Large desktop adjustments */
@media (min-width: 1200px) {
  /* Hero title can be larger on very large screens */
  .hero-title {
    font-size: 4rem; /* Even larger title */
  }
  
  /* More generous section padding */
  .featured-work, .about-preview {
    padding: 8rem 0; /* Extra padding on large screens */
  }
}

/* Mobile-specific adjustments */
@media (max-width: 767px) {
  /* Smaller hero title on mobile */
  .hero-title {
    font-size: 2.5rem; /* Smaller for mobile screens */
  }
  
  .hero-subtitle {
    font-size: 1.25rem; /* Smaller subtitle */
  }
  
  .hero-description {
    font-size: 1rem; /* Standard size on mobile */
  }
  
  /* Stack action buttons vertically on very small screens */
  .hero-actions {
    flex-direction: column; /* Stack vertically */
    width: 100%; /* Full width */
  }
  
  .hero-actions .btn-primary,
  .hero-actions .btn-secondary {
    width: 100%; /* Full width buttons on mobile */
    text-align: center; /* Center text in buttons */
  }
  
  /* Single column grid on mobile */
  .featured-grid {
    grid-template-columns: 1fr; /* Single column */
    gap: 1.5rem; /* Smaller gap on mobile */
  }
  
  /* Adjust section padding for mobile */
  .hero {
    padding: 3rem 0 4rem; /* Less padding on mobile */
  }
  
  .featured-work, .about-preview {
    padding: 4rem 0; /* Less padding on mobile */
  }
  
  /* Smaller section titles on mobile */
  .section-title {
    font-size: 2rem; /* Smaller titles on mobile */
  }
}

/* =============================================================================
   ACCESSIBILITY ENHANCEMENTS
   =============================================================================
   
   Additional styles to ensure the homepage is accessible to all users,
   including those using screen readers or keyboard navigation.
   ============================================================================= */

/* Focus states for keyboard navigation */
.featured-item:focus-within {
  outline: 2px solid #c6a98d; /* Sandstone focus outline */
  outline-offset: 2px; /* Space between element and outline */
}

/* Ensure sufficient contrast for placeholder text */
.placeholder-text, .placeholder-subtext {
  background-color: rgba(255, 255, 255, 0.8); 
  /* Semi-transparent white background for contrast */
  padding: 0.25rem 0.5rem; /* Small padding around text */
  border-radius: 4px; /* Rounded corners */
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .featured-item {
    border-width: 2px; /* Thicker borders in high contrast mode */
  }
  
  .image-placeholder {
    border-width: 3px; /* Thicker dashed borders */
  }
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  .featured-item {
    transition: none; /* Remove hover transitions */
  }
  
  .featured-item:hover {
    transform: none; /* Remove hover transform */
  }
}