/* ============================================================
   TRACK RECORD — Section 06
   Figma: 8106:55945 · visual 8228:39754

   Desktop: sage ground, gutter 64, padding-block 90, row gap 60,
            copy column flex-1 (heading 45 / body 18, moss),
            CTA moss pill 50 tall, visual 626x427 radius 15 on black.
   Slices: 165px for past releases, remaining width for the current one.
   ============================================================ */

.masaar-track-record {
  background: var(--section-bg, var(--masaar-sage));
  color: var(--masaar-moss);
  padding-block: 60px;
  overflow: clip;
}

.masaar-track-record__inner {
  /* Grid, not flex: on mobile the source order (copy, visual, CTA) is what we
     want; on desktop the CTA has to rejoin the copy column beside the visual,
     which flex siblings cannot express. */
  display: grid;
  grid-template-columns: 1fr;
  /* 40, not 32: both mobile masters space the three stacked blocks at 40
     (EN 8106:82033 copy 60-200, visual 240-590, CTA 630; AR 8246:55111 the
     same). Tablet wants 40 then 60 and still gets 40/40 -- see the note in
     the 1200 block. */
  gap: var(--space-40);
  align-items: start;
}

.masaar-track-record__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-24);
}

.masaar-track-record__cta {
  display: flex;
}

/* M3ID-18: full width below tablet. The mobile master (8362:64464) puts the
   button at 350 -- the whole content width -- where the tablet master
   (8362:64310) has it at 136, right-aligned. It was auto-width at every
   breakpoint, so mobile got a 148px button floating against one edge. */
@media (max-width: 767px) {
  .masaar-track-record__cta {
    display: block;
  }

  .masaar-track-record__cta .masaar-button {
    inline-size: 100%;
  }
}

/* Direct colour — theme branding css matches h2 directly. */
.masaar-track-record__heading,
.masaar-track-record__body {
  color: var(--masaar-moss);
}

.masaar-button--lg {
  /* 50, not 44. Was a min-height, which its 16px padding then overshot to
     51.5; as a fixed height it lands exactly on 50. */
  --control-height: 50px;
  padding-inline: 28px;
  padding-block: var(--space-16);
}

/* --- Release slices ----------------------------------------- */

.masaar-releases {
  display: flex;
  align-items: stretch;
  margin: 0;
  padding: 0;
  list-style: none;
  /* A 350 square in both mobile masters (EN 8228:40444, AR 8228:42037). */
  block-size: 350px;
  border-radius: var(--radius-card);
  background: var(--masaar-black);
  overflow: clip;
}

.masaar-release {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-16);
  /* Proportional below desktop so three slices always fit the viewport —
     fixed 165px widths overflow a 390 screen and clip the current release. */
  flex: 1 1 0;
  min-inline-size: 0;
  overflow: clip;
  /* Each slice casts a shadow over the one before it, so the current
     release reads as sitting on top of the timeline. */
  box-shadow: -25px 0 25px rgba(0, 0, 0, 0.5);
}

.masaar-release:first-child {
  box-shadow: none;
}

.masaar-release--wide {
  /* The current release is the widest slice at every breakpoint. */
  flex: 2.25 1 0;
}

/* Past releases are desaturated; only the current release keeps its colour.
   Width plus colour is how the design marks the one that's selling. */
.masaar-release:not(.masaar-release--wide) .masaar-release__media {
  filter: grayscale(1);
}

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

.masaar-release__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0, 0, 0, 0.5);
}

.masaar-release--wide .masaar-release__scrim {
  background: rgba(0, 0, 0, 0.45);
}

.masaar-release__content,
.masaar-release__logo {
  position: relative;
  z-index: 2;
}

.masaar-release__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding-inline: var(--space-12);
  text-align: center;
}

.masaar-release__value {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h2);
  line-height: var(--lh-tight);
  color: var(--masaar-white);
}

.masaar-release--wide .masaar-release__value {
  font-size: var(--fs-h3);
}

.masaar-release__tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--fw-bold);
  font-size: var(--fs-h5);
  line-height: var(--lh-tight);
  color: var(--masaar-white);
  /* NOT nowrap, for the same reason as the metric value: English "of units
     sold" fits a 165px slice on one line, but Arabic "من الوحدات تم بيعها"
     does not, and held on one line it ran straight out of its own slice and
     over the neighbouring one. The AR mobile master (8362:64464) sets it in
     two centred lines inside the pill. */
  text-align: center;
}

.masaar-release__tag--stone {
  padding-inline: var(--space-16);
  padding-block: var(--space-8);
  border-radius: 12px;
  background: var(--masaar-stone);
}

.masaar-release__tag--maple {
  padding-inline: var(--space-8);
  padding-block: var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--masaar-maple);
}

/* M3ID-11: 84 is the desktop size. At mobile the two past-release slices are
   only ~85 wide, so an 84px logo filled them edge to edge and the "masaar 1"
   and "masaar 2" wordmarks ran together across the divide. The mobile master
   (8362:64468) puts the logo at 50.4 x 53.19 in an 82-wide slice. */
.masaar-release__logo {
  inline-size: 50px;
  block-size: 53px;
}

/* --- Tablet ------------------------------------------------- *
   There was no 768 block at all, so 768-1199 used the MOBILE padding, gap and
   slice height until desktop took over. Measured from the AR tablet master
   (8362:64310, 768x828): padding-block 80, head 60 clear of the slices,
   slices 427 tall. Desktop re-declares all three below. */

@media (min-width: 768px) {
  .masaar-track-record {
    padding-block: 80px;
  }

  .masaar-track-record__inner {
    gap: 60px;
  }

  .masaar-releases {
    block-size: 427px;
  }

  /* Tablet slices are ~166 wide, the same ratio as desktop's 165, so the
     full-size logo returns here. */
  .masaar-release__logo {
    inline-size: 84px;
    block-size: 85px;
  }
}

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

  /* The copy column is CENTRED against the 427 visual, in both languages:
     EN 8106:55945 puts it at y=181.5 h=244 and the visual at y=90 h=427, so
     both centre on 303.5; AR 8247:62039 is y=202.5 h=202 against the same
     visual. We had it pinned to the top -- align-content:center cannot bite
     because the visual spans both rows and inflates them to 427, leaving no
     free space to distribute.

     The 1fr spacer rows fix that exactly rather than approximately. With a
     row gap of g, each spacer resolves to (427 - copy - cta - 3g)/2, so the
     copy's offset is that plus g -- which is (427 - (copy + g + cta))/2, the
     true centre, whatever the two blocks measure. */
  .masaar-track-record__inner {
    grid-template-columns: 1fr 626px;
    grid-template-areas:
      ".    visual"
      "copy visual"
      "cta  visual"
      ".    visual";
    grid-template-rows: 1fr auto auto 1fr;
    gap: var(--space-40) 60px;
  }

  .masaar-track-record__copy    { grid-area: copy; }
  .masaar-track-record__cta     { grid-area: cta; }
  .masaar-releases              { grid-area: visual; }

  .masaar-track-record__copy {
    gap: var(--space-24);
  }

  .masaar-track-record__heading,
  .masaar-track-record__body {
    max-inline-size: 609px;
  }

  .masaar-releases {
    inline-size: 626px;
    block-size: 427px;
  }

  .masaar-release {
    inline-size: 165px;
    flex: none;
    gap: var(--space-24);
  }

  .masaar-release--wide {
    inline-size: auto;
    flex: 1 1 0;
  }
}