/**
 * FEATURES SECTION
 * Horizontal scrolling carousel of feature cards (accessories, offers, etc.).
 * Applied to: Features section in index.html
 * Layout: Scroll-snap enabled horizontal flex track with fixed-width cards
 * Responsive: Cards grow wider on tablet (600px) and desktop (1200px)
 */

/* ========== HORIZONTAL SCROLLING CONTAINER ========== */

/* Features track - Horizontal scrolling container */
.features-track {
  display: flex;
  gap: var(--spacing-section-tight); /* 2rem (32px) */
  align-items: stretch; /* All cards same height */
  justify-content: flex-start;

  overflow-x: auto; /* Enables horizontal scrolling */
  overflow-y: hidden; /* Prevents vertical scroll */
  padding-inline: var(
    --spacing-page
  ); /* 0.65rem (10.4px) - Whitespace at edges */
  padding-bottom: var(
    --spacing-flow
  ); /* 1rem (16px) - Prevents scrollbar from overlapping content */

  scroll-snap-type: x mandatory; /* Snaps cards into view when user stops scrolling */
}

/* ========== FEATURE CARDS ========== */

/* Feature card - Fixed-width cards in scroll track */
.feature-card {
  flex: 0 0 18rem; /* 288px - Don't grow/shrink, fixed base width */
  aspect-ratio: 16 / 9; /* Maintains consistent card proportions */
  padding: var(--spacing-section-tight); /* 2rem (32px) */

  /* Grid layout: heading → image → button */
  display: grid;
  grid-template-rows: auto minmax(10rem, 1fr) auto; /* Title auto-size, image flexible (min 160px), button auto-size */
  gap: var(--spacing-flow); /* 1rem (16px) */
  text-align: center;

  scroll-snap-align: start; /* Snaps to card's left edge */
}

/* Center button within grid cell */
.feature-card .btn {
  justify-self: center;
}

/* Feature card image */
.feature-card .card-media {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Fills available space while preserving aspect ratio */
  display: block;
  padding-bottom: var(--spacing-flow); /* 1rem (16px) */
}

/* ===== TABLET: WIDER CARDS (600px+) ===== */

@media (min-width: 600px) {
  /* Increase card width on tablet */
  .feature-card {
    flex-basis: 22rem; /* 352px */
  }
}

/* ===== DESKTOP: MAXIMUM CARD WIDTH (1200px+) ===== */

@media (min-width: 1200px) {
  /* Maximum card width on desktop */
  .feature-card {
    flex-basis: 24rem; /* 384px */
  }
}