/* ==========================================================================
   MECAS Techsolutions - Capabilities page
   --------------------------------------------------------------------------
   Read off a 100px ruler overlay on design/reference/04-capabilities.jpg at a
   matched 1440 canvas (source is 1024 wide, so x1.406).

   HERO
     navy right edge      x 669            ->  46.5%
     navy block height    517px
     copy left inset      x 84             ->  handled by the shared hero
     title                2 lines, 48px cap
     subtitle             537 wide        ->  34px type
     intro                542 wide, 32px pitch  ->  24px type

   CAPABILITY BLOCKS
     badge                x  46-233        ->  187px diameter
     divider rule         x 258
     copy starts          x 302
     flow icons           ~56px, six across, arrows between
     flow labels          ~15px, under each icon
     restated flow        x 302-820, ~19px
     image column         x 975-1390       ->  415px wide
     separator            spans x 40-960, stops before the image column
   ========================================================================== */

.page-hero--capabilities {
  grid-template-columns: minmax(0, 46.5fr) minmax(0, 53.5fr);
  min-height: 517px;
}

/* Re-measured on a ruler overlay after the first build: the subtitle is 537
   wide (34px type) and the intro's first line 542 wide on a 32px pitch (24px
   type). The first build had them at 28 and 19. The intro's 542px line needs
   the panel's end padding cut from 48 to 24. */
.page-hero--capabilities .page-hero__panel { padding-inline-end: var(--space-5); }

.page-hero--capabilities .page-hero__subtitle {
  margin-top: var(--space-5);
  font-size: clamp(1.375rem, 0.7rem + 1.9vw, 2.125rem);   /* 22 -> 34 */
  line-height: 1.3;
}

.page-hero--capabilities .page-hero__intro {
  max-width: 560px;
  font-size: clamp(1.0625rem, 0.45rem + 1.3vw, 1.5rem);   /* 17 -> 24 */
  line-height: 1.34;
}

/* The hero render is a cut-out on white, so it is contained, not cropped. */
.page-hero--capabilities .page-hero__media {
  display: grid;
  place-items: center;
  padding: var(--space-5);
}

.page-hero--capabilities .page-hero__media img {
  width: 100%;
  height: auto;
  max-width: 700px;
  object-fit: contain;
}

/* The blocks run wider than the shared containers. Design content spans
   x 46-1390 at 1440, which is 1344px inside 46px margins; the 1360 container
   would put it at 64-1376 and everything would sit 18px right of the design. */
.capability-list {
  width: 100%;
  max-width: 1396px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* --------------------------------------------------------------------------
   Capability blocks
   -------------------------------------------------------------------------- */

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

/* Separator stops before the image column, as drawn. */
.capability + .capability::before {
  content: "";
  position: absolute;
  left: 0;
  right: 30%;
  top: 0;
  height: 1px;
  background-color: var(--border);
}

.capability__body {
  display: grid;
  grid-template-columns: 187px minmax(0, 1fr);
  gap: 25px;
  align-items: center;
}

.capability__copy {
  padding-left: 44px;
  border-left: var(--border-w) solid var(--border-strong);
}

.capability__title {
  font-size: clamp(1.5rem, 1.1rem + 1vw, 2.25rem);   /* 24 -> 36, measured */
  font-weight: var(--fw-bold);
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--ink-heading);
}

.capability__title span { color: var(--color-action); }

/* Badge is much larger here than the shared default. */
.capability .icon-badge { width: 187px; height: 187px; }
.capability .icon-badge svg { width: 88px; height: 88px; }

.capability__media img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 415px;
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   Inline process flow
   --------------------------------------------------------------------------
   A row of line icons joined by arrows, each labelled beneath. It carries no
   meaning the restated text below does not, so the whole row is decorative to
   assistive technology and the text is what gets read.
   -------------------------------------------------------------------------- */

.flow {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 6px;
  margin-top: var(--space-5);
}

/* Each step is sized to its own label, never narrower than its icon, and a
   long label wraps onto a second line instead of spilling sideways. That is
   how the design sets "Qualified / Partners" and "Performance / Testing".
   An earlier version let labels overflow a fixed 56px step so six steps would
   fit one row; long labels then ran into their neighbours by up to 13px. */
.flow__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  flex: 0 1 auto;
  min-width: 56px;
  max-width: 104px;
}

.flow__icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  color: var(--ink-heading);
}

.flow__icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.flow__label {
  font-size: 0.9375rem;    /* 15px, measured */
  line-height: 1.25;
  text-align: center;
  text-wrap: balance;
  overflow-wrap: break-word;
  color: var(--ink);
}

.flow__arrow {
  flex: none;
  align-self: flex-start;
  width: 18px;
  height: 56px;
  color: var(--ink-heading);
}

.flow__arrow svg {
  width: 18px;
  height: 18px;
  margin-top: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}

/* The row of icons and arrows only fits when the copy column is wide enough,
   which is at roughly the design canvas and above. Rather than guess that from
   the viewport, the column is a query container and the flow switches to a
   wrapped grid of steps, arrows removed, whenever the column itself is too
   narrow. Arrows at the end of a wrapped line point at nothing, so they go.
   Browsers without container queries keep the flex row, which wraps cleanly
   because every step is sized to its content. */
.capability__copy { container-type: inline-size; container-name: capflow; }

/* Each flow switches at the width its own row needs, measured at the design
   canvas: six steps need about 630px, five about 610px, four about 500px. A
   single threshold for all four would drop the shorter flows into the grid
   while they still fit on one line. */
@container capflow (max-width: 639px) {
  .flow--6 { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: var(--space-4) var(--space-3); }
  .flow--6 .flow__arrow { display: none; }
  .flow--6 .flow__step { max-width: none; }
}

@container capflow (max-width: 619px) {
  .flow--5 { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: var(--space-4) var(--space-3); }
  .flow--5 .flow__arrow { display: none; }
  .flow--5 .flow__step { max-width: none; }
}

@container capflow (max-width: 519px) {
  .flow--4 { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: var(--space-4) var(--space-3); }
  .flow--4 .flow__arrow { display: none; }
  .flow--4 .flow__step { max-width: none; }
}

/* The same sequence written out, which is what a screen reader gets. */
.flow-text {
  margin-top: var(--space-5);
  max-width: 520px;
  font-size: 1.1875rem;    /* 19px, measured */
  line-height: 1.55;
  color: var(--ink);
}

.flow-text span { white-space: nowrap; }

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

@media (max-width: 1199.98px) {
  .capability { grid-template-columns: minmax(0, 1fr) 320px; }
  .capability__media img { max-width: 320px; }
  .capability__body { grid-template-columns: 140px minmax(0, 1fr); gap: 20px; }
  .capability__copy { padding-left: 28px; }
  .capability .icon-badge { width: 140px; height: 140px; }
  .capability .icon-badge svg { width: 66px; height: 66px; }
}

@media (max-width: 991.98px) {
  .page-hero--capabilities { grid-template-columns: minmax(0, 54fr) minmax(0, 46fr); }

  .capability {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
  }

  .capability + .capability::before { right: 0; }

  .capability__media { order: -1; }
  .capability__media img { max-width: 420px; }
}

@media (max-width: 767.98px) {
  .page-hero--capabilities {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }

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

  .capability__copy {
    padding-left: 0;
    border-left: none;
  }

  .capability .icon-badge { width: 110px; height: 110px; }
  .capability .icon-badge svg { width: 54px; height: 54px; }

}