/* ==========================================================================
   MECAS Techsolutions - Products page
   --------------------------------------------------------------------------
   Measured from design/reference/02-products.jpg at a 1440 canvas:

     hero band          806px tall
     navy / media split x 581 of 1024  ->  56.7%
     portfolio rows     icon badge + heading + bulleted list, image right
     row separator      hairline between rows, none above the first

   The hero uses the shared .page-hero. Only the split ratio differs from the
   default, so it is nudged here rather than forked into a new pattern.
   ========================================================================== */

.page-hero { grid-template-columns: minmax(0, 56.7fr) minmax(0, 43.3fr); }

/* --------------------------------------------------------------------------
   Portfolio rows
   -------------------------------------------------------------------------- */

.product-rows { margin-top: var(--space-6); }

.content-row__title {
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  color: var(--ink-heading);
}

.content-row .list-bullet { margin-top: var(--space-4); }

.content-row__media picture,
.content-row__media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}

/* Thermal / Energy carries no image in the design, so its copy takes the full
   width rather than leaving an empty media cell. */
.content-row--no-media { grid-template-columns: minmax(0, 1fr); }

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

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

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

  .page-hero__media {
    display: grid;
    place-items: center;
    padding: var(--space-5) var(--gutter);
    background-color: var(--white);
  }

  .page-hero__media img {
    height: auto;
    max-width: 420px;
    object-fit: contain;
  }
}