/* ==========================================================================
   SERVICES — six roles behind one row of numbers (Figma «Component 3»)
   --------------------------------------------------------------------------
   Build doc, step 5: the numbers are PROOF, not navigation. The intro line
   claims «six roles in one pair of hands»; 01–06 shows there are six. So
   the section stays one role tall and the numbers switch the role in
   place — six stacked blocks would be ~900 px of text for a point one
   line has already made.

   Pattern: WAI-ARIA tabs. The numbers are tab buttons (arrow keys move
   between them, see js/services.js); each role is a tab panel.

   Gaps — the Figma panel values of «Component 3», box to box:
     photo       → name          56
     name        → clarifier     16
     clarifier   → description   32
     description → rule          56   (from the tallest role's text)
     rule        → number row     2   the row is 44 tall, numbers centred
                                      in it: 2 + 14 = 16 from rule to «01»
   ========================================================================== */

.services {
  margin-top: var(--space-between);
}

/* --- Panels ---------------------------------------------------------------
   All six panels sit in ONE grid cell, on top of each other. The cell is
   as tall as the tallest role, so switching roles never moves the rule
   and the numbers: the next tap lands where the finger already is.
   Shorter roles leave some air above the rule — the price of a row that
   doesn't jump. */

.services__panels {
  display: grid;
}

.services__panel {
  grid-area: 1 / 1;
}

/* Only with JS running do the panels become tabs. Without it every role is
   shown one after another and the numbers are hidden — a list that works
   is better than switches that don't. */
.js .services__panel {
  transition: opacity 200ms ease, visibility 0s linear 200ms;
}

.js .services__panel[hidden] {
  display: block;            /* keep its height in the stack … */
  visibility: hidden;        /* … but invisible and out of the a11y tree */
  opacity: 0;
}

.js .services__panel:not([hidden]) {
  transition-delay: 0s;
}

html:not(.js) .services__panel + .services__panel {
  margin-top: var(--space-between);
}

html:not(.js) .services__tabs {
  display: none;
}

/* --- One role ------------------------------------------------------------- */

.services__clarifier {
  margin-top: var(--space-pair);
  color: var(--color-ink-soft);
}

.services__text {
  margin-top: var(--space-group);
  color: var(--color-ink-soft);
}

/* --- Rule + numbers ------------------------------------------------------- */

.services__tabs {
  position: relative;
  display: flex;
  justify-content: space-between;
  margin-top: var(--space-between);
  padding-top: 0.125rem;          /* 2 — rule → the 44-tall number row */
}

/* The hairline opens the list, so it belongs to it and runs exactly from
   the left edge of «01» to the right edge of «06» — not the full width of
   the row: each number sits at the left of its 44 tap zone, so ~28 px of
   empty zone follow «06», and a full-width line would overshoot it.
   44 − 16 (the width of «06») = 28. */
.services__tabs::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: calc(var(--tap) - 1rem);
  border-top: 1px solid var(--color-hairline);
}

/* A number: a 44 × 44 box (the tap target) with the number centred
   vertically and set at its left edge, as «Frame 110–115» in Figma. */
.services__tab {
  display: flex;
  align-items: center;
  width: var(--tap);
  height: var(--tap);
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;          /* buttons don't inherit it; size and
                                    weight come from .t-label */
  text-align: left;
  color: var(--color-ink-soft);   /* build doc: these are COUNTED, so read */
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color 200ms ease;
}

.services__tab[aria-selected="true"] {
  color: var(--color-ink);
}

@media (hover: hover) {
  .services__tab:hover {
    color: var(--color-ink);
  }
}

/* --------------------------------------------------------------------------
   DESKTOP (Figma «Component 2»)
   Same order and the same gaps as on the phone (16 / 32 / 56), the name
   at its desktop size (64 Light — Figma had Bold). The clarifier stays
   ink-soft: Figma had it in accent, but 11-px text in accent is 3.99:1,
   under the 4.5 that small text needs.
   Under the text: one hairline across the column, then the numbers
   (32 apart — a mouse doesn't need 44) and «В дірект» on the right.
   -------------------------------------------------------------------------- */
.services__cta {
  display: none;
}

@media (min-width: 64em) {
  .services {
    margin-top: var(--space-section);
  }

  .services__controls {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: var(--space-between);
    padding-top: var(--space-group);
  }

  .services__controls::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    border-top: 1px solid var(--color-hairline);
  }

  .services__tabs {
    margin-top: 0;
    padding-top: 0;
  }

  .services__tabs::before {
    display: none;
  }

  .services__tab {
    width: 2rem;                                /* 32 */
  }

  .services__cta {
    display: inline-flex;
  }

  /* Desktop: the role's description is the text of the block, not an
     aside — ink, like every other paragraph. */
  .services__text {
    color: var(--color-ink);
  }
}