/* ARJO — Service Categories section.
   Values come from theme.json (--wp--preset--* / --wp--custom--*) only. */

.arjo-categories__layout {
  display: grid;
  gap: var(--wp--preset--spacing--70);
}

/* ---- Tab rail ---------------------------------------------------------- */
/* Small screens: a horizontal scroller that runs to the edge of the gutter. */
.arjo-tablist {
  display: flex;
  gap: var(--wp--preset--spacing--20);
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: var(--wp--preset--spacing--20);
  margin-right: calc(var(--wp--custom--layout-gutter) * -1);
  padding-right: var(--wp--custom--layout-gutter);
}
.arjo-tablist::-webkit-scrollbar { display: none; }

.arjo-tab {
  flex: none;
  margin: 0;
  padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
  background: none;
  border: var(--wp--custom--border-hairline) solid var(--wp--preset--color--line-strong);
  border-radius: 0;
  font-family: inherit;
  font-size: var(--wp--preset--font-size--small);
  line-height: var(--wp--custom--leading-snug);
  white-space: nowrap;
  color: var(--wp--preset--color--ink-secondary);
  cursor: pointer;
  transition:
    background-color var(--wp--custom--duration-base) var(--wp--custom--ease-standard),
    border-color var(--wp--custom--duration-base) var(--wp--custom--ease-standard),
    color var(--wp--custom--duration-base) var(--wp--custom--ease-standard);
}
.arjo-tab[aria-selected="true"] {
  background-color: var(--wp--preset--color--contrast);
  border-color: var(--wp--preset--color--contrast);
  color: var(--wp--preset--color--on-invert);
}

/* ---- Panels ------------------------------------------------------------ */
.arjo-tabpanel { display: none; }
.arjo-tabpanel.is-active {
  display: grid;
  gap: var(--wp--preset--spacing--60);
}
.arjo-tabpanel__body {
  display: grid;
  gap: var(--wp--preset--spacing--50);
  align-content: start;
}
.arjo-tabpanel__list {
  display: grid;
  gap: var(--wp--preset--spacing--30);
  margin: 0;
  padding: 0;
  list-style: none;
}
.arjo-tabpanel__list li {
  display: flex;
  gap: var(--wp--preset--spacing--40);
  margin: 0;
  padding-bottom: var(--wp--preset--spacing--30);
  border-bottom: var(--wp--custom--border-hairline) solid var(--wp--preset--color--line);
  color: var(--wp--preset--color--ink-secondary);
  font-size: var(--wp--preset--font-size--medium);
}
.arjo-tabpanel__list li::before {
  content: "";
  flex: none;
  width: var(--wp--preset--spacing--40);
  height: var(--wp--custom--border-hairline);
  margin-top: 0.8em;
  background-color: var(--wp--preset--color--accent);
}

/* ---- Desktop: the rail becomes a sticky vertical index ----------------- */
@media (min-width: 62rem) {
  .arjo-categories__layout {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--wp--custom--layout-gap);
    align-items: start;
  }
  .arjo-tablist {
    grid-column: 1 / span 3;
    flex-direction: column;
    gap: 0;
    overflow: visible;
    margin-right: 0;
    padding-right: 0;
    position: sticky;
    top: calc(var(--wp--custom--header-height) + var(--wp--preset--spacing--60));
  }
  .arjo-tab {
    display: flex;
    align-items: baseline;
    gap: var(--wp--preset--spacing--40);
    border: 0;
    border-bottom: var(--wp--custom--border-hairline) solid var(--wp--preset--color--line);
    padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--40) var(--wp--preset--spacing--40) 0;
    text-align: left;
    white-space: normal;
  }
  .arjo-tab::before {
    content: attr(data-index);
    font-size: var(--wp--preset--font-size--xxs);
    font-variant-numeric: tabular-nums;
    color: var(--wp--preset--color--ink-muted);
  }
  .arjo-tab[aria-selected="true"] {
    background: none;
    color: var(--wp--preset--color--contrast);
    font-weight: var(--wp--custom--weight-medium);
    border-bottom-color: var(--wp--preset--color--contrast);
  }
  .arjo-tab[aria-selected="true"]::before {
    color: var(--wp--preset--color--accent);
  }

  .arjo-tabpanels { grid-column: 4 / -1; }
  .arjo-tabpanel.is-active {
    grid-template-columns: repeat(9, minmax(0, 1fr));
    column-gap: var(--wp--custom--layout-gap);
    align-items: start;
  }
  .arjo-tabpanel__body {
    grid-column: 1 / span 4;
    padding-top: var(--wp--preset--spacing--20);
  }
  .arjo-tabpanel__media { grid-column: 5 / -1; }
}

/* ---- Editor ------------------------------------------------------------ */
/* The tab script does not run on the editor canvas, so show the first panel
   and let the rail sit still rather than stick to a header that is not there. */
.editor-styles-wrapper .arjo-tablist { position: static; }