/**
 * Featured Recipes Slider
 *
 * CSS scroll-snap based — no JavaScript dependency. Natively
 * accessible (standard scrollable region) and correct on mobile by
 * default via native momentum/touch scrolling.
 */

.rl-featured-slider {
  padding-block: var(--rl-section-spacing-lg);
}

.rl-featured-slider .rl-home-section__header {
  margin-block-end: var(--rl-space-6);
}

.rl-featured-slider__track {
  display: flex;
  gap: var(--rl-space-5);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--rl-container-padding-x);
  padding-inline: var(--rl-container-padding-x);
  padding-block-end: var(--rl-space-3);
  -webkit-overflow-scrolling: touch;
}

.rl-featured-slider__item {
  flex: 0 0 auto;
  inline-size: min(85%, 320px);
  scroll-snap-align: start;
}

@media (min-width: 640px) {
  .rl-featured-slider__item { inline-size: min(45%, 340px); }
}

@media (min-width: 1024px) {
  .rl-featured-slider__item { inline-size: min(28%, 360px); }
}

/* Respect reduced-motion preference for the scroll behavior itself. */
@media (prefers-reduced-motion: reduce) {
  .rl-featured-slider__track { scroll-behavior: auto; }
}

/* Placeholder cards shown when zero recipes exist yet — visually
   distinguished from real cards via a dashed border and muted
   content, while reusing the real card's layout classes exactly. */
.rl-recipe-card--placeholder {
  border: var(--rl-border-width-2) dashed var(--rl-color-border);
  border-radius: var(--rl-radius-lg);
  overflow: hidden;
}

.rl-recipe-card__image-wrap--placeholder {
  aspect-ratio: 4 / 3;
  background-color: var(--rl-color-surface-raised);
}

.rl-recipe-card--placeholder .rl-recipe-card__title,
.rl-recipe-card--placeholder .rl-recipe-card__excerpt {
  color: var(--rl-color-foreground-subtle);
  display: block;
  padding-inline: var(--rl-space-4);
}

.rl-recipe-card--placeholder .rl-recipe-card__title {
  padding-block-start: var(--rl-space-4);
}

.rl-recipe-card--placeholder .rl-recipe-card__excerpt {
  padding-block-end: var(--rl-space-4);
  font-size: var(--rl-text-sm);
}