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

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

.services-tabs {
  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(--navy);
}

/* ── 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(--beige);
  color: var(--dark-navy);
  font-family: var(--font-pacaembu);
  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(--bronze);
  color: #fff;
}

/* ── Divider ────────────────────────────────────────────────── */
.services-tabs__divider {
  border: 0;
  border-top: 1px solid var(--navy);
  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(--navy);
  margin: 0;
}
.services-tabs__learn-more {
  color: var(--navy);
  font-family: var(--font-pacaembu);
  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(--bronze);
  outline-offset: 3px;
  border-radius: 2px;
}
.services-tabs__panel-desc {
  color: var(--navy);
  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(--dark-navy);
  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 */
}

/* linked name — hover/focus on the pill only */
a.services-tabs__card-name {
  text-decoration: none;
}
a.services-tabs__card-name:focus-visible {
  outline: 2px solid var(--bronze);
  outline-offset: 3px;
  border-radius: 9999px;
}

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

/* pill border — only on linked cards */
.services-tabs__card--linked .services-tabs__card-name {
  display: inline-block;
  max-width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 9999px;
  padding: 0.4rem 1.1rem;
  overflow-wrap: break-word;
  word-break: break-word;
  transition: border-color 0.2s ease;
}
a.services-tabs__card-name:hover,
a.services-tabs__card-name:focus-visible {
  border-color: rgba(255, 255, 255, 0.9);
}

/* ── Prices ─────────────────────────────────────────────────── */
.services-tabs__card-prices {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-top: auto; /* push pricing to the bottom of the card */
}
.services-tabs__card-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  column-gap: 1.25rem;
  row-gap: 0.2rem;
}
.services-tabs__price-label {
  font-family: var(--font-pacaembu);
  font-size: 20px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #fff;
  flex-shrink: 0;
}
.services-tabs__price-value {
  color: #fff;
  font-size: 24px;
}
.services-tabs__price-currency {
  font-size: inherit;
}

/* ── 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(--navy);
  font-family: var(--font-pacaembu);
  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(--bronze);
  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(--bronze);
  color: #fff;
  font-family: var(--font-pacaembu);
  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(--navy);
  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;
  }
  .services-tabs__price-label {
    font-size: 1rem;
  }
  .services-tabs__price-value {
    font-size: 18px;
  }
}