/* ============================================================
   HERO — Section 01
   Figma: 8106:50400 (desktop 1440x758) · 8106:63054 (mobile 390)

   Height behaviour is a designer instruction, not a guess:
   desktop fills the viewport, mobile stays content-driven so nothing
   is cropped. See Neem's hero annotation.
   ============================================================ */

.masaar-hero {
  display: flex;
  align-items: center;
  overflow: clip;
  padding-block: 120px var(--space-40);   /* mobile: 120 top clears the navbar */
  color: var(--masaar-white);
  isolation: isolate;
}

/* --- Background -------------------------------------------- */

.masaar-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: clip;
  background: var(--masaar-white);
}

.masaar-hero__media {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.masaar-hero__gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.35) 0%,
    var(--masaar-moss) 51.632%
  );
}

/* --- Layout ------------------------------------------------ */

.masaar-hero__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
  inline-size: 100%;
}

.masaar-hero__left {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  align-items: flex-start;
}

.masaar-hero__right {
  display: flex;
  flex-direction: column;
}

.masaar-hero__heading {
  /* Set explicitly, not inherited: the theme's branding-en.css declares
     `h1, h2, h3 { color: #000 }`, which matches this element directly and
     therefore beats any colour inherited from the section. */
  color: var(--masaar-white);
}

.masaar-hero__subheading {
  color: var(--text-on-dark);
}

/* --- Price tag --------------------------------------------- */

.masaar-hero__tag {
  font-size: var(--fs-body-l);
}

.masaar-hero__tag-dot {
  inline-size: var(--space-4);
  block-size: var(--space-4);
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

.masaar-hero__price {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
}

/* --- Payment plan strip ------------------------------------ *
   Sits behind the form card and is overlapped by it: the card pulls
   up over the strip's lower padding (mb -20 mobile / -16 desktop in
   Figma), which is why the strip carries extra bottom padding.      */

.masaar-payment-plan {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  justify-content: center;
  padding-inline: var(--space-16);
  padding-block: var(--space-12) var(--space-32);
  margin-block-end: -20px;
  border-start-start-radius: var(--radius-tag);
  border-start-end-radius: var(--radius-tag);
  background: var(--masaar-sage);
  color: var(--masaar-black);
  overflow: clip;
}

.masaar-payment-plan__label {
  font-size: var(--fs-body-m);
  opacity: 0.75;
}

.masaar-payment-plan__list {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  margin: 0;
  padding: 0;
  list-style: none;
}

.masaar-payment-plan__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

/* --- Tablet ------------------------------------------------ */

@media (min-width: 768px) {
  /* The tablet master (8362:64194) is TWO COLUMNS: the form at x=32 w=350 and
     the copy at x=422 w=314, 40 apart. Row only started at 1200, so tablet
     stacked them and the hero ran ~216 taller than the design.

     align-items: center is what the master shows -- the form (80..606) and the
     copy (115..571) share a centre line at 343. */
  .masaar-hero__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-40);
  }

  .masaar-hero__left {
    inline-size: 314px;
    max-inline-size: 100%;
  }

  .masaar-hero__right {
    align-self: center;
    flex: none;
    inline-size: var(--form-width);
  }
}

/* --- Desktop ----------------------------------------------- */

@media (min-width: 1200px) {
  .masaar-hero {
    /* Designer instruction: full viewport height on desktop only. */
    min-block-size: 100vh;
    min-block-size: 100dvh;

















    padding-block: var(--space-80);
  }

  .masaar-hero__bg .masaar-hero__gradient {
    background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.4) 0%,
      var(--masaar-moss) 100%
    );
  }

  .masaar-hero__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-40);
  }

  .masaar-hero__left {
    gap: var(--space-16);
    inline-size: 759px;
    max-inline-size: 100%;
  }

  .masaar-hero__right {
    align-self: center;
    flex: none;
  }

  .masaar-hero__tag {
    font-size: 18px;
  }

  .masaar-payment-plan {
    padding-inline: var(--space-24);
    margin-block-end: -16px;
  }

  .masaar-payment-plan__label {
    font-size: var(--fs-body-l);
  }
}