/* ---------------------------------------------------------------------------
   EMAAR — Communities, option B: THE ATLAS.

   Loaded AFTER places.css, which owns the tokens, the reset, the chrome, the
   buttons, the eyebrow, the specification ladder, the minutes ledger and the
   curtain reveal. Nothing here redefines a token and nothing here restates a
   component: this file is the atlas's own geometry and nothing else.

   The page has ONE typographic idea — a numbered spread, ranged left, under a
   photograph that runs the full width of the page — and it is repeated ten
   times without variation. No alternating mirror, no offset grid, no second
   card style. The photographs are what change.

   Contrast is not measured on this page because nothing on it needs measuring:
   there is no type over media anywhere, no veil, no scrim and no inverted
   header state. Every word sits on --em-ground or --em-sunk.
   --------------------------------------------------------------------------- */

/* ————————————————————————— 1 · The masthead ————————————————————————— */

.cx-mast { padding-bottom: clamp(30px, 4vw, 48px); }
.cx-mast .em-crumb { margin-bottom: clamp(26px, 3.4vw, 40px); }
/* the masthead carries no picture, so the title carries the fold: a step up
   from --em-h1's 52px ceiling, and a measure that keeps it to two lines */
.cx-mast__h {
  margin-top: 16px; max-width: 14ch;
  font-size: clamp(34px, 5.2vw, 70px); line-height: 1.02; letter-spacing: -.016em;
}
.cx-mast__row { margin-top: clamp(22px, 2.6vw, 34px); }
.cx-mast__lead { margin-top: 0; max-width: 46ch; }
.cx-mast__col .em-note { margin-top: 14px; }

@media (min-width: 900px) {
  .cx-mast__row {
    display: grid; grid-template-columns: 1.25fr 1fr;
    gap: clamp(30px, 4vw, 72px); align-items: start;
  }
  .cx-mast__specs { margin-top: 2px; }
}

/* ————————————————————————— 2 · The overture ————————————————————————— */

/* Emaar's own brand film at the width of the page, carrying nothing. The
   aspect is the film's above 768 and a gentler crop below it, so a phone gets
   a band with presence rather than a 219px letterbox. */
.cx-over { margin-top: clamp(20px, 3vw, 40px); }
/* AN ASPECT-RATIO PLUS A MAX-HEIGHT SHRANK THE WIDTH. Capping .em-film at
   78vh with aspect-ratio:16/9 still standing made the box ratio-dependent in
   both axes, so a 1440px band rendered 1248px wide with 192px of cream beside
   it. The band takes an explicit height instead and lets object-fit crop —
   one declaration, and the width can no longer be inferred from anything. */
.cx-over .em-film {
  aspect-ratio: auto; height: clamp(280px, 48vw, 760px); border-radius: 0;
}
.cx-over__cap { display: flex; align-items: baseline; gap: 16px; padding-top: 14px; }
.cx-over__lab {
  font-size: 9.5px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  color: var(--em-text-eyebrow-neutral); flex: none;
}
.cx-over__t { font-size: 12px; color: var(--em-ink-mute); }



/* ————————————————————————— 3 · The index bar —————————————————————————

   Sticky without script. The bar is the first child of the atlas section, so
   it arrives with the first spread and leaves with the last — there is no
   show/hide to get wrong, and no second sticky surface anywhere on the page.
   z-index sits below the header (50) and below the mega menu, so a dropdown
   still covers it. */

.cx-bar {
  position: sticky; top: var(--em-hdr); z-index: var(--z-sticky-bar);
  background: var(--em-header-bg);
  -webkit-backdrop-filter: var(--em-header-bf); backdrop-filter: var(--em-header-bf);
}
.cx-bar__in {
  max-width: var(--em-max); margin: 0 auto; padding: 0 var(--em-gut);
  min-height: 52px; display: flex; align-items: center; gap: 16px;
}
.cx-bar__now { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.cx-bar__n {
  font-family: var(--em-display); font-size: 17px; line-height: 1;
  color: var(--em-accent); font-variant-numeric: tabular-nums;
}
.cx-bar__of { font-size: 10.5px; letter-spacing: .1em; color: var(--em-ink-mute); }
.cx-bar__name {
  font-size: 12px; letter-spacing: .04em; color: var(--em-ink);
  margin-left: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cx-bar__btn {
  margin-left: auto; flex: none; display: flex; align-items: center; gap: 9px;
  min-height: 44px; padding: 0 2px;
  font-size: 10px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--em-ink-eyebrow);
}
.cx-bar__btn:hover { color: var(--em-ink); }
.cx-bar__btn svg { width: 11px; height: 8px; display: block; }
.cx-bar__btn[aria-expanded="true"] svg { transform: rotate(180deg); }

/* the progress rule doubles as the bar's lower edge */
.cx-bar__rule { height: 1px; background: var(--em-line-bar); }
.cx-bar__rule > span {
  display: block; height: 1px; background: var(--em-accent);
  transform: scaleX(0); transform-origin: left center;
}

.cx-index {
  position: absolute; top: 100%; left: 0; right: 0;
  background: var(--em-surface); border-bottom: 1px solid var(--em-line-rule);
  box-shadow: 0 26px 60px rgba(60, 48, 30, .12);
  max-height: min(64vh, 560px); overflow-y: auto;
}
.cx-index__l {
  max-width: var(--em-max); margin: 0 auto; padding: 10px var(--em-gut) 18px;
  display: grid; gap: 0 clamp(20px, 3vw, 48px);
}
.cx-index__l a {
  display: flex; align-items: baseline; gap: 14px; min-height: 46px;
  padding: 6px 0; border-bottom: 1px solid var(--em-line-faint);
}
.cx-index__n {
  font-family: var(--em-display); font-size: 13px; color: var(--em-accent);
  flex: none; font-variant-numeric: tabular-nums;
}
.cx-index__t { font-size: 14.5px; color: var(--em-ink); }
.cx-index__m { margin-left: auto; font-size: 10.5px; letter-spacing: .1em; color: var(--em-ink-mute); }
.cx-index__l a:hover .cx-index__t { color: var(--em-ink-2); }
.cx-index__l a[aria-current="true"] .cx-index__t { color: var(--em-accent); }
.cx-index__l a[aria-current="true"] .cx-index__n::after {
  content: ''; display: inline-block; width: 12px; height: 1px;
  background: var(--em-accent); vertical-align: middle; margin-left: 8px;
}

@media (min-width: 760px) {
  .cx-index__l { grid-template-columns: 1fr 1fr; }
}

/* ————————————————————————— 4 · The atlas ————————————————————————— */

.cx-atlas { margin-top: clamp(44px, 6vw, 82px); }
.cx-atlas__head { padding-top: clamp(38px, 5vw, 64px); padding-bottom: clamp(6px, 1vw, 12px); }
.cx-atlas__head .em-h2 { margin-top: 10px; }

.cx {
  display: block;
  padding-top: clamp(42px, 5.5vw, 78px);
  /* the jump lands clear of the fixed header AND the sticky bar */
  scroll-margin-top: calc(var(--em-hdr) + 54px);
}
.cx + .cx { border-top: 1px solid var(--em-line-faint); margin-top: clamp(50px, 7vw, 96px); }

/* — the head and the lead, one target ————————————————————————————————
   The entry's single link stretches across both, so the photograph is
   clickable without being a second link in the tab order and without an
   aria-label having to override the community's own name. */
.cx__top { position: relative; }
.cx__head { display: grid; gap: 14px 22px; align-items: start; }
.cx__num {
  font-family: var(--em-display); font-size: clamp(22px, 2.4vw, 34px); line-height: 1;
  color: var(--em-accent); font-variant-numeric: tabular-nums;
}
.cx__kind {
  font-size: 10px; font-weight: 600; letter-spacing: .24em; line-height: 1.5;
  text-transform: uppercase; color: var(--em-text-eyebrow-neutral);
}
.cx__name {
  font-family: var(--em-display); font-size: clamp(30px, 4.4vw, 58px);
  line-height: 1.04; letter-spacing: -.012em; color: var(--em-ink); margin-top: 8px;
}
/* The entry's whole target. A DIRECT CHILD of .cx__top, because .cx__top is
   the only box in the block that carries no motion: motion.css reveals the
   head with a blur, and a filter makes its element the containing block for
   every absolute descendant — so anything positioned from inside the head is
   sized to the head, not to the block. */
.cx__hit { position: absolute; inset: 0; z-index: 2; display: block; }
.cx__hit:focus-visible { outline: 2px solid var(--em-ink); outline-offset: -3px; }
.cx__tag { font-size: 14.5px; color: var(--em-ink-body); margin-top: 10px; }
.cx__led-c { font-size: 10.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--em-ink-mute); }
.cx__led-p { font-family: var(--em-display); font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.2; color: var(--em-ink); margin-top: 7px; }
.cx__led-go {
  display: flex; align-items: center; gap: 10px; margin-top: 14px;
  font-size: 10px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--em-ink-eyebrow);
}
.cx__top:hover .cx__led-go { color: var(--em-ink); }

.cx__lead {
  position: relative; margin-top: clamp(24px, 3vw, 38px);
  aspect-ratio: 4/5; background: var(--em-well); overflow: hidden; border-radius: 0;
}
.cx__lead > img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}

@media (min-width: 768px) {
  .cx__lead { aspect-ratio: 3/2; }
}
@media (min-width: 900px) {
  .cx__head { grid-template-columns: auto 1fr auto; gap: 0 clamp(22px, 2.6vw, 42px); }
  .cx__num { padding-top: 6px; }
  .cx__led { text-align: right; padding-top: 4px; }
  .cx__led-go { justify-content: flex-end; margin-top: 16px; }
}
@media (min-width: 1024px) {
  .cx__lead { aspect-ratio: 1.949/1; max-height: min(78vh, 820px); }
}

/* — what the picture is of ———————————————————————————————————————— */

.cx__in { padding-top: clamp(26px, 3vw, 38px); }
/* --- the minutes ---
   .em-poi's auto-fit floor is 168px, which at 390 leaves 350px of track and
   falls to ONE column: four entries become a 380px stack under every lead.
   Two-up is both shorter and easier to compare. */
/* Two, then four — never auto-fit. .em-poi's 168px floor fits ONE column at
   390 (a 380px stack under every lead) and THREE at 768, which leaves the
   fourth minute alone on a second row. The count here is always four. */
.cx__poi { margin-top: 0; grid-template-columns: 1fr 1fr; }
@media (min-width: 1024px) {
  .cx__poi { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.cx__body { margin-top: clamp(30px, 3.6vw, 52px); }
.cx__prose p { font-size: 15.5px; }
.cx__facts { margin-top: 26px; }
.cx__amen { padding-top: 0; }

@media (min-width: 900px) {
  .cx__body {
    display: grid; grid-template-columns: 1.3fr 1fr;
    gap: clamp(30px, 4vw, 70px); align-items: start;
  }
  .cx__facts { margin-top: 0; }
}

/* — in detail ————————————————————————————————————————————————————
   One large frame and two beside it. Below 1080 the three become a rail:
   a phone gets the pictures at 76vw and swipes them, which is both larger
   than a stacked third and shorter than three stacked frames.

   Snap is PROXIMITY, not mandatory: with 76vw items the last frame cannot
   reach `start` alignment (the scroller runs out first), and a mandatory
   axis pulls it back to the previous one. */
.cx__detail-head {
  display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap;
  margin-top: clamp(38px, 4.6vw, 68px);
}
.cx__detail-t {
  font-size: 10px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase;
  color: var(--em-text-eyebrow-neutral);
}
.cx__detail-n { font-size: 11.5px; color: var(--em-ink-mute); }

.cx__detail {
  margin-top: 16px;
  display: grid; grid-auto-flow: column; grid-auto-columns: 76vw; gap: 12px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity; scroll-padding-inline: var(--em-gut);
  margin-inline: calc(var(--em-gut) * -1); padding-inline: var(--em-gut);
  scrollbar-width: none;
}
.cx__detail::-webkit-scrollbar { display: none; }
.cx__detail-b { display: contents; }
.cx__frame {
  position: relative; margin: 0; min-height: 0;
  aspect-ratio: 4/3; background: var(--em-well);
  overflow: hidden; border-radius: var(--em-r); scroll-snap-align: start;
}
.cx__frame > img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}

@media (min-width: 1080px) {
  .cx__detail {
    grid-auto-flow: row; grid-template-columns: 1.62fr 1fr; grid-auto-columns: auto;
    gap: 16px; overflow: visible; scroll-snap-type: none;
    margin-inline: 0; padding-inline: 0;
  }
  .cx__detail-b { display: grid; grid-template-rows: 1fr 1fr; gap: 16px; min-height: 0; }
  .cx__frame { aspect-ratio: auto; }
  .cx__frame--a { aspect-ratio: 5/4; }
}

/* — the collections, and their plans ————————————————————————————— */

.cx__colls { margin-top: clamp(38px, 4.6vw, 68px); }
.cx__colls-h {
  font-size: 10px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase;
  color: var(--em-text-eyebrow-neutral); padding-bottom: 12px; border-bottom: 1px solid var(--em-line-rule);
}
/* EVERY ROW IS ITS OWN GRID UNTIL IT ISN'T. Each <li> laid out on its own, with
   `auto` columns sized by ITS OWN price and button, so the metadata started at
   a different x on every line and the ladder read as ragged. Above 860 the
   list is one grid and the rows are display:contents, so all four columns are
   measured once, across every row. */
.cx__coll {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 18px;
  padding: 10px 0 14px; border-bottom: 1px solid var(--em-line-faint);
}
.cx__coll-n, .cx__coll-m { grid-column: 1 / -1; }
.cx__coll-p { margin-top: 10px; align-self: center; }
/* the name is the row's primary control, so it carries the row's whole height
   as its target rather than the 24px its own line box would give it */
.cx__coll-n {
  display: inline-flex; align-items: center; min-height: 44px;
  font-family: var(--em-display); font-size: 20px; line-height: 1.2; color: var(--em-ink);
}
.cx__coll-n:hover { color: var(--em-accent); }
.cx__coll-m { font-size: 12px; letter-spacing: .04em; color: var(--em-ink-mute); }
.cx__coll-p { font-size: 14px; color: var(--em-ink); }
.cx__coll-a { margin-top: 10px; justify-self: end; }
.cx__plans {
  /* A compact .em-btn-h inside the collections row. It may lose its padding to
     the row's width; it may NOT lose its type size — 9.5px is the smallest
     mark on the site (a unit, a rail index), not a button. A button is 11px
     wherever it appears. */
  padding: 0 var(--space-16); min-height: var(--em-control-min); gap: 9px;
  font-size: var(--em-text-label); letter-spacing: var(--p-ls-label);
}
.cx__plans svg { width: 13px; height: 13px; }

@media (min-width: 860px) {
  .cx__colls-l {
    display: grid; column-gap: 0; align-items: stretch;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.35fr) max-content max-content;
  }
  .cx__coll { display: contents; }
  /* The hairline is on the CELLS — they all stretch to the row's height, so it
     runs level instead of stepping with each cell's content. The gutter is
     PADDING and not column-gap for the same reason: a gap is unpainted, and
     four cells with a 24px gap between them drew four separate underlines. */
  .cx__coll-n, .cx__coll-m, .cx__coll-p, .cx__coll-a {
    display: flex; align-items: center; min-height: 62px; margin: 0;
    grid-column: auto; border-bottom: 1px solid var(--em-line-faint);
  }
  .cx__coll-n, .cx__coll-m, .cx__coll-p { padding-right: 24px; }
  .cx__coll-p, .cx__coll-a { justify-content: flex-end; }
}

/* — the foot ————————————————————————————————————————————————————— */

.cx__foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 18px 30px;
  margin-top: clamp(32px, 4vw, 52px);
}

/* ————————————————————————— 5 · The close ————————————————————————— */

.cx-close {
  margin-top: clamp(60px, 8vw, 110px);
  background: var(--em-sunk); border-top: 1px solid var(--em-line-faint);
  padding-block: clamp(50px, 6.5vw, 92px);
}
.cx-close__in { display: grid; gap: 28px; }
.cx-close__in .em-lead { max-width: 42ch; }
.cx-close__acts { display: flex; flex-wrap: wrap; gap: 14px; }

@media (min-width: 900px) {
  .cx-close__in {
    grid-template-columns: 1fr auto; align-items: end;
    gap: clamp(30px, 4vw, 64px);
  }
}

/* ————————————————————————— 6 · Motion —————————————————————————————
   Declared INSIDE the guard, never outside it with an override: a media query
   adds no specificity, so a motion declaration made unconditionally cannot be
   reliably undone by one made conditionally. */

@media not all and (prefers-reduced-motion: reduce) {
  .cx-bar__rule > span { transition: transform .55s var(--em-e-soft); }
  .cx-index { opacity: 0; transform: translateY(-8px);
    transition: opacity .28s var(--em-e-soft), transform .28s var(--em-e-soft); }
  .cx-index.is-open { opacity: 1; transform: none; }
  .cx-bar__btn svg { transition: transform var(--em-t) var(--em-e-soft); }
  .cx__link::after { transition: none; }
  .cx__name { transition: color var(--em-t) ease; }
  .cx__top:hover .cx__name { color: var(--em-ink-2); }
  .cx__led-go, .cx__led-go .em-cta__a { transition: color var(--em-t) ease, transform var(--em-t) var(--em-e-soft); }
  .cx__top:hover .cx__led-go .em-cta__a { transform: translateX(5px); }
}