/* ══ Services Carousel ═══════════════════════════════════════════════════
   The "Things That Make Us Special" cards. Content comes from WP Admin →
   Services; markup from [services_carousel] in inc/services-carousel.php.
   A CSS scroll-snap track, driven by the [carousel_nav] controls in the row
   above through the adapter in js/carousel-nav.js.
   Two cards up from 981px, one below — set under SLIDES-PER-VIEW.
   ════════════════════════════════════════════════════════════════════════ */

.svc-carousel {
  --svc-gap    : 1.5rem;
  --svc-radius : 2.5rem;
  --svc-pad-x  : 10%;
  --svc-pad-y  : 3rem;
}

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

/* Every list reset here is scoped through an ancestor: Divi's
   `.et-l--body ul` (0-1-1) otherwise adds phantom padding to the track. */
.svc-carousel .svc-carousel__track {
  display          : flex;
  gap              : var(--svc-gap);
  margin           : 0;
  padding          : 0;
  list-style       : none;
  line-height      : normal;   /* Divi's ul rule also forces 26px */

  overflow-x       : auto;
  overscroll-behavior-x : contain;   /* a swipe past the end must not navigate back */
  scroll-snap-type : x mandatory;
  scroll-behavior  : smooth;

  /* Hide the scrollbar without losing the ability to scroll. */
  scrollbar-width  : none;           /* Firefox */
}

.svc-carousel .svc-carousel__track::-webkit-scrollbar { display: none; }

/* The track is focusable for keyboard scrolling — keep the focus ring. */
.svc-carousel .svc-carousel__track:focus-visible {
  outline        : 3px solid var(--darker-red);
  outline-offset : 4px;
  border-radius  : var(--svc-radius);
}

@media (prefers-reduced-motion: reduce) {
  .svc-carousel .svc-carousel__track { scroll-behavior: auto; }
}

/* ── SLIDES-PER-VIEW ────────────────────────────────────────────────────── */

.svc-card {
  /* two up, sharing one gap */
  flex             : 0 0 calc( (100% - var(--svc-gap)) / 2 );
  scroll-snap-align: start;
}

@media (max-width: 980px) {
  .svc-card { flex-basis: 100%; }   /* one up */
}

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

.svc-card {
  position      : relative;
  display       : flex;
  min-height    : 500px;
  /* Block padding only. The inline 10% lives on __inner — see the note there. */
  padding       : var(--svc-pad-y) 0;
  border-radius : var(--svc-radius);
  overflow      : hidden;   /* a border-radius alone won't clip a background image */

  /* Scrim and photo share one background shorthand, so they always
     travel together. */
  background-image    : linear-gradient( 180deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.3) 100% ),
                        var(--svc-img-desktop, none);
  background-size     : cover;
  background-position : center;
  background-repeat   : no-repeat;
}

@media (max-width: 980px) {
  .svc-card {
    min-height       : 400px;
    background-image : linear-gradient( 180deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.3) 100% ),
                       var(--svc-img-mobile, var(--svc-img-desktop, none));
  }
}

/* ── Tablet 768–980px — desktop crop, taller card ─────────────────────────
   The phone photos are portrait (0.75); in a landscape tablet card `cover`
   cut ~58% off them. The desktop crop (~1.66) matches the card far better. */

@media (min-width: 768px) and (max-width: 980px) {
  .svc-card {
    min-height       : 450px;
    background-image : linear-gradient( 180deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.3) 100% ),
                       var(--svc-img-desktop, none);
  }
}

/* ── Large phones 600–767px — desktop crop, landscape card ────────────────
   Below 600 the card stays squarish and the phone photo (0.75) fits. Above
   it the card turns landscape while the photo stays portrait — `cover` was
   cutting 43–57%. The desktop crop and a 1.5 card match far better. */

@media (min-width: 600px) and (max-width: 767px) {
  .svc-card {
    aspect-ratio     : 1.5;
    min-height       : 0;
    background-image : linear-gradient( 180deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.3) 100% ),
                       var(--svc-img-desktop, none);
  }
}

@media (max-width: 767px) {
  .svc-card { min-height: 350px; }
}

/* Keeps the copy above `.card-hover-fill`'s absolutely positioned
   hover overlay. */
.svc-card__inner {
  position       : relative;
  display        : flex;
  flex-direction : column;
  gap            : 1.25rem;
  width          : 100%;

  /* The inline padding sits here, not on the card — a percentage padding
     on a flex ITEM resolves against the flex CONTAINER's width. */
  padding-inline : var(--svc-pad-x);

  /* Bottom-aligned inside the padding box. */
  align-self     : flex-end;
}

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

.svc-card__heading,
.svc-card__body {
  color  : var(--gcid-pawspital-white);
  margin : 0;
}

.svc-card__body > :first-child { margin-top: 0; }
.svc-card__body > :last-child  { margin-bottom: 0; }

.svc-card .svc-card__body ul {
  margin       : 0;
  padding      : 0 0 0 1.25rem;   /* the 0 bottom overrides Divi's 23px */
  list-style   : disc;
}

.svc-card .svc-card__body li + li { margin-top: 0.5rem; }

/* Underlined on purpose — these sit on a photo, where colour alone is
   not a reliable affordance. */
.svc-card__heading a,
.svc-card__body a {
  color                      : inherit;
  text-decoration            : underline;
  text-underline-offset      : 0.15em;
  text-decoration-thickness  : from-font;
}

.svc-card__heading a:hover,
.svc-card__body a:hover,
.svc-card__heading a:focus-visible,
.svc-card__body a:focus-visible {
  text-decoration-thickness : 2px;
}