/* ==========================================================================
   MECAS Techsolutions - Services page
   --------------------------------------------------------------------------
   Every value below is measured from design/reference/03-services.jpg and
   converted to a 1440 canvas (source is 1159 wide, so x1.242).

   HERO
     navy / gallery split   x 404 of 1159      ->  34.9%
     navy block height      359                ->  446px
     copy left inset        23                 ->   28px
     copy top inset         28                 ->   35px
     title                  3 lines, 401 wide, 40px pitch  ->  33px type
     subtitle               2 lines, 414 wide, 35px pitch  ->  29px type
     intro                  4 lines, 460 wide, 26.7px pitch ->  19px type
                            (all re-measured by width, D-049)
     gallery gap from navy  2                  ->    2px
     gallery right margin   9                  ->   11px

   SERVICE ROWS  (read off a ruler overlay at 1440)
     badge                  x 68-178           ->  110px diameter
     divider rule           x 218
     copy starts            x 264
     copy measure           264-1057           ->  793px
     rail image             x 1155-1385        ->  230px wide, right aligned
     row height             ~172 in design; 182 built, because the rail here
                            sits inside its row rather than overflowing it
     row height             ~172px
     ground                 #F6FAFD light left, white behind the rail
   ========================================================================== */

.page-hero--services {
  grid-template-columns: minmax(0, 34.9fr) minmax(0, 65.1fr);
  min-height: 446px;
}

/* The navy panel is narrow here, so the copy hugs its left edge rather than
   aligning to the site container the way the wider inner-page heroes do. */
.page-hero--services .page-hero__panel {
  justify-content: flex-start;
  /* The intro's first line runs to x 487 of a 502 panel, so the end padding
     is 12px, not the 24 the first build used. */
  padding: 27px 12px 32px 28px;     /* title caps start 34px below the band's top */
}

/* Re-measured by width on a ruler overlay (D-049). The first build sized the
   title from its cap height, which in Archivo makes it 9% too wide, and read
   the subtitle and intro well under size. */
.page-hero--services .page-hero__title {
  font-size: clamp(1.625rem, 1.05rem + 1.3vw, 2.0625rem);  /* 26 -> 33: "IMPORT SUBSTITUTION" 401 wide */
  line-height: 1.21;                                        /* 40px pitch */
}

.page-hero--services .page-hero__rule { margin-top: 16px; }

.page-hero--services .page-hero__subtitle {
  margin-top: 21px;
  font-size: clamp(1.25rem, 0.72rem + 1.2vw, 1.8125rem);    /* 20 -> 29: 414 wide */
  line-height: 1.2;                                         /* 35px pitch */
  color: var(--ink-inverse);
}

.page-hero--services .page-hero__intro {
  margin-top: 24px;
  max-width: none;
  font-size: clamp(1rem, 0.72rem + 0.62vw, 1.1875rem);      /* 16 -> 19: 460 wide */
  line-height: 1.4;                                         /* 26.5px pitch */
  color: var(--ink-inverse);                                /* drawn near-white, not muted */
}

/* Gallery sits all but flush against the navy edge and the viewport edge. */
.services-gallery {
  display: grid;
  place-items: center;
  padding: 0 11px 0 2px;
  background-color: var(--white);
}

.services-gallery img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* --------------------------------------------------------------------------
   Service rows
   --------------------------------------------------------------------------
   The ground is split: the light section colour on the left, white behind the
   image rail. That split is in the design and reads as a deliberate rail.
   -------------------------------------------------------------------------- */

.services-rows {
  background-image: linear-gradient(
    to right,
    var(--surface-alt) 0 77%,
    var(--white) 77% 100%
  );
}

.service-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 230px;
  gap: var(--space-5);
  align-items: center;
  padding-block: var(--space-4);
}

/* Separator stops before the rail, as drawn, so it is a pseudo element rather
   than a border on the row. */
.service-row + .service-row::before {
  content: "";
  position: absolute;
  left: 0;
  right: 23%;
  top: 0;
  height: 1px;
  background-color: var(--border);
}

.service-row__body {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 40px;
  align-items: center;
}

.service-row__copy {
  padding-left: 46px;
  border-left: var(--border-w) solid var(--border-strong);
}

.service-row__title {
  font-size: 1.625rem;         /* 26px, measured */
  font-weight: var(--fw-bold);
  line-height: 1.2;
  color: var(--color-action);
}

.service-row__text {
  margin-top: var(--space-3);
  max-width: 793px;            /* measured copy measure */
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink);
}

/* Badge is larger on this page than the shared default. */
.service-row .icon-badge { width: 110px; height: 110px; }
.service-row .icon-badge svg { width: 54px; height: 54px; }

/* The design sizes the rail to a landscape box; the source panes are nearly
   square, so they are contained inside it rather than cropped. Fixing the box
   is also what keeps the row at the height the design draws. */
.service-row__media img {
  display: block;
  width: 100%;
  max-width: 230px;
  height: 150px;
  object-fit: contain;
  margin-inline: auto;
}

/* Two rows carry no image in the design. Their copy takes the full width
   rather than leaving an empty cell. */
.service-row--no-media { grid-template-columns: minmax(0, 1fr); }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1199.98px) {
  .page-hero--services { grid-template-columns: minmax(0, 38fr) minmax(0, 62fr); }

  .service-row { grid-template-columns: minmax(0, 1fr) 190px; }
  .service-row__media img { max-width: 190px; height: 150px; }
  .service-row__body { grid-template-columns: 92px minmax(0, 1fr); gap: 28px; }
  .service-row__copy { padding-left: 28px; }
  .service-row .icon-badge { width: 92px; height: 92px; }
  .service-row .icon-badge svg { width: 46px; height: 46px; }
}

/* The gallery stops being legible before the split stops fitting, so this page
   stacks earlier than the other inner pages. */
@media (max-width: 991.98px) {
  .page-hero--services {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }

  .page-hero--services .page-hero__panel {
    padding: var(--space-7) var(--space-5);
  }

  .services-gallery { padding: var(--space-5) var(--gutter); }

  /* The rail no longer has a column of its own, so the split ground goes. */
  .services-rows { background-image: none; background-color: var(--surface-alt); }
}

@media (max-width: 767.98px) {
  .page-hero--services .page-hero__panel { padding-inline: var(--gutter); }

  .service-row {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
  }

  .service-row + .service-row::before { right: 0; }

  .service-row__media { order: -1; }
  .service-row__media img { max-width: 220px; height: auto; }

  .service-row__body {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
  }

  .service-row__copy {
    padding-left: 0;
    border-left: none;
  }
}