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

   HERO
     navy right edge      x 601               ->  41.7%
     navy block height    500px
     copy left inset      x 95
     title                2 lines, "TECHNOLOGY" 485 wide  ->  65px type
     rule                 72 x 4
     intro                2 lines, 447 wide, 40px pitch   ->  28px type
     image quad           x 780-1365 (585 wide), 179px into the white half;
                          it breaks out below the navy band, as drawn

   DOMAIN CARDS
     content span         x 46-1395
     card                 x 46-912 (64.2%), ~250 tall, 14px apart; the last
                          card runs the full width with its image inside
     badge                x 92-287        ->  195px diameter, 46px card inset
     divider              x 313
     copy starts          x 354
     title                "HIGH-SPEED ROTATING MACHINERY" 543 wide -> 30px
     rule                 50 x 4
     keywords             42px line pitch, bullets trail their item -> 29px
     images               sit in the white column, offset per row as drawn;
                          the test rig reaches up beside Fluid Systems,
                          which has no image of its own

   CTA BAR
     panel                x 46-1395, 128 tall, ~16px radius
     icon ring            x 110-196       ->  86px
     text                 x 232, 2 lines, 37px pitch  ->  26px type
     button               x 875-1306, 70 tall, 2px bright-blue outline
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.page-hero--technology {
  grid-template-columns: minmax(0, 41.7fr) minmax(0, 58.3fr);
  min-height: 500px;
}

/* "TECHNOLOGY" at 65px is 485 wide in a 601 panel with a 95 inset, which
   leaves 21px. The shared 48px end padding would break the word. */
.page-hero--technology .page-hero__panel {
  padding-inline: clamp(var(--gutter), 6.6vw, 95px) var(--space-4);
}

.page-hero--technology .page-hero__rule { width: 72px; }

.page-hero--technology .page-hero__intro {
  margin-top: 26px;
  max-width: 460px;
  font-size: clamp(1.125rem, 0.62rem + 1.25vw, 1.75rem);   /* 18 -> 28 */
  line-height: 1.43;
  color: var(--ink-inverse);
}

/* The quad breaks out of the bottom of the navy band in the design, so this
   half does not clip. The negative bottom margin keeps the image from setting
   the band's height: the band stays at 500 and the circles hang below it. */
.page-hero--technology .page-hero__media {
  overflow: visible;
  display: flex;
  align-items: flex-start;
  padding-inline-start: 21.3%;
}

.page-hero--technology .page-hero__media picture { display: block; width: 100%; max-width: 585px; }

.page-hero--technology .page-hero__media img {
  width: 100%;
  height: auto;
  margin-bottom: -40px;
  object-fit: contain;
}

/* --------------------------------------------------------------------------
   Domain cards
   -------------------------------------------------------------------------- */

.tech-areas { padding-block: 56px 25px; }

.tech-list {
  width: 100%;
  max-width: 1396px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.tech-area {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 64.2fr) minmax(0, 35.8fr);
  align-items: center;
  min-height: 250px;
}

.tech-area + .tech-area { margin-top: 14px; }

/* The card is drawn behind the row rather than on it, so it can stop short of
   the image column on four rows and run the full width on the last. */
.tech-area::before {
  content: "";
  position: absolute;
  inset: 0 35.8% 0 0;
  border: var(--border-w) solid var(--border);
  border-radius: 10px;
  background-image: linear-gradient(to right, var(--surface-alt), var(--white) 70%);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--duration) var(--ease);
}

.tech-area--engineering::before { right: 0; }

.tech-area__body {
  position: relative;
  display: grid;
  grid-template-columns: 195px minmax(0, 1fr);
  gap: 26px;
  align-items: center;
  align-self: stretch;
  padding: 30px 8px 30px 46px;      /* the longest title runs to within 15px of the card edge */
}

.tech-area .icon-badge {
  width: 195px;
  height: 195px;
  background-image: radial-gradient(circle at 50% 40%, var(--blue-050), var(--blue-100));
  color: var(--ink-heading);
}

.tech-area .icon-badge svg { width: 128px; height: 128px; }

/* One weight for every badge icon. The Hugeicons drawing sets its own stroke
   width on an inner group, which a rule on the svg alone would not reach. */
.tech-area .icon-badge svg * { stroke-width: 1.1; }

.tech-area__copy {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 41px;
  border-left: var(--border-w) solid var(--border);
}

.tech-area__title {
  font-size: clamp(1.375rem, 0.85rem + 1.1vw, 1.875rem);   /* 22 -> 30 */
  font-weight: var(--fw-bold);
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--ink-heading);
}

.tech-area__title::after {
  content: "";
  display: block;
  width: 50px;
  height: var(--rule-w);
  margin-top: 18px;
  background-color: var(--color-rule);
  border-radius: var(--radius-sm);
}

.tech-area__keys {
  margin-top: 16px;
  font-size: clamp(1.125rem, 0.25rem + 1.8vw, 1.8125rem);  /* 18 -> 29 */
  line-height: 1.45;
  color: var(--ink-heading);
}

/* Every list in the design breaks after its third keyword, whatever its
   length, so the break is authored rather than left to the measure: a zero
   height, full-width flex item is ordered in after item three. Below tablet
   width the lists wrap naturally. */
@media (min-width: 768px) {
  .tech-area__keys::before {
    content: "";
    flex-basis: 100%;
    order: 1;
  }

  .tech-area__keys li:nth-child(n+4) { order: 2; }
}

/* Images are cut-outs on white, placed loose in the right-hand column. They
   are taller than the cards and overlap the gaps, as drawn, so the column has
   no height of its own: each image hangs centred on its row and never pushes
   the card taller. Offsets per row are read off the overlay. */
.tech-area__media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 0;
}

.tech-area__media picture { flex: none; width: 100%; }

.tech-area__media img {
  display: block;
  width: 100%;
  height: auto;
}

@media (min-width: 1200px) {
  .tech-area__media { justify-self: center; width: 100%; }
  .tech-area--turbomachinery .tech-area__media { max-width: 330px; }
  .tech-area--rotating .tech-area__media       { max-width: 462px; }
  .tech-area--testing .tech-area__media        { max-width: 506px; }
  /* The last card holds its image inside it, so it is sized to sit within
     the 250px card rather than overhang it. */
  .tech-area--engineering .tech-area__media    { max-width: 330px; }
}

/* The offsets are read at the 1440 canvas and assume its right margin; below
   1400 the widest image would be pushed past the viewport, so the images
   simply centre in their column there. */
@media (min-width: 1400px) {
  .tech-area--turbomachinery .tech-area__media { transform: translate(72px, 27px); }
  .tech-area--rotating .tech-area__media       { transform: translate(26px, 63px); }
  .tech-area--testing .tech-area__media        { transform: translate(14px, -85px); }
  .tech-area--engineering .tech-area__media    { transform: translateX(-36px); }
}

/* --------------------------------------------------------------------------
   Closing CTA bar
   -------------------------------------------------------------------------- */

.tech-cta-wrap { padding-block: 25px 56px; }

.tech-cta {
  display: flex;
  align-items: center;
  gap: 36px;
  min-height: 128px;
  padding: var(--space-5) 89px var(--space-5) 64px;
  border-radius: 16px;
  background-image: linear-gradient(100deg, var(--blue-800), var(--navy-700));
  color: var(--ink-inverse);
}

.tech-cta__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 86px;
  height: 86px;
  border: 1.5px solid rgba(72, 196, 228, 0.55);
  border-radius: var(--radius-round);
}

.tech-cta__icon svg {
  width: 44px;
  height: 44px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.3;
}

.tech-cta__text {
  flex: 1 1 auto;
  font-size: clamp(1.125rem, 0.75rem + 0.95vw, 1.625rem);   /* 18 -> 26 */
  line-height: 1.42;
}

.tech-cta__btn {
  flex: none;
  justify-content: space-between;
  gap: var(--space-6);
  min-width: 431px;
  min-height: 70px;
  padding-inline: 42px 32px;
  font-size: 1.1875rem;    /* 19px, measured */
  border: 2px solid #2F7FE8;
  color: var(--ink-inverse);
}

.tech-cta__btn .btn__arrow { width: 24px; height: 24px; }

.tech-cta__btn:hover,
.tech-cta__btn:focus-visible {
  background-color: rgba(67, 155, 229, 0.16);
  border-color: var(--blue-400);
  color: var(--ink-inverse);
}

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

@media (max-width: 1199.98px) {
  .tech-area { grid-template-columns: minmax(0, 66fr) minmax(0, 34fr); gap: var(--space-5); }
  .tech-area::before { right: calc(34% + var(--space-5) / 2); }
  .tech-area--engineering::before { right: 0; }
  .tech-area--engineering .tech-area__media { padding-right: var(--space-5); }

  .tech-area__body { grid-template-columns: 140px minmax(0, 1fr); gap: 20px; padding-left: 28px; }
  .tech-area .icon-badge { width: 140px; height: 140px; }
  .tech-area .icon-badge svg { width: 92px; height: 92px; }
  .tech-area__copy { padding-left: 28px; }
  .tech-area__media { max-width: 340px; justify-self: center; }

  .tech-cta { padding-inline: 40px; gap: 28px; }
  .tech-cta__btn { min-width: 0; padding-inline: 28px 24px; font-size: 1rem; }
}

/* Tablet: every card runs full width and carries its image beneath the copy,
   so the loose right-hand arrangement gives way to one reading column. */
@media (max-width: 991.98px) {
  .page-hero--technology { grid-template-columns: minmax(0, 50fr) minmax(0, 50fr); min-height: 420px; }
  .page-hero--technology .page-hero__media { align-items: center; padding: var(--space-5); }
  .page-hero--technology .page-hero__media img { margin-bottom: 0; }

  .tech-area {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .tech-area::before,
  .tech-area--engineering::before { right: 0; }

  .tech-area--engineering .tech-area__media { padding-right: 0; }

  .tech-area__media {
    height: auto;
    max-width: 360px;
    padding: 0 var(--space-5) var(--space-6);
  }

  .tech-cta { flex-wrap: wrap; padding: var(--space-6) 40px; }
  .tech-cta__text { flex-basis: calc(100% - 86px - 28px); }
  .tech-cta__btn { margin-left: calc(86px + 28px); }
}

@media (max-width: 767.98px) {
  .page-hero--technology { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .page-hero--technology .page-hero__media { justify-content: center; padding: var(--space-5) var(--gutter); }
  .page-hero--technology .page-hero__media img { max-width: 440px; }

  .tech-areas { padding-top: var(--space-6); }

  .tech-area__body { grid-template-columns: 96px minmax(0, 1fr); gap: 18px; padding: 24px 20px; }
  .tech-area .icon-badge { width: 96px; height: 96px; }
  .tech-area .icon-badge svg { width: 60px; height: 60px; }
  .tech-area .icon-badge svg * { stroke-width: 1.3; }
  .tech-area__copy { padding-left: 18px; }
  .tech-area__title::after { margin-top: 12px; }
  .tech-area__keys { margin-top: 12px; }

  .tech-cta { padding: var(--space-6) var(--space-5); gap: var(--space-4); }
  .tech-cta__icon { width: 64px; height: 64px; }
  .tech-cta__icon svg { width: 32px; height: 32px; }
  .tech-cta__text { flex-basis: calc(100% - 64px - var(--space-4)); }
  .tech-cta__btn { margin-left: 0; }
}

/* Phone: the badge moves above the copy and the divider goes with it. */
@media (max-width: 479.98px) {
  .tech-area__body { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .tech-area .icon-badge { width: 80px; height: 80px; }
  .tech-area .icon-badge svg { width: 50px; height: 50px; }
  .tech-area__copy { padding-left: 0; border-left: none; }

  .tech-cta { flex-direction: column; align-items: flex-start; padding-inline: 20px; }
  .tech-cta__text { flex-basis: auto; }
}

/* Phones: the shared rule makes buttons full width and centred. The label and
   arrow are wider than a phone button at desktop type, so the label is
   smaller here and may wrap rather than spill past the border. */
@media (max-width: 575.98px) {
  .tech-cta__btn {
    gap: var(--space-3);
    min-height: 56px;
    padding-inline: 16px;
    font-size: 0.9375rem;
    white-space: normal;
  }

  .tech-cta__btn .btn__arrow { width: 18px; height: 18px; }
}