/* ============================================================
   POSITION WITHIN MASAAR 3 — Section 05, part B
   Figma 8106:53398 — white ground, gutter 64, content 1312,
   list column 600 / plan 648x580, rows 73 tall with a 1px
   --grey-20 rule, badge 24 moss, icon 24, name 18, distance 20.
   ============================================================ */

.masaar-position {
  background: var(--section-bg, var(--masaar-grey-20));
  /* Mobile master: 60/60, heading 86, gaps 40, masterplan 400, rows 61. */
  padding-block: 60px;
}

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

/* Mobile order: heading, masterplan, then the list. */
.masaar-position__heading { order: 1; }
.masaar-position__plan    { order: 2; }
.masaar-position__list    { order: 3; }

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

/* Direct colour — the theme's branding css matches h2 directly.
   The mobile master sets this heading at H2 size (86 = 2 x 43.2), not H3. */
.masaar-position__heading {
  color: var(--masaar-black);
  font-size: var(--fs-h2);
  /* "Location in Masaar 3" broke as "Location in Masaar" / "3", leaving the
     number stranded on its own line (M3ID-7). The 390 master breaks it
     "Location in" / "Masaar 3", which is what balance produces — and it stays
     right if the copy changes or the Arabic runs to a different length, where
     a hardcoded break would not. */
  text-wrap: balance;
}

.masaar-poi {
  display: flex;
  flex-direction: column;
  /* Master rows are 47 tall on a 51 pitch (I8106:53750;8106:53402). */
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.masaar-poi__row {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  min-block-size: 47px;
  padding-block: 4px;
}

.masaar-poi__lead {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  flex: 1 1 0;
  min-inline-size: 0;
}

.masaar-poi__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 20, not 24 -- the badge is smaller than the icon beside it. */
  inline-size: 20px;
  block-size: 20px;
  flex: none;
  border-radius: 50%;
  background: var(--masaar-moss);
  color: var(--masaar-white);
  font-size: var(--fs-body-m);
  line-height: var(--lh-tight);
}

.masaar-poi__icon {
  inline-size: 24px;
  block-size: 24px;
  flex: none;
}

.masaar-poi__text {
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
}

.masaar-poi__name {
  font-size: var(--fs-body-l);
  line-height: var(--lh-tight);
  color: var(--masaar-black);
}

/* M3ID-24: under the name, small and plain. It used to be H5 bold pinned to
   the end of the row; the master stacks it at 12/14 directly beneath (name
   22 tall at y=0, distance 14 tall at y=24). */
.masaar-poi__distance {
  font-size: 12px;
  line-height: var(--lh-tight);
  color: var(--masaar-black);
}

/* The card, per the Masterplan component (8063:28412): 648x580, white ground,
   15 radius, clipped -- with the artwork 521x580 centred inside it.
   It is also the containing block for .masaar-map__controls, and the clip is
   what keeps the image inside the card once it is scaled past 1.

   The white belongs to the CARD, not the export. The old export carried its
   own white panel so a radius here looked unnecessary; the current
   dalia_map_numbered_*.png is square-cornered, which is the sharp corner
   Teppa reported. */
.masaar-position__plan {
  position: relative;
  overflow: clip;
  border-radius: var(--radius-card);
  background: var(--masaar-white);
}

.masaar-position__plan-img {
  transform: scale(var(--plan-scale, 1));
  transform-origin: center;
  transition: transform 220ms ease;
}

/* Below tablet the figure opens the full-screen viewer instead, which has its
   own zoom, so the inline cluster would be a second control for the same job. */
.masaar-position__plan .masaar-map__controls {
  display: none;
}

@media (min-width: 768px) {
  .masaar-position__plan .masaar-map__controls {
    display: flex;
  }
}

@media (prefers-reduced-motion: reduce) {
  .masaar-position__plan-img {
    transition: none;
  }
}

.masaar-position__plan {
  margin: 0;
}

.masaar-position__plan {
  display: flex;
  align-items: center;
  justify-content: center;
  block-size: 400px;
  margin: 0;
}

.masaar-position__plan img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
}

/* --- Tablet ------------------------------------------------- *
   position.css had no 768 block, so tablet used the mobile POI row (61) and
   masterplan (400). The tablet master (8362:64293) has 7 rows of 73 and a
   580-tall plan, which is the whole of the section's 247px shortfall. */

@media (min-width: 768px) {
  .masaar-poi__row {
    min-block-size: 47px;
    padding-block: 4px;
  }

  .masaar-position__plan {
    block-size: 580px;
  }
}

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

  /* Desktop: heading above the list in the left column, plan spanning both
     rows on the right. Grid rather than flex so the heading can sit in the
     left column without being nested inside the list. */
  .masaar-position__inner {
    display: grid;
    /* 1fr + --map-col, not 600px + 648px: at 1440 this still resolves to
       exactly 600 / 648, and below it the left column gives way instead of the
       plan being clipped. */
    grid-template-columns: minmax(0, 1fr) var(--map-col);
    grid-template-areas:
      "head plan"
      "list plan";
    justify-content: space-between;
    column-gap: 64px;
    row-gap: var(--space-24);
    align-items: start;
  }

  .masaar-position__heading { grid-area: head; font-size: var(--fs-h3); }
  .masaar-position__list    { grid-area: list; }

  /* Centred against the left column, not top-aligned: the master puts the
     card at y=124 in an 828-tall row, and (828 - 580) / 2 is exactly 124, so
     this is centring rather than a nudge. align-items on the grid stays
     `start` for the heading and list. */
  .masaar-position__plan {
    grid-area: plan;
    align-self: center;
    /* A FIXED 580, not auto. The card is 648x580 in the master and the
       artwork is 521x580 centred within it; letting the card take the
       image's natural ratio made it 648x721 and pushed the section 43
       taller than the master's 828 row. The base rule's
       object-fit: contain does the centring, and the white now belongs to
       the card, so the spare 63 either side reads as card, not as gap. */
    block-size: 580px;
  }

  .masaar-poi__row {
    min-block-size: 47px;
    padding-block: 4px;
  }
}