/* Landing page specific scaffolding */

/* Sections: allow comfortable spacing on small screens */
@media (max-width: 767px) {
  .section {
    padding: 12px 0 20px;
  }

  .hero {
    padding-bottom: 8px;
    padding-top: 0px;
  }
  .hero h1 {
    margin-top: 16px;
  }

  .hero p {
    /* hide on mobile */
    display: none;
  }
  /* Make hero image a background behind content on mobile */
  .hero .container.hero-grid {
    position: relative;
    background-image: linear-gradient(rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.15)), url('/static/images/placeholder_landing.avif');
    background-size: cover;
    background-position: center;
    border-radius: none;
    padding-bottom: 8px;
    padding-top: 0px;
  }
  .hero .hero-image {
    display: none;
  }
  /* Center the hero actions (CTA button) horizontally */
  .hero .actions {
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Featured carousel tweaks can be added here later without affecting other pages */

/* Container query for product card widths in landing carousels */
#featured .carousel,
#explore .carousel {
  container-type: inline-size;
}

@container (max-width: 520px) {
  #featured .product-card,
  #explore .product-card {
    flex-basis: 41%;
  }
}