/* ==========================================================================
   MECAS Techsolutions - Layout
   --------------------------------------------------------------------------
   Containers, section rhythm and the page-level structural patterns taken
   from the design. Bootstrap grid handles column maths; everything here is
   the shape the design actually uses.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Containers
   -------------------------------------------------------------------------- */

.container-mecas {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container-wide {
  width: 100%;
  max-width: var(--container-wide);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* --------------------------------------------------------------------------
   2. Section rhythm
   -------------------------------------------------------------------------- */

.section { padding-block: var(--section-y); }

.section--tight        { padding-block: var(--section-y-sm); }
.section--flush-top    { padding-top: 0; }
.section--flush-bottom { padding-bottom: 0; }

/* The design alternates a plain ground with a faint blue-grey ground. */
.section--alt  { background-color: var(--surface-alt); }

.section--dark {
  background-color: var(--navy-700);
  color: var(--ink-inverse);
}

.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4 { color: var(--ink-inverse); }

/* --------------------------------------------------------------------------
   3. Page hero - the signature asymmetric navy split
   --------------------------------------------------------------------------
   A hard-edged navy panel occupies the left portion of the viewport and the
   media butts directly against it with no gap and no rounding. That split is
   the identity of this design, so it is preserved down to tablet and only
   stacks when the copy panel can no longer hold a readable measure.
   -------------------------------------------------------------------------- */

.page-hero {
  position: relative;
  display: grid;
  /* Copy panel is the narrower half, matching the mockups. */
  grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
  align-items: stretch;
  min-height: 420px;
  background-color: var(--navy-800);
  color: var(--ink-inverse);
  isolation: isolate;
}

.page-hero__panel {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-8) var(--space-7);
  /* Measured across mockups 02, 04, 06 and 07: the copy sits 79-84px from the
     viewport edge, not aligned to the 1200 container. Aligning to the container
     put it at 120px, a size and a half too far in. */
  padding-inline-start: clamp(var(--gutter), 5.7vw, 82px);
  /* Blueprint line texture over the navy gradient, as in the About and
     Technology heroes. Stacked as background layers rather than a pseudo
     element: a negative z-index child would paint behind the panel's own
     background and never show. */
  background-image:
    linear-gradient(to right,  rgba(67, 155, 229, 0.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(67, 155, 229, 0.07) 1px, transparent 1px),
    var(--gradient-hero);
  background-size: 46px 46px, 46px 46px, auto;
}

/* Full-width variant for pages with no hero imagery, such as the legal pages.
   Same navy ground and texture, no empty media half. */
.page-hero--plain {
  grid-template-columns: minmax(0, 1fr);
  min-height: 300px;
}

.page-hero--plain .page-hero__panel {
  padding-inline-end: max(var(--space-7), (100vw - var(--container-max)) / 2);
}

.page-hero--plain .page-hero__intro { max-width: 58ch; }

.page-hero__media {
  position: relative;
  min-height: 100%;
  background-color: var(--white);
  overflow: hidden;
}

.page-hero__media > img,
.page-hero__media > picture > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-hero__eyebrow {
  margin-bottom: var(--space-3);
  font-family: var(--font-heading);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-inverse-muted);
}

/* The panel narrows faster than the title size does, so near 1024 a long
   word ("ENGINEERING", "TECHNOLOGY", both about 7.4em) no longer fits and
   breaks mid-word. The panel is a size container and the title is capped to
   it: 13.2cqi keeps a 7.4em word inside the panel at every width, and at the
   design width the token size still wins. The first declaration is the
   fallback where container units are unsupported. */
.page-hero__panel { container-type: inline-size; }

.page-hero__title {
  font-size: var(--fs-title);
  font-size: min(var(--fs-title), 13.2cqi);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  color: var(--ink-inverse);
}

/* The short blue rule under the page title, as drawn on every inner hero.
   It used to live in products.css, so on Services and Capabilities the span
   was in the markup but rendered nothing. */
.page-hero__rule {
  display: block;
  width: var(--rule-len);
  height: var(--rule-w);
  margin-top: var(--space-5);
  background-color: var(--color-rule);
}

.page-hero__subtitle {
  margin-top: var(--space-4);
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  color: var(--blue-400);
}

.page-hero__intro {
  margin-top: var(--space-4);
  max-width: 46ch;
  font-size: var(--fs-lead);
  color: var(--ink-inverse-muted);
}

/* --------------------------------------------------------------------------
   4. Content row - icon badge plus copy on the left, media on the right
   --------------------------------------------------------------------------
   The workhorse of Products, Services and Technology Areas.
   -------------------------------------------------------------------------- */

.content-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.62fr);
  gap: var(--grid-gap);
  align-items: start;
  padding-block: var(--space-6);
}

.content-row + .content-row { border-top: var(--border-w) solid var(--border); }

.content-row__body {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
}

.content-row__media img { border-radius: var(--radius-md); }

/* --------------------------------------------------------------------------
   5. Grids
   -------------------------------------------------------------------------- */

.grid { display: grid; gap: var(--grid-gap); }

.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Auto-fit grids reflow without a media query at every step, which is what
   keeps the intermediate widths from breaking. */
.grid--auto-sm { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.grid--auto-md { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

/* --------------------------------------------------------------------------
   6. Feature strip - divider-separated row (Home, About)
   -------------------------------------------------------------------------- */

.feature-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.feature-strip__item {
  padding: var(--space-5) var(--space-4);
  text-align: center;
}

/* Dividers sit between items only, never on the outer edges. */
.feature-strip__item + .feature-strip__item {
  border-left: var(--border-w) solid var(--border);
}

/* --------------------------------------------------------------------------
   7. Responsive
   --------------------------------------------------------------------------
   Rules are co-located with the pattern they modify rather than collected in
   a separate responsive.css, so changing a pattern touches one place.
   Breakpoints follow Bootstrap so the grid and the custom CSS agree.
   -------------------------------------------------------------------------- */

/* Below 1200px the hero panel rejoins the normal gutter. */
@media (max-width: 1199.98px) {
  .page-hero__panel { padding-inline-start: var(--space-7); }
}

/* Tablet landscape: the split survives, copy panel takes the larger share. */
@media (max-width: 991.98px) {
  .page-hero {
    grid-template-columns: minmax(0, 54fr) minmax(0, 46fr);
    min-height: 360px;
  }

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

  .content-row { grid-template-columns: minmax(0, 1fr); }

  .content-row__media {
    order: -1;
    max-width: 420px;
  }

  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Tablet portrait and below: the split stacks. The navy panel stays on top so
   the page still opens on the brand colour, as the desktop design does. */
@media (max-width: 767.98px) {
  .page-hero {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }

  .page-hero__panel {
    padding: var(--space-7) var(--gutter);
    padding-inline-start: var(--gutter);
  }

  .page-hero__media { min-height: 240px; }

  .page-hero__intro { max-width: none; }

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

  .feature-strip__item + .feature-strip__item {
    border-left: none;
    border-top: var(--border-w) solid var(--border);
  }
}

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

  .content-row__media { max-width: none; }
}