/* Dhahir v2: right to left for the secondary pages (/ar/automations/, /ar/startups/), on top of rtl.css. pages.css uses
   logical properties; this file mirrors what the kit places with physical left and right. */

/* /ar/automations/: the collage's pieces mirror (their inline styles use inset-inline-start), so the piece that ends at
   96% x 96% is on the left: the pause disc sits on its corner there */
[dir="rtl"] .ly-collage > button.loop-pause.loop-pause { right: auto; left: calc(4% + 12px); }
/* the triptych's button ends on the left line (the kit's flex-end is the end side) and keeps inside its three columns:
   the Arabic label runs longer than the English */
@media (min-width: 1280px) { [dir="rtl"] .hero--triptych .hero__cta .btn { padding-inline: var(--s-4); } }
/* Arabic display lines need their own leading and no negative tracking */
html[dir="rtl"] .hero--triptych h1 { line-height: 1.3; letter-spacing: 0; }
html[dir="rtl"] .flow-fixed__text .flow-fixed__lead { line-height: 1.4; letter-spacing: 0; }
/* the numbers typed in the calculator stay ASCII and read left to right, right-aligned on the field's start */
html[dir="rtl"] .calc .field input { direction: ltr; text-align: right; }
html[dir="rtl"] .calc__amount { letter-spacing: 0; }
/* the close: this page's Arabic heading runs longer than home's, so it sets a step under the h1 size and wider, and
   keeps to two lines above the button (no line reaches the lockup) */
html[dir="rtl"] footer.closing .closing__cta #close-h { font-size: min(var(--ly-h1-col, 64px), 52px); max-width: 24ch; }
/* the Arabic h1 keeps the English 52 on a desktop (it stays the largest heading on the page) and sets at 34 on a phone,
   where Alexandria runs wide: the real headline takes three lines at 1440 and two at 390 */
@media (max-width: 639px) { html[dir="rtl"] .hero--triptych h1 { font-size: 34px; } }

/* /ar/startups/: the owners' page window anchors on the right (the Arabic page reads from there) and is cut by the
   frame's left and bottom; the kit's .at-corner places with a physical left */
[dir="rtl"] .stage > .sx-offer__piece { left: auto; right: var(--ax, 56px); }
@media (max-width: 639px) { [dir="rtl"] .stage > .sx-offer__piece { left: auto; right: var(--ax-sm, 16px); } }
/* the centred hero: Arabic display lines take their own leading and no negative tracking; on a phone Alexandria runs
   wide, so the headline sets at 32 and keeps to four lines */
html[dir="rtl"] .sx-hero h1 { line-height: 1.3; letter-spacing: 0; max-width: 24ch; }
@media (max-width: 639px) { html[dir="rtl"] .sx-hero h1 { font-size: 32px; } }
/* the address pill sits beside the dots on the right, so the window cut by the frame's left keeps the address whole */
[dir="rtl"] .sx-offer__piece .sx-win__url { margin: 0 0 0 auto; } /* physical: the pill itself is dir="ltr" */
/* a narrow phone: the Arabic button label is wider than 272px at 320, so the button takes the column and may wrap */
@media (max-width: 639px) {
  html[dir="rtl"] .sx-hero .hero__c { min-width: 0; width: 100%; }
  html[dir="rtl"] .sx-hero .btn-row > .btn { max-width: 100%; white-space: normal; text-align: center; padding-inline: var(--s-4); }
}
/* a phone: the owners' page window fits the frame between its 16px gutters, so its address is never cut */
@media (max-width: 639px) { [dir="rtl"] .stage > .sx-offer__piece { width: auto; left: var(--ax-sm, 16px); } }
/* critique pass 1: the address pill takes only its text's width, so beside the dots it stays inside the cut window */
[dir="rtl"] .sx-win__url { flex: 0 1 auto; }
/* the hero capture is cropped from its reading side: the Arabic page reads from the right */
[dir="rtl"] .sx-hero .sx-win__shot img { object-position: top right; }

/* round 4 retry: the Arabic capture mirrors the English one, so its phone crop keeps the right side */
@media (max-width: 639px) { [dir="rtl"] .sx-proof__frame .sx-win__shot img { object-position: 70% 0; } }