/**
 * StileSalentino Modular Bento Grid System v2.1.0
 * Component-Based CSS Architecture with Auto-Association
 * 
 * @package StileSalentino
 * @version 2.1.0 Complete Rewrite
 * @author StileSalentino Development Team
 * @architecture Modular Component System
 */

/* ============================================================================
   MODULAR CSS VARIABLES SYSTEM (Based on Architecture)
   Following variables.css → base.css → components.css pattern
   ============================================================================ */

:root {
  /* Design Tokens - Foundation Layer */
  --fd-color-primary: #2563eb;
  --fd-color-secondary: #64748b;
  --fd-space-xs: 4px;
  --fd-space-sm: 8px;
  --fd-space-md: 16px;
  --fd-space-lg: 24px;
  --fd-space-xl: 32px;

  /* Bento Component Variables - Component Layer */
  --fd-bento-gap: var(--fd-space-md);
  --fd-bento-radius: 16px;
  --fd-bento-item-radius: 12px;
  --fd-bento-bg: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  --fd-bento-shadow: 0 8px 32px rgba(0,0,0,0.08);
  --fd-bento-shadow-hover: 0 16px 48px rgba(0,0,0,0.12);
  --fd-bento-transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);

  /* Container System Variables - Layout Layer */
  --fd-container-min-height: 320px;
  --fd-container-max-height: 80vh;
  --fd-container-ideal-height: 50vh;

  /* Asymmetric Ratio Constants - Design System */
  --fd-golden-ratio: 1.618;
  --fd-main-ratio: 2;
  --fd-secondary-ratio: 1;
}

/* ============================================================================
   COMPONENT BASE - Following FD_Component Architecture Pattern
   Container → Grid → Items (Atomic Design: Atoms → Molecules → Organisms)
   ============================================================================ */

/* Container Component (Organism Level) */
.fd-gallery-container {
  /* Layout Properties */
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;

  /* Container Filling Algorithm */
  min-height: clamp(
    var(--fd-container-min-height),
    var(--fd-container-ideal-height),
    var(--fd-container-max-height)
  );

  /* Box Model */
  box-sizing: border-box;
  padding: 0;
  margin: 0;

  /* Component Architecture Properties */
  position: relative;
  contain: layout style;
}

/* Bento Grid Component (Molecule Level) */
.fd-gallery__bento {
  /* CSS Grid Foundation */
  display: grid;

  /* Container Expansion System */
  flex: 1 1 auto; /* CRITICAL: Fills parent container */
  width: 100%;
  height: 100%;
  min-height: 0; /* CRITICAL: Allows shrinking for flex expansion */

  /* Component Styling */
  gap: var(--fd-bento-gap);
  background: var(--fd-bento-bg);
  border-radius: var(--fd-bento-radius);
  overflow: hidden;
  box-sizing: border-box;
  position: relative;

  /* Performance Optimization */
  will-change: transform;
  backface-visibility: hidden;
}

/* Bento Item Component (Atom Level) */
.fd-gallery__item {
  /* Layout Properties */
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 80px; /* Minimum for very small containers */

  /* Flexbox Centering */
  display: flex;
  align-items: center;
  justify-content: center;

  /* Component Styling */
  background: #f8f9fa;
  border-radius: var(--fd-bento-item-radius);
  box-shadow: var(--fd-bento-shadow);
  overflow: hidden;
  cursor: pointer;
  box-sizing: border-box;

  /* Interaction System */
  transition: var(--fd-bento-transition);
  transform: translateZ(0); /* Hardware acceleration */
}

/* Item Image Component */
.fd-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: var(--fd-bento-item-radius);
  transition: transform 0.3s ease;
}

/* ============================================================================
   ASYMMETRIC BENTO PATTERNS - CORRECTED IMPLEMENTATION FOR 1-5 IMAGES
   Following Component Pattern: Each count creates different grid template
   ============================================================================ */

/* Pattern 1: Hero Single Image - Fills Entire Container */
.fd-gallery__bento[data-count="1"] {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}

/* Pattern 2: Golden Ratio HORIZONTAL Split - CORRECTED */
.fd-gallery__bento[data-count="2"] {
  grid-template-columns: 1.618fr 1fr; /* HORIZONTAL: Left wider, right narrower */
  grid-template-rows: 1fr; /* SINGLE ROW */
}

/* Pattern 3: Hero Left + Two Stacked Right */
.fd-gallery__bento[data-count="3"] {
  grid-template-columns: var(--fd-main-ratio)fr var(--fd-secondary-ratio)fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas:
    "hero sec1"
    "hero sec2";
}

.fd-gallery__bento[data-count="3"] .fd-gallery__item:nth-child(1) {
  grid-area: hero;
}

.fd-gallery__bento[data-count="3"] .fd-gallery__item:nth-child(2) {
  grid-area: sec1;
}

.fd-gallery__bento[data-count="3"] .fd-gallery__item:nth-child(3) {
  grid-area: sec2;
}

/* Pattern 4: Perfect Asymmetric Bento (Original Design) */
.fd-gallery__bento[data-count="4"] {
  grid-template-columns: var(--fd-main-ratio)fr var(--fd-secondary-ratio)fr var(--fd-secondary-ratio)fr;
  grid-template-rows: 1fr 1fr;
}

.fd-gallery__bento[data-count="4"] .fd-gallery__item:nth-child(1) {
  grid-column: 1;
  grid-row: 1 / span 2; /* Hero spans both rows */
}

.fd-gallery__bento[data-count="4"] .fd-gallery__item:nth-child(2) {
  grid-column: 2;
  grid-row: 1; /* Top middle */
}

.fd-gallery__bento[data-count="4"] .fd-gallery__item:nth-child(3) {
  grid-column: 2;
  grid-row: 2; /* Bottom middle */
}

.fd-gallery__bento[data-count="4"] .fd-gallery__item:nth-child(4) {
  grid-column: 3;
  grid-row: 1 / span 2; /* Right spans both rows */
}

/* Pattern 5: Hero + 2x2 Grid (Maximum Limit) */
.fd-gallery__bento[data-count="5"],
.fd-gallery__bento[data-count="6"],
.fd-gallery__bento[data-count="7"],
.fd-gallery__bento[data-count="8"],
.fd-gallery__bento[data-count="9"] {
  grid-template-columns: var(--fd-main-ratio)fr var(--fd-secondary-ratio)fr var(--fd-secondary-ratio)fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas:
    "hero quad1 quad2"
    "hero quad3 quad4";
}

.fd-gallery__bento[data-count="5"] .fd-gallery__item:nth-child(1),
.fd-gallery__bento[data-count="6"] .fd-gallery__item:nth-child(1),
.fd-gallery__bento[data-count="7"] .fd-gallery__item:nth-child(1),
.fd-gallery__bento[data-count="8"] .fd-gallery__item:nth-child(1),
.fd-gallery__bento[data-count="9"] .fd-gallery__item:nth-child(1) {
  grid-area: hero;
}

.fd-gallery__bento[data-count="5"] .fd-gallery__item:nth-child(2),
.fd-gallery__bento[data-count="6"] .fd-gallery__item:nth-child(2),
.fd-gallery__bento[data-count="7"] .fd-gallery__item:nth-child(2),
.fd-gallery__bento[data-count="8"] .fd-gallery__item:nth-child(2),
.fd-gallery__bento[data-count="9"] .fd-gallery__item:nth-child(2) {
  grid-area: quad1;
}

.fd-gallery__bento[data-count="5"] .fd-gallery__item:nth-child(3),
.fd-gallery__bento[data-count="6"] .fd-gallery__item:nth-child(3),
.fd-gallery__bento[data-count="7"] .fd-gallery__item:nth-child(3),
.fd-gallery__bento[data-count="8"] .fd-gallery__item:nth-child(3),
.fd-gallery__bento[data-count="9"] .fd-gallery__item:nth-child(3) {
  grid-area: quad2;
}

.fd-gallery__bento[data-count="5"] .fd-gallery__item:nth-child(4),
.fd-gallery__bento[data-count="6"] .fd-gallery__item:nth-child(4),
.fd-gallery__bento[data-count="7"] .fd-gallery__item:nth-child(4),
.fd-gallery__bento[data-count="8"] .fd-gallery__item:nth-child(4),
.fd-gallery__bento[data-count="9"] .fd-gallery__item:nth-child(4) {
  grid-area: quad3;
}

.fd-gallery__bento[data-count="5"] .fd-gallery__item:nth-child(5),
.fd-gallery__bento[data-count="6"] .fd-gallery__item:nth-child(5),
.fd-gallery__bento[data-count="7"] .fd-gallery__item:nth-child(5),
.fd-gallery__bento[data-count="8"] .fd-gallery__item:nth-child(5),
.fd-gallery__bento[data-count="9"] .fd-gallery__item:nth-child(5) {
  grid-area: quad4;
}

/* Hide Images Beyond Limit (5-Image Maximum) */
.fd-gallery__bento .fd-gallery__item:nth-child(n+6) {
  display: none !important;
}

/* ============================================================================
   RESPONSIVE SYSTEM - CORRECTED FOR PATTERN 2
   ============================================================================ */

/* Tablet (768px and below) - Simplified Layouts */
@media (max-width: 768px) {
  :root {
    --fd-container-ideal-height: 45vh;
    --fd-container-max-height: 70vh;
    --fd-bento-gap: var(--fd-space-sm);
    --fd-bento-radius: 12px;
    --fd-bento-item-radius: 8px;
  }

  /* Simplify Complex Patterns but KEEP Pattern 2 Horizontal */
  .fd-gallery__bento[data-count="4"],
  .fd-gallery__bento[data-count="5"] {
    grid-template-columns: var(--fd-main-ratio)fr var(--fd-secondary-ratio)fr !important;
    grid-template-areas:
      "hero sec1"
      "hero sec2" !important;
  }

  /* Hide Extra Images on Tablets */
  .fd-gallery__bento[data-count="4"] .fd-gallery__item:nth-child(n+4),
  .fd-gallery__bento[data-count="5"] .fd-gallery__item:nth-child(n+4) {
    display: none !important;
  }
}

/* Mobile (480px and below) - Stack Layout for ALL patterns */
@media (max-width: 480px) {
  :root {
    --fd-container-ideal-height: 40vh;
    --fd-container-max-height: 60vh;
    --fd-bento-gap: var(--fd-space-xs);
  }

  /* Stack layout for ALL multi-image patterns (2, 3, 4, 5) */
  .fd-gallery__bento[data-count="2"],
  .fd-gallery__bento[data-count="3"],
  .fd-gallery__bento[data-count="4"],
  .fd-gallery__bento[data-count="5"] {
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: auto auto auto !important;
    grid-template-areas: unset !important;
  }

  .fd-gallery__item {
    min-height: 120px !important;
    grid-column: auto !important;
    grid-row: auto !important;
    grid-area: unset !important;
  }

  /* First Image Spans Full Width for 3+ images */
  .fd-gallery__bento[data-count="3"] .fd-gallery__item:nth-child(1),
  .fd-gallery__bento[data-count="4"] .fd-gallery__item:nth-child(1),
  .fd-gallery__bento[data-count="5"] .fd-gallery__item:nth-child(1) {
    grid-column: 1 / -1 !important;
  }
}


/* ============================================================================
   INTERACTION SYSTEM
   ============================================================================ */

/* Hover Effects */
.fd-gallery__item:hover {
  transform: scale(1.02) translateY(-4px);
  box-shadow: var(--fd-bento-shadow-hover);
  z-index: 10;
}

.fd-gallery__item:hover img {
  transform: scale(1.05);
}

/* Focus States (Accessibility) */
.fd-gallery__item:focus {
  outline: 3px solid var(--fd-color-primary);
  outline-offset: 2px;
}

/* Active States */
.fd-gallery__item:active {
  transform: scale(0.98);
}

/* ============================================================================
   COMPONENT ANIMATIONS
   ============================================================================ */

/* Entrance Animation */
.fd-gallery__item {
  opacity: 0;
  animation: fdBentoSlideIn 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.fd-gallery__item:nth-child(1) { animation-delay: 0.1s; }
.fd-gallery__item:nth-child(2) { animation-delay: 0.2s; }
.fd-gallery__item:nth-child(3) { animation-delay: 0.3s; }
.fd-gallery__item:nth-child(4) { animation-delay: 0.4s; }
.fd-gallery__item:nth-child(5) { animation-delay: 0.5s; }

@keyframes fdBentoSlideIn {
  0% {
    opacity: 0;
    transform: translateY(30px) scale(0.8);
  }
  60% {
    opacity: 0.8;
    transform: translateY(-5px) scale(1.02);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  .fd-gallery__item {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ============================================================================
   END OF STILESALENTINO MODULAR BENTO GRID SYSTEM v2.1.0
   
   ✅ Pattern 1: Single hero image
   ✅ Pattern 2: HORIZONTAL golden ratio (1.618fr 1fr) - CORRECTED
   ✅ Pattern 3: Hero left + two stacked right  
   ✅ Pattern 4: Large left + middle column + tall right
   ✅ Pattern 5: Hero left + 2x2 grid right
   ✅ Container-filling algorithm
   ✅ Responsive system (preserves Pattern 2 horizontally)
   ✅ Clean code without debug tweaks
   ============================================================================ */