/* ══ Services Carousel ═══════════════════════════════════════════════════
   The Services page cards. Content: WP Admin → Services. Markup:
   [services_carousel] + [services_carousel_nav] in inc/services-carousel.php.
   A CSS scroll-snap track that js/services-carousel.js loops in both
   directions; the arrows drive the carousel in their own Divi section.
   Desktop: 348px cards from the row's left edge, running off the right edge
   of the screen; the photo fades in on hover. ≤980px: one card at a time with
   its photo always showing, no hover.
   ════════════════════════════════════════════════════════════════════════ */

.svc-carousel {
  --svc-gap        : 1.5rem;
  --svc-card-w     : 21.75rem;   /* 348px */
  --svc-card-h     : 24.625rem;  /* 394px */
  --svc-radius     : 1.75rem;    /* 28px  */
  --svc-pad        : 2rem;
}

/* ── Desktop bleed — track runs from the row's left edge to the screen edge ──
   100vw counts the scrollbar, so the section clips the overshoot (clip, not
   hidden — hidden would turn the section into a scroll container). */
@media (min-width: 981px) {
  .svc-carousel { margin-right: calc(50% - 50vw); }
}
.et_pb_section:has(.svc-carousel) { overflow-x: clip; }

/* ── Track ──────────────────────────────────────────────────────────────── */

/* List resets are scoped through an ancestor — Divi's `.et-l--body ul`
   (0,1,1) otherwise adds its own padding and line-height. */
.svc-carousel .svc-carousel__track {
  display               : flex;
  gap                   : var(--svc-gap);
  margin                : 0;
  padding               : 0;
  list-style            : none;
  line-height           : normal;
  overflow-x            : auto;
  overscroll-behavior-x : contain;   /* a swipe past the end must not navigate back */
  scroll-snap-type      : x mandatory;
  scroll-behavior       : smooth;
  scrollbar-width       : none;
}
.svc-carousel .svc-carousel__track::-webkit-scrollbar { display: none; }

.svc-carousel .svc-carousel__track:focus-visible {
  outline        : 2px solid var(--off-white);
  outline-offset : 4px;
  border-radius  : var(--svc-radius);
}

/* ── Card ───────────────────────────────────────────────────────────────── */

.svc-carousel .svc-card {
  position          : relative;
  isolation         : isolate;   /* keeps the photo layer above the card fill, below the copy */
  display           : flex;
  flex              : 0 0 var(--svc-card-w);
  min-height        : var(--svc-card-h);
  margin            : 0;
  padding           : 0;
  scroll-snap-align : start;
  border            : 2px solid var(--off-white);
  border-radius     : var(--svc-radius);
  background-color  : var(--dark-blue);
  overflow          : hidden;
}

/* Photo layer — the image exactly as uploaded; the darkening filter is baked
   into the image files, so nothing is applied here. */
.svc-card__media {
  position   : absolute;
  inset      : 0;
  z-index    : -1;
  opacity    : 0;
  transition : opacity 0.45s ease;
}
.svc-carousel .svc-card__img {
  display    : block;
  width      : 100%;
  height     : 100%;
  max-width  : none;
  object-fit : cover;
  transform  : scale(1.06);
  transition : transform 0.8s ease;
}

/* Hover — desktop pointers only, so a tap never sticks it on. */
@media (min-width: 981px) and (hover: hover) {
  .svc-card:hover .svc-card__media,
  .svc-card:focus-within .svc-card__media { opacity: 1; }
  .svc-card:hover .svc-card__img,
  .svc-card:focus-within .svc-card__img   { transform: scale(1); }
}

/* Copy — title pinned to the top, bulleted body to the bottom. */
.svc-card__inner {
  display         : flex;
  flex-direction  : column;
  justify-content : space-between;
  gap             : 1.5rem;
  width           : 100%;
  padding         : var(--svc-pad);
}

/* Title pill — the class carries the type (body-sm); this adds the pill. */
.svc-carousel .svc-card__title {
  align-self       : flex-start;
  margin           : 0;
  padding          : 0.75rem 1.25rem;
  border-radius    : 999px;
  background-color : color-mix(in srgb, var(--off-white) 80%, transparent);
  color            : var(--dark-blue);
}

.svc-carousel .svc-card__body { color: var(--off-white); }
.svc-carousel .svc-card__body > :first-child { margin-top: 0; }
.svc-carousel .svc-card__body > :last-child  { margin-bottom: 0; padding-bottom: 0; }
.svc-carousel .svc-card__body ul {
  margin     : 0;
  padding    : 0 0 0 1.25rem;
  list-style : disc;
}
.svc-carousel .svc-card__body li { margin: 0; }

/* Links match the text and are underlined. */
.svc-carousel .svc-card__body a {
  color                 : inherit;
  text-decoration       : underline;
  text-underline-offset : 0.15em;
}

/* ── ≤980px — one card at a time, photo always on, no hover ─────────────── */

@media (max-width: 980px) {
  .svc-carousel {
    --svc-pad    : 1.5rem;
    max-width    : 22.5rem;   /* keeps the portrait card shape on tablets */
    margin-inline: auto;
  }
  .svc-carousel .svc-card { flex-basis: 100%; }
  .svc-card__media { opacity: 1; transition: none; }
  .svc-carousel .svc-card__img { transform: none; transition: none; }
}

/* ══ Arrows — [services_carousel_nav] ═════════════════════════════════════
   One right-pointing icon; previous mirrors it. Hover fills the ring and nudges
   the arrow; a click sends the arrow out and back (.is-poking, set by the JS).
   ════════════════════════════════════════════════════════════════════════ */

.svc-nav {
  display         : flex;
  justify-content : space-between;   /* desktop: one arrow at each end of the row */
  align-items     : center;
}

.svc-nav__btn {
  --svc-nav-size : 6.0625rem;   /* 97px — the 93px ring plus its 4px stroke */
  box-sizing     : border-box;
  display        : block;
  width          : var(--svc-nav-size);
  height         : var(--svc-nav-size);
  padding        : 0;
  border         : 0;
  border-radius  : 50%;
  background     : none;
  box-shadow     : none;
  appearance     : none;
  color          : var(--off-white);
  cursor         : pointer;
  transition     : transform 0.2s ease;
}

.svc-nav__icon {
  display  : block;
  width    : 100%;
  height   : 100%;
  overflow : visible;   /* the stroke stays 4px at the mobile size and would clip */
}
.svc-nav__btn--prev .svc-nav__icon { transform: scaleX(-1); }

.svc-nav__icon path {
  fill            : none;
  stroke          : currentColor;
  stroke-width    : 4;
  stroke-linecap  : round;
  stroke-linejoin : round;
  vector-effect   : non-scaling-stroke;
}
.svc-nav__icon .svc-nav__ring  { fill: transparent; transition: fill 0.25s ease; }
.svc-nav__icon .svc-nav__arrow {
  transform-box    : fill-box;
  transform-origin : center;
  transition       : transform 0.25s ease, stroke 0.25s ease;
}

@media (hover: hover) {
  .svc-nav__btn:hover .svc-nav__ring  { fill: var(--off-white); }
  .svc-nav__btn:hover .svc-nav__arrow { stroke: var(--dark-blue); transform: translateX(15%); }
}
.svc-nav__btn:focus-visible { outline: 2px solid var(--off-white); outline-offset: 4px; }
.svc-nav__btn:active { transform: scale(0.94); }

.svc-nav__btn.is-poking .svc-nav__arrow { animation: svc-nav-poke 0.45s ease; }
@keyframes svc-nav-poke {
  0%   { transform: translateX(0);    opacity: 1; }
  45%  { transform: translateX(60%);  opacity: 0; }
  46%  { transform: translateX(-60%); opacity: 0; }
  100% { transform: translateX(0);    opacity: 1; }
}

@media (max-width: 980px) {
  .svc-nav { justify-content: center; gap: 2rem; }
  .svc-nav__btn { --svc-nav-size: 3.3125rem; }   /* 53px — the 51px ring plus stroke */
}

@media (prefers-reduced-motion: reduce) {
  .svc-carousel .svc-carousel__track { scroll-behavior: auto; }
  .svc-card__media,
  .svc-carousel .svc-card__img,
  .svc-nav__btn,
  .svc-nav__icon .svc-nav__arrow { transition: none; }
  .svc-nav__btn.is-poking .svc-nav__arrow { animation: none; }
}