/* ============================================================
   AMENITIES — Section 03
   Figma: 8106:51626 (desktop) · 8106:68737 (mobile)

   Desktop: moss ground, gutter 64, padding-block 90, gap 40, H2 45,
            3 cards flex-1 gap 16, image 284 tall radius 15,
            title 24, distance tag #efd19f / black / radius 6.
   Mobile:  gutter 20, padding-block 60, gap 32, H2 36, title 22,
            cards fixed 300 wide, horizontal scroll, dots only.

   Carousel is CSS scroll-snap — no library, no CDN.
   ============================================================ */

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

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

/* Direct colour — the theme's branding-{lang}.css matches h2 directly. */
.masaar-amenities__heading {
  color: var(--masaar-white);
}

/* --- Track -------------------------------------------------- */

.masaar-amenities__track {
  display: flex;
  gap: var(--space-16);
  /* stretch, not flex-start: the cards have to share a height before the
     distance pill can be pinned to a common baseline (M3ID-4). */
  align-items: stretch;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

/* The next card peeks past the gutter on MOBILE only. From 768 up a page
   fills the content width exactly (3 x 427 + 2 x 16 = 1313 at 1440), so the
   track must clip at the gutter — otherwise the previous page's card shows
   as a sliver in the gutter once the carousel advances. */
@media (max-width: 767px) {
  .masaar-amenities__track {
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    /* Without this a snapped slide aligns to the scrollport edge rather than
       the gutter, so the active card's text runs off-screen once it advances. */
    scroll-padding-inline-start: var(--gutter);
  }
}

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

.masaar-amenity {
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
  inline-size: 300px;
  flex: none;
  scroll-snap-align: start;
  overflow: clip;
}

.masaar-amenity__media {
  inline-size: 100%;
  block-size: 284px;
  border-radius: var(--radius-card);
  overflow: clip;
}

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

.masaar-amenity__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-12);
  /* Fills the rest of the card so the auto margin below has room to work. */
  flex: 1;
}

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

/* M3ID-4 (Stefanny): the pills sat at different heights because a two-line
   title pushed its own pill down. Rather than freeze the title at two lines --
   which silently breaks the day a title needs three -- the pill is pushed to
   the bottom of the card, so every pill shares a baseline and the shorter
   titles simply gain the empty space above, which is what was asked for. */
.masaar-amenity__distance {
  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: var(--masaar-light-yellow);
  color: var(--masaar-black);
  font-weight: var(--fw-bold);
  font-size: var(--fs-label);
  line-height: var(--lh-tight);
}

/* Two classes deliberately: base.css resets `.masaar-page p { margin: 0 }`,
   which at (0,1,1) outranks a single class and whose shorthand zeroes the
   auto. This is the declaration that actually pins the pill. */
.masaar-amenity__body .masaar-amenity__distance {
  margin-block-start: auto;
}

/* --- Controls ----------------------------------------------- */

.masaar-amenities__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-16);
}




.masaar-amenities__arrows {
  display: none;
  gap: var(--space-16);
}

/* Dark ground: white dots and a white arrow with a dark chevron — the
   inverse of the shared light-ground default in base.css. */
.masaar-amenities__controls {
  --dot-size: 8px;
  --dot-idle: rgba(255, 255, 255, 0.4);
  --dot-active: var(--masaar-white);
  --dot-active-w: 40px;
  --arrow-bg: var(--masaar-white);
  --arrow-fg: var(--masaar-black);
  --arrow-bg-hover: rgba(255, 255, 255, 0.5);
  --arrow-bg-off: rgba(255, 255, 255, 0.4);
}




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

@media (min-width: 1200px) {
  .masaar-amenities {
    /* 90 top, 119 bottom — measured off the master (8124:36514): content ends
       at 637 in a 756-tall section. Every other section is 90/90, so this one
       is worth a sanity-check with Neem. */
    padding-block: 90px 119px;
  }

  .masaar-amenities__inner {
    gap: var(--space-40);
  }

  .masaar-amenity {
    /* Three across, filling the row. */
    inline-size: calc((100% - (var(--space-16) * 2)) / 3);
  }

  .masaar-amenities__controls {
    justify-content: space-between;
  }

  .masaar-amenities__arrows {
    display: flex;
  }
}

/* --- 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-amenity__media img {
    transition: transform 350ms ease-out;
  }

  .masaar-amenity:hover .masaar-amenity__media img {
    transform: scale(1.1);
  }
}