/* English service pages (taxonomy-cat_portfolio.php with inc/service-copy.php) and the
   industry pages (template-industry.php), 23.10.2026. Loaded after route.css: the steps
   are its three-stop row, the hero and the case grid its sections. What is added here:
   the intro lead on the service archive, the hero without a map, and the
   list sections, heading left and a hairline list right like the FAQ (DESIGN.md: no
   cards, no icon grids). Spacing steps up inside out: 0.8rem title to text, 2.8rem item
   padding, 12rem between sections. */

/* ---------- Service archive intro ---------- */
/* The archive intro sets its paragraph at 4.2rem for one-line descriptions; a 40-60
   word lead takes the service lead scale instead (DESIGN.md, Typography). It runs the
   full width of the content area, and with the buttons gone the cases follow it at the
   archive's own 6rem, as on /ua/ and /ru/ (owner, 23.10.2026). */
.page-svc .page-intro .text-holder {
  max-width: none;
  margin-bottom: 6rem;
  font-size: clamp(2rem, calc(0.8rem + 1.6vw), 3.2rem);
  line-height: 1.3;
}

/* ---------- Industry hero: the copy alone, no map ---------- */
.route-hero--solo .route-hero__grid {
  grid-template-columns: minmax(0, 1fr);
}

.route-hero--solo .route-hero__copy {
  padding-top: clamp(2rem, 4vw, 6rem);
}

/* ---------- List sections ---------- */
.svc-section {
  padding: 12rem 0 0;
}

.svc-section__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 4rem 8rem;
  align-items: start;
}

.svc-section__title {
  margin: 0;
}

.svc-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 0.1rem solid rgba(255, 255, 255, 0.12);
}

.svc-list__item {
  padding: 2.8rem 0;
  border-top: 0.1rem solid rgba(255, 255, 255, 0.12);
}

.svc-list__title {
  margin: 0 0 0.8rem;
  font-weight: 500;
  font-size: 2.2rem;
  line-height: 1.3;
  color: #fff;
}

.svc-list__text {
  max-width: 78rem;
  margin: 0;
  font-size: 1.8rem;
  line-height: 1.5;
  color: #989898;
  text-wrap: pretty;
}

/* A title that is the link to its page (services, industries): white like the other
   titles, with the underline the header links use, so it reads as a way on. */
.svc-list__link {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.35);
  text-decoration-thickness: 0.1rem;
  text-underline-offset: 0.3em;
  transition: text-decoration-color 0.25s ease;
}

.svc-list__link:hover,
.svc-list__link:focus-visible {
  text-decoration-color: #e5b080;
}

/* Links in prose: Peach Lamp, as in .page-lead (custom.css). */
.svc-list__text a {
  color: #e5b080;
  text-decoration: underline;
  text-decoration-thickness: 0.1rem;
  text-underline-offset: 0.3em;
  transition: color 0.25s ease;
}

.svc-list__text a:hover,
.svc-list__text a:focus-visible {
  color: #fff;
}

/* The steps follow a list section: the route row brings its own bottom air only. */
.svc-steps {
  padding-top: 12rem;
}

/* Cases first (owner, 23.10.2026): the grid sits right under the hero, as on the SEO
   pages, and the list section after it adds 4rem to the grid's 8rem of bottom air. */
.page-industry .route-work + .svc-section {
  padding-top: 4rem;
}

/* Below 1200 the 1:2 split leaves the text too narrow next to the title (as the FAQ). */
@media (max-width: 1199px) {
  .svc-section__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 3.2rem;
  }
}

@media (max-width: 767px) {
  .svc-section,
  .svc-steps {
    padding-top: 7rem;
  }

  .page-industry .route-work + .svc-section {
    padding-top: 0;
  }

  .svc-steps {
    padding-bottom: 7rem;
  }

  .svc-list__item {
    padding: 2.2rem 0;
  }

  .svc-list__title {
    font-size: 2rem;
  }

  .svc-list__text {
    font-size: 1.7rem;
  }

  .page-svc .page-intro .text-holder {
    max-width: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .svc-list__link,
  .svc-list__text a {
    transition: none;
  }
}