/* ============================================
   services — "Pick your first move." (mobile node 4:65)
   Mobile DRAWN at 390 (anchor). Tablet 768–1023 = pseudo-tablet.
   Desktop 1024–1920 INVENTED (mobile-only-mode.md): split-40-60 head ‖ list
   (BA-INV-S1..S4). Pattern A — gutter comes from .container.
============================================ */

/* ---------- MOBILE (base, DRAWN) ---------- */
.services {
  /* Section-local fluid values (brief/services.md §6) */
  --svc-pad: clamp(41px, calc(50px + (var(--max-vw) - 390px) * 0.015), 100px);       /* 50 @390 */
  --svc-stack-gap: clamp(16px, calc(20px + (var(--max-vw) - 390px) * 0.015), 30px);  /* 20 @390 */
  --svc-desc-w: clamp(115px, calc(140px + (var(--max-vw) - 390px) * 0.015), 200px);  /* 140 @390 */
  --svc-gap: clamp(7px, calc(8px + (var(--max-vw) - 390px) * 0.015), 12px);          /* 8 @390 */
  --svc-icon: 24px;

  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--svc-stack-gap);
  padding-top: var(--svc-pad);
  padding-bottom: var(--svc-pad);
  color: var(--color-ink);
}

.services__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--svc-stack-gap);
}

.services__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  color: var(--color-ink);
}

.services__sub {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-title-m);
  line-height: var(--lh-title-m);
  letter-spacing: var(--ls-body);
  color: var(--color-ink);
}

.services__list {
  display: flex;
  flex-direction: column;
  width: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
  /* no overflow clip — would cut the focus ring (D-S7) */
}

.services__row {
  /* hover plate overhang past the row box, so the text keeps a margin inside the black plate
     (s-i-r-k-a.com cases_another_cases: 20px link padding on mobile) */
  --svc-hover-bleed: var(--gutter);

  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-start;
  gap: var(--svc-gap);
  padding-top: 16px;
  padding-bottom: 16px;
  color: var(--color-ink);
  box-shadow: inset 0 -1px 0 var(--color-ink);   /* Figma stroke INSIDE, bottom only (D-S5) */
}

/* Hover plate — paints nothing at rest; the row's own box (gate geometry) is untouched */
.services__row::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: calc(-1 * var(--svc-hover-bleed));
  right: calc(-1 * var(--svc-hover-bleed));
  pointer-events: none;
}

/* Hover / keyboard focus — inverted row, as on s-i-r-k-a.com cases_another_cases
   (black plate, white text and arrow, no transition) */
.services__row:focus-visible {
  outline: none;
  color: var(--color-white);
}
.services__row:focus-visible::before {
  background: var(--color-black);
  outline: 2px solid var(--color-white);
  outline-offset: -6px;            /* ring inside the plate's overhang, clear of the text */
}
.services__row:focus-visible .services__row-icon {
  filter: brightness(0) invert(1);
}

@media (hover: hover) {
  .services__row:hover {
    color: var(--color-white);
  }
  .services__row:hover::before {
    background: var(--color-black);
  }
  .services__row:hover .services__row-icon {
    filter: brightness(0) invert(1);
  }
}

.services__row-title {
  flex: 1 1 0;              /* never min-width:0 — a word never overflows (D-S6) */
  /* Floor = the widest drawn line "PERFORMANCE" (≈5.5em). Inert at ≥390 (title is 170 there);
     at 320–389 it makes the description give way so every title keeps its drawn 2 lines. */
  min-width: 5.5em;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
}

.services__row-desc {
  flex: 0 1 var(--svc-desc-w);
  align-self: center;       /* all 6 centred (BA-SVC-1) */
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-body-s-semibold);
  line-height: var(--lh-body-s-semibold);
  letter-spacing: var(--ls-body-s-semibold);
}

.services__row-icon {
  flex: none;
  width: var(--svc-icon);
  height: var(--svc-icon);
}

/* ---------- PSEUDO-TABLET 768–1023 (stack; titles go to one line) ---------- */
@media (min-width: 768px) {
  .services {
    --svc-pad: clamp(55.66px, calc(55.66px + (var(--max-vw) - 768px) * 0.025), 100px);
    --svc-stack-gap: clamp(25.66px, calc(25.66px + (var(--max-vw) - 768px) * 0.025), 30px);
    --svc-desc-w: clamp(145.66px, calc(145.66px + (var(--max-vw) - 768px) * 0.025), 200px);
    --svc-gap: 12px;
  }
}

/* ---------- DESKTOP 1024–1920 (INVENTED: split-40-60) ---------- */
@media (min-width: 1024px) {
  .services {
    --svc-pad: clamp(71px, calc(100px * (var(--max-vw) / var(--vw-base))), 133px);       /* 100 @1440 */
    --svc-head-gap: clamp(21px, calc(30px * (var(--max-vw) / var(--vw-base))), 40px);    /* 30 @1440 */
    --svc-desc-w: clamp(142px, calc(200px * (var(--max-vw) / var(--vw-base))), 267px);   /* 200 @1440 */
    --svc-gap: clamp(9px, calc(12px * (var(--max-vw) / var(--vw-base))), 16px);          /* 12 @1440 */
    --svc-icon: clamp(24px, calc(24px * (var(--max-vw) / var(--vw-base))), 32px);        /* 24 → 32 */

    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    column-gap: var(--gutter);      /* page gutter (BA-INV-S2) */
    align-items: start;             /* D5 */
  }

  .services__head {
    gap: var(--svc-head-gap);
  }

  .services__row {
    --svc-hover-bleed: calc(var(--gutter) / 2);   /* fits the column gap (= gutter) on the left */

    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--svc-desc-w) var(--svc-icon);
    column-gap: var(--svc-gap);
    align-items: start;
  }

  .services__row-title {
    justify-self: start;
    max-width: 6.1em;               /* drawn 2-line breaks on every row (BA-INV-S3) */
  }

  .services__row-desc {
    align-self: center;
  }
}