/* ===========================================================================
   business-list.css — the Showcase / Grid view switch for the destination
   portfolio on the four business pages.

   Status: shipped, all four business pages — Malls, Hospitality,
   Entertainment and Leisure. It ran on Leisure alone as a pilot; the pilot is
   approved and the other three now carry the same two lines. There is no gate
   on WHICH vertical: business-list.js checks that the page is the
   business-group template and that the portfolio has rendered its cards, and
   nothing else. A vertical with no portfolio falls out of build() and is not
   touched.

   The four run from 11 destinations (Entertainment) to 5 (Hospitality).
   Nothing below counts: the index reads "01 / 05" for a group of five, and on
   a group of one the alternation would have nothing to alternate — both read
   correctly.

   Un-shipping it is still removing one <link> and one <script> from a page.
   Nothing in businesses.css, businesses-pages.js or businesses.js is edited,
   so any of the four with its two lines removed is byte-for-byte the page
   that shipped.

   IT IS THE PROJECTS BAND'S CONTROL, ON THE OTHER LISTING
   -------------------------------------------------------
   projects-list.css does this for `.em-pc` on the community template and has
   shipped on every master community. This is the same control, the same two
   positions, the same default and the same idiom applied to `.bz-card` — a
   reader who learns the switch on Dubai Creek Harbour already knows it here.
   What is NOT copied is that file's furniture: there is no status, no price,
   no bedroom string and no four-action ladder on a destination, so none of
   those rules exist here. A destination publishes a place, a name, a
   photograph and a sentence, and Showcase is those four given the room.

   WHAT IT DOES NOT DO
   -------------------
   It does not build a second listing. businesses-pages.js renders one
   `.bz-card` per destination and that stays the one card set: this file adds
   an index to each card, writes `data-em-bv` on the section, and every rule
   below is scoped inside that attribute. Switching views rebuilds nothing,
   re-requests nothing and downloads no image twice — the same <img> with the
   same srcset is simply given a wider column.

   DESIGN-STANDARDS §2 — one component, one definition
   ----------------------------------------------------
   `.bz-card` is still businesses.css's, and the GRID is not touched: every
   selector here is inside `[data-em-bv="showcase"]`, an attribute that exists
   only while this file's script is on the page and only while the reader has
   chosen that view. With the switch on Grid the section computes exactly as
   it does today, which is a fact about the cascade rather than a hope.

   THE PHOTOGRAPH IS THE POINT
   ----------------------------
   businesses-pages.js says it of its own portfolio: "a destination catalogue
   is the one thing on this page that is photography first". The grid gives
   that photograph a third of the measure; Showcase gives it 1.75 of 2.75
   parts and the whole row. Same file, same ratio, same `sizes` — the view is
   bigger, the request is not.
   --------------------------------------------------------------------------- */


/* ———————————————————————— 1 · The view switch ————————————————————————

   It sits directly above what it controls — between the portfolio heading and
   the grid — for the reason the community band's does: a control that is not
   touching the thing it changes is a control the reader has to hunt for after
   the layout moves under them.

   It is the band's own segmented control: .em-pv's geometry to the pixel, so
   the two switches on this site are one control and not two. Two states,
   mutually exclusive, one always on.

   LARGEST FIRST — Showcase, then Grid. The order is one idea, how much of the
   measure one destination gets, and Showcase is on the front of the control
   because it is what the section opens on. */

.bz-pv {
  display: flex; align-items: center; justify-content: flex-end;
  flex-wrap: wrap; gap: 12px 20px;
  margin-top: clamp(26px, 3vw, 34px);
}

/* The grid's own top margin is the space between a heading and the grid. With
   the switch in between, that space is now measured from the switch, so the
   grid closes up to it — scoped to the attribute, so the grid keeps its
   published spacing on every page that has no switch. */
[data-em-bv] .bz-grid { margin-top: clamp(18px, 2vw, 24px); }

/* NO `overflow: hidden` ON THE SEGMENT.

   The shipped control clips its own corners that way, and an outline is
   clipped by an ancestor's overflow — so the 2px keyboard ring that
   02-base.css calls non-negotiable is cut away on every side but the seam.
   Measured on this control before the fix: of a 2px ring at 3px offset, a
   1px sliver survived. The corners are 2px (--em-r), so clipping them is
   worth nothing and costs the ring, and the two end buttons round their own
   outer corners instead. */
.bz-pv__seg {
  display: flex; flex: none; margin-left: auto;
  border: 1px solid var(--em-line-ctl); border-radius: var(--em-r);
  background: var(--em-surface);
}
.bz-pv__b:first-child { border-radius: var(--em-r) 0 0 var(--em-r); }
.bz-pv__b:last-child  { border-radius: 0 var(--em-r) var(--em-r) 0; }
.bz-pv__b {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  padding: 11px 16px; min-height: var(--em-control-min);
  border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 11px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--em-ink-body);
  transition: background var(--em-t) ease, color var(--em-t) ease;
}
.bz-pv__b + .bz-pv__b { border-left: 1px solid var(--em-line-ctl); }
.bz-pv__b:hover { background: rgba(var(--em-rgb-ink), .04); color: var(--em-ink); }
.bz-pv__b[aria-pressed="true"] { background: var(--em-ink); color: var(--em-on-ink); }
/* The glyph is a second signal and never the only one: the WORD is on the
   button at every viewport, and the filled plate is the third. §8. */
.bz-pv__i { width: 15px; height: 15px; flex: none; }

@media (max-width: 599px) {
  /* The switch takes the row and each half of it is still a 44px target.
     Two positions, so unlike the community band's control this one never
     wraps to a second line and needs none of that file's seam repair. */
  .bz-pv__seg { margin-left: 0; flex: 1 1 100%; }
  .bz-pv__b { flex: 1 1 50%; justify-content: center;
    padding: 11px 8px; font-size: 10.5px; letter-spacing: .10em; gap: 6px; }
  .bz-pv__i { width: 14px; height: 14px; }
}


/* ——————————————— 2 · The part that exists only in Showcase ———————————————

   business-list.js adds ONE node to each card at boot — the index. It is
   display:none here and switched back on by the scope that wants it, so in
   the grid it contributes no box, no gap and no flex basis. */

.bz-pl__n { display: none; }


/* ———————————————————— 3 · The card, in BOTH views ————————————————————

   THE PLATE COMES OFF, AND THE FLOOR GOES ON.

   `.bz-card` is `.em-card` — a surface fill, a 1px border, a 2px corner, and
   a shadow-and-lift on hover. `.em-pc`, the card on the community band that
   this page's switch is copied from, has never been any of those: it is a
   photograph with words below it on the page's own ground, and the structure
   that a box was doing is done by a hairline over the bottom-pinned block.

   Two cards for one job is the drift this build spends its comments fighting,
   and the boxed one is the one that disagrees with the reference. So on this
   page the card is the reference's card, in both views:

     · no fill, no border, no corner on the CARD. The photograph keeps its
       own 2px corner and its own overflow — `.em-shot` has owned both since
       04-layout.css §12, and the card's box was merely clipping over the top
       of them.
     · no lift and no shadow on hover. What is left is what the reference
       leaves: the photograph scales 1.04 (businesses.css already), and the
       arrow slides 4px (05-components.css already). Nothing moves the card.
     · the body's 26px of padding goes back to the measure. That is the part
       that pays for itself: the blurb gets 383px instead of 328 at 1440, and
       four of Leisure's six sentences stop ending in an ellipsis.

   SCOPE. Every rule is inside `[data-em-bv]`, which exists only where this
   file's script runs — the four vertical landing pages. The TWENTY-EIGHT
   destination pages share `cardHTML()` and are deliberately NOT in scope:
   their grid is "Explore more", a three-card afterword at the foot of a long
   read, where a boxed card is doing a different job than it is in a catalogue
   that IS the page. Dropping the scope would change all twenty-eight in one
   line, and that is a separate decision rather than a consequence of this
   one. */

[data-em-bv] .bz-card {
  background: none; border: 0; border-radius: 0; overflow: visible;
}
[data-em-bv] .bz-card:hover {
  box-shadow: none; transform: none; border-color: transparent;
}
/* 16px, which is `.em-pc__body`'s own figure, not a new one. */
[data-em-bv] .bz-card__body { padding: 16px 0 0; }


/* ———————————————— 4 · The grid, without its boxes ————————————————

   THE HAIRLINE IS THE POINT, NOT THE ABSENCE OF THE BORDER.

   A box does two things: it separates a card from its neighbour, and it gives
   the card a floor so that three cards in a row end on one line. Deleting it
   and stopping there gets the first for free — a 28px gap of cream separates
   as well as an edge does — and silently loses the second, which is the one a
   reader actually uses to scan a row.

   So the floor is drawn where the reference draws it: a hairline on the
   bottom-pinned block. `.em-pc__facts` carries `margin-top: auto; padding-top:
   12px; border-top: 1px solid var(--em-line)` and this is that construction on
   `.em-card__foot`, which is already bottom-pinned. Because the grid stretches
   every cell in a row to the same height, the three rules land on one line
   across the row whether or not the names above them wrapped to the same
   number of lines.

   The 20px above the rule is stated rather than left to `margin-top: auto`.
   Auto is whatever is left over, and on a row where every card's content
   happens to be the same height there is nothing left over — the rule would
   sit against the last line of the sentence. Twenty is the floor; auto keeps
   whatever is above it. */

[data-em-bv="grid"] .bz-card .bz-blurb { margin-bottom: 20px; }
[data-em-bv="grid"] .bz-card .em-card__foot {
  margin-top: auto; padding-top: 16px;
  border-top: 1px solid var(--em-line);
  transition: border-color var(--em-t) ease;
}
/* The one thing the lost box hover is worth keeping: --em-line-hover is the
   token `.em-card:hover` already used for its border, on the one line this
   card still draws. */
[data-em-bv="grid"] .bz-card:hover .em-card__foot { border-top-color: var(--em-line-hover); }

/* The columns close to the reference grid's own rhythm — 28px at 1440 against
   the boxed grid's 32. A box needs the wider gutter because two edges meet
   across it; two columns of type do not, and the 4px goes to the photograph.
   Rows keep `.bz-grid`'s own 32, so the rhythm is the reference's exactly:
   gap: clamp(22px,2.4vw,32px) clamp(18px,2vw,28px). */
[data-em-bv="grid"] .bz-grid { column-gap: clamp(18px, 2vw, 28px); }


/* ———————————————————————— 5 · Showcase ————————————————————————

   One entry to a row, the photograph alternating side, an index above the
   place. It is the delivered-projects chapter's composition, which is the
   composition the community band's Showcase already borrows — filled here
   with this card's own four facts and inventing no fifth. */

[data-em-bv="showcase"] .bz-grid {
  grid-template-columns: minmax(0, 1fr);
  /* One entry is meant to hold the screen, so the next one is kept off it. */
  gap: clamp(56px, 7vw, 104px);
}

/* The narrow form first — picture, then words under it — because that is the
   one composition that has to work in a 320px column, and the wide form
   overrides it at 1024. */
[data-em-bv="showcase"] .bz-card {
  display: grid; grid-template-columns: 1fr; row-gap: 20px;
  align-items: start;
}

/* ——— the words ———
   The body stops being a padded panel and becomes a column of type. The plate
   itself came off in §3 and is now both views'. */
[data-em-bv="showcase"] .bz-card__body {
  padding: 0; display: block; flex: none;
}

/* ——— the index ———
   `.ll-band__n` to the property: display face, 13px, tracked, tabular so the
   figures do not shuffle. "01 / 06" — where you are in what you are looking
   at. business-list.js writes it from the cards that are on screen. */
[data-em-bv="showcase"] .bz-pl__n {
  display: block;
  font-family: var(--em-display); font-size: 13px; letter-spacing: .12em;
  color: var(--em-ink-mute); font-variant-numeric: tabular-nums;
  margin-bottom: 14px;
}

/* ——— the place ———
   The card's own identity line, unchanged in words and in voice. Two things
   change: the grid RESERVES this line whether or not Emaar publishes a place,
   because six cards in a row have to share a baseline — and a full-measure
   entry shares a baseline with nothing, so the reservation is released and an
   entry with no published place simply starts at its name. Three of Leisure's
   six have none. */
[data-em-bv="showcase"] .bz-card__id { min-height: 0; }
[data-em-bv="showcase"] .bz-card__id:empty { display: none; }

/* ——— the name ———
   The system's own h2 step, as the chapter heading uses, against the grid
   card's clamp(21px, 1.55vw, 26px). The size difference is most of what tells
   a reader at a glance which of the two views they are in. The two reserved
   lines go for the same reason the place's reservation does. */
[data-em-bv="showcase"] .bz-card__n {
  font-size: var(--em-text-h2); line-height: 1.1;
  min-height: 0; margin-top: 8px;
}
/* A short rule under the name — the same hairline the eyebrow component
   draws. It is the entry's own floor, and it is what makes the block read as
   editorial rather than as a stretched card. */
[data-em-bv="showcase"] .bz-card__n::after {
  content: ''; display: block; width: 72px; height: 1px;
  background: var(--em-line-rule); margin-top: 20px;
}

/* ——— the sentence ———
   The grid clamps Emaar's own opening sentence to three lines so that one
   destination's copy cannot set the height of the card beside it. Nothing is
   beside this entry, so the clamp is released and the sentence is printed
   whole. This is the one place the two views differ in CONTENT, and it
   differs by showing MORE of the same field — no re-wording, no second
   source, nothing written here. It is also the honest reason this view
   exists on a six-item catalogue: five of Leisure's six sentences end in an
   ellipsis in the grid. */
[data-em-bv="showcase"] .bz-card .bz-blurb {
  display: block; overflow: visible; -webkit-line-clamp: none;
  font-size: 15.5px; line-height: 1.6; margin-top: 18px; max-width: 42em;
}

/* ——— the way in ———
   Still `.em-cta`, still "Explore", still the card's ONE announced link —
   businesses-pages.js's rule that a destination card carries a single anchor
   and no second affordance holds at every size, so this view promotes nothing
   to a button. Only the air above it changes. */
[data-em-bv="showcase"] .bz-card .em-card__foot { margin-top: 24px; padding-top: 0; }

@media (min-width: 1024px) {
  /* Two columns, the picture in the larger one, and `align-items: center`
     rather than stretch — the same composition the community band's Showcase
     uses. A name that wraps to three lines grows past the picture and the
     picture centres against it; neither column is stretched to the other, so
     nothing floats in a gap.

     1.75 of 2.75 parts to the photograph. The binding case is 1024, the
     narrowest width this two-column form is used at: the words get 330px
     there (measured), which is the measure Emaar's own opening sentence needs to set
     without breaking to one word a line. Give the photograph more and the
     prose is the thing that pays for it.

     1024 because below it there is no second column to put the words in,
     which is what "a desktop measure" means for this view — and because
     599/600, 1023/1024 and 1439/1440 are this build's whole breakpoint
     ladder (tools/ds_check.py). */
  [data-em-bv="showcase"] .bz-card {
    grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr);
    column-gap: clamp(30px, 3.4vw, 54px);
    row-gap: 0;
    align-items: center;
  }
  [data-em-bv="showcase"] .bz-card__media { grid-column: 1; grid-row: 1; }
  [data-em-bv="showcase"] .bz-card__body  { grid-column: 2; grid-row: 1; }

  /* The alternation. `data-em-alt` is written by business-list.js over the
     cards that are on screen rather than by :nth-child(), for the reason
     projects-list.js states at length: a listing that ever hides a card would
     put two pictures running on the same side under an index that has
     skipped. This catalogue has no filter today; reading the visible set
     costs nothing and is still true on the day one is added.

     The TRACKS swap with the picture, not just the columns — launches.css
     learned this the hard way. Leave the wide track on the left and a flipped
     entry renders its photograph into the narrow one, so alternating the side
     would silently alternate the SIZE and every second destination would read
     as the lesser of the pair. */
  [data-em-bv="showcase"] .bz-card[data-em-alt="1"] {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.75fr);
  }
  [data-em-bv="showcase"] .bz-card[data-em-alt="1"] .bz-card__media { grid-column: 2; }
  [data-em-bv="showcase"] .bz-card[data-em-alt="1"] .bz-card__body  { grid-column: 1; }
}

@media (max-width: 1023px) {
  /* Stacked, and the picture takes the whole measure — 707px at 768 against
     the grid's 344px, so the view is still visibly the bigger one at the
     width where it stops being two columns. */
  [data-em-bv="showcase"] .bz-grid { gap: clamp(38px, 5vw, 48px); }
}


/* ———————————————————————— 6 · The switch itself ————————————————————————

   A 240ms fade-and-settle on the container, so the reader sees that the
   LAYOUT changed rather than wondering whether the set did. Transform and
   opacity only — nothing that can move the page or cost a reflow — and off
   entirely under reduce, where the swap is instant. */
@media (prefers-reduced-motion: no-preference) {
  [data-em-bv] .bz-grid.is-bv-swap {
    animation: bz-bv-swap 240ms var(--em-e-soft) both;
  }
  @keyframes bz-bv-swap {
    from { opacity: 0; transform: translateY(7px); }
    to   { opacity: 1; transform: none; }
  }
}