/* ==========================================================================
   JIST — SERVICES
   Vertical tab index in drawing-register style on the left, one panel per
   service on the right.
   ========================================================================== */

.jist-services__layout {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--wp--custom--grid-gap);
  align-items: start;
}

/* --------------------------------------------------------------------------
   The index (tab list)
   -------------------------------------------------------------------------- */
.jist-service-index {
  border-block-start: var(--wp--custom--hairline) solid var(--wp--preset--color--line);
}

.jist-service-index__tab {
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr);
  gap: var(--wp--preset--spacing--40);
  align-items: baseline;
  inline-size: 100%;
  padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
  text-align: start;
  background: none;
  border: 0;
  border-block-end: var(--wp--custom--hairline) solid var(--wp--preset--color--line);
  border-inline-start: var(--wp--custom--rule-accent) solid transparent;
  cursor: pointer;
  transition:
    background-color var(--wp--custom--duration-fast) var(--wp--custom--ease-out),
    border-inline-start-color var(--wp--custom--duration-fast) var(--wp--custom--ease-out);
}

.jist-service-index__code {
  font-family: var(--wp--preset--font-family--mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: var(--wp--custom--tracking-label);
  text-transform: uppercase;
  color: var(--wp--preset--color--muted);
  transition: color var(--wp--custom--duration-fast) var(--wp--custom--ease-out);
}

.jist-service-index__name {
  font-family: var(--wp--preset--font-family--heading);
  font-size: var(--wp--preset--font-size--hfour);
  font-weight: 600;
  color: var(--wp--preset--color--slate);
  line-height: var(--wp--custom--leading-snug);
  letter-spacing: var(--wp--custom--tracking-heading);
  transition: color var(--wp--custom--duration-fast) var(--wp--custom--ease-out);
}

.jist-service-index__tab:hover { background-color: var(--wp--preset--color--paper); }
.jist-service-index__tab:hover .jist-service-index__name { color: var(--wp--preset--color--contrast); }

.jist-service-index__tab[aria-selected="true"] {
  background-color: var(--wp--preset--color--paper);
  border-inline-start-color: var(--wp--preset--color--accent);
}

.jist-service-index__tab[aria-selected="true"] .jist-service-index__name { color: var(--wp--preset--color--contrast); }
.jist-service-index__tab[aria-selected="true"] .jist-service-index__code { color: var(--wp--preset--color--accent-ink); }

/* --------------------------------------------------------------------------
   The panel
   -------------------------------------------------------------------------- */
.jist-service-panel {
  display: grid;
  gap: var(--wp--preset--spacing--60);
}

.jist-service-panel[hidden] { display: none; }

.jist-service-panel__media { position: relative; }

.jist-service-panel__body {
  display: grid;
  gap: var(--wp--preset--spacing--40);
  justify-items: start;
}

.jist-service-panel__title {
  margin: 0;
  font-family: var(--wp--preset--font-family--heading);
  font-size: var(--wp--preset--font-size--hthree);
  font-weight: 600;
  line-height: var(--wp--custom--leading-snug);
  letter-spacing: var(--wp--custom--tracking-heading);
  color: var(--wp--preset--color--contrast);
}

.jist-service-panel__text {
  margin: 0;
  color: var(--wp--preset--color--muted);
  max-inline-size: var(--wp--custom--measure);
  line-height: var(--wp--custom--leading-relaxed);
}

.jist-service-panel__deliverables {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
  margin-block-start: var(--wp--preset--spacing--20);
  inline-size: 100%;
}

/* Panel crossfade */
.jist-service-panel.is-entering {
  animation: jist-panel-in var(--wp--custom--duration-base) var(--wp--custom--ease-out) both;
}

@keyframes jist-panel-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .jist-service-panel.is-entering { animation: none; }
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .jist-services__layout {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--wp--preset--spacing--80);
  }

  .jist-service-panel__deliverables {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 560px) {
  .jist-service-index__tab {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--wp--preset--spacing--10);
    padding-inline: var(--wp--preset--spacing--30);
  }
}