/**
 * CAR GALLERY SECTION
 * 
 * Responsive grid displaying Mercedes-Benz vehicle cards with images, text, and color options.
 * 
 * LAYOUT:
 * - 0-529px: 1 column (mobile)
 * - 530px-1499px: 2 columns (tablet/desktop)
 * - 1500px+: 4 columns
 * 
 * CARDS:
 * - Mobile (0-899px): Square cards (1:1), centered text, max-height 450px
 * - Desktop (900px+): Adaptive height, left-aligned text, cards match row height
 * 
 * COLOR DOTS:
 * - Hidden below 620px
 * - 1.75rem (28px) at 620px-999px
 * - 2rem (32px) at 1000px+
 */

/* ===== GALLERY GRID LAYOUT ===== */

/* Gallery grid - Starts as single column on mobile */
.gallery-grid {
  display: grid;
  grid-template-columns: 1fr; /* Single column on mobile */
  gap: var(--spacing-flow); /* 1rem (16px) */
}

/* Two-column layout at 530px */
@media (min-width: 530px) {
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr); /* Two equal columns */
    gap: 1.5rem; /* 24px - Increased gap for 2-column layout */
    align-items: stretch; /* Ensures cards in same row match tallest card height */
  }
}

/* Four-column layout at 1500px */
@media (min-width: 1500px) {
  .car-gallery .container {
    max-width: none;
  }

  .gallery-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-flow); /* 1rem (16px) */
  }

  /* Return to square cards for 4-column layout */
  .product-card {
    aspect-ratio: 1 / 1; /* Square cards work better in 4-column grid */
    max-height: 450px; /* Restore height constraint */
    max-width: none; /* Remove width constraint for smaller columns */
  }

  /* Add bottom padding to footer for breathing room */
  .product-card .card-footer {
    padding-bottom: var(--spacing-flow); /* 1rem (16px) - Extra space below footer */
  }
}

/* ===== PRODUCT CARDS ===== */

/* Product card - Square cards with internal grid for content arrangement */
.product-card {
  aspect-ratio: 1 / 1; /* Enforces square shape regardless of content */
  max-height: 450px;
  display: grid;
  grid-template-rows: auto auto minmax(0, clamp(12rem, 40vw, 16rem)) auto; /* Title, subtitle, image (flexible), footer */
  row-gap: 0.5rem; /* 8px - Spacing between card elements inside card*/
  min-height: 0; /* Critical for grid children to shrink properly */
  min-width: 280px; /* Prevents cards from becoming too narrow */
  padding: var(--spacing-flow); /* 1rem (16px) */
}

/* Card title - Centered on mobile */
.product-card .card-title {
  text-align: center;
}

/* Card subtitle - Centered on mobile */
.product-card .card-subtitle {
  text-align: center;
}

/* Card image - Contained within card, maintains aspect ratio */
.product-card .card-media {
  width: 100%;
  height: 100%;
  object-fit: contain; /* Scales image to fit without cropping */
  display: block;
  object-position: center 60%; /* Slightly above center vertically */
  min-height: 0; /* Allows image to shrink instead of forcing grid track expansion */
}

/* Constrain image height on desktop to prevent oversized images */
@media (min-width: 900px) {
  .product-card .card-media {
    max-height: 16rem; /* 256px - Prevents very large car images from dominating */
  }
}

/* Desktop card adjustments at 900px */
@media (min-width: 900px) {
  .product-card {
    aspect-ratio: auto; /* Allow card to adapt height based on content */
    max-width: 600px; /* Prevents cards from becoming too large */
    max-height: none; /* Remove height constraint */
    padding-inline: 1.75rem; /* 28px - Increased horizontal padding */
    padding-block: 1rem; /* 16px - Controlled vertical padding */
    grid-template-rows: auto auto minmax(14rem, 1fr) auto; /* Title, subtitle, image (min 224px, max 256px), footer */
  }

  /* Left-align card title on desktop */
  .product-card .card-title {
    text-align: left;
    font-size: var(--font-size-heading-large); /* 1.5rem (24px) */
  }

  /* Left-align card subtitle on desktop */
  .product-card .card-subtitle {
    text-align: left;
    font-size: var(--font-size-body-large); /* 1.125rem (18px) */
    line-height: 1.4;
  }
}

/* ===== CARD FOOTER: BUTTON + COLOR DOTS ===== */

/* Card footer - Houses button and color options */
.product-card .card-footer {
  display: flex;
  justify-content: center; /* Centered on mobile */
  align-items: center;
  gap: var(--spacing-flow); /* 1rem (16px) */
}

/* Desktop footer adjustments at 620px */
@media (min-width: 620px) {
  .product-card .card-footer {
    justify-content: space-between; /* Button left, dots right */
  }
}

/* Add breathing room above footer at 900px */
@media (min-width: 900px) {
  .product-card .card-footer {
    padding-top: 0.5rem; /* 8px - Balances footer positioning */
  }
}

/* ===== COLOR DOTS ===== */

/* Base color dot style - Circular indicators for car colors */
.color-dot {
  min-width: 1.75rem; /* 28px */
  aspect-ratio: 1 / 1; /* Perfect circle */
  border-radius: 50%; /* Circular shape */
  border: 2px solid var(--color-text-inverse);
  display: inline-block;
}

/* Color dots - Hidden on mobile */
.product-card .color-dot {
  display: none;
}

/* Color dots container - Always present but dots hidden until 620px */
.product-card .color-dots {
  display: flex;
  gap: 0.75rem; /* 12px - Spacing between color dots */
}

/* Show color dots on desktop at 620px */
@media (min-width: 620px) {
  .product-card .color-dot {
    display: inline-block;
  }
}

/* Increase color dot size at 1000px */
@media (min-width: 1000px) {
  .product-card .color-dot {
    width: 2rem; /* 32px - Larger on wider screens */
  }
}

/* ===== CAR COLOR VARIANTS ===== */

/* Color variant classes - Applied to .color-dot elements */
.gray {
  background-color: #c5c5c5;
}
.red {
  background-color: #b20000;
}
.blue {
  background-color: #0010a1;
}
.black {
  background-color: #000000;
}
.yellow {
  background-color: #e2c324;
}
.slate-blue {
  background-color: #515f91;
}
.muted-red {
  background-color: #ae3f3f;
}