/**
 * Gallery Size-Driven Grid Layout
 * Uses artwork.scale metadata ("small" | "medium" | "large")
 * to create a stable, overlap-free grid layout
 */

/* ==========================================================================
   SIZE-DRIVEN GRID LAYOUT FOUNDATION
   ========================================================================== */

/*
 * Strategy:
 * - Grid uses small row units (10px baseline) for precise vertical fitting
 * - Each card spans rows based on its scale metadata
 * - Dense packing minimizes gaps without causing overlaps
 * - Aspect ratio preserved via CSS aspect-ratio on card wrapper
 */

/* ==========================================================================
   DEFAULT CARD SIZES (MOBILE: 1-2 COLUMNS)
   ========================================================================== */

/*
 * Mobile: single column, all artworks span 1 column
 * Row heights are proportional to ensure visual hierarchy
 */

/* ==========================================================================
   MOBILE: NO MASONRY BEHAVIOR
   Mobile gallery uses natural flow with equal spacing (mobile-ux-improvements.css)
   ========================================================================== */

@media (max-width: 767px) {
  /* Mobile: All cards flow naturally, no grid-row spanning */
  .artwork-card,
  .artwork-card[data-size="small"],
  .artwork-card[data-size="medium"],
  .artwork-card[data-size="large"] {
    grid-column: span 1 !important;
    grid-row: auto !important;
  }
}

/* ==========================================================================
   DESKTOP: Masonry grid-row spanning (768px+)
   ========================================================================== */

@media (min-width: 768px) {
  /* Default fallback for cards without scale data */
  .artwork-card {
    grid-column: span 1;
    grid-row: span 36; /* Medium default */
  }

  /* Small artworks - compact vertical space */
  .artwork-card[data-size="small"] {
    grid-column: span 1;
    grid-row: span 26;
    /* aspect-ratio set dynamically via inline style based on actual artwork dimensions */
  }

  /* Medium artworks - standard size */
  .artwork-card[data-size="medium"] {
    grid-column: span 1;
    grid-row: span 38;
    /* aspect-ratio set dynamically via inline style based on actual artwork dimensions */
  }

  /* Large artworks - prominent display */
  .artwork-card[data-size="large"] {
    grid-column: span 1;
    grid-row: span 48;
    /* aspect-ratio set dynamically via inline style based on actual artwork dimensions */
  }
}

/* ==========================================================================
   TABLET (768px+, 2-3 COLUMNS) - Masonry enabled
   ========================================================================== */

@media (min-width: 768px) and (max-width: 1023px) {
  /* Small artworks */
  .artwork-card[data-size="small"] {
    grid-column: span 1;
    grid-row: span 24;
  }

  /* Medium artworks */
  .artwork-card[data-size="medium"] {
    grid-column: span 1;
    grid-row: span 36;
  }

  /* Large artworks - span 2 columns when possible */
  .artwork-card[data-size="large"] {
    grid-column: span 2;
    grid-row: span 42;
  }
}

/* ==========================================================================
   DESKTOP (1024px+, 4 COLUMNS) - Masonry enabled
   ========================================================================== */

@media (min-width: 1024px) {
  /* Small artworks */
  .artwork-card[data-size="small"] {
    grid-column: span 1;
    grid-row: span 28;
  }

  /* Medium artworks */
  .artwork-card[data-size="medium"] {
    grid-column: span 1;
    grid-row: span 40;
  }

  /* Large artworks - span 2 columns */
  .artwork-card[data-size="large"] {
    grid-column: span 2;
    grid-row: span 60;
  }
}

/* ==========================================================================
   IMAGE CONTAINER - PREVENT LAYOUT SHIFT (CLS)
   ========================================================================== */

/*
 * aspect-ratio on card reserves space before image loads
 * Images fill container with object-fit: contain to prevent cropping
 */

.artwork-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ==========================================================================
   LOADING STATE
   ========================================================================== */

.artwork-card__image[data-loading] {
  opacity: 1;
  background: linear-gradient(
    135deg,
    rgba(245, 236, 228, 0.8) 0%,
    rgba(255, 255, 255, 0.96) 45%,
    rgba(232, 213, 196, 0.9) 100%
  );
  background-size: 200% 100%;
  animation: skeleton-loading 1.6s ease-in-out infinite;
  filter: none;
}

[data-theme="dark"] .artwork-card__image[data-loading] {
  background: linear-gradient(
    135deg,
    rgba(26, 24, 22, 0.88) 0%,
    rgba(56, 43, 34, 0.96) 45%,
    rgba(45, 31, 23, 0.9) 100%
  );
}

@keyframes skeleton-loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* Fade in after load */
.artwork-card__image {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.artwork-card__image.loaded {
  opacity: 1;
}

/* ==========================================================================
   ACCESSIBILITY
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .artwork-card__image {
    transition: none;
  }
}