/* ==========================================================================
   Services — "Everything, connected"
   Figma "Home Page" y 2154→3036 (@1920) / "Mobile Home" y 1439→2505 (@402).
   Eyebrow + two-column header, then a 10-item service list laid out as a
   5-row, 2-column grid (column-major) with 2px white rules under each row
   (5 + 5: MX removed Marketing Strategy, client change request #17).
   ========================================================================== */

.section--services {
  padding-top: 116px;    /* (2154 − 1921 clients bottom) / 2 */
  padding-bottom: 78px;  /* (3192 showcase top − 3036) / 2 */
}

/* ---- Header ------------------------------------------------------------- */
.section--services .services__head { margin-top: 21px; }           /* eyebrow bottom 2179 → heading 2200 */
.section--services .services__title { max-width: 586px; }          /* wraps to "EVERYTHING, / CONNECTED" */
.section--services .services__intro { max-width: 849px; margin-top: 5px; } /* paragraph sits 5px below heading top */

/* ---- List --------------------------------------------------------------- */
.section--services .services__list {
  display: grid;
  grid-template-columns: 837fr 849fr; /* left rules 102→939, right 971→1820 */
  grid-template-rows: repeat(5, auto);
  grid-auto-flow: column;             /* items 1–5 left, 6–10 right */
  column-gap: 32px;
  margin-top: 60px;                   /* heading bottom 2352 → row-1 top 2412 */
  margin-left: 2px;                   /* rules start at x=102, not 100 */
}

.section--services .services__item {
  display: flex;
  align-items: center;
  padding: 22px 0 31.5px;             /* rule → text 22px; text → next rule 31.5px; 103px row pitch */
  border-bottom: 2px solid var(--fg);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(32px, 2.6042vw, 50px); /* 50px at 1920; scales with the 2-col grid so the featured row never wraps */
  line-height: var(--lh-display);
  text-transform: capitalize;
}

/* ---- Hover: thumbnail slides in, name turns green -------------------------
   Mirrors the live site (.service-image: width 0 → visible, margin-left −62 → 0,
   opacity 0 → 1, 0.3s ease-in-out) at the Figma's 117×71 landscape thumb.
   Images are never distorted: object-fit: cover crops square sources to the
   frame (landscape originals show in full). The 71px image sits inside the 47.5px text line via
   negative block margins (row height never changes) and is shifted 4.75px so
   it is centred between the two rules (22px above the text, 31.5px below).
   Its left edge is flush with the start of the rule. Pointer devices only. */
.section--services .services__thumb {
  flex: 0 0 0px;
  width: 0;
  height: 71px;
  margin: -11.75px 0;
  border-radius: 12px;
  object-fit: cover;
  opacity: 0;
  visibility: hidden;               /* fully hidden until hovered */
  transform: translate(-24px, 4.75px);
  transition: width .3s ease-in-out, flex-basis .3s ease-in-out, margin .3s ease-in-out, opacity .3s ease-in-out, transform .3s ease-in-out, visibility 0s linear .3s;
  will-change: width, opacity, transform;
}
.section--services .services__name { transition: color .3s ease-in-out; }
/* Each row links to its service page; the link's ::after stretches over the whole row (rule to rule). */
.section--services .services__item { position: relative; }
.section--services .services__link::after { content: ""; position: absolute; inset: 0; }
.section--services .services__link:focus-visible { outline: 0; }
.section--services .services__item:has(.services__link:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (hover: none) {
  .section--services .services__link:active .services__name { color: var(--accent); }
}
@media (hover: hover) and (pointer: fine) {
  .section--services .services__item { cursor: pointer; }
  .section--services .services__item:hover .services__thumb,
  .section--services .services__item:focus-within .services__thumb {
    flex-basis: 117px;
    width: 117px;
    margin: -11.75px clamp(20px, 2.0313vw, 39px) -11.75px 0;   /* flush left; 39px gap to the name at 1920 */
    opacity: 1;
    visibility: visible;
    transform: translate(0, 4.75px);
    transition-delay: 0s;
  }
  .section--services .services__item:hover .services__name,
  .section--services .services__item:focus-within .services__name { color: var(--accent); }
}

/* ---- Laptop / tablet: single column ------------------------------------- */
@media (max-width: 1280px) {
  .section--services .services__list { display: block; margin-left: 0; }
  .section--services .services__item { font-size: var(--fs-h4); } /* 40px, then 36px at <=1024 */
  .section--services .services__item:last-child { border-bottom: 0; padding-bottom: 0; }
}

@media (max-width: 1024px) {
  .section--services .services__head { row-gap: 30px; }
  .section--services .services__intro { margin-top: 0; }
  .section--services .services__thumb { display: none; } /* no hover on touch layouts (as on the live site) */
}

/* ---- Mobile (Figma "Mobile Home", 402 wide) ----------------------------- */
@media (max-width: 640px) {
  .section--services {
    padding-top: 38px;   /* (1439 − 1362) / 2 */
    padding-bottom: 32px; /* (2568 − 2505) / 2 */
  }
  .section--services .eyebrow { padding-left: 4px; gap: 12px; } /* dot x=24, text x=42 */
  .section--services .services__head { margin-top: 29px; }      /* eyebrow bottom 1459 → heading 1488 */

  .section--services .services__list { margin-top: 35px; }      /* intro bottom 1708 → row-1 top 1743 */
  .section--services .services__item {
    padding: 21px 0 23.5px;           /* 71.2px row pitch (Figma rules 1817→2457 over 9 rows) */
    font-size: var(--fs-item);        /* 26px */
  }
  .section--services .services__item:first-child { padding-bottom: 27.5px; } /* Figma gives row 1 ~4px extra */
  .section--services .services__item:last-child { padding-bottom: 0; }
}