/* ============================================================
   BEE SLIDER — reusable mobile swipe row
   Usage: add class "bee-slider" to a container.
   Each direct child becomes one slide.
   Desktop/tablet: unchanged (grid stays as designed).
   Mobile (<768px): horizontal swipe, peeking next card, dots.
   ============================================================ */

:root {
   --bee-slider-dot: rgba(2, 16, 31, 0.18);
   --bee-slider-dot-active: var(--bee-gold-dark, #EF9F27);
   --bee-slider-peek: 82%;
   --bee-slider-gap: 14px;
   --bee-slider-edge: 16px;
}


/* ============================================================
   MOBILE SWIPE ROW
   ============================================================ */
@media (max-width: 767px) {

   .bee-slider {
      display: grid;
      grid-template-columns: none;
      grid-auto-flow: column;
      grid-auto-columns: var(--bee-slider-peek);
      gap: var(--bee-slider-gap);

      /* Align the row to the start so overflow can reach the first card */
      justify-content: start;
      justify-items: start;
      place-content: start;

      margin-left: 0;
      margin-right: 0;
      padding: 4px var(--bee-slider-edge) 10px;

      align-items: start;

      overflow-x: auto;
      overflow-y: hidden;
      scroll-snap-type: x mandatory;
      scroll-padding-inline: var(--bee-slider-edge);
      -webkit-overflow-scrolling: touch;
      overscroll-behavior-x: contain;
      scrollbar-width: none;
   }

   .bee-slider::-webkit-scrollbar {
      display: none;
   }

   .bee-slider > * {
      scroll-snap-align: start;
      min-width: 0;
      height: auto;
      align-self: start;
   }
}


/* ============================================================
   DOTS — hidden on desktop, shown on mobile
   ============================================================ */
.bee-slider__dots {
   display: none;
}

@media (max-width: 767px) {

   .bee-slider__dots {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 8px;
      margin-top: 14px;
   }

   .bee-slider__dot {
      width: 8px;
      height: 8px;
      padding: 0;
      border: 0;
      border-radius: 999px;
      background: var(--bee-slider-dot);
      cursor: pointer;
      transition: width 0.3s ease, background 0.3s ease;
   }

   .bee-slider__dot.is-active {
      width: 22px;
      background: var(--bee-slider-dot-active);
   }

   .bee-slider__dot:focus-visible {
      outline: 2px solid var(--bee-slider-dot-active);
      outline-offset: 3px;
   }
}


/* ============================================================
   COMPACT MOBILE SECTIONS
   Add class "bee-section-compact" to a section wrapper.
   ============================================================ */
@media (max-width: 767px) {

   .bee-section-compact {
      padding-top: 48px;
      padding-bottom: 40px;
   }

   .bee-section-compact .bee-section-title,
   .bee-section-compact h2 {
      font-size: 30px;
      line-height: 1.12;
      margin-bottom: 12px;
   }

   .bee-section-compact p {
      font-size: 15px;
      line-height: 1.6;
   }
}

@media (prefers-reduced-motion: reduce) {
   .bee-slider {
      scroll-behavior: auto;
   }
   .bee-slider__dot {
      transition: none;
   }
}