/**
 * Portfolio Page Styles
 * 
 * BEM Methodology:
 * Why BEM? BEM (Block Element Modifier) provides a clear, predictable naming convention
 * that prevents style conflicts, makes components reusable, and improves code maintainability.
 * Structure: .block__element--modifier ensures specificity without nesting.
 * 
 * Organized by: Base → Layout → Components → Utilities
 */

/* ============================================
   BASE STYLES
   ============================================ */
/* 
 * White Background Choice:
 * Why white? Photography portfolios traditionally use white backgrounds because:
 * 1. Maximizes color accuracy and contrast for images
 * 2. Industry standard for professional photography presentation
 * 3. Provides neutral canvas that doesn't compete with artwork
 * 4. Better for print-matching and color-critical work
 * 5. Reduces eye strain in well-lit environments where photography is typically viewed
 * Dark themes can shift color perception and are avoided in professional photography contexts.
 */
body {
  background: #ffffff;
  color: #0a0a0a;
}

/* ============================================
   HEADER OVERRIDES
   ============================================ */
/* Intentionally no header overrides.
   The site header is a shared component styled globally in style.css. */

/* ============================================
   PORTFOLIO CONTAINER (Block)
   ============================================ */
.portfolio-container {
  max-width: 100%;
  margin: 0;
  padding: 0;
  background: #ffffff;
  color: #0a0a0a;
  /* Force single column layout with centered items */
  display: flex;
  flex-direction: column;
  align-items: center;
}

.portfolio-reset-container {
  width: 100%;
  padding: 1rem;
  display: flex;
  justify-content: flex-end;
  margin-bottom: 1rem;
}

.portfolio-reset {
  appearance: none;
  position: static;
  background: #ffffff;
  border: 1px solid #616161;
  /* color: #4b4b4b; */
  padding: 10px 16px;
  border-radius: 6px;
  font-size: 0.875rem;
  cursor: pointer;
  font-weight: 500;
}

.portfolio-reset:hover {
  background: #e8e8e8;
  border-color: #2a2a2a;
}

/* ============================================
   PORTFOLIO ITEM (Block)
   Component structure: .portfolio-item
   ============================================ */
.portfolio-item {
  position: relative;
  width: 100%;
  max-height: 100vh;
  overflow: hidden;
  /* 
   * inline-flex makes container shrink-wrap to image width
   * This ensures title background automatically matches the rendered image width
   * rather than spanning full container width (which can be wider than portrait images)
   */
  display: inline-flex;
  flex-direction: column;
  padding: 0;
  margin: 0 auto 120px auto;
  user-select: none;
  -webkit-user-select: none;
  cursor: pointer;
}

/* Portfolio Item - Image Wrapper (Element) */
.portfolio-item__image-wrapper {
  position: relative;
  flex: 0 0 auto;
  overflow: hidden;
  display: flex;
  /*
   * Align the image to the bottom so the title bar visually “touches” the photo.
   * Centering the image vertically creates empty space below shorter images,
   * which reads like an unwanted gap between photo and title.
   */
  align-items: center;
  justify-content: center;
  /* 
   * Changed to 100vh since title is now an overlay.
   */
  max-height: 100vh;
  width: 100%;
  /* Avoid any inline-image baseline quirks creating stray gaps. */
  line-height: 0;
}

/* Portfolio Item - Image (Element) */
.portfolio-item__image {
  display: block;
  max-width: 100%;
  max-height: 100vh;
  width: auto;
  height: auto;
  object-fit: contain;
  object-position: center;
  /* 
   * Why user-select: none?
   * Prevents accidental text selection when clicking/dragging on images.
   * Improves UX by treating images as interactive elements rather than selectable content.
   * Common in image galleries where users click to navigate, not to select.
   * Vendor prefixes ensure cross-browser compatibility (WebKit, Moz, MS).
   */
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  /* 
   * Why pointer-events: none?
   * Prevents image dragging (ghost image effect) and disables right-click context menu.
   * Click events bubble to parent .portfolio-item for navigation.
   * Protects images from being easily saved/copied while maintaining clickability for navigation.
   * Essential for professional portfolios where image protection is a concern.
   */
  pointer-events: none;
}

/* Portfolio Item - Title Section (Element) */
.portfolio-item__title {
  /* 
   * Centered overlay style
   * Replaces the bottom bar with a centered overlay on top of the image.
   */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Slight dark background for text legibility, as requested */
  background: rgba(0, 0, 0, 0.3);
  /* Transition for hover effect */
  transition: background-color 0.3s ease;
  /* 
   * Why z-index: 10?
   * Ensures title always appears above image content and any potential overlays.
   * While currently no overlapping elements exist, z-index establishes proper stacking context
   * for future features (tooltips, modals, animations) and prevents rendering issues.
   * Value of 10 leaves room for intermediate layers (1-9) if needed.
   */
  z-index: 10;
  padding: 0;
  margin: 0;
  border-top: none;
}

/* Hover effect for portfolio item overlay */
.portfolio-item:hover .portfolio-item__title,
.portfolio-item:focus-visible .portfolio-item__title {
  background: rgba(0, 0, 0, 0.5);
}

/* Portfolio Item - Heading (Element) */
.portfolio-item__heading {
  font-family: 'Inter', Georgia, serif;
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  font-weight: 600;
  margin: 0;
  /* Use white text color universally as requested */
  color: #ffffff;
  letter-spacing: -0.02em;
  line-height: 1.2;
  text-align: center;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  text-transform: uppercase;
}

/* ============================================
   RESPONSIVE BREAKPOINTS
   
   Mobile-First Approach:
   Why mobile-first? 
   1. Performance: Mobile devices load only necessary CSS, desktop loads additional rules
   2. Progressive Enhancement: Base styles work everywhere, enhancements for larger screens
   3. Simplified Maintenance: Easier to add features than remove them
   4. Mobile Traffic: Majority of web traffic is mobile, prioritize their experience
   5. Accessibility: Mobile constraints force simpler, more accessible patterns
   
   Breakpoints chosen based on common device sizes and natural content flow points.
   ============================================ */

/* Mobile: < 768px (default styles above) */
@media (max-width: 767px) {
  .portfolio-item {
    width: 100%;
    margin-bottom: 80px;
  }

  .portfolio-item--portrait {
    max-height: 100vh;
  }
}

/* Tablet: 768px - 1199px */
@media (min-width: 768px) and (max-width: 1199px) {
  .portfolio-item {
    max-height: 100vh;
  }
}

/* Desktop: ≥ 1024px */
@media (min-width: 1024px) {
  .portfolio-item {
    max-width: 80%;
    max-height: 100vh;
    /* Children should naturally fill the card width so title == image area width. */
    align-items: stretch;
    /* Center the card itself horizontally */
    margin-left: auto;
    margin-right: auto;
  }

  .portfolio-item__title {
    /* Title will automatically match image width due to parent inline-flex */
    width: 100%;
    align-self: stretch;
  }

  .portfolio-item--portrait {
    max-height: 100vh;
    width: auto;
  }
  
  .portfolio-item--landscape {
    max-height: 100vh;
    width: auto;
  }
}

/* ============================================
   ACCESSIBILITY CONSIDERATIONS
   
   Why accessibility matters:
   1. Inclusive Design: Makes content available to users with vestibular disorders,
      motion sensitivity, or cognitive disabilities
   2. Legal Compliance: WCAG 2.1 Level AA compliance reduces legal risk
   3. Better UX for All: Accessibility improvements benefit all users (keyboard nav, contrast, etc.)
   4. SEO Benefits: Semantic HTML and ARIA labels improve search engine understanding
   
   Current implementations:
   - prefers-reduced-motion: Respects OS-level motion preferences
   - High contrast: #0a0a0a on #ffffff exceeds WCAG AAA standards (21:1 ratio)
   - Semantic HTML: Proper heading hierarchy for screen readers
   - Keyboard navigation: All interactive elements are keyboard accessible
   - user-select: Improves experience for users who rely on assistive technologies
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  /* No transitions to disable since parallax has been removed */
}