/* ==========================================================================
   MECAS Techsolutions - Industries page
   --------------------------------------------------------------------------
   Read off a 100px ruler overlay on design/reference/06-industries.jpg at a
   matched 1440 canvas (source is 1212 wide, so x1.188).

   HERO
     navy right edge      x 618               ->  42.9%
     navy block height    521px
     copy left inset      x 80
     title                "INDUSTRIES" 423 wide  ->  64px (token cap)
     rule                 93 x 4
     intro                3 lines, 519 wide, 40px pitch  ->  27px type
     gallery              image22, x 678-1376: 60px in from the navy edge,
                          64px from the viewport edge, full hero height

   INDUSTRY GRID
     4 columns across the full canvas, 2 rows on a ~302px pitch
     image area           ~177px tall, cut-outs on white
     badge                56px white disc, centred on the image's base
     title                blue uppercase, 237 and 364 wide  ->  16.6px
     description          centred, ~300 wide, 19.5px pitch     -> 16.5px

   CTA PANEL
     x 48-1392, 154 tall, pale blue, ~12px radius
     icon disc            x 97-205       ->  108px navy
     title                510 wide       ->  25px
     text                 2 lines, 32px pitch  ->  22px
     button               x 928-1336 (408 x 75), solid blue, 17.5px label

   CLOSING STRIP
     full-width navy, 107 tall
     shield               x 97, ~36 wide
     text                 x 162, 2 lines, 32px pitch  ->  21px
     divider              x 903
     button               x 1004-1306 (302 x 58), outlined, 16px label
   ========================================================================== */

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

.page-hero--industries {
  grid-template-columns: minmax(0, 42.9fr) minmax(0, 57.1fr);
  min-height: 521px;
}

.page-hero--industries .page-hero__panel {
  padding-inline: clamp(var(--gutter), 5.6vw, 80px) var(--space-4);   /* the intro's 519px line needs all but 19px of the panel */
}

.page-hero--industries .page-hero__rule { width: 93px; }

.page-hero--industries .page-hero__intro {
  margin-top: 30px;
  max-width: 540px;
  font-size: clamp(1.125rem, 0.5rem + 1.4vw, 1.6875rem);   /* 18 -> 27 */
  line-height: 1.48;
  color: var(--ink-inverse);
}

/* The mosaic sits 60px off the navy edge and 64px off the viewport edge, at
   the full height of the band. */
.page-hero--industries .page-hero__media {
  padding-inline: 7.3% 4.4%;
}

.page-hero--industries .page-hero__media picture { display: block; height: 100%; }

.page-hero--industries .page-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   Industry grid
   -------------------------------------------------------------------------- */

.industries { padding-block: 8px 20px; }

/* The columns are not equal in the design. Read from the title centres
   (x 162, 508, 876, 1262) they are 324, 368, 368 and 380 wide, and the third
   needs its width: "UNIVERSITIES & TECHNICAL INSTITUTIONS" is 364px. */
.industries__grid {
  display: grid;
  grid-template-columns: minmax(0, 324fr) minmax(0, 368fr) minmax(0, 368fr) minmax(0, 380fr);
  gap: 8px 0;
  max-width: 1440px;
  margin-inline: auto;
}

.industry-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.industry-card__media {
  --media-h: 177px;
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: var(--media-h);
}

/* An explicit height, not a percentage: inside <picture> a percentage
   max-height resolves to nothing, and the taller images then overflowed the
   box and covered the title beneath (same fault as D-048). */
.industry-card__media picture,
.industry-card__media img {
  display: block;
  max-width: 100%;
  max-height: var(--media-h);
  object-fit: contain;
}

/* Stands in for an image MECAS has not yet supplied (Q14). Sized to the
   drawn image so the grid is already final, and labelled so the gap is
   obvious on review. */
.industry-card__placeholder {
  display: grid;
  place-items: start center;
  width: min(280px, 88%);
  height: 100%;
  padding-top: var(--space-5);
  border: var(--border-w) dashed var(--border-strong);
  border-radius: 10px;
  background-color: var(--surface-alt);
  font-size: var(--fs-caption);
  color: var(--ink-muted);
}

.industry-card__badge {
  position: absolute;
  left: 50%;
  bottom: -28px;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  translate: -50% 0;
  border-radius: var(--radius-round);
  background-color: var(--white);
  box-shadow: 0 4px 14px rgba(11, 42, 91, 0.16);
  color: var(--color-action);
}

.industry-card__badge svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: currentColor;
}

.industry-card__title {
  margin-top: 42px;
  font-size: 1.0375rem;          /* 16.6px: the width both measured titles give */
  font-weight: var(--fw-bold);
  line-height: 1.25;
  text-transform: uppercase;
  color: var(--color-action);
}

.industry-card__text {
  margin-top: 6px;
  max-width: 300px;              /* every card keeps its drawn line count (3,4,3,4,3,3,3,3) */
  font-size: 1.03125rem;         /* 16.5px, measured */
  line-height: 1.19;
  color: var(--ink-muted);
}

/* --------------------------------------------------------------------------
   CTA panel
   -------------------------------------------------------------------------- */

.industries-cta-wrap {
  padding-inline: clamp(var(--gutter), 3.33vw, 48px);
  padding-bottom: 13px;
}

.industries-cta {
  display: flex;
  align-items: center;
  gap: 35px;
  max-width: 1344px;
  min-height: 154px;
  margin-inline: auto;
  padding: var(--space-5) 56px var(--space-5) 49px;
  border-radius: 12px;
  background-color: var(--blue-050);
}

.industries-cta__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 108px;
  height: 108px;
  border-radius: var(--radius-round);
  background-color: var(--navy-700);
  color: var(--ink-inverse);
}

.industries-cta__icon svg {
  width: 54px;
  height: 54px;
  fill: none;
  stroke: currentColor;
}

.industries-cta__copy { flex: 1 1 auto; }

.industries-cta__title {
  font-family: var(--font-heading);
  font-size: clamp(1.25rem, 0.8rem + 0.95vw, 1.5625rem);   /* 20 -> 25 */
  font-weight: var(--fw-bold);
  line-height: 1.25;
  color: var(--ink-heading);
}

.industries-cta__text {
  margin-top: 6px;
  max-width: 580px;
  font-size: clamp(1.0625rem, 0.7rem + 0.75vw, 1.375rem);  /* 17 -> 22 */
  line-height: 1.45;
  color: var(--ink);
}

.industries-cta__btn {
  flex: none;
  justify-content: space-between;
  gap: var(--space-6);
  min-width: 408px;
  min-height: 75px;
  padding-inline: 38px 32px;
  font-size: 1.09375rem;          /* 17.5px, measured */
  border-radius: 6px;
}

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

/* --------------------------------------------------------------------------
   Closing strip
   -------------------------------------------------------------------------- */

.industries-strip {
  background-color: var(--navy-700);
  color: var(--ink-inverse);
}

.industries-strip__inner {
  display: flex;
  align-items: center;
  min-height: 107px;
  max-width: 1440px;
  margin-inline: auto;
  padding: var(--space-4) clamp(var(--gutter), 9.3vw, 134px) var(--space-4) clamp(var(--gutter), 6.7vw, 97px);
}

.industries-strip__icon { flex: none; width: 36px; height: 44px; }

.industries-strip__icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
}

/* The text runs to a divider at x 903, and the button starts 101px after it. */
.industries-strip__text {
  flex: 1 1 auto;
  margin-left: 29px;
  padding-right: 131px;           /* text measures 610, divider stands at 741 */
  max-width: 741px;
  border-right: var(--border-w) solid rgba(255, 255, 255, 0.22);
  font-size: clamp(1.0625rem, 0.75rem + 0.65vw, 1.3125rem);  /* 17 -> 21 */
  line-height: 1.52;
}

.industries-strip__btn {
  flex: none;
  justify-content: space-between;
  gap: var(--space-6);
  min-width: 302px;
  min-height: 58px;
  margin-left: auto;
  padding-inline: 95px 26px;
  font-size: 1rem;
  border-radius: 6px;
}

.industries-strip__btn .btn__arrow { width: 24px; height: 24px; }

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

@media (max-width: 1199.98px) {
  /* Below the design canvas the full-bleed columns lose their natural margins
     and neighbouring descriptions start to touch. */
  .industries__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--space-4); padding-inline: var(--gutter); }

  .industries-cta { flex-wrap: wrap; padding: var(--space-6) 40px; }
  .industries-cta__copy { flex-basis: calc(100% - 108px - 35px); }
  .industries-cta__btn { margin-left: calc(108px + 35px); min-width: 0; }

  .industries-strip__btn { padding-inline: 32px 24px; min-width: 0; }
  .industries-strip__text { padding-right: var(--space-6); }
}

@media (max-width: 991.98px) {
  .page-hero--industries { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .page-hero--industries .page-hero__media { padding: var(--space-5) var(--gutter); }
  .page-hero--industries .page-hero__media img { height: auto; }

  .industries { padding-top: var(--space-6); }
  .industries__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-7) var(--space-5); padding-inline: var(--gutter); }
  .industry-card__text { max-width: 340px; }

  .industries-strip__inner { flex-wrap: wrap; gap: var(--space-4); padding-block: var(--space-6); }
  .industries-strip__text { flex-basis: calc(100% - 36px - 29px); margin-left: 0; padding-right: 0; border-right: none; max-width: none; }
  .industries-strip__btn { margin-left: calc(36px + var(--space-4)); }
}

@media (max-width: 767.98px) {
  .industries-cta { flex-direction: column; align-items: flex-start; gap: var(--space-4); padding: var(--space-6) var(--space-5); }
  .industries-cta__icon { width: 72px; height: 72px; }
  .industries-cta__icon svg { width: 36px; height: 36px; }
  .industries-cta__copy { flex-basis: auto; }
  .industries-cta__btn { margin-left: 0; }

  .industries-strip__btn { margin-left: 0; }
}

@media (max-width: 575.98px) {
  .industries__grid { grid-template-columns: minmax(0, 1fr); }

  /* Shared rule makes phone buttons full width and centred; the labels here
     are longer than a phone button at desktop type. */
  .industries-cta__btn,
  .industries-strip__btn {
    gap: var(--space-3);
    min-height: 56px;
    padding-inline: 16px;
    font-size: 0.9375rem;
    white-space: normal;
  }

  .industries-cta__btn .btn__arrow,
  .industries-strip__btn .btn__arrow { width: 18px; height: 18px; }
}