/* ============================================================
   INTRO — Section 02
   Figma: header 8106:50781 · phase card 8106:50785 · metric 8106:50788

   Desktop geometry read from the file, not guessed:
     section padding-block 90 / gutter 64 · content width 1312
     header: two 537px columns, space-between
     phase cards: 648x499, 16px gap, radius 16, padding 24
     tags: rgba(255,255,255,.25) + backdrop-blur(5px), radius 6, 8/4 padding
     metrics: 4 x 316x200, 16px gap, ground #f9f9f9, radius 16, padding 24
   Mobile geometry (Section 02 master on Home Seeker / Mobile, 1882 tall):
     section padding-block 60 · head 264 · head-to-body gap 40
     body 1458 = phase cards 896 + 24 + metrics 464 + 24 + CTA 50
     phase card 440 (2 stacked, 16 gap) · metric 224 (2x2, 16 gap)
   ============================================================ */

.masaar-intro {
  background: var(--section-bg, var(--masaar-white));
  padding-block: 60px;
}

.masaar-intro__inner {
  display: flex;
  flex-direction: column;
  /* The body's blocks sit 24 apart; only the head is 40 clear of them. */
  gap: var(--space-24);
}

/* --- Header ------------------------------------------------- */

.masaar-intro__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

/* Explicit, not inherited: the theme's branding-{lang}.css declares
   `h1, h2, h3 { color: #000 }`, which matches these elements directly and
   beats any colour inherited from the section. */
.masaar-intro__heading {
  color: var(--masaar-black);
}

.masaar-intro__body {
  color: var(--masaar-grey-80);
}

/* --- Phase cards -------------------------------------------- */

.masaar-phase-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-16);
  /* 16 on top of the inner's 24 makes the 40 the design puts between the
     head and the body. Reset at desktop, where the inner gap is already 48. */
  margin: var(--space-16) 0 0;
  padding: 0;
  list-style: none;
}

.masaar-phase-card {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-block-size: 440px;
  padding: var(--space-24);
  border-radius: var(--radius-panel);
  overflow: clip;
  isolation: isolate;
  background: var(--masaar-grey-10);
}

.masaar-phase-card > * {
  position: relative;
  z-index: 1;
}

.masaar-phase-card__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.masaar-phase-card__scrim {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.35) 49.699%,
    var(--masaar-moss) 100%
  );
}

.masaar-phase-card__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  inline-size: 100%;
  z-index: 2;
}

/* Direct colour — see the note on .masaar-intro__heading above. */
.masaar-phase-card__title {
  color: var(--masaar-white);
}

.masaar-phase-card__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-12);
  margin: 0;
  padding: 0;
  list-style: none;
}

.masaar-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-inline: var(--space-8);
  padding-block: var(--space-4);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(5px);
  color: var(--masaar-white);
  font-weight: var(--fw-bold);
  font-size: var(--fs-label);
  line-height: var(--lh-tight);
  white-space: nowrap;
}

.masaar-phase-card__text {
  color: var(--masaar-white);
  font-size: var(--fs-body-m);
  line-height: var(--lh-tight);
}

/* --- Metrics ------------------------------------------------ */

/* This CTA row and its button are 50, not the default 44. --control-height
   inherits, so setting it on the row sizes the button too, and base.css
   applies it as a fixed block-size. */
.masaar-intro__cta {
  --control-height: 50px;
  min-block-size: 50px;
}

.masaar-metrics {
  display: grid;
  /* minmax(0, 1fr), not 1fr: 1fr floors at min-content, so the long metric
     values ("100,000+", "20 min") pushed the second column 57px past the
     390 viewport and the cards were clipped. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-16);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* The card itself lives in base.css, shared with the Investment Case.
   Only its height is specific to this section. */
.masaar-metric { min-block-size: 224px; }

.masaar-metric__top {
  display: flex;
  align-items: center;
  gap: var(--space-12);
}

.masaar-metric__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-8);
  border-radius: 1000px;
  flex: none;
}

.masaar-metric__icon--maple { background: var(--masaar-maple); }
.masaar-metric__icon--sage  { background: var(--masaar-sage); }
.masaar-metric__icon--coral { background: var(--masaar-coral); }
.masaar-metric__icon--stone { background: var(--masaar-stone); }

.masaar-metric__icon img {
  inline-size: 24px;
  block-size: 24px;
}

/* The design carries two forms of a long value and swaps them by breakpoint:
   desktop and tablet "100,000+", mobile "100K+". Only one is ever visible. */
.masaar-metric__value-short { display: none; }

@media (max-width: 767px) {
  .masaar-metric__value-long  { display: none; }
  .masaar-metric__value-short { display: inline; }

  /* THE 390 MASTER STACKS THE ICON ABOVE THE VALUE (8106:66218); only the
     desktop (8106:50877) and tablet (8214:50086) masters put them on one
     line. Built as a row at every width, the 40px icon plus the 12px gap
     left only 83px of the card's 135px content box for a 36px value, so
     "100K+" (109) and "20 min" (116) painted outside the card — and "12 km"
     (95) overflowed too, just not past the viewport edge. M3ID-2.

     Padding 16, gap 12 and the 224 card height already match the master;
     direction was the only thing wrong. */
  .masaar-metric__top {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* --- CTA ---------------------------------------------------- */

.masaar-intro__cta {
  display: flex;
  justify-content: center;
}

.masaar-button--light {
  background: var(--masaar-white);
  --btn-border: 1px solid rgba(0, 0, 0, 0.12);
  color: var(--masaar-black);
}

.masaar-button--light:hover,
.masaar-button--light:focus-visible {
  /* TODO: hover treatment not specified in the Figma — holding value. */
  background: var(--masaar-grey-10);
}

.masaar-icon--sm {
  inline-size: 20px;
  block-size: 20px;
}

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

@media (min-width: 768px) {
  .masaar-phase-cards,
  .masaar-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Tablet had never been sized: this block set the column count and nothing
     else, so 768-1199 inherited the MOBILE gallery, padding and card height
     until desktop took over at 1200. Measured against the AR tablet master
     (8362:64221, 768x1507): padding-block 80, head/gallery/metrics 48 apart,
     gallery 520, metric cards 343x200.

     Safe to put on min-width alone rather than a range: the desktop block
     below re-declares padding, gap and the slide height, and already uses
     200 for the card. */
  .masaar-intro {
    padding-block: 80px;
  }

  .masaar-intro__inner {
    gap: 48px;
  }


  .masaar-metric {
    min-block-size: 200px;
  }
}

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

@media (min-width: 1200px) {
  .masaar-intro {
    padding-block: 90px;
  }

  .masaar-intro__inner {
    gap: 48px;
  }

  /* The metrics row and the CTA are ONE frame in the design (8110:32173,
     274 tall = 200 + 24 + 50), so they sit 24 apart rather than taking the
     48 that separates the section's blocks. */
  .masaar-intro__cta {
    margin-block-start: calc(var(--space-24) - 48px);
  }

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

  .masaar-intro__heading,
  .masaar-intro__copy {
    inline-size: 537px;
    max-inline-size: 100%;
    flex: none;
  }

  .masaar-intro__body { inline-size: 100%; }

  .masaar-phase-cards { margin-block-start: 0; }

  .masaar-phase-card {
    min-block-size: 499px;
  }

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

  .masaar-metric {
    min-block-size: 200px;
  }
}

/* --- Image-card hover (desktop) -----------------------------

   Neem, bug report 2026-09-02: the image cards feel static on desktop. Only
   the IMAGE scales -- the card keeps its own dimensions, and the `overflow:
   clip` already on the card does the containing, so nothing escapes the
   rounded boundary. No pointer cursor: these cards are not links, and the
   report explicitly rules one out.

   Gated on (hover: hover) as well as the desktop width so a touch device
   cannot land in a stuck hover state after a tap. The reduced-motion block in
   base.css already zeroes the transition for anyone who asks for that. */

@media (min-width: 1200px) and (hover: hover) {
  .masaar-phase-card__media {
    transition: transform 350ms ease-out;
  }

  .masaar-phase-card:hover .masaar-phase-card__media {
    transform: scale(1.1);
  }
}

/* --- Single-phase layout (Dalia-only, 8362:61724) ------------

   Same section, different body: the tags move up under the copy and the two
   phase cards are replaced by one image carousel. Built on the same scroll-snap
   track and shared .masaar-dots / .masaar-round-button controls as the
   amenities and listings carousels, so touch, keyboard and RTL behave the same
   rather than this being a third pattern to maintain. */

/* The design's intro tags are sage, not the maple .masaar-tag defaults to. */
.masaar-tag--sage {
  background: var(--masaar-sage);
}

.masaar-intro__copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.masaar-intro__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  margin: 0;
  padding: 0;
  list-style: none;
}

.masaar-intro__gallery {
  position: relative;
}

.masaar-intro__slides {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  border-radius: var(--radius-card);
  scrollbar-width: none;
}

.masaar-intro__slides::-webkit-scrollbar { display: none; }

.masaar-intro__slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  block-size: 340px;
}

.masaar-intro__slide img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.masaar-intro__gallery-nav {
  position: absolute;
  inset-block-start: 50%;
  inset-inline: var(--space-16);
  display: flex;
  justify-content: space-between;
  transform: translateY(-50%);
  /* The strip spans the image so the buttons sit at its edges, but only the
     buttons themselves may take the pointer. */
  pointer-events: none;
}

.masaar-intro__gallery-nav .masaar-round-button { pointer-events: auto; }

.masaar-intro__dots {
  position: absolute;
  inset-block-end: var(--space-16);
  inset-inline: 0;
  justify-content: center;
}

/* These sit AFTER the 340px base rule deliberately. A media query adds no
   specificity, so the same selector declared later in the file wins regardless
   of the query -- putting the tablet height up in the 768 block left the
   gallery at the mobile 340. Tablet 520 from 8362:64221. */
@media (min-width: 768px) {
  .masaar-intro__slide { block-size: 520px; }
}

@media (min-width: 1200px) {
  .masaar-intro__slide { block-size: 620px; }
}