/* =====================================================================
   Hero Banner — two-column hero (image + text + CTA) on a pale-blue->white
   vertical gradient band. Figma OneGold 2.0 desktop 6190:23923 (+ "M -" mobile).
   Variants: Image = Right (default, text left) and Image = Left (text right),
   toggled by the .hero-banner--image-left modifier. Tokens only, BEM.

   Desktop (1440 frame): pale-blue->white gradient, ~600px tall band, content
   locked to the 1240 area via .container. Two 600px columns spaced apart, 40px
   intra-column gap. H1 Axiforma Medium 44/55, Large Body Axiforma Regular 24/1.3,
   CTA = house .btn--primary. Image placeholder: 600x400, --radius-4.
   Mobile (<=767.98px): stack to a single column (image below text), reduce type.
   ===================================================================== */

.hero-banner {
  /* pale-blue (#f3f8ff) at top -> white at bottom */
  background-image: linear-gradient(to bottom, var(--pale-blue), var(--gray-0));
  padding-block: var(--home-sec-pad-y); /* 80px breathing room */
}

.hero-banner__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--home-hero-gap); /* 80px */
}

/* --- Variant: Image = Left -> flip the column order so media leads --- */
.hero-banner--image-left .hero-banner__inner {
  flex-direction: row-reverse;
}

/* --- Text content column ------------------------------------------- */
.hero-banner__content {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--home-steps-stack-gap); /* 40px */
  min-width: 0;
}

/* H1 — OG Desktop H1 (Axiforma Medium 44/55) */
.hero-banner__heading {
  margin: 0;
  font-weight: var(--fw-medium);
  font-size: var(--fs-44);
  line-height: var(--lh-55); /* 55px */
  color: var(--gray-8);
  word-break: break-word;
}

/* Body — OG Desktop Large Body (Axiforma Regular 24/1.3) */
.hero-banner__body {
  margin: 0;
  font-weight: var(--fw-regular);
  font-size: var(--fs-24);
  line-height: 1.3;
  color: var(--gray-8);
  word-break: break-word;
}

/* CTA — reuses .btn/.btn--primary; 160px pill that grows for longer labels
   (e.g. "Contact Gold Avenue") instead of clipping them. */
.hero-banner__cta {
  min-width: var(--hero-banner-cta-w); /* 160px */
  white-space: nowrap;
}

/* --- Media (image) column ------------------------------------------ */
.hero-banner__media {
  flex: 0 0 auto;
  width: var(--hero-banner-media-w);   /* 600px */
  height: var(--hero-banner-media-h);  /* 400px */
}

.hero-banner__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--gray-7); /* placeholder fill while image loads / if absent */
  border-radius: var(--radius-4);
}

/* --- Tablet (600–1023px): Archetype E — heading/padding step; Archetype C —
   media column narrows; both columns stay side-by-side above 767.98px. ---- */
@media (max-width: 1023.98px) {
  .hero-banner {
    padding-block: clamp(40px, 6vw, 80px);
  }

  .hero-banner__inner {
    gap: clamp(24px, 4vw, 80px);
  }

  .hero-banner__heading {
    font-size: clamp(32px, 5vw, var(--fs-44));
    line-height: 1.3;
  }

  .hero-banner__body {
    font-size: clamp(18px, 2.5vw, var(--fs-24));
    line-height: 1.35;
  }

  /* Media column: shrink from fixed 600px to fluid half-width */
  .hero-banner__media {
    width: 45%;
    height: auto;
    aspect-ratio: 3 / 2;
  }
}

/* --- Mobile ("M -" variant; 390 frame, stack columns) -------------- */
@media (max-width: 767.98px) {
  .hero-banner {
    padding-block: var(--ba-pad-y); /* 40px */
  }

  /* Both variants collapse to a single column; text first, image below. */
  .hero-banner__inner,
  .hero-banner--image-left .hero-banner__inner {
    flex-direction: column;
    align-items: stretch;
    gap: var(--home-steps-stack-gap); /* 40px */
  }

  .hero-banner__content {
    align-items: flex-start;
    gap: var(--home-stack-gap); /* 20px */
    width: 100%;
  }

  .hero-banner__heading {
    font-size: var(--fs-26);   /* OG Mobile H2 */
    line-height: var(--lh-36); /* 36px */
  }

  .hero-banner__body {
    font-size: var(--fs-18);   /* OG Mobile Large Body */
    line-height: var(--lh-25); /* 25px */
  }

  .hero-banner__cta {
    width: auto; /* let the pill size to its label on mobile */
  }

  .hero-banner__media {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2; /* preserves the 600x400 ratio fluidly */
  }
}