/* /services/ only (EN and AR), loaded after main.css through the page's
   `stylesheet` front-matter key. Tokens and logical properties only, so the
   Arabic twin mirrors by itself.

   1. The six job chapters reuse the family chapter of main.css
      (.family-list > section.family, hairline on top). Here a chapter reads
      across like a dossier row: the job and the deck sentence | the client's
      question and what they get | the data families and the case it draws on.
      Three columns from 1100px, two below, one on phones (main.css).
   2. The ladder's terms column is widened just enough for the primary button,
      which sits on the same end edge as the terms above it.
   3. The sample band closes the page as its own chapter (its h2 is styled with
      the band's h3 in main.css): here it only loses its top margin. */

/* ---------- 1. Job chapters ---------- */

.job-detail {
  display: grid;
  gap: 1.5rem;
  align-content: start;
}
/* the client's question, in their words: the chapter's focal line */
.job-question p {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: 1.35;
  letter-spacing: -0.005em;
  color: var(--ink);
  text-wrap: balance;
  max-inline-size: 36ch;
}
[lang='ar'] .job-question p { letter-spacing: 0; line-height: 1.75; }
.job-detail .case-part:not(.job-question) p { max-inline-size: 60ch; }

/* where it draws from, and the proof case: two short indexes */
.job-links {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.5rem clamp(1.5rem, 3vw, 2.5rem);
  align-content: start;
}
.job-links .case-part { gap: 0.55rem; align-content: start; }
.job-links .family-links {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
}

@media (min-width: 1100px) {
  .job {
    grid-template-columns: minmax(0, 4fr) minmax(0, 5.2fr) minmax(15rem, 2.8fr);
    column-gap: clamp(2rem, 3.6vw, 3.5rem);
  }
  .job-links { grid-template-columns: 1fr; }
}
/* two columns (main.css .family): the indexes go under the answer */
@media (min-width: 901px) and (max-width: 1099px) {
  .job-links { grid-column: 2; }
}
@media (max-width: 520px) {
  .job-links { grid-template-columns: 1fr; }
}

/* ---------- 2. Ladder: room for the button in the terms column ---------- */

@media (min-width: 961px) {
  .ladder > li { grid-template-columns: minmax(14rem, 4fr) minmax(0, 6fr) minmax(14rem, 2.4fr); }
  .ladder > li > div:last-child { display: grid; justify-items: end; }
}

/* ---------- 3. The closing sample band opens its own chapter ---------- */

#sample .sample-band { margin-block-start: 0; }

/* ---------- 4. Inline link in an FAQ answer (the mailto), as in .prose ---------- */

.faq-answer a {
  color: var(--primary-bright);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in oklch, var(--primary-bright) 40%, transparent);
  transition: text-decoration-color 0.15s;
}
.faq-answer a:hover { text-decoration-color: var(--primary-bright); }