/* ===================================================================
   CONTAINER QUERIES FOR GALLERY (March 11, 2026)
   =================================================================== */

/* Gallery Container - Enable container queries for responsive cards
   ------------------------------------------------------------------ */

/* Mark gallery container as a container context */
.gallery-container {
  container-type: inline-size;
  container-name: gallery;
}

/* Container Query Grid System
   ------------------------------------------------------------------
   Instead of viewport-based media queries (@media), we use container
   queries (@container) so gallery cards adapt based on their parent
   container width, not the entire viewport. This enables flexible
   layouts in sidebars, modals, or any constrained context.
   ------------------------------------------------------------------ */

/* Mobile-first default: 1 column (no query needed) */
.gallery-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

/* Container width >= 480px: 2 columns */
@container gallery (min-width: 480px) {
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
}

/* Container width >= 768px: 3 columns */
@container gallery (min-width: 768px) {
  .gallery-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
  }
}

/* Container width >= 1024px: 4 columns */
@container gallery (min-width: 1024px) {
  .gallery-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
  }
}

/* Container width >= 1536px: 5 columns (ultra-wide displays) */
@container gallery (min-width: 1536px) {
  .gallery-grid {
    grid-template-columns: repeat(5, 1fr);
    gap: 2.5rem;
  }
}

/* Gallery Card Container Query Enhancements
   ------------------------------------------------------------------
   Cards adapt their internal layout based on container width
   ------------------------------------------------------------------ */

/* Adjust card padding and typography for smaller containers */
@container gallery (max-width: 479px) {
  .gallery-card {
    padding: 1rem;
  }
  
  .gallery-card h2 {
    font-size: 1.25rem;
  }
  
  .gallery-card .price {
    font-size: 1.25rem;
  }
  
  .gallery-card img {
    height: 12rem;
  }
}

/* Medium containers: balanced layout */
@container gallery (min-width: 480px) and (max-width: 767px) {
  .gallery-card img {
    height: 14rem;
  }
}

/* Large containers: full desktop experience */
@container gallery (min-width: 768px) {
  .gallery-card img {
    height: 16rem;
  }
}

/* Collection Grid - Alternative compact layout
   ------------------------------------------------------------------ */

.collection-grid-container {
  container-type: inline-size;
  container-name: collection;
}

.collection-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@container collection (min-width: 400px) {
  .collection-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@container collection (min-width: 768px) {
  .collection-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@container collection (min-width: 1280px) {
  .collection-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Browser Support Fallback
   ------------------------------------------------------------------
   For browsers without container query support (< 3% as of 2026),
   fall back to traditional viewport media queries
   ------------------------------------------------------------------ */

@supports not (container-type: inline-size) {
  /* Fallback to viewport media queries */
  .gallery-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  
  @media (min-width: 480px) {
    .gallery-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  
  @media (min-width: 768px) {
    .gallery-grid {
      grid-template-columns: repeat(3, 1fr);
    }
  }
  
  @media (min-width: 1024px) {
    .gallery-grid {
      grid-template-columns: repeat(4, 1fr);
    }
  }
  
  @media (min-width: 1536px) {
    .gallery-grid {
      grid-template-columns: repeat(5, 1fr);
    }
  }
}