/* ──────────────────────────────────────────────────────────────
   Services Tabs Module — [services_tabs] shortcode
   ──────────────────────────────────────────────────────────────

   PORTABILITY: every brand color + UI font is mapped ONCE in the
   `.services-tabs` block below via --st-* tokens. That mapping block
   is the ONLY per-site edit. The divi-import skill (§C) fills the
   {{...}} placeholders from the target site's :root tokens. Everything
   below the mapping uses --st-* and the EOS baseline type tokens
   (--text-sub-*) + utility classes (subheading-*, body-*) only.
   ────────────────────────────────────────────────────────────── */

.services-tabs,
.services-tabs *,
.services-tabs *::before,
.services-tabs *::after {
  box-sizing: border-box;
}

.services-tabs {
  /* ── Brand token mapping — the ONLY per-site edit ───────────────
     Map each role to the target site's :root tokens (see README).
     Placeholders are substituted on import. */
  --st-ink:     var(--light-brown);      /* primary ink: headings, labels, dividers   */
  --st-surface: var(--dark-brown);  /* deep card surface + inactive tab text      */
  --st-soft:    var(--mauve);     /* soft neutral: inactive tab background       */
  --st-accent:  var(--tan);   /* accent / CTA / active states                */
  --st-font-ui: var(--font-sequoia);        /* label / UI font (tabs, buttons) */

  width: 100%;
}

/* ── Header — label + tabs ──────────────────────────────────── */
.services-tabs__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2rem;
  margin-bottom: 2rem;
}
.services-tabs__label {
  margin-right: auto;
  color: var(--st-ink);
}

/* ── Tab buttons ────────────────────────────────────────────── */
.services-tabs__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.services-tabs__tab {
  padding: 0.625rem 1.75rem;
  border: 0;
  border-radius: 9999px;
  background: var(--st-soft);
  color: var(--st-surface);
  font-family: var(--st-font-ui);
  font-size: var(--text-sub-md);
  font-weight: 300;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  line-height: normal;
  cursor: pointer;
  transition:
    background-color 0.25s ease,
    color 0.25s ease;
}
@media (max-width: 425px) {
  .services-tabs__tab {
    letter-spacing: 3px;
  }
}
@media (max-width: 375px) {
  .services-tabs__tab {
    letter-spacing: 1.5px;
    padding: 0.625rem 1.15rem;
  }
}
.services-tabs__tab[aria-selected="true"] {
  background: var(--st-accent);
  color: #fff;
}

/* ── Divider ────────────────────────────────────────────────── */
.services-tabs__divider {
  border: 0;
  border-top: 1px solid var(--st-ink);
  margin: 0 0 2.5rem;
}

/* ── Panel ──────────────────────────────────────────────────── */
.services-tabs__panel[hidden] {
  display: none;
}

/* ── Panel meta (title · learn-more · description) ─────────── */
.services-tabs__panel-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
  margin-bottom: 2rem;
}
.services-tabs__panel-title {
  color: var(--st-ink);
  margin: 0;
}
.services-tabs__learn-more {
  color: var(--st-ink);
  font-family: var(--st-font-ui);
  font-size: var(--text-sub-sm, 0.6875rem);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 0.25em;
  text-decoration-thickness: 1px;
}
.services-tabs__learn-more:hover,
.services-tabs__learn-more:focus-visible {
  text-decoration-thickness: 2px;
}
.services-tabs__learn-more:focus-visible {
  outline: 2px solid var(--st-accent);
  outline-offset: 3px;
  border-radius: 2px;
}
.services-tabs__panel-desc {
  color: var(--st-ink);
  margin: 0.25rem 0 0;
}

/* ── Card grid — wraps naturally from 4 → 3 → 2 → 1 ─────────── */
.services-tabs__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  align-items: stretch;
  gap: 1.25rem;
  margin-bottom: 2rem;
}

/* hide overflow cards until JS reveals them */
.services-tabs__card[hidden] {
  display: none;
}

/* ── Individual card ────────────────────────────────────────── */
.services-tabs__card {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 1.5rem;
  background: var(--st-surface);
  border-radius: 0.875rem;
  color: #fff;
  text-decoration: none;
  min-height: 225px;
  min-width: 0; /* prevent grid blowout */
  overflow: hidden; /* clip any text that reaches the edge */
}

/* ── Card name ──────────────────────────────────────────────── */
.services-tabs__card-name {
  display: block;
  color: #fff;
  line-height: 1.3;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* ── SEE MORE toggle ────────────────────────────────────────── */
.services-tabs__see-more-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 2.5rem;
}
.services-tabs__see-more {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--st-ink);
  font-family: var(--st-font-ui);
  font-size: var(--text-sub-md);
  font-weight: 300;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.services-tabs__see-more:hover,
.services-tabs__see-more:focus-visible {
  opacity: 0.7;
}
.services-tabs__see-more:focus-visible {
  outline: 2px solid var(--st-accent);
  outline-offset: 3px;
  border-radius: 2px;
}
.services-tabs__see-more-icon {
  display: inline-block;
  font-size: 1rem;
  transition: transform 0.25s ease;
}
.services-tabs__see-more[aria-expanded="true"] .services-tabs__see-more-icon {
  transform: rotate(180deg);
}

/* ── Back to Top ────────────────────────────────────────────── */
.services-tabs__back-top {
  display: block;
  margin: 0 auto;
  padding: 0.75rem 2.5rem;
  border: 0;
  border-radius: 9999px;
  background: var(--st-accent);
  color: #fff;
  font-family: var(--st-font-ui);
  font-size: var(--text-sub-md);
  font-weight: 300;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  line-height: normal;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.services-tabs__back-top:hover,
.services-tabs__back-top:focus-visible {
  opacity: 0.85;
}
.services-tabs__back-top:focus-visible {
  outline: 2px solid var(--st-ink);
  outline-offset: 3px;
}

/* ── Tablet ──────────────────────────────────────────────────── */
@media (max-width: 980px) {
  .services-tabs__panel-meta {
    margin-bottom: 1.5rem;
  }
}

/* ── Mobile ─────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .services-tabs__header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
  .services-tabs__label {
    margin-right: 0;
  }
  .services-tabs__panel-meta {
    gap: 1rem;
  }
  .services-tabs__grid {
    grid-template-columns: 1fr;
  }
  .services-tabs__card {
    padding: 1.5rem;
    min-height: 175px;
  }
}

/* ── A Bar S — pill tab track + photo cards (Services page Figma) ──
   Tabs sit on one mauve track; the active tab is a tan pill on top.
   Cards with a Card Photo (.services-tabs__card--photo) drop the dark
   tile for photo + script title + bullet list. The "Explore Our
   Services" heading is a Divi Text module above the shortcode, so the
   label, divider, panel title and Back to Top are hidden here. ── */
.services-tabs__label:empty,
.services-tabs__divider,
.services-tabs__panel-meta,
.services-tabs__back-top { display: none; }

.services-tabs__header { margin-bottom: 3rem; }

.services-tabs__tabs {
  display: inline-flex;
  flex-wrap: nowrap;
  gap: 0;
  max-width: 100%;
  background: var(--st-soft);
  border-radius: 2.5rem;
}
.services-tabs__tab {
  flex: 0 1 auto;
  padding: 1rem 2rem;
  border-radius: 2.5rem;
  background: transparent;
  color: var(--st-surface);
  font-size: clamp(1.25rem, 0.904rem + 1.478vw, 2.5rem);  /* 20px → 40px */
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  text-align: left;
  line-height: 1.1;
}
.services-tabs__tab[aria-selected="true"] {
  background: var(--st-accent);
  color: var(--st-surface);
}
.services-tabs__tab:focus-visible {
  outline: 2px solid var(--st-surface);
  outline-offset: 3px;
}

/* max 4 columns: a track can't be narrower than a quarter of the row (minus 3 gaps),
   so wide screens fill the row with 4 cards instead of leaving a 5th empty slot */
.services-tabs__grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, max(17rem, (100% - 3 * 1.5rem) / 4)), 1fr));
  align-items: start;
  gap: 3rem 1.5rem;
  margin-bottom: 0;
}
.services-tabs__card--photo {
  gap: 0;
  padding: 0;
  min-height: 0;
  background: none;
  border-radius: 0;
  color: var(--st-ink);
  overflow: visible;
}
.services-tabs__card-media { display: block; margin-bottom: 2rem; }
.services-tabs__card-image {
  display: block;
  width: 100%;
  height: auto;  /* photos ship with the 5px mauve frame baked in */
}
.services-tabs__card--photo .services-tabs__card-name {
  color: var(--st-ink);
  font-family: var(--font-rattlesnake);
  font-size: var(--text-sm);
  letter-spacing: 0;
  word-spacing: 0.15em;
  text-transform: none;
  line-height: normal;
}
.services-tabs__card-list {
  margin: 1.5rem 0 0;
  padding: 0 0 0 1.5em;
  list-style: disc;
  color: var(--st-ink);
}
/* Figma line pitch 28px (375) → 36px (1728); gives underlined bullet links room.
   Scoped to outrank Divi's inline `.et-l--body ul { line-height: 26px }` */
.services-tabs .services-tabs__card-list { line-height: clamp(1.75rem, 1.6114rem + 0.5913vw, 2.25rem); }
.services-tabs__card-list li { margin: 0; padding: 0; }

/* ── Card links — a service with a Service Page gets a linked name (no
   border; centre-out underline on hover, same technique as text links in
   css/global/utilities.css) and a "Learn more about …" .btn-arrow--box under
   the list. Bullets with a page are always underlined. Selectors are scoped
   with .services-tabs so they outrank utilities.css's `.et_pb_text_inner a`
   (the shortcode sits in a Divi Text module). ── */
.services-tabs a.services-tabs__card-name {
  align-self: flex-start;
  color: var(--st-ink);
  text-decoration: none;
  padding-bottom: 0;
  background: none;
}
/* underline lives on the inline span so a wrapped name underlines per line.
   Rattlesnake's content box is ~1.5em tall with the baseline near 0.97em, so a
   bottom-anchored line lands on the next line's capitals; pin it just under
   the baseline instead (1.15em from the top of each line box). */
.services-tabs__card-name-text {
  background: linear-gradient(currentColor, currentColor) 50% 1.15em / 0 1px no-repeat;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-size 0.35s cubic-bezier(0.65, 0, 0.35, 1);
}
.services-tabs a.services-tabs__card-name:hover .services-tabs__card-name-text,
.services-tabs a.services-tabs__card-name:focus-visible .services-tabs__card-name-text { background-size: 100% 1px; }

.services-tabs .services-tabs__card-link {
  padding-bottom: 0;
  background: none;
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
.services-tabs .services-tabs__card-link:hover,
.services-tabs .services-tabs__card-link:focus-visible { text-decoration-thickness: 2px; }

.services-tabs .services-tabs__card-more {
  align-self: flex-start;
  margin-top: 2rem;
  padding: 0.5rem 1.5rem;
  background: none;
  white-space: normal; /* long service names wrap inside the card */
  transition: color 0.35s ease;
}

@media (prefers-reduced-motion: reduce) {
  .services-tabs__card-name-text { transition: none; }
}

@media (max-width: 767px) {
  .services-tabs__header { margin-bottom: 3rem; }
  .services-tabs__tab { padding: 0.5rem 1.5rem; line-height: 1; }
}