/* ============================================================
   FIGURES — corrections
   Loaded after article.css deliberately. Everything here fixes
   something a client screenshot showed, and each rule says which.
   ============================================================ */

/* ---- 1. No visible captions ----
   "FIG. 04 — A group of advisors standing together in an office lobby" read as
   a stock library listing rather than an article. The caption is now removed in
   PHP; this clears any that survive from cached markup, and neutralises the
   older caption classes from earlier treatments.

   B65 IS CLOSED, 1 Sep. `.cz-masthead__caption` used to be listed here too,
   and the note explaining why said the open half was the MARKUP, not this
   rule: two templates still emitted a `<figcaption>` that this declaration
   then hid, so the text shipped on the wire and sat in the accessibility tree
   as hidden — duplicating the image's own alt for anyone who reached it.
   Both emitters are now gone:
     template-parts/content/masthead.php  (the plate on every article, page
                                           and zone profile)
     archive-cz_freezone.php              (the free zone hub)
   so the selector went with them, as that note said it should — never before
   them, which would have made the defect visible instead of fixing it.

   The reasoning is unchanged and worth keeping, because it decided WHICH half
   went. The masthead caption was designed as the one carve-out from this
   sweep — "the one place a description earns its space, because there the
   image is the subject" (B36/B54) — and the sweep then cancelled its own
   exception, which is pattern 55: a sweep removes the exception too unless
   the exception is named in the same edit. Restoring the carve-out would have
   put visible descriptive text back under a photograph on every article,
   which is the thing the client asked about by name. R3.9 records his answer
   as unqualified — "No captions. Ever." — and 08 §5.9 states it as an
   instruction: "Do not re-add captions without the client asking", noting
   that better captions were built once (R480) and removed 23 replies later
   (R503), so quality was never the issue. The carve-out is Claude's, the ban
   is the client's, and §24 puts his instruction above a standard we set
   ourselves. So the markup went, not the ban.

   The classes below stay: they are older treatments and cached markup, and
   `cz_device_wrap()` / `cz_device_open()` both record that they emit no
   figcaption precisely because this rule exists. */
.cz-fig__caption,
.cz-fig__label,
.cz-fig__text,
.cz-break__caption,
.cz-figure__caption,
.cz-sidefig figcaption {
  display: none;
}

/* ---- 2. Crops ----
   A 21:9 band 492px tall found a man's knee, because the subject of a photo of
   seated people is not at the vertical centre. Faces and upper bodies sit
   around a third of the way down, so that is where the crop is anchored.

   The extreme ratios go too: 21:9 across a 1,147px column is a letterbox that
   guarantees a bad crop from a 3:2 source. Nothing wider than 16:9 now. */
.cz-fig__media img,
.cz-fig__pair img {
  object-position: center 34%;
}

/* Height is set DIRECTLY, never as aspect-ratio plus max-height.
   Those two together do not cap a box — they resize it. A 16/9 ratio capped at
   380px tall shrinks its WIDTH to 380 × 16/9 = 676px, which is exactly what an
   audit measured: the strip and the inset rendering an identical 676×380 frame
   with 472–536px of dead white beside the strip that is supposed to be the
   widest element on the page.

   A figure is supporting material in a regulatory guide — the argument is the
   subject — so the heights stay modest. But the strip must keep its full
   width, so it gets a height and nothing else. */
.cz-fig--strip .cz-fig__media {
  aspect-ratio: auto;
  /* Was clamp(200px, 22vw, 330px) — 330px inside a 1212px bleed box at 1600px,
     which is 3.67:1. That is a letterbox band, and "the lame thin strip" is
     exactly what the client called it, three separate times across three
     different pages.

     A full-bleed moment has to be worth the width it takes. At 460px the same
     box is 2.63:1 — close to anamorphic, which is what R4 means by committed
     framing and generosity of space rather than a decorative ribbon laid across
     the column.

     Height is set DIRECTLY and the ratio left to follow. Never reintroduce
     `aspect-ratio` alongside a max-height here: the pair resizes rather than
     caps, and that interaction is the origin of the dead-white-space complaint
     (B58). */
  height: clamp(300px, 30vw, 460px);
}
.cz-fig--inset .cz-fig__media {
  aspect-ratio: auto;
  height: clamp(190px, 19vw, 300px);
}
.cz-fig--pair .cz-fig__pair img {
  aspect-ratio: auto;
  height: clamp(160px, 16vw, 250px);
  object-fit: cover;
}
.cz-fig--margin .cz-fig__media {
  aspect-ratio: auto;
  height: clamp(240px, 26vw, 400px);
}

/* The masthead plate has the same problem — a 5:4 crop of a wide photograph.
   (The plate no longer has a caption to hide: the `<figcaption>` was removed
   from both emitting templates on 1 Sep and `.cz-masthead__caption` went with
   it. See §1 at the top of this file.) */
.cz-masthead__plate img { object-position: center 34%; }

/* One frame needs its own anchor, and the anchor is attached to the PHOTOGRAPH
   rather than to the page — R52.3. `uae-map-model-illuminated` is a 1.777:1
   panorama going into a 1.25:1 plate, so 29.7% of its width is discarded. The
   ConsultZone pavilion sits at the RIGHT edge (x 69%-96%), and a centred crop
   lands at 14.8%-85.2% — cutting the wordmark to "CONSULT".

   ANCHORED RIGHT AT 86%, AT THE CLIENT'S INSTRUCTION, 7 September 2026:
   "About us page, crop in such way that logo is visible."

   The band becomes 25.5%-95.8%, which keeps the whole wordmark with clearance
   rather than flush against the frame edge, plus the Burj cluster, the office
   block and the warehouse. 100% was the other candidate — it also clears the
   wordmark but presses it into the right edge and drops the western villas for
   nothing gained. Both were cut with GD at 360x288 and looked at before
   choosing (R52.4).

   THIS REVERSES THE 6 SEPTEMBER ANCHOR, and the reversal is the point worth
   keeping. That pass anchored LEFT to push the pavilion out of frame entirely,
   on the reasoning "losing a wordmark is fine; breaking one is not". That is
   still true as a tiebreak — but it was applied without asking, and the client's
   answer was that the logo should be IN the frame. A wordmark is not a hazard to
   be cropped around; it is his brand, and where it fits it belongs on the page.

   Scoped by src, not by a body class, deliberately. If this photograph moves to
   another masthead the anchor goes with it; if another photograph is pinned to
   /about-us/ this rule stops applying on its own. */
.cz-masthead__plate img[src*="uae-map-model-illuminated"] { object-position: 86% 34%; }

/* The mirror case, 10 September 2026. `free-zone-park-port-terrace` (JAFZA) carries
   its CONSULTZONE wordmark at the LEFT, x 6%-36%; a centred 1.25:1 cut starts at
   14.8% and would break it. Anchored left, the band is 0%-70.3%: wordmark and the
   walking couple whole, the harbour and ships kept, the far cranes given up.
   Losing part of a view is fine; breaking a wordmark is not (B148). */
.cz-masthead__plate img[src*="free-zone-park-port-terrace"] { object-position: 0% 34%; }

/* ---- TWO MORE ANCHORS, 20 September 2026 — both on his reading of /difc/ ----
   *"these 2 images are not cropped properly leading to not showing the part of
   logo and keys properly."*  Same principle as the two above and the same
   method: the file opened, the subject's position in the frame measured, the
   anchor written against the PHOTOGRAPH rather than the page (R52.3).

   1. `portfolio-keys-lit-corridor` IN THE MARGIN. A 1.78:1 frame going into the
      narrow side column, which is the hardest crop on the site. The subject is
      all in the left quarter: the navy portfolio carrying the CONSULTZONE
      wordmark spans x 3%-46% (the wordmark itself 11%-42%), the two silver keys
      x 10%-33% at y 78%-88%. The lit archway on the right is the background, not
      the subject. A centred crop threw away the left edge and left "ZONE".
      Anchored at 25% across it keeps portfolio, wordmark and keys whole; 58%
      down reaches the keys on the marble without losing the top of the folio. */
.cz-fig--margin img[src*="portfolio-keys-lit-corridor"] { object-position: 25% 58%; }

/*  2. `shell-core-floor-handover-keys` IN THE STRIP. The strip is 1212x460 —
      2.63:1 — so a 1.78:1 source loses 32% of its HEIGHT, and the default 34%
      anchor shows the band from roughly y 18% to y 50%: the ceiling, the wall
      and the Burj Khalifa through the glazing. Every object the photograph is
      about sits along the bottom: the key at y 74%-92%, the navy folio 66%-88%,
      the massing model 69%-89%, the tape measure 76%-95%. They were cut in half
      at the frame edge, which is what he saw.
      Anchored at 74% the band becomes roughly y 58%-90% — the marble counter
      with the key, the folio, the model and the tape, which is the handover this
      frame was chosen for, with the window light still raking across it. */
.cz-fig--strip img[src*="shell-core-floor-handover-keys"] { object-position: center 74%; }

/* ---- 3. Block rhythm ----
   THERE IS NO GENERAL FIGURE MARGIN IN THIS FILE, AND THAT IS THE FIX.

   Removed 31 August:

     .cz-prose--article .cz-fig      { margin-block: clamp(26px, 2.6vw, 42px); }
     .cz-prose--article .cz-fig--margin { margin-block: .35em clamp(16px,1.8vw,24px); }

   `margin-block` with ONE value sets both ends. At (0,2,0) that rule
   out-specified the asymmetric margins article.css declares on the modifiers at
   (0,1,0) — strip 56/26 (article.css:1337), pair 52/26 (:1382), inset 48/24
   (:1406). The intent is written out at article.css:1327 in plain words: the
   air goes ABOVE, separating the figure from the section that just ended, and
   the space beneath is one blank line so the picture reads as belonging to the
   heading it introduces.

   Measured at 1600px on /choosing-your-first-financial-year-end-in-the-uae/
   before removal: strip, pair and inset all shipped 41.6px above and 41.6px
   below, and the gap to the following H2 was 41.6px against R5's target of
   26px. A section-opening figure sat exactly equidistant between the paragraph
   above and the heading below, so it read as belonging to neither — precisely
   what article.css:1327 was written to prevent, and the only one of R5's four
   spacing targets that missed. (B66 / 08 §14.9.)

   The second line existed only to buy ONE treatment back out of the first —
   which is the proof the collision was understood for exactly one of the ten.
   With the first line gone it has nothing to correct, and article.css:1371's
   own `margin: .35em 0 clamp(18px,2vw,28px) clamp(24px,2.4vw,38px)` governs,
   which is its author's value and 4px more air beneath than this file allowed.

   THE GENERAL LESSON, because this file is where it keeps happening: a
   corrections stylesheet still competes in the cascade, and the scope a
   correction needs to reach its target is the scope it uses against everything
   else in reach. That one rule reached all ten treatments, including six in
   placement.css that did not exist when it was written and which had to be
   authored at (0,2,0) purely to escape it (placement.css:61-70). article.css
   owns the four original treatments' spacing; placement.css owns its six. This
   file owns neither, and should not have had an opinion about both. */

/* ---- 4. The one block-margin correction that is still real ----
   `.cz-fig--margin` is a right float, and `.35em` is a FLOAT'S top gutter: the
   small offset that sets the first wrapped line level with the top of the
   picture. article.css:1428 releases the float at <= 1400px (`float: none;
   width: 100%`) and never re-declares the block margins, so a gutter for a text
   wrap that has stopped existing survives every width below it.

   Measured at 375px on /opening-a-uae-branch-of-your-existing-company/ before
   this rule: margin-top 5.84937px, against 34px on --offsetpair and 30px on
   --quiet in the same document — one of ten treatments arriving on a phone
   welded to the heading above it.

   Same defect, same shape and same remedy as placement.css:399-402, which
   restores --stack's top margin at the breakpoint that releases ITS float.
   This is that rule for the treatment article.css releases 780px earlier.

   The value is derived, not chosen: once floatless, --margin is a contained
   full-width block sitting on the measure, which is exactly what --inset is, so
   it takes --inset's top clamp (article.css:1406). The BOTTOM is deliberately
   untouched — article.css:1374 already declares clamp(18px, 2vw, 28px) and that
   end was never the defect. (0,2,0) because article.css:1371 sets `margin` as a
   shorthand, so a bare `.cz-fig--margin` here would tie on specificity and win
   only on load order — which is the fragile arrangement this section just
   finished removing. */
@media (max-width: 1400px) {
  .cz-prose--article .cz-fig--margin { margin-top: clamp(30px, 3vw, 48px); }
}

/* ============================================================
   STAT CALLOUT
   ============================================================
   The honest problem with library photography in a regulatory
   guide is that it illustrates nothing: a stock handshake next
   to a paragraph about activity codes is decoration whatever
   the crop.

   What IS specific to each article is its numbers — AED
   thresholds, day counts, percentages, capital requirements.
   Pulling one out and setting it large gives the page a visual
   break that could only belong to that article, costs nothing
   to load, and tells the reader something true.

   Rebuilt 31 August after the client reported it three times:
   "no visible text, no proper placement, no meaning, no proper
   rendering." Three of those four were one bug each.

   TEXT. reading.css:226 sets `.cz-prose p { color: #21262d }`
   at (0,1,1). `.cz-stat__text` was (0,1,0), so it lost, and a
   near-black paragraph was painted on a near-black strip. The
   sentence was rendering perfectly and could not be read. Every
   rule below is scoped under `.cz-stat` to clear that bar
   without a single !important.

   PLACEMENT. The block used to pull right into the margin
   column, so it hung off the prose edge with nothing under it —
   a band across the page rather than a element in the article.
   It now sits on the text column it belongs to.

   RENDERING. A number and a sentence side by side on a plain
   black rectangle is a slab, not a device. The gold rule, the
   divider and the baseline alignment are what make it read as
   deliberate.
   ============================================================ */
/* THE VALUE IS CENTRED, NOT TOP-ALIGNED, AND THAT IS THE WHOLE FIX.

   This grid ran `align-items: start` with a value column about 60px tall
   beside a body column that reaches 430px on a long sentence. The row is
   sized by the taller of the two, so the short column was left holding
   ~370px of dead black underneath the number. The client photographed it
   on three separate pages and called it "big empty spaces inside, no
   proper allignment" — and an earlier measurement of mine reported the box
   as healthy because it compared the BOX against its TALLEST child, which
   is exactly the wrong comparison. The void was inside a column, not around
   the box.

   Centred, the two columns read as one composition: the number sits against
   the optical middle of the sentence it belongs to, and whatever space is
   left is shared above and below it as margin rather than pooling at the
   bottom as a hole.

   The value column is also capped. Left as bare `auto` a long figure like
   "AED 375,000" took 396px of an 824px box, squeezing the sentence into a
   314px ribbon that wrapped to seven lines and made the box taller still —
   the number was manufacturing the void it then sat in. Capping it at 42%
   gives the sentence room to run shorter, so the box gets shorter too.
   29 stat boxes across 24 documents move with this.

   THE CAP IS A CEILING, NOT A WALL — `minmax(min-content, 42%)`, not
   `fit-content(42%)`, and the difference is the overlap coming back.

   `fit-content(42%)` clamps the track at 42% whatever the content needs.
   The value is `white-space: nowrap`, so a value the track cannot hold
   does not wrap and does not shrink: it simply paints outside its own
   column. Measured at 1440px on
   /a-dubai-investment-becomes-a-business-when-it-needed-a-licence/,
   value "AED 1,000,000" at 51.44px:

     track           269.04px   (42% of a 640.77px content box)
     value needs     344.00px   (scrollWidth)
     value ink ends  709.91px
     body starts     669.50px   ← the gold number crossed the divider
                                   rule and ran 40.41px into the sentence

   Two more were inside the margin: "AED 2 million" at 300px against the
   same 269px track cleared the body by 3.59px, and "AED 50,000" on
   /mainland-company/ by 25.66px. The 52px font fixed the 68px overlap the
   client photographed; the 42% cap re-opened it for any value longer than
   ten glyphs, which is the whole point of a rule that has to hold for
   content nobody has written yet.

   `minmax(min-content, 42%)` keeps 42% as the growth limit — a short
   value like "5%" or "95%" sizes to itself exactly as before, because for
   nowrap text min-content and max-content are the same number — while a
   long value raises the track to its own min-content instead of
   overflowing it. The sibling is `minmax(0, 1fr)`, so it absorbs the
   remainder and the box stays exactly as wide as it was. The number can
   no longer reach the sentence at any viewport, for any value. */
.cz-stat {
  display: grid;
  grid-template-columns: minmax(min-content, 42%) minmax(0, 1fr);
  align-items: center;
  gap: clamp(20px, 2.4vw, 38px);
  margin-block: clamp(34px, 3.4vw, 54px);
  padding: clamp(24px, 2.4vw, 34px) clamp(24px, 2.6vw, 38px);
  background: var(--cz-ink);
  color: #fff;

  /* The one piece of ornament, and it earns its place: a gold hairline
     across the top edge tells the eye this is a pulled-out figure and
     not a quote or a note. R17 — gold is emphasis, never a fill. */
  border-top: 2px solid var(--cz-gold);
}

/* Stays on the prose column. It used to bleed into the margin rail. */
.cz-reading__body .cz-stat {
  margin-right: 0;
}

/* 52px, DOWN FROM 68px, and the column follows its content.

   Capping the value column at 42% (the fix for the dead-space void) exposed
   a second defect: the number kept its 68px size and `white-space: nowrap`,
   so a long figure — "AED 19,999", "AED 10,000" — rendered wider than its
   own column and painted straight over the sentence beside it. The client
   photographed the overlap on two zone pages and suggested the remedy
   himself: reduce the font. At 52px "AED 375,000" measures ~300px, inside
   a 346px column at 1600px. min-width: 0 lets the grid item shrink at all —
   without it a grid child refuses to go below its content width, which is
   the mechanism that produced the overlap. */
.cz-stat .cz-stat__value {
  font-size: clamp(34px, 2.6vw + 14px, 52px);
  font-weight: 800;
  line-height: .88;
  letter-spacing: -.045em;
  color: var(--cz-gold);
  white-space: nowrap;
  min-width: 0;

  /* Optical alignment: the label's cap-height sits at the number's
     cap-height, rather than both boxes starting at the same y. */
  margin-top: -.06em;
}

.cz-stat .cz-stat__body {
  display: grid;
  gap: 10px;
  min-width: 0;

  /* Divides the figure from the sentence that qualifies it. Without it
     the two read as one run-on line at wide viewports. */
  padding-left: clamp(20px, 2.4vw, 38px);
  border-left: 1px solid rgba(255, 255, 255, .16);
}

.cz-stat .cz-stat__label {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--cz-gold);
}

/* (0,2,0) — clears `.cz-prose p` at (0,1,1). This is the fix. */
.cz-stat .cz-stat__text {
  margin: 0;
  font-size: clamp(15.5px, .5vw + 14px, 18px);
  line-height: 1.55;
  color: rgba(255, 255, 255, .88);
  text-wrap: pretty;
}

@media (max-width: 1400px) {
  .cz-reading__body .cz-stat { margin-right: 0; }
}

@media (max-width: 620px) {
  .cz-stat {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 22px 20px 24px;
  }
  .cz-stat .cz-stat__value { white-space: normal; margin-top: 0; }

  /* The vertical divider becomes a horizontal one — a rule between two
     stacked things has to change axis with them. */
  .cz-stat .cz-stat__body {
    padding-left: 0;
    padding-top: 14px;
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, .16);
  }
  /* Raised with the desktop value above. At 375px the bleed box is ~343px wide,
     so 230px was 1.49:1 — squat rather than cinematic, and on a phone the strip
     is the only full-width moment in the article. 260px gives 1.32:1, closer to
     the 4:3 a phone screen actually flatters. */
  .cz-fig--strip .cz-fig__media { height: clamp(200px, 52vw, 260px); }
}


/* ============================================================
   THE MARGIN EXHIBIT: THE FRAME FOLLOWS ITS SOURCE
   ============================================================
   .cz-fig--margin renders into a 4/5 PORTRAIT frame, and that ratio is right
   — for a portrait. The library is 257 landscape files against 7 portraits,
   and cz_reserve_margin_image() deliberately admits landscapes as a still-life
   fallback because 24 of the 26 topic pools hold no portrait at all.

   The consequence was a 1.78:1 photograph rendered into a 0.8:1 box, which
   object-fit: cover resolves by discarding 55% of its width. The client
   photographed it on /about-us/ — "the logo of consultzone is not visible" —
   and in the same breath said "I like the aspect ratio though". Both halves
   were correct: the ratio is good, and the crop was destroying the picture.
   A darkness gate, which the emitter already applies carefully, cannot fix a
   crop.

   So content-enrich.php now tags a landscape source with .cz-fig--margin-wide
   at the point where the source is known, and the frame follows it. At the
   340px column 3/2 is 227px tall and crops nothing horizontally. Portraits
   keep the 4/5 frame that was reserved for them.

   Declared here rather than in article.css because figures.css loads later —
   article.css:1896 sets the 4/5 and this must win without an !important. */
.cz-fig--margin.cz-fig--margin-wide .cz-fig__media {
  aspect-ratio: 3 / 2;
}

/* At 1400px and below the aside folds back inside the measure and article.css
   already swaps the portrait frame to 5/4. A landscape source does not want
   that either, so it keeps its own ratio at every width. */
@media (max-width: 1400px) {
  .cz-fig--margin.cz-fig--margin-wide .cz-fig__media {
    aspect-ratio: 3 / 2;
  }
}