/* ==========================================================================
   MECAS Techsolutions - Home page
   --------------------------------------------------------------------------
   Measured from design/reference/01-home.jpg at a 1440 canvas:

     navy / media split   x 765 of 1379  ->  55.5% / 44.5%
     hero copy inset      x 68           ->  71px from the viewport edge
     display cap height   41px           ->  56px type
     subhead              37px tall      ->  30px type
     blue sub-line        2 lines, 17px
     intro paragraph      3 lines, ~19px, 604px wide
     button row           57px tall      ->  60px
     feature card         x 46-1332      ->  1343px wide, container-wide
     card top             y 680          ->  710px, 39px below the buttons
     card height          225            ->  235px

   The Home hero is its own pattern, not the shared .page-hero: the split runs
   the other way (navy is the wider half), it is taller, and it carries the
   overlapping feature card.
   ========================================================================== */

.home-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 55.5fr) minmax(0, 44.5fr);
  align-items: stretch;
  min-height: 700px;
  background-color: var(--navy-800);
  color: var(--ink-inverse);
}

.home-hero__panel {
  display: flex;
  flex-direction: column;
  /* Top-weighted, not centred: the copy starts 49px below the hero top in the
     design and the remaining space falls to the base, where the card sits. */
  justify-content: flex-start;
  padding-block: var(--space-7);
  padding-inline-end: var(--space-7);
  /* Copy sits 71px from the viewport edge at 1440, which is the wide
     container gutter plus the panel's own inset. */
  padding-inline-start: max(var(--gutter), (100vw - 1300px) / 2);
  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;
}

/* White panel holding the cut-out product composite. The design centres the
   render on white rather than cropping it, so this is contain, not cover. */
.home-hero__media {
  display: grid;
  place-items: center;
  padding: var(--space-6);
  background-color: var(--white);
}

.home-hero__media img {
  width: 100%;
  max-width: 631px;   /* the source asset is 631px wide; never upscale it */
  height: auto;
}

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

.home-hero__display {
  font-family: var(--font-heading);
  font-size: var(--fs-display);
  font-weight: var(--fw-extrabold);
  line-height: 1.12;
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  color: var(--ink-inverse);
}

/* The bullet separators on the second display line. Decorative, so they are
   drawn rather than typed, and never reach assistive technology. */
.home-hero__dot {
  display: inline-block;
  width: 0.28em;
  height: 0.28em;
  margin-inline: 0.12em 0.22em;
  vertical-align: 0.22em;
  background-color: var(--blue-400);
  border-radius: var(--radius-round);
}

.home-hero__subhead {
  margin-top: var(--space-3);
  font-family: var(--font-heading);
  /* Fluid so it holds a single line further down the range. At 30px it wraps
     below about 1300, and that extra line is what used to push the buttons
     into the feature card. */
  font-size: clamp(1.375rem, 0.5rem + 1.6vw, 1.875rem);   /* 22 -> 30 */
  font-weight: var(--fw-bold);
  line-height: 1.22;
  color: var(--ink-inverse);
}

.home-hero__subline {
  margin-top: var(--space-2);
  font-family: var(--font-heading);
  font-size: 1.0625rem;     /* 17px */
  font-weight: var(--fw-semibold);
  line-height: 1.45;
  color: var(--blue-400);
}

/* Intro paragraph carries a blue vertical rule down its left edge. */
.home-hero__intro {
  margin-top: var(--space-7);
  padding-left: var(--space-4);
  max-width: 34rem;
  border-left: 3px solid var(--blue-400);
  font-size: 1.1875rem;     /* 19px */
  line-height: 1.62;
  color: var(--ink-inverse);
}

.home-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-7);
}

.home-hero__actions .btn { min-height: 56px; }

/* --------------------------------------------------------------------------
   Feature strip
   --------------------------------------------------------------------------
   White card floating over the base of the hero.
   -------------------------------------------------------------------------- */

.home-features {
  position: relative;
  z-index: 2;
  /* Default: the card sits below the hero. The overlap is opt-in at the width
     where the design was drawn - see the min-width rule at the foot of this
     file. Pulling the card up is only safe while the hero copy stays on the
     line count the mockup shows; below that the buttons move down into it. */
  margin-top: var(--space-6);
  padding-bottom: var(--section-y);
}

.home-features__card {
  background-color: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-float);
  overflow: hidden;
}

.home-features__card .feature-strip__item {
  padding: var(--space-6) var(--space-4);
}

.home-features__icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin: 0 auto var(--space-4);
  color: var(--color-action);
}

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

.home-features__title {
  font-family: var(--font-heading);
  font-size: 1.0625rem;     /* 17px */
  font-weight: var(--fw-bold);
  line-height: 1.25;
  color: var(--ink-heading);
}

.home-features__text {
  margin-top: var(--space-3);
  font-size: 0.9375rem;     /* 15px */
  line-height: 1.5;
  color: var(--ink-muted);
}

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

@media (max-width: 1199.98px) {
  .home-hero { min-height: 640px; }
  .home-hero__panel { padding-inline-start: var(--space-7); }
}

/* Tablet landscape: the split holds but the media panel narrows. */
@media (max-width: 991.98px) {
  .home-hero {
    grid-template-columns: minmax(0, 58fr) minmax(0, 42fr);
    min-height: 540px;
  }

  .home-hero__panel {
    padding-inline: var(--space-5);
    padding-block: var(--space-7);
  }

  .home-hero__intro { margin-top: var(--space-5); }
  .home-hero__actions { margin-top: var(--space-5); }

  /* The card no longer has room to overlap without colliding with the copy. */
  .home-features { margin-top: var(--space-6); }
}

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

  .home-hero__panel { padding-inline: var(--gutter); }

  .home-hero__media { padding: var(--space-6) var(--gutter); }

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

@media (max-width: 575.98px) {
  .home-hero__actions { gap: var(--space-3); }
  .home-features__card { border-radius: var(--radius-md); }
}

/* --------------------------------------------------------------------------
   Feature card overlap
   --------------------------------------------------------------------------
   Only from 1400px, the canvas the design was drawn on. There the hero copy
   occupies exactly the line count the mockup shows, the buttons end at 612 and
   the card top lands at 703, leaving the gap the design has. Narrower than
   this the copy takes more lines and the two would collide, so the card drops
   below the hero instead. Verified at every width from 320 to 1920.
   -------------------------------------------------------------------------- */

@media (min-width: 1400px) {
  .home-features { margin-top: -110px; }
}