/* ── Service cards carousel arrows (Home – Services) — Figma cream disc, 1px dark-red ring ──
   Same disc as the About carousels (css/about.css). The module uses Divi's plain
   chevron glyphs at 20px; the disc is drawn here at 1.45em → 29px (Figma mobile).
   display:flex makes the disc the arrow's only box, so Divi's translate centres
   it on the card's vertical middle (an inline icon left a taller line box).
   Hook: .home-services-carousel (custom attribute on the Group Carousel). */
.home-services-carousel .et_pb_group_carousel_arrow .et-pb-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.45em;
  height: 1.45em;
  border: 1px solid var(--dark-red);
  border-radius: 50%;
  background-color: var(--light-cream);
  line-height: 1;
}

.home-services-carousel .et_pb_group_carousel_arrow:focus-visible .et-pb-icon {
  outline: 2px solid var(--dark-red);
  outline-offset: 2px;
}

/* ── Home – Services arrows: centred on the card edges (Figma mobile: disc centre = card edge ±0.5px) ──
   The carousel box runs 0.75rem past the outer cards (its -0.75rem side margins
   cancel the card gutters), and Divi centres each arrow on the carousel box edge.
   Move them in by the gutter; Divi's own translate keeps each disc half outside.
   Same approach as the About carousels (css/about.css). */
.home-services-carousel .et_pb_group_carousel_arrow_prev {
  left: 0.75rem !important;
}

.home-services-carousel .et_pb_group_carousel_arrow_next {
  right: 0.75rem !important;
  left: auto !important;
}

/* ── Home – Services 981–1439: 2×2 grid instead of 4 narrow cards ──
   The Group Carousel shows all 4 cards from 981 up (builder: 4 slides, arrows off;
   ≤980 stays a 2/1-up carousel). Divi has no "rows" setting, so in this range the
   track wraps into two rows of two. Below 1440 the 4-across cards drop under
   ~270px and grow taller than the desktop design; ≥1440 they wrap like Figma.
   Clones (loop copies) are hidden and the track's slide offset is cancelled.
   Row gap 1.5rem = the 2 × 0.75rem card gutters, so both gaps match. */
@media (min-width: 981px) and (max-width: 1439px) {
  .et_pb_group_carousel.home-services-carousel .et_pb_group_carousel_track {
    flex-wrap: wrap;
    row-gap: 1.5rem;
    transform: none !important;
  }

  .et_pb_group_carousel.home-services-carousel .et_pb_group_carousel_track > .et_pb_group_carousel_clone {
    display: none;
  }

  .et_pb_group_carousel.home-services-carousel .et_pb_group_carousel_track > .et_pb_group_carousel_slide {
    flex: 0 0 50%;
    max-width: 50%;
  }
}

/* This file holds the CSS for BOTH service-card carousels:
   • Home – Services        → .home-services-carousel  (above)
   • Services – Signature   → .rws-signature-carousel  (below)
   Loaded on the front page and the Services page (functions.php). */

/* Builder notes for the Home carousel (kept here, not in admin labels):
   • Gutters: the Group Carousel has no gap setting, so each "Service Card" group
     has 0.75rem left/right margins and the carousel has -0.75rem side margins to
     keep the outer cards flush with the row.
   • Widescreen card side padding is clamp(1rem, 5.36vw - 52.6px, 2.5rem)
     (16px at 1280 → 40px at 1728) so 4 across never breaks a word. */


/* ── Signature treatment cards carousel (Services – Signature Aesthetic Treatments) ──
   Hook: .rws-signature-carousel (custom attribute on the Group Carousel).
   Arrows sit BELOW the track, left-aligned with the first card (Figma "Frame 259":
   2rem under the cards, 1.5rem between buttons), as outlined square buttons.
   Swipe is native to the Group Carousel (touchstart/touchend) — no JS here. */
.rws-signature-carousel {
  padding-bottom: 5.4375rem;                      /* room for the 3.4375rem buttons + 2rem gap */
}

.rws-signature-carousel .et_pb_group_carousel_arrow {
  top: auto !important;
  bottom: 0 !important;
  right: auto !important;
  transform: none !important;
  margin: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 6.25rem;                                 /* 100 × 55, Figma */
  height: 3.4375rem;
  border: 1px solid var(--main-red);
  border-radius: 0.5rem;
  background-color: transparent;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

/* 0.75rem = the card gutter, so the prev button lines up with the first card's edge */
.rws-signature-carousel .et_pb_group_carousel_arrow_prev { left: 0.75rem !important; }
.rws-signature-carousel .et_pb_group_carousel_arrow_next { left: calc(0.75rem + 6.25rem + 1.5rem) !important; }

.rws-signature-carousel .et_pb_group_carousel_arrow:hover,
.rws-signature-carousel .et_pb_group_carousel_arrow:focus-visible {
  background-color: var(--main-red);
}
.rws-signature-carousel .et_pb_group_carousel_arrow:hover .et-pb-icon,
.rws-signature-carousel .et_pb_group_carousel_arrow:focus-visible .et-pb-icon {
  color: var(--light-cream) !important;
}
.rws-signature-carousel .et_pb_group_carousel_arrow:focus-visible {
  outline: 2px solid var(--dark-red);
  outline-offset: 2px;
}

/* Equal-height cards — the slide already stretches every card to the tallest;
   let the copy panel fill the card so the grey panels line up. */
.rws-signature-carousel .et_pb_group_carousel_slide > .et_pb_group > .et_pb_group {
  flex-grow: 1;
}

@media (max-width: 980px) {
  .rws-signature-carousel { padding-bottom: 3.75rem; }   /* 2.25rem buttons + 1.5rem gap */
  .rws-signature-carousel .et_pb_group_carousel_arrow {
    width: 4.1875rem;                             /* 67 × 36, mobile frame */
    height: 2.25rem;
  }
  .rws-signature-carousel .et_pb_group_carousel_arrow .et-pb-icon { font-size: 20px !important; }
  .rws-signature-carousel .et_pb_group_carousel_arrow_next { left: calc(0.75rem + 4.1875rem + 1rem) !important; }
}