/* ============================================================
   clay-background.css — ClayBackground wrapper

   A cream-toned ceramic tile surface that sits behind the
   HowItWorks, UpcomingEvents, and Gallery sections.

   Extends from the bottom of HeroSection downward.
   Uses device-specific background images per breakpoint.
   No z-index set — relies on DOM order (appears before
   foreground sections in the markup).

   Per Tom's instruction: position: relative, background-size:
   cover, background-position: center.
   ============================================================ */

.clay-background {
  position: relative;
  background-color: var(--color-surface-warm);          /* fallback until tile PNGs exist */
  background-image: url('/public/images/ui/clay-tile-bg-desktop.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Tablet */
@media (max-width: 1199px) and (min-width: 768px) {
  .clay-background {
    background-image: url('/public/images/ui/clay-tile-bg-tablet.webp');
  }
}

/* Mobile */
@media (max-width: 767px) {
  .clay-background {
    background-image: url('/public/images/ui/clay-tile-bg-mobile.webp');
  }
}