/* ============================================================
   RTL — Arabic overrides
   Loaded ONLY by ar/index.html, third and last, so equal-specificity
   rules win on source order and no !important is needed.

   Scope: only what the cascade cannot mirror by itself. `dir="rtl"` on
   <html> already reverses flex/grid flow, text alignment and logical
   properties. The residue that belongs here:

     1. Physical box properties (padding-left, border-left, float),
        restated as logical equivalents so they follow the direction
        rather than the viewport.
     2. Absolutely-positioned decoration pinned with left/right.
     3. Type: Arabic face, looser line-height, no letter-spacing —
        tracking breaks the joining of Arabic script.
     4. Latin fragments (prices, "AED", names, the wordmark) that must
        stay LTR inside an RTL paragraph.

   Out of scope: the motion layer. main.js and main1.js read
   document.dir and branch internally (see isRTL in both), so one JS
   codebase serves both pages.
   ============================================================ */

/* ------------------------------------------------------------
   1. TYPE
   Syne has no Arabic coverage, so the display face collapses onto the
   body stack. IBM Plex Sans Arabic carries both weights, with a system
   fallback chain behind it for blocked-CDN cases.
   ------------------------------------------------------------ */
:root {
  --display:
    "IBM Plex Sans Arabic", "Noto Sans Arabic", "Segoe UI", Tahoma, sans-serif;
  --body:
    "IBM Plex Sans Arabic", "Noto Sans Arabic", "Segoe UI", Tahoma, sans-serif;
}

body {
  /* Arabic sits lower and taller in the em box than Latin, so the
     page's Latin line-heights read cramped. */
  line-height: 1.85;
}

/* Letter-spacing severs the joins between Arabic letters, turning a
   word into disconnected glyphs. Every tracked element is reset. */
.kicker,
.px-kicker,
.site-nav,
.header-loc,
.lang-switch,
.label,
.btn,
.brand-sub,
.lg-when,
.efield-label,
.efield-legend,
.foundation-label .label,
.plan-list span,
.sector,
.scroll-cue,
.swipe-hint,
.case-stats,
h1,
h2,
h3,
.h-display,
.h-scene {
  letter-spacing: 0;
}

/* Tight negative tracking is a Latin device. Arabic needs height
   instead, or ascenders and sub-baseline dots collide between lines. */
.h-display,
.h-scene,
h1,
h2,
h3 {
  line-height: 1.5;
}

/* ------------------------------------------------------------
   2. LATIN ISLANDS
   Prices, phone numbers, emails and the wordmark stay Latin inside
   Arabic paragraphs. Without an explicit LTR run, the bidi algorithm
   moves trailing punctuation to the wrong end.
   ------------------------------------------------------------ */
/* An isolate alone suffices for a Latin fragment inside an Arabic run:
   it preserves the fragment's internal order without re-anchoring the
   block it lives in. `direction: ltr` is reserved for elements whose
   content is wholly Latin AND which should also sit on the left. */
.plan-total b,
.foundation-body h3 b,
.case-name,
.member p,
.efield-note b {
  unicode-bidi: isolate;
}

/* Wholly-Latin UI: wordmark, footer contact row, DUBAI label. These
   are Latin blocks in their own right and take the full LTR
   treatment. */
.brand,
.site-footer a,
.header-loc {
  direction: ltr;
  unicode-bidi: isolate;
}

/* The brand lockup is a Latin phrase: Latin order and Latin face
   regardless of the surrounding direction. */
.brand-name,
.brand-sub {
  font-family: "Syne", sans-serif;
}

/* Numerals stay Western: the copy quotes AED figures that must match
   the contract, and the English page, exactly.

   Isolate WITHOUT `direction: ltr`. A bare isolate keeps the digits in
   Latin order inside the RTL run, which is all these need; adding
   `direction: ltr` would also re-anchor the block to the left edge.
   Numeral order and alignment are separate concerns — the explicit
   `text-align: right` here supplies the second. */
.lg-n,
.loss-n,
.mech-n,
.fstep-n,
.reason-n,
.px-n,
.chapter,
.kicker i,
.px-kicker i {
  unicode-bidi: isolate;
  text-align: right;
  font-family: "Syne", sans-serif;
}

/* Prices carry a currency word beside the numeral, so the whole run
   stays LTR — anchored right, per the block above. */
.plan-price,
.plan-total {
  unicode-bidi: isolate;
  font-family: "Syne", sans-serif;
}

/* Case-study names are Arabic text in a flex column, centred by the
   base sheet for Latin. Anchor them to the reading edge. */
.case-name {
  justify-content: flex-start;
  text-align: right;
}

/* ------------------------------------------------------------
   3. PHYSICAL BOX PROPERTIES → LOGICAL
   Left/right declarations from the base sheet, restated as
   inline-start/end so they follow the direction.
   ------------------------------------------------------------ */

/* Bullet lists: the marker and its indent both move to the right. */
.twin-list li {
  padding-left: 0;
  padding-inline-start: 26px;
}
.twin-list li:before {
  left: auto;
  inset-inline-start: 0;
}

.panel li {
  padding-left: 0;
  padding-inline-start: 22px;
}

/* The engine pillars hang off a rule that belongs on the reading
   edge. */
.pillar {
  border-left: 0;
  border-inline-start: 1px solid var(--line-lit);
  padding: 4px 22px 4px 0;
  padding-inline: 22px 0;
}

.site-nav .nav-cta {
  margin-left: 0;
  margin-inline-start: 8px;
}

.bp-txt b {
  margin-right: 0;
  margin-inline-end: 5px;
}

.faq-list summary i {
  margin-right: 0;
  margin-inline-end: -7px;
}

/* The ledger's month number sits inboard of the spine. The base rule
   pads its left, which under RTL is the outer side; padding the
   inline-start instead keeps the gap between spine and numeral. */
.lg-n {
  padding-left: 0;
  padding-inline-start: clamp(14px, 2vw, 28px);
  /* The column is `auto`-sized, so the padding above is all that sets
     its width. The floor keeps the digits off the section gutter. */
  min-width: clamp(48px, 5vw, 78px);
}

/* ------------------------------------------------------------
   4. POSITIONED DECORATION
   ------------------------------------------------------------ */

/* The ledger spine runs down the number column, here on the right. */
.lg-spine {
  left: auto;
  inset-inline-start: 0;
}

/* The phase rule wipes in from the reading edge; its transform-origin
   must move with it or the rule grows away from the text it
   underlines. */
.px-phase:before {
  left: auto;
  inset-inline-start: 0;
  transform-origin: right center;
}

/* GSAP scales the active phase up for emphasis. The base origin
   `left center` would grow it away from the reading edge. */
.px-phase {
  transform-origin: right center;
}

/* ---- The pinned process scene must fit one viewport --------------
   .sc-process-x is height:100svh and .px-stage clips with
   overflow:hidden, so this is the one scene that cannot absorb taller
   copy. The global Arabic line-heights (1.85 body / 1.5 headings) are
   pulled back in, scoped to this scene only.

   Sizes are expressed against vh rather than px so the column scales
   with the box it has to fit, instead of needing a new magic number at
   each viewport height. */
.sc-process-x .px-title {
  line-height: 1.22;
  /* The Arabic headline wraps a line deeper than the English. The vh
     term shrinks it on a short viewport rather than letting it push
     the phases out of the stage. */
  font-size: clamp(22px, 2vw + 1.1vh, 40px);
}
.sc-process-x .px-phase h3 {
  line-height: 1.3;
  font-size: clamp(15px, 0.6vw + 1vh, 22px);
}
.sc-process-x .px-phase p,
.sc-process-x .px-foot {
  line-height: 1.55;
  font-size: clamp(11.5px, 0.35vw + 0.7vh, 14.5px);
}
/* Padding and gaps in vh for the same reason. */
.sc-process-x .px-phase {
  padding: clamp(7px, 1.3vh, 16px) 0;
}
.sc-process-x .px-phases {
  margin-top: clamp(12px, 2.4vh, 34px);
}
.sc-process-x .px-foot {
  margin-top: clamp(10px, 2vh, 26px);
}

/* ------------------------------------------------------------
   5. SLICK RAILS
   Slick is initialised with `rtl: true` (see isRTL in main1.js) and
   writes right-anchored offsets. The float that pairs with those
   offsets must flip to match, or the slides stack against the wrong
   edge and the track measures short.
   ------------------------------------------------------------ */
@media (max-width: 600px) {
  .losses .slick-slide,
  .mech .slick-slide,
  .lg-rows .slick-slide,
  .reeltrack .slick-slide {
    float: right;
  }
}

/* Slick renders dots in DOM order, so reverse the row itself rather
   than repositioning each dot. */
.slick-dots {
  direction: rtl;
}

/* The swipe hint's arrow points the way the rail actually moves. */
.swipe-hint {
  direction: rtl;
}

/* ------------------------------------------------------------
   6. SCENE-LEVEL
   ------------------------------------------------------------ */

/* The base sheet pins the hero portrait with `inset: 0 0 0 auto`, a
   physical value, so dir="rtl" leaves it on the right underneath the
   Arabic copy. Re-pin it left.

   Position, not transform: scaleX(-1) would mirror the face and the
   gradient along with the container, and GSAP scales `.hero-media img`
   on scroll — a scale animating inside a mirrored parent misbehaves. */
.hero-media {
  inset: 0 auto 0 0;
}

/* The grade dissolves the photo's edge into the page ground. The base
   gradient runs 90deg to fade the left edge; with the portrait now on
   the left, the falloff has to fade the right edge instead or the photo
   cuts off hard against the copy. */
.hero-media:after {
  background:
    linear-gradient(
      270deg,
      var(--bg-deep) 0%,
      rgb(10 6 20 / 0.92) 16%,
      rgb(10 6 20 / 0.35) 46%,
      rgb(10 6 20 / 0.2) 100%
    ),
    radial-gradient(
      ellipse at 45% 40%,
      rgb(var(--rgb-primary) / 0.3),
      transparent 62%
    ),
    linear-gradient(0deg, var(--bg-deep) 2%, transparent 32%);
}

/* No flex-direction override on .sc-problem .htrack: a plain
   `display: flex` row already lays out right-to-left under dir="rtl",
   and row-reverse would double-reverse it, sending the opening
   paragraph to the end of the track. Travel direction is handled in
   main.js via isRTL. */

/* Fixed UI chrome, not copy: Latin numerals in Latin order. */
.chapter,
.scroll-progress {
  direction: ltr;
}

/* ------------------------------------------------------------
   7. TEXT ALIGNMENT
   Blocks the base sheet centres or left-aligns for Latin copy. Anything
   that is a paragraph rather than a centred display composition is
   re-anchored to the start edge.
   ------------------------------------------------------------ */

/* Every line inside a plan is copy, not display, so the whole card
   aligns to the reading edge. */
.plan,
.plan-head,
.plan-for,
.plan-list,
.plan-list li,
.plan-total,
.foundation-body,
.foundation-body p,
.pricing-note,
.pricing-micro {
  text-align: right;
}

/* The price is a Latin run (numeral + currency) inside an RTL card:
   LTR internally, but still anchored right. Pairs with the isolate
   declared above. */
.plan-price {
  text-align: right;
}

/* Left-aligned-for-Latin copy that should follow the reading edge. */
.ask,
.ask strong,
.funnel-note,
.shift-note,
.twin-best,
.twin-alt,
.efield-note,
.px-foot,
.body-sm {
  text-align: right;
}

/* Not the final CTA: headline, button and closing line all sit on the
   page's axis. The section is built on that symmetry, so its copy stays
   centred in Arabic as in English. */
.cta-lede,
.cta-sub {
  text-align: center;
}

/* ---- Language switcher on the RTL page ----------------------------
   The control reads "EN": wholly Latin, so it takes the full LTR
   treatment. It also opts back out of the blanket letter-spacing reset
   above — there are no Arabic joins here to sever. */
.lang-switch {
  direction: ltr;
  unicode-bidi: isolate;
  letter-spacing: 0.16em;
}

/* ---- Film grid ------------------------------------------------------
   Nothing to override: flex + justify-content:center is
   direction-agnostic, and a short final row centres identically in both
   directions. */

/* ---- Inline link arrow ---------------------------------------------
   .tlink's arrow nudges on hover to suggest "onwards", which is
   leftwards in Arabic. translateX is physical and does not mirror, so
   the sign is reversed here. The glyph itself is already flipped by the
   bidi algorithm; only the motion needs this. */
.tlink:hover i {
  transform: translateX(-8px);
}

/* ---- Case metadata -------------------------------------------------
   Each segment mixes scripts ("1.2M+ مشاهدات"). Without isolation the
   leading "+" and the digits resolve against the paragraph direction and
   migrate to the far end of the run. Letter-spacing is stripped by the
   reset above; 0.04em severs Arabic joins. */
.case-sector,
.case-stats {
  text-align: right;
}
.case-stats span,
.case-stats i {
  unicode-bidi: isolate;
}