/* Dhahir v2: right to left, /ar pages only (spec 5). The kit has no [dir] rules; grid and flex mirror on their own,
   page.css uses logical properties, and this file fixes what the kit draws with physical left and right.
   Never mirrored: the aperture (a fixed brand drawing), the Languages band (English left, Arabic right on purpose),
   the 12-hour clock-free times (ASCII), the nav's down-chevron. */

/* the kit's arrows point the way the page reads */
[dir="rtl"] :is(.m-arrow, .link-arrow, .chev-next) { scale: -1 1; }
[dir="rtl"] :is(.btn--primary, .btn--secondary, .link)::after { scale: -1 1; }

/* the hero: the frame's cut falls on its left (the end side), the small card over its lower right (the start side) */
[dir="rtl"] .hero__art > .ly-piece--main { left: auto; right: var(--s-8); }
@media (max-width: 1023px) { [dir="rtl"] .hero__art > .ly-piece--main { right: var(--s-6); } }
@media (max-width: 639px) { [dir="rtl"] .hero__art > .ly-piece--main { right: var(--s-4); } }
[dir="rtl"] .hero__art > .loop-pause { right: auto; left: 12px; }
[dir="rtl"] .rb-ghost { left: 0; }

/* the board runs right to left: the time column on the right, Salma's lane first from the right */
[dir="rtl"] .rb-day__times span { text-align: start; }

/* loops' pause discs in a box the page marked: the bottom-end corner */
[dir="rtl"] [data-ui-pause-host] > :is(.loop-pause, .ui-pause):not(.ui-pause--title) { right: auto; left: 12px; }
[dir="rtl"] .card > .ui-pause--title { right: auto !important; }
/* the diagram's own pause disc (the kit sets it bottom right) takes the same bottom-end corner as every other loop */
[dir="rtl"] button.loop-pause.dg-pause { right: auto; left: 12px; }

/* the mega menu's card and the menu columns */
[dir="rtl"] .nav__menu .menu-card .at-corner { left: auto; right: var(--ax, 32px); }
[dir="rtl"] .stage--fade-br {
  -webkit-mask: linear-gradient(to bottom, #000 calc(100% - var(--fade-h)), transparent calc(100% - 4px)), linear-gradient(to left, #000 calc(100% - 72px), transparent calc(100% - 4px));
  -webkit-mask-composite: source-in;
  mask: linear-gradient(to bottom, #000 calc(100% - var(--fade-h)), transparent calc(100% - 4px)), linear-gradient(to left, #000 calc(100% - 72px), transparent calc(100% - 4px));
  mask-composite: intersect;
}

/* the app frame's fade and the selected row's rule sit on the start side */
[dir="rtl"] .ui-win__age { text-align: left; }

/* the steps' numbered discs and the FAQ keep their order; numbers stay ASCII */
[dir="rtl"] .step-num { font-family: var(--font-latin); }

/* phone numbers stay left to right inside Arabic (the markup's <bdi dir="ltr">) */
[dir="rtl"] bdi[dir="ltr"] { unicode-bidi: isolate; }

/* the Languages band is not mirrored: its grid is laid out left to right, each part in its own direction */
@media (min-width: 640px) {
  [dir="rtl"] main > section#languages > .wrap.lang-wrap { direction: ltr; }
  [dir="rtl"] #languages .lang-p { direction: rtl; grid-column: 1 / -1; justify-self: end; text-align: right; }
}

/* the Arabic hero h1 on a phone sets at 38px (the English 40): Alexandria runs wide, and a 48-character headline must
   still leave the hero one screen at 390x844 (check.mjs hero-maxchars) */
@media (max-width: 639px) { html[dir="rtl"] .hero--collage { --ly-h1-col: calc(var(--ly-scale) * 38px); } }

/* the Arabic statement sets wider than the English: from 1024 it keeps a clear column of air before the mark */
@media (min-width: 1024px) { html[dir="rtl"] .visible-text { padding-inline-end: var(--s-8, 64px); } }

/* a phone's open request: the Arabic sets taller, so the pane shows her message, the free slots and Confirm, and the
   three fields, what follows and the reply step aside (no line is cut at the pane's foot) */
@media (max-width: 639px) { html[dir="rtl"] .rb-app :is(.rb-req__fields, .rb-req__done, .rb-bubble--out) { display: none; } }
/* the Arabic band's second phone screen sits on the screen's foot, so the band meets the close with the page's usual gap */
@media (max-width: 639px) { html[dir="rtl"] #languages .lang-g2 { align-self: end; } }
/* stacked on a phone, the English twin of the Arabic heading sits a step smaller, so it never reads above the h2 */
@media (max-width: 639px) { html[dir="rtl"] #languages .lang-twin[lang="en"] { font-size: calc(var(--t-h2) * .76); } }
/* the Arabic request runs taller than the English: her past visits step aside so no line is cut at the pane's foot */
html[dir="rtl"] .rb-app .rb-req__hist { display: none; }
/* a phone's Languages band on /ar/: the Arabic page comes first in the markup, so the English rule (centre the second
   page) opened a dead band between the paragraph and the first page. Here the band's leftover room splits two ways,
   before each page, and the last page sits on the band's foot, so no stretch of empty ground passes 200px; the paragraph keeps the heading's step */
@media (max-width: 639px) {
  html[dir="rtl"] #languages .lang-p { margin-top: var(--s-4); }
  html[dir="rtl"] #languages .lang-card--ar { margin-block: auto 0; padding-top: var(--s-6); }
  html[dir="rtl"] #languages .lang-card--en { margin-block: auto 0; padding-top: var(--s-6); }
}
/* the offer headings set at the h1 size keep the English 1.02 leading there, which stacks Alexandria's lines into each
   other (the 3 under المجاني at 1440); Arabic display needs its own 1.3 and no negative tracking */
@media (min-width: 1024px) and (min-height: 861px) {
  html[dir="rtl"] #demo .demo-text h2 { line-height: 1.3; letter-spacing: 0; max-width: 12ch; }
}
html[dir="rtl"] footer.closing .closing__cta #close-h { line-height: 1.3; letter-spacing: 0; }
/* a short laptop screen (1024x768): the Arabic heading wraps to 3 lines in the 5-column text side and pushed the third
   step 38px past the section's foot; the steps close up a little there so the section stays one screen */
@media (min-width: 1024px) and (max-height: 860px) {
  html[dir="rtl"] #demo .demo-steps li { padding-block: var(--s-5); }
  html[dir="rtl"] #demo .demo-text h2 { margin-bottom: var(--s-6); }
}
/* round 4: the demo's new line under the heading; on a short laptop the Arabic steps close up again so the third ends above the padding */
@media (min-width: 1024px) and (max-height: 860px) { html[dir="rtl"] #demo .demo-steps li { padding-block: 12px; } }
/* round 4: the deeper footer columns sit higher, so the Arabic close's heading sets a little tighter and the lockup
   (whose ظاهر descends under its box) keeps clear of the lede */
@media (min-width: 1024px) and (min-height: 861px) {
  html[dir="rtl"] footer.closing .closing__cta #close-h { line-height: 1.2; }
  html[dir="rtl"] footer.closing .lockup { margin-top: 0; }
}
/* round 4: the Arabic work cards set taller; the first screen's head and lines close up so its three cards end above the padding */
@media (min-width: 1024px) { html[dir="rtl"] #work .section-head { gap: var(--s-3); } html[dir="rtl"] #work .work-card > p.work-card__l { min-height: 0; } html[dir="rtl"] #work .work-card > .work-card__shot { min-height: 120px; } }