/* ── Services Carousel — [services_carousel] + the .svc-nav arrows ──
   Two slides visible on desktop, one at 980px and below. Spacing is the
   Figma's, snapped to the 0.25rem grid:
     card 720x587 r40 1px #949494 · slide gap 24 · image 720x339 (320x214
     phone) · pill inset 17/19 pad 28/20 · list inset 59 / 41 top / 55 bottom
     · column gap 24 · row pitch 64 (divider 44 below the text)
   No outer margin anywhere — the hosting row owns all outside spacing. */

.svc-carousel { width: 100%; margin: 0; }

/* Clips the clone blocks sitting either side of the real cards. `clip` rather
   than `hidden` so this never becomes a scroll container — the track is moved
   by transform, the same way Divi's own group carousel works. */
.svc-carousel__viewport {
  position   : relative;
  overflow-x : hidden;   /* fallback */
  overflow-x : clip;
}

.svc-carousel__track {
  display     : flex;
  flex-wrap   : nowrap;
  gap         : 1.5rem;
  margin      : 0;
  padding     : 0;
  list-style  : none;
  transition  : transform 0.2s ease-in-out;
  will-change : transform;
}
/* The equivalent of Divi's .et_pb_group_carousel_no_transitions — used for the
   invisible re-point after the index leaves the real block. */
.svc-carousel__track.is-instant { transition: none !important; }

@media (prefers-reduced-motion: reduce) {
  .svc-carousel__track { transition: none; }
}

/* ── Card ── */
.svc-card {
  flex              : 0 0 calc((100% - 1.5rem) / 2);
  display           : flex;
  flex-direction    : column;
  margin            : 0;
  border            : 1px solid var(--medium-grey);
  border-radius     : 2.5rem;
  box-sizing        : border-box;
}

/* ── Media + the overlaid title pill ── */
.svc-card__media {
  position      : relative;
  border        : 1px solid var(--medium-grey);
  border-radius : 2.5rem;
  overflow      : hidden;          /* clips the photo to the radius */
}
.svc-card__media picture { display: block; }
.svc-card__media img {
  display      : block;
  width        : 100%;
  aspect-ratio : 720 / 339;        /* desktop Figma crop */
  object-fit   : cover;
}

.svc-card__title {
  position      : absolute;
  top           : 1.25rem;
  left          : 1rem;
  /* Let the pill run as wide as its longest line instead of shrink-to-fitting
     and wrapping early; the max-width keeps it inside the card. */
  width         : max-content;
  max-width     : calc(100% - 2rem);
  margin        : 0;
  padding       : 1.25rem 1.75rem;
  background    : var(--white);
  border        : 1px solid var(--medium-grey);
  border-radius : 2.5rem;
  color         : var(--black);
}
/* WYSIWYG content arrives wrapped in <p>; .subheading-md's child rules carry
   size/family/weight, so only the editor's own spacing is stripped here. */
.svc-card__title > :first-child { margin-top: 0; padding-top: 0; }
.svc-card__title > :last-child  { margin-bottom: 0; padding-bottom: 0; }

/* ── Item grid — column-major so one source list drives both layouts ── */
.svc-card__list {
  display            : grid;
  grid-template-rows : repeat(var(--svc-rows, 3), auto);
  grid-auto-flow     : column;
  grid-auto-columns  : 1fr;
  column-gap         : 1.5rem;
  row-gap            : 1.25rem;
  margin             : 0;
  /* !important is load-bearing, not sloppiness. Divi ships
     `#left-area ul, .entry-content ul, .et-l--body ul { list-style-type: disc;
     padding: 0 0 23px 1em; line-height: 26px }` at (0,1,1), which outranks this
     class and would otherwise restore the bullets AND replace this padding
     outright. `.et_pb_text ul{padding-bottom:1em}` piles on. */
  padding            : 2.5rem 10% !important;
  list-style         : none !important;
}
.svc-card__list > li { list-style: none !important; }
.svc-card__item {
  margin        : 0;
  padding       : 0 0 1.25rem;
  border-bottom : 1px solid var(--medium-grey);
  color         : var(--black);
}
.svc-card__item.is-col-end { border-bottom: 0; padding-bottom: 0; }

/* ── Links inside a card ───────────────────────────────────────────
   Sub-service links are authored as anchors in the Items / Title WYSIWYG
   (WP Admin → Services). Divi's base `a` is its own blue with no underline,
   so both are restated. The hover colour is on the anchor alone, so the rest
   of the row's text stays black. */
.svc-card__item a,
.svc-card__title a {
  color           : var(--black);
  text-decoration : underline;
}

.svc-card__item a:hover,
.svc-card__item a:focus-visible,
.svc-card__title a:hover,
.svc-card__title a:focus-visible { color: var(--darker-teal); }

/* ── ≤980px — one slide, centred pill, divider rows ────────────────
   The phone frame governs the whole tablet+phone band.

   WHY THE ITEMS ARE NOT BOXED HERE. The Figma draws each row in a box, and
   this file used to as well — but the card then ran taller than a phone
   screen and pushed the prev/next arrows below the fold, which is the one
   thing a carousel cannot afford. Measured on the tallest card (6 items) at
   375x667 with the fixed header taking 156px: the card + its 30px gap + the
   arrows needed 701px against 511px of usable height. Short by 190px.

   The box was the single biggest cause and the cheapest to give up: it costs
   52px (the 40px of row-gap it forces between boxes, plus 12px of doubled
   1px borders) and buys no legibility that a divider does not. The rest of
   the budget comes from the crop, the inset and the row padding — the TEXT
   SIZE is deliberately untouched at .body-lg 18px, which is exactly what the
   Figma specifies, because dropping to 16px saves only ~14px and .body-sm is
   a different typeface (Pacaembu, tracked) rather than a smaller size.

   Result: 495px against 511px at 375x667, and 502px against 688px at
   390x844. Every number below was measured, not estimated; changing any one
   of them eats the 16px of headroom the 375px case has left. */
@media (max-width: 980px) {

  .svc-card { flex: 0 0 100%; }

  /* Shallower than the Figma's 320/214 phone crop — 34px back at 375px. */
  .svc-card__media img {
    aspect-ratio : 320 / 180;
    /* A cap, not a second aspect-ratio. The band runs to 980px, where the
       card is ~780px wide and the ratio alone renders a 441px-tall image —
       56% of the card, and 110px more than that viewport can hold. The cap
       only engages above ~540px of viewport, so phones are untouched by it,
       and unlike a tablet-only ratio it introduces no jump at the 767/768
       boundary. object-fit: cover above means it crops rather than squashes. */
    max-height   : 15rem;
  }

  .svc-card__title {
    left      : 50%;
    transform : translateX(-50%);
    padding   : 0.75rem 1rem;
  }

  .svc-card__list {
    grid-template-rows    : none;
    grid-template-columns : 1fr;
    grid-auto-flow        : row;
    column-gap            : 0;
    /* Zero, not 0.5rem: the rows are separated by a rule now, and a gap on
       top of a rule reads as two separators. Worth 40px. */
    row-gap               : 0;
    padding               : 2rem !important;
  }

  /* Divider rows. Drawn as a pseudo-element rather than the item's own
     border, because the rule is inset to 80% and centred — a border can only
     ever run the full width of the box. Adjacent rows still never double it
     up the way six individually-bordered boxes did. */
  .svc-card__item,
  .svc-card__item.is-col-end {
    position      : relative;
    padding       : 0.375rem 0.75rem;
    border        : 0;
    border-radius : 0;
    text-align    : center;
  }

  .svc-card__item::after {
    content    : '';
    position   : absolute;
    left       : 50%;
    bottom     : 0;
    transform  : translateX(-50%);
    width      : 80%;
    height     : 1px;
    background : var(--medium-grey);
  }

  /* No trailing rule against the list's own bottom inset. */
  .svc-card__item:last-child::after { display: none; }
}

/* ── ≤767px — the phone inset ──
   1.25rem rather than 2rem, and the 12px it gives back per side matters
   twice: it is 24px of height, and it widens the row enough that "Dental
   Exams & Cleanings" stops wrapping to a second line at 375px, which is
   another 21.6px. The text stays 18px throughout. */
@media (max-width: 767px) {
  .svc-card__list { padding: 1.25rem !important; }
}

/* ── Prev / next arrows ────────────────────────────────────────────
   These live in their own code modules, so they are styled here rather
   than in buttons.css — a carousel control has no destination and is not
   part of the .btn-* link system.

   Hidden until the script stamps `svc-ready` on <html>: without JS the
   track is still swipeable/scrollable, so dead buttons are worse than
   none. The desktop/phone split mirrors each module's own disabledOn. */
.svc-nav { display: none; }

html.svc-ready .svc-nav--top    { display: flex; justify-content: flex-end; }
html.svc-ready .svc-nav--bottom { display: none; }

@media (max-width: 980px) {
  html.svc-ready .svc-nav--top    { display: none; }
  html.svc-ready .svc-nav--bottom { display: flex; justify-content: center; }
}

.svc-nav { gap: 1.5rem; align-items: center; }

/* The button itself is no longer styled here. It moved to
   css/global/carousel-nav.css as `.eos-cnav__btn` when the About Us
   insurance carousel needed the same control: transparent ring in
   --darkest-teal that fills and inverts on hover.

   Only the size differs, so only the size is restated — this file keeps the
   3.625rem it always used, while the shared default is the Figma's 2.5rem.
   Done as a container override rather than a modifier class because these
   buttons live in Divi code modules, and a `--` in block-attribute JSON
   terminates the HTML comment the block is written in.

   `.svc-nav` above still owns the container: its show/hide is specific to
   this module (gated on the `svc-ready` stamp) and its layout differs from
   the shared nav, which centres arrows around a dot group.

   The `data-svc-nav` hooks on those buttons are unchanged, so
   js/services-carousel.js still drives this carousel; only styling is
   shared. Do not re-add button rules here. */
.svc-nav .eos-cnav__btn { --cnav-btn: 3.625rem; }

/* Smaller on the tablet+phone band, where the arrows sit BELOW the card and
   every pixel is competing with it — 10px back, and 48px is still a
   comfortable touch target.

   This block must stay AFTER the rule above. Both selectors are (0,2,0), so
   a tie is decided by order, and putting it in the @media block further up
   this file leaves the button at 58px — confirmed against the live sheet. */
@media (max-width: 980px) {
  .svc-nav .eos-cnav__btn { --cnav-btn: 3rem; }
}

/* ── Editor-only empty state ── */
.svc-carousel__empty {
  padding       : 1rem 1.25rem;
  border        : 1px dashed var(--medium-grey);
  border-radius : 0.5rem;
  color         : var(--black);
}