/*
 * Empire Mobile Carousel
 * Turns wp-block-columns + WC product grids into native horizontal scroll carousels on mobile.
 * Zero JS. Uses CSS scroll-snap-type. Same pattern as grillisland.store.
 *
 * Usage: add `empire-mobile-carousel` className to wp:group or wp:columns parent.
 * WooCommerce shortcodes auto-treated.
 */

@media (max-width: 767px) {

  /* ── Mark a columns block as mobile-carousel ───────────── */
  /* Use CSS Grid auto-flow column to bypass all Gutenberg flex overrides */
  /* 38% of flex container: 2 cards fully visible + ~50px peek of 3rd */
  .empire-mobile-carousel .wp-block-columns {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: 38% !important;
    grid-template-columns: unset !important;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 16px;
    gap: 12px;
    padding: 4px 16px 16px;
    margin-left: -16px;
    margin-right: -16px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .empire-mobile-carousel .wp-block-columns::-webkit-scrollbar {
    display: none;
  }
  .empire-mobile-carousel .wp-block-column {
    scroll-snap-align: start;
    max-width: none !important;
    flex-basis: auto !important;
    width: auto !important;
    margin: 0 !important;
  }

  /* ── WooCommerce product grids — auto carousel on mobile ── */
  /* Covers shortcode output: <ul.products.columns-N> <li.product> */
  /* 38%: 2 items visible + ~50px peek of 3rd (gap 12px + padding 16px) */
  .woocommerce ul.products.columns-3,
  .woocommerce ul.products.columns-4,
  .woocommerce ul.products.columns-5,
  .woocommerce ul.products.columns-6 {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 16px;
    gap: 12px;
    padding: 4px 16px 16px;
    margin-left: -16px;
    margin-right: -16px;
    list-style: none;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .woocommerce ul.products::-webkit-scrollbar { display: none; }
  .woocommerce ul.products li.product {
    flex: 0 0 38% !important;
    max-width: 38% !important;
    scroll-snap-align: start;
    width: auto !important;
    margin: 0 !important;
    min-width: 0;
  }

  /* ── Product categories shortcode output ─────────────────── */
  /* [product_categories] outputs <ul class="products columns-N"> with <li class="product-category"> */
  .woocommerce ul.products li.product-category {
    flex: 0 0 55% !important;
    max-width: 55% !important;
    scroll-snap-align: start;
    width: auto !important;
  }

  /* Visual hint: subtle horizontal gradient fade on right edge of carousel */
  .empire-mobile-carousel {
    position: relative;
  }
  .empire-mobile-carousel::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 20px;
    height: 100%;
    pointer-events: none;
    background: linear-gradient(to left, rgba(255,255,255,0.9), transparent);
  }
  .empire-mobile-carousel.has-background::after {
    display: none; /* dark sections — skip fade */
  }
}

/* ── Desktop: conservative — let Gutenberg default flow ──── */
@media (min-width: 768px) {
  .empire-mobile-carousel .wp-block-columns {
    /* revert to Gutenberg default (flex row with wrap) */
  }
}