/* ============================================
   Homepage hero carousel
   Replaces #berry-hero-desktop / #berry-hero-mobile (old single-image +
   text-only pair) with one rotating carousel — see
   inc/homepage-hero-carousel.php for the PHP side.
   ============================================ */

/* The two sections this carousel replaces, hidden unconditionally
   (overriding their own responsive display toggle further down this
   stylesheet, which only ever set one or the other to display:none —
   this hides both, at every width). */
#berry-hero-desktop,
#berry-hero-mobile {
  display: none !important;
}

.berry-hero-carousel {
  position: relative;
  width: 100%;
  aspect-ratio: 968 / 280;
  background: var(--clr-surface-2);
}

.berry-hero-carousel__viewport {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* Width/each-slide-width both come from the same --berry-hero-slide-count
   custom property (set inline by PHP = real slides + 2 loop clones), so
   adding/removing a slide never needs a matching CSS edit. Position is
   driven entirely by JS setting transform: translateX(); the CSS only
   owns the transition. */
.berry-hero-carousel__track {
  display: flex;
  width: calc(var(--berry-hero-slide-count) * 100%);
  height: 100%;
  transition: transform var(--transition-slow);
}

.berry-hero-carousel__track.is-jumping {
  transition: none;
}

.berry-hero-carousel__slide {
  flex: 0 0 calc(100% / var(--berry-hero-slide-count));
  height: 100%;
}

.berry-hero-carousel__slide picture,
.berry-hero-carousel__slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.berry-hero-carousel__slide img {
  -webkit-user-drag: none;
  user-select: none;
}

/* Matches the reference screenshot exactly: solid mint pill, dark-purple
   text, no border/ring, positioned bottom-left with generous margin from
   both edges (not flush in the corner). Same mint/dark-purple combo as
   the original .hero-banner-mobile .btn this carousel replaces (see that
   rule a little further down this file). */
.berry-hero-carousel__cta {
  position: absolute;
  left: 32px;
  bottom: 40px;
  z-index: 3;
  background: #00F08B;
  color: #3B0768;
  font-weight: 800;
  text-decoration: none !important; /* the parent Hello Biz theme's `.page-content a { text-decoration: underline; }` (theme.css) outranks a single class on specificity alone and was winning */
  border: none;
  box-shadow: 0 8px 20px rgba(0,240,139,0.35);
}

.berry-hero-carousel__cta:hover,
.berry-hero-carousel__cta:focus,
.berry-hero-carousel__cta:active {
  text-decoration: none !important;
  background: #1cf59a;
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(0,240,139,0.45);
}

/* !important throughout: berry-reference.css has a global `button {
   border: none; background: none; }` reset (for form/filter/qty-stepper
   buttons elsewhere on the site) that was overriding these — confirmed
   live as the actual cause of "no arrows/bullets" (the CTA button next
   to this is an <a>, unaffected by that reset, and rendered fine the
   whole time, which is what pointed at a button-specific rule rather
   than anything wrong with positioning/z-index here). */
.berry-hero-carousel__arrow {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 44px !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.92) !important;
  color: var(--clr-text) !important;
  cursor: pointer !important;
  box-shadow: var(--shadow-md) !important;
  transition: background var(--transition), transform var(--transition);
  z-index: 2 !important;
}

.berry-hero-carousel__arrow:hover {
  background: var(--clr-surface) !important;
  transform: translateY(-50%) scale(1.08) !important;
}

.berry-hero-carousel__arrow--prev { left: 16px !important; }
.berry-hero-carousel__arrow--next { right: 16px !important; }

.berry-hero-carousel__bullets {
  position: absolute !important;
  left: 50% !important;
  bottom: 16px !important;
  transform: translateX(-50%) !important;
  display: flex !important;
  gap: 10px !important;
  z-index: 2 !important;
}

.berry-hero-carousel__bullet {
  width: 10px !important;
  height: 10px !important;
  border: none !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.55) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
  cursor: pointer !important;
  padding: 0 !important;
  transition: background var(--transition), transform var(--transition);
}

.berry-hero-carousel__bullet:hover {
  background: rgba(255, 255, 255, 0.85);
}

.berry-hero-carousel__bullet.is-active {
  /* Was plain white (var(--clr-surface)) — too close in tone to the
     inactive dots' own semi-transparent white to read as clearly
     "different" at a glance, especially against a light/pastel slide.
     Theme mint (#00F08B, same accent used for the CTA button/free-
     shipping-unlocked state elsewhere on this site) gives real contrast
     against every slide background instead.
     !important required: the base .berry-hero-carousel__bullet rule
     above sets `background` with !important (needed earlier to beat a
     global `button { background: none }` reset in berry-reference.css —
     see that rule's own comment), and !important always wins over a
     non-important declaration regardless of selector specificity — this
     rule being MORE specific than the base one doesn't matter once
     !important is in play on the other side. Without matching it here,
     the base rule's semi-transparent white silently kept winning —
     confirmed live as the actual reason the color change had no visible
     effect at all the first time. */
  background: #00F08B !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3) !important;
  transform: scale(1.25) !important;
}

@media (max-width: 767px) {
  /* Was 1/1 (square) to match the original square mobile crops — the
     new mobile banners (720x405) are a plain 16:9 rectangle instead, per
     request ("a little bit like a rectangle"), so the viewport now
     matches their real aspect ratio rather than cropping a wide image
     into a square. Desktop's own 968/280 ratio (set above, outside this
     media query) is untouched. */
  .berry-hero-carousel {
    aspect-ratio: 16 / 9;
  }

  /* Both the CTA and arrows were sized/positioned for the old square
     (1/1) mobile viewport — now that it's a much shorter 16/9 rectangle,
     those same fixed sizes ate up a big share of the visibly shorter
     banner and visually crowded it. Scaled down and the CTA's bottom
     offset reduced to match. */
  .berry-hero-carousel__cta {
    /* Tucked into the actual bottom-left corner instead of floating
       higher up — the bullets are center-aligned (see .berry-hero-
       carousel__bullets below), so a small corner-hugging button this
       far left never reaches them regardless of its own bottom offset. */
    left: 8px;
    bottom: 8px;
    padding: 2px 8px;
    font-size: 8px;
  }

  .berry-hero-carousel__arrow {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 30px;
    height: 30px;
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.12);
    z-index: 3;
  }

  .berry-hero-carousel__arrow--prev { left: 10px; }
  .berry-hero-carousel__arrow--next { right: 10px; }

  .berry-hero-carousel__bullets {
    bottom: 14px;
  }
}