/* ===========================================================================
   EMAAR — Newsroom
   press.css — what a PRESS RELEASE needs that no other About page did.

   LOAD ORDER: places.css → site-nav.css → site-footer.css → about.css → THIS.

   This file adds; it restyles nothing. The masthead, the breadcrumb, the
   prose, the card, the filters, the empty state, the closing band and every
   button are about.css's and places.css's, unchanged. What is new here is
   only the shape of a single article: a primary image, a standfirst, a share
   row, the boilerplate EMAAR appends to every release, and the return path.

   WHY PRESS CARRIES IMAGES — IN BOTH OF ITS VIEWS
   --------------------------------------------------
   about.css §10 used to reserve the card for the blog, on the reasoning that
   a release archive is documentary and reads better as a ruled ledger. That
   reasoning held while the releases had no art. They do: EMAAR publishes a
   hero image with every release in its CMS, and the newsroom on emaar.com
   leads with it. Once the image is part of the record, withholding it is an
   editing decision this build is not entitled to make.

   So the archive — all 78 releases on emaar.com, not the six that were hand-
   built here — ships as TWO VIEWS OVER ONE DATASET, and the photograph
   survives both. GRID is about.css §10's card, art first. LIST is this
   file's own row (§7c): a fixed 3:2 thumbnail, then the date, the category,
   the headline and the standfirst, at four to a screen instead of one. List
   is what a reader lands on, because seventy-eight photographs are slower to
   scan than seventy-eight headlines; Grid is one press of the switch away.

   That list row is NOT about.css §9's ruled row. §9 has no image slot and
   the omission is the point of a ledger, so the newsroom builds its own
   three-column row here and composes §9's TYPOGRAPHY inside it — rather than
   restyling, from a host page, a component six other pages share.

   Namespace: .pr-*
   =========================================================================== */

/* ————————————————————— 1 · The article masthead —————————————————————
   A release headline is not a page title: they run to thirty words, they
   carry figures and parentheses, and they are written by the press office,
   not by a designer. So the h1 steps down from .ab-h1's display size and
   takes a wider measure — the headline has to be READ, not admired, and at
   60px a results headline fills a laptop screen on its own.
   ------------------------------------------------------------------------- */

.pr-h1 {
  font-family: var(--em-display);
  font-size: clamp(26px, 3vw, 40px);
  line-height: 1.12;
  letter-spacing: -.008em;
  max-width: 20em;
  text-wrap: pretty;
  margin: 0;
}

/* The standfirst is EMAAR's own: the italic line or bulleted figures they set
   ahead of the dateline. It is lifted out of the body so it reads as the
   summary it is, and it is the only place italic survives the CMS clean —
   because there the italic carries meaning rather than decoration. */
.pr-lead { margin-top: clamp(18px, 2vw, 26px); }
.pr-lead em { font-style: italic; color: var(--em-ink); }
.pr-lead > ul > li,
.pr-lead > p { font-size: clamp(15.5px, 1.15vw, 17px); line-height: 1.6; }

/* about.css reserves three lines on the mast's lede and four on its running
   paragraph, so that twenty-seven pages which all open the same way open at
   ONE height. An article does not: it opens on a headline of unpredictable
   length, above a standfirst that is one italic line on one release and five
   bulleted figures on the next. There is no common height to hold, so the
   reserve here only pushes the share row down a band of empty ground.
   Released at matching weight, after the rule it has to beat — press.css
   loads after about.css, and source order is the only lever at equal
   specificity. */
.ab-mast__body .pr-lead { min-height: 0; }
body[data-ab-page^="press-"] .ab-mast .ab-lede { min-height: 0; }

/* ————————————————————— 2 · Share —————————————————————
   Four small square controls at the build's one radius, sharing the outline
   button's hairline and its hover — not four brand-coloured social buttons.
   A newsroom's share row is a utility, and the loudest thing on the page has
   to stay the headline.

   THEY SHARE THE CANONICAL, NOT THIS PAGE. This build is a set of files: its
   own address is a file:// path that means nothing to anyone else. The record
   carries EMAAR's published URL for the release, and that is what a reader
   passing the story on actually wants — so the canonical link in the head is
   the single source of the shared address (see press.js).
   ------------------------------------------------------------------------- */

.pr-share { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.pr-share__l { margin-right: 4px; }

/* In the rail the row has 150–232px to work in, which is less than four
   44px targets and a label need. The label and the say-line take a full line
   each and the buttons wrap under them, rather than the targets shrinking:
   a share control that is 34px square is a share control that gets missed. */
.pr-aside .pr-share__l,
.pr-aside .pr-share__say { flex: 0 0 100%; margin: 0; }
.pr-aside .pr-share__say:not(:empty) { margin-top: 2px; }

.pr-share__b {
  display: inline-grid; place-items: center;
  width: 44px; height: 44px;              /* the hit area IS the target */
  border: 1px solid var(--em-line-ctl); border-radius: var(--em-r);
  background: transparent; color: var(--em-ink); cursor: pointer;
  transition: background var(--em-t) ease, border-color var(--em-t) ease;
}
.pr-share__b:hover { background: rgba(128,128,128,.14); border-color: var(--em-line-strong); }
.pr-share__b svg { width: 16px; height: 16px; display: block; }

/* The copy control is the only one with two states, so it is the only one
   that needs to say anything: the label swaps to "Link copied" and back. It
   is a live region because the change is the entire feedback. */
.pr-share__say {
  font-size: 12px; color: var(--em-ink-mute); min-width: 0;
}

/* ————————————————————— 3 · The primary image —————————————————————
   The same file the listing card used — one image per release, carried
   through. It is the article's visual anchor and nothing is set over it:
   the headline has already been read, in type, above.
   ------------------------------------------------------------------------- */

.pr-hero {
  position: relative; overflow: hidden;
  background: var(--em-well); border-radius: var(--em-r);
  aspect-ratio: 3 / 2;
}
.pr-hero img { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block; }

@media (min-width: 860px) {
  /* Wider screens get the cinematic crop — the file is the same 3:2 original,
     so the change costs a crop, never an upscale.

     A HEIGHT, not a ratio with a cap on it. At 1320px wide a 16/9 frame is
     742px tall: the whole first screen, with the release's first sentence
     pushed under the fold. The obvious fix — keep aspect-ratio and add
     max-height — does not work: a ratio box with a max-height shrinks its
     WIDTH to keep the ratio, so the image would have quietly stopped
     spanning the page. Setting the height directly and letting object-fit
     crop is the only version that holds the full width. */
  .pr-hero { aspect-ratio: auto; height: clamp(360px, 52vh, 600px); }
}

/* One release has no photograph: EMAAR's hero asset for it is the Arabic
   Emaar lockup. It is still their asset and it is still shown — but a plate
   is not a photograph, and a 600px band of flat ground is not a hero. It
   takes the corporate sunk ground, the height a mark wants, and `contain`,
   so the lockup is never cropped at any width. */
.pr-hero--mark { background: var(--ab-sunk); }
.pr-hero--mark img { object-fit: contain; }
@media (min-width: 860px) {
  .pr-hero--mark { height: clamp(220px, 30vh, 330px); }
}

/* ————————————————————— 4 · The article —————————————————————
   Running text at the corporate measure — .ab-prose, unchanged. What is added
   is only the spacing an 11-minute results release needs that a two-paragraph
   section never did: room around its sub-headings and its figure lists.
   ------------------------------------------------------------------------- */

.pr-article { padding-top: clamp(34px, 4.5vw, 62px); }
.pr-article .ab-prose > ul { margin-top: 1.3em; }
.pr-article .ab-prose > ul + p { margin-top: 1.3em; }

/* The article takes about.css's long-read spine — the same rail width and the
   same gutter as the masthead above it, so the first line of the release
   starts on the same vertical as the headline instead of under the rail's
   label. The right of the page is then the measure's own margin, not a hole
   left by a column that isn't there.

   The rail is written FIRST in the document. On the desktop grid it is the
   left column; below 1024 the spine collapses to one column and source order
   puts the share row directly under the image and above the first paragraph
   — which is where a reader on a phone reaches for it anyway. One
   implementation, right in both places. */
/* align-self:start, or the sticky does nothing: a grid item stretches to the
   row's height by default, and an element that is already as tall as its
   containing block has nothing to stick within. */
.pr-aside { position: sticky; top: calc(var(--em-hdr) + 22px); align-self: start; }
@media (max-width: 1023px) {
  .pr-aside { position: static; padding-bottom: clamp(26px, 4vw, 34px);
    border-bottom: 1px solid var(--em-line-faint); }
}

/* A release ends where EMAAR ends it. Everything after their "-Ends-" is the
   standing company description, which differs between releases (the land bank
   and the delivered-unit count move between them) and so travels with its own
   release rather than being written once. It is reference, not story, so it
   opens only if asked for — and a closed <details> still holds real text in
   the document for search and for Find-in-page. */
.pr-notes { margin-top: clamp(40px, 5vw, 68px); border-top: 1px solid var(--em-line-rule);
  max-width: var(--ab-measure); }
.pr-notes > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 0; min-height: 44px;
  font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--em-ink);
}
.pr-notes > summary::-webkit-details-marker { display: none; }
.pr-notes > summary:hover { color: var(--em-ink-2); }
.pr-notes__i { flex: none; width: 13px; height: 13px; transition: transform var(--em-t-mid) var(--em-e-soft); }
.pr-notes[open] > summary .pr-notes__i { transform: rotate(180deg); }
.pr-notes__b { padding-bottom: clamp(24px, 3vw, 36px); }
.pr-notes__b .ab-prose > p,
.pr-notes__b .ab-prose > ul > li { font-size: 14px; line-height: 1.66; color: var(--em-ink-mute); }
.pr-notes__b .ab-prose strong { color: var(--em-ink-body); }

/* The provenance line and the way back. A reader who has finished the release
   needs exactly two things: where this came from, and the rest of them. */
.pr-foot { margin-top: clamp(30px, 3.4vw, 44px); display: flex; flex-wrap: wrap;
  align-items: center; gap: 14px 22px; }

/* ————————————————————— 5 · Related —————————————————————
   Three more releases, in the same card the listing uses. They are the three
   most recent OTHER releases, and the heading says exactly that — EMAAR
   publishes one category across all six, so there is no topical relationship
   in the data to claim one from.
   ------------------------------------------------------------------------- */

.pr-related { border-top: 1px solid var(--em-line-rule); padding-block: var(--ab-band); }

/* ————————————————————— 6 · The listing card's meta —————————————————————
   Date and category ride above the headline on a press card, as they do on
   the ruled rows everywhere else in this ecosystem — .ab-row__date and
   .ab-row__tag are those, reused inside the card rather than re-declared.
   ------------------------------------------------------------------------- */

.pr-card__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }

/* The whole card is the target — but it is still ONE link. The headline
   carries the anchor and its ::after covers the card, rather than a second
   <a> around the image that would give a screen reader two links to one
   place, the second of them unnamed. Text inside the card stays selectable,
   which wrapping the whole <article> in an <a> would have cost. */
.ab-post--link { position: relative; }
.ab-post--link .ab-post__t a { color: inherit; }
.ab-post--link .ab-post__t a::after {
  content: ''; position: absolute; inset: 0; border-radius: var(--em-r);
}
/* the ring belongs on the hit area, not on the four words that declare it */
.ab-post--link .ab-post__t a:focus-visible { outline: none; }
.ab-post--link .ab-post__t a:focus-visible::after {
  outline: 2px solid var(--em-ink); outline-offset: 3px;
}

.ab-post--link .ab-post__shot img {
  transition: transform var(--em-t-slow) var(--em-e-soft);
}
.ab-post--link:hover .ab-post__shot img { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) {
  .ab-post--link .ab-post__shot img { transition: none; }
  .ab-post--link:hover .ab-post__shot img { transform: none; }
}

/* The affordance sits on the card's floor, so a short release and a long one
   still declare themselves on the same line — margin-top:auto is the
   remainder of the card, not a number. */
.pr-card__read {
  margin-top: auto; padding-top: 18px;
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--em-ink-eyebrow);
}
.pr-card__read svg { width: 13px; height: 11px; flex: none;
  transition: transform var(--em-t-mid) var(--em-e-soft); }
.ab-post--link:hover .pr-card__read { color: var(--em-ink); }
.ab-post--link:hover .pr-card__read svg { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) {
  .ab-post--link:hover .pr-card__read svg { transform: none; }
}

/* ————————————————— 7 · The listing: bar, switch, list —————————————————
   Two views over one dataset, and ONE container in the document to hold
   whichever is current (see press-listing.js).

   THE EARLIER BUILD SHIPPED TWO. A .ab-rows and a .ab-posts stood side by
   side and the inactive one was hidden with [hidden] — which .ab-posts, being
   display:grid, ignores: an author display beats the UA's [hidden]{display:
   none} with no specificity contest (about.css §11 names the same trap for
   the filter contract). So the grid stood permanently under the list and the
   archive appeared twice, once in each layout, every time. Hiding was the
   wrong mechanism for a choice this total: there is now ONE container whose
   class is swapped, so there is nothing to hide and nothing that can fall out
   of step with anything else.
   ------------------------------------------------------------------------- */

/* 7a · The bar. The search field and the view switch share one line and one
   baseline — .ab-f ends at its input, so align-items:flex-end lands the
   switch on the input's floor rather than the floor of the whole search
   block. The switch is ranged right by an auto margin, which survives the
   wrap: on a narrow column it drops to its own line and stays against the
   same edge the rows end on. The count and the clear control sit below,
   where a RESULT of the search belongs rather than beside the field. */
.pr-bar {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  gap: 16px clamp(20px, 3vw, 40px);
  margin-top: clamp(4px, 1vw, 10px);
}
.pr-bar__f { flex: 1 1 260px; max-width: 520px; }
.pr-bar__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px;
  margin-top: 14px;
}

/* 7b · The view switch. The house's one segmented shape — a single bordered
   track, hairline dividers, no gaps, the pressed segment in ink. It is the
   same control as .ll-seg and .ab-switch and is rebuilt rather than reused
   because those two are a tablist and a set of links, and this is a pair of
   toggle buttons: only the SHAPE is shared, the state here is aria-pressed.

   Icon-only. The two destinations are the two layouts themselves, so a
   picture of each says it faster at this size than the words do — and the
   words are still in the document for a screen reader and on the title for a
   pointer. 50px tall, to finish on the search input's own line, and 54 wide,
   so the target clears 44 in both directions. */
.pr-view {
  display: flex; flex: none; width: fit-content; max-width: 100%;
  border: 1px solid var(--em-line-ctl); border-radius: var(--em-r);
  background: var(--em-surface);
  margin-inline-start: auto;
}
.pr-view__b {
  position: relative;                      /* .ab-vh is absolute; hold it here */
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 50px; min-width: 54px; padding: 12px 17px;
  border: 0; border-right: 1px solid var(--em-line);
  background: transparent; color: var(--em-ink-eyebrow); cursor: pointer;
  transition: background var(--em-t) ease, color var(--em-t) ease;
}
.pr-view__b:last-child { border-right: 0; }
.pr-view__b:hover { background: rgba(var(--em-rgb-ink), .04); color: var(--em-ink); }
.pr-view__b[aria-pressed="true"] { background: var(--em-ink); color: var(--em-on-ink); }
.pr-view__b[aria-pressed="true"]:hover { background: var(--em-ink-hover); color: var(--em-on-ink); }
.pr-view__b:focus-visible { outline: 2px solid var(--em-ink); outline-offset: 2px; }
.pr-view__i { width: 18px; height: 14px; display: block; }

/* 7c · The list row. Three cells — thumbnail, body, arrow — and the body is
   composed of about.css §9's parts: .ab-row__meta, __date, __tag, __t, __d,
   __end and __arrow, unchanged. Change the ledger's type and this follows;
   nothing written here reaches the ledger, because every selector below is
   scoped under .pr-item.

   The thumbnail is a fixed 3:2 frame whose width is one token per breakpoint,
   so every row in the list is the same shape whatever the CMS supplied —
   object-fit crops it, and nothing is ever stretched. */
.pr-results { margin-top: clamp(22px, 2.6vw, 32px); }
.pr-list { border-top: 1px solid var(--em-line-rule); }

.pr-item {
  --pr-th: clamp(84px, 27vw, 116px);
  position: relative; display: grid;
  grid-template-columns: var(--pr-th) minmax(0, 1fr);
  align-items: start;
  gap: 10px clamp(14px, 2.4vw, 28px);
  padding: clamp(18px, 2.2vw, 26px) 0;
  border-bottom: 1px solid var(--em-line-faint);
  color: var(--em-ink);
}
a.pr-item:hover { color: var(--em-ink); }
a.pr-item:hover .ab-row__t { color: var(--em-ink-2); }
.pr-item__b { min-width: 0; }

.pr-item__shot {
  position: relative; overflow: hidden; display: block;
  aspect-ratio: 3 / 2; background: var(--em-well);
  border-radius: var(--em-r);
}
.pr-item__shot img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform var(--em-t-slow) var(--em-e-soft);
}
a.pr-item:hover .pr-item__shot img { transform: scale(1.04); }

/* Below 600 the arrow drops under the text rather than taking a third of a
   phone column — the same answer .ab-row gives at the same width, for the
   same reason. It is placed explicitly in both cases: left to auto-placement
   it would land under the THUMBNAIL, in column one. */
.pr-item .ab-row__end { grid-column: 2; grid-row: 2; align-self: start; }

/* A crop, not an edit: the whole headline and the whole standfirst stay in
   the document — search reads them, a screen reader reads them, and the
   release itself is one tap away. What the cap buys is a column of rows at
   one weight, which is the entire reason to offer a list at all. */
.pr-item .ab-row__t,
.pr-item .ab-row__d {
  display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;
}
.pr-item .ab-row__t { -webkit-line-clamp: 3; line-clamp: 3; }
.pr-item .ab-row__d { -webkit-line-clamp: 2; line-clamp: 2; }

@media (min-width: 600px) {
  .pr-item {
    --pr-th: clamp(128px, 17vw, 168px);
    grid-template-columns: var(--pr-th) minmax(0, 1fr) auto;
  }
  .pr-item .ab-row__end { grid-column: 3; grid-row: 1 / -1; align-self: center; }
  .pr-item .ab-row__d { -webkit-line-clamp: 3; line-clamp: 3; }
}
@media (min-width: 1024px) { .pr-item { --pr-th: 184px; } }

a.pr-item:hover .ab-row__arrow,
.pr-item:focus-within .ab-row__arrow {
  transform: translateX(4px); border-color: var(--em-ink); background: rgba(var(--em-rgb-ink), .04);
}

/* 7d · Load more. The control pages the SAME list: press-listing.js APPENDS
   the next six and rebuilds nothing, so every row already on screen stays
   exactly where it is and the reader keeps their place.

   The busy state is a hairline travelling the button's floor. No label swap,
   so the control cannot resize under the cursor mid-press; no spinner, which
   at this size would be the loudest thing on the page. */
.pr-more { margin-top: clamp(28px, 3vw, 40px);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 20px; }
/* And the same trap this section was written to close, one element further
   on: press-listing.js retires the control by setting .hidden on this row,
   and the `display:flex` above would have ignored it exactly as .ab-posts
   ignored it. Stated here rather than added to about.css §11's contract,
   because the contract is about FILTERED items and this is a control. */
.pr-more[hidden] { display: none; }
.pr-more__b { position: relative; overflow: hidden; }
.pr-more__l { transition: opacity var(--em-t) ease; }
.pr-more__b[aria-busy="true"] .pr-more__l { opacity: .45; }
.pr-more__b::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: 45%;
  background: var(--em-ink); opacity: 0; transform: translateX(-100%);
}
.pr-more__b[aria-busy="true"]::after {
  opacity: 1; animation: pr-more-sweep .7s var(--em-e-soft) infinite;
}
@keyframes pr-more-sweep {
  from { transform: translateX(-100%); }
  to   { transform: translateX(222%); }
}
.pr-more__n { font-size: 12.5px; color: var(--em-ink-mute); font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  .pr-item__shot img { transition: none; }
  a.pr-item:hover .pr-item__shot img { transform: none; }
  .pr-more__b[aria-busy="true"]::after {
    animation: none; transform: none; width: 100%; opacity: .22;
  }
}