/* ============================================================
   Arabic / RTL overrides
   Loaded only on the /ar/ pages, after styles.css.
   `direction: rtl` on the root flips flex and grid main-axis order
   for free (navbar row, footer columns, button+icon rows, card
   grids) — this file only covers what that doesn't reach.
   ============================================================ */
:root { direction: rtl; }
body { font-family: var(--font-arabic); }

/* Mirror the forward-pointing arrow glyphs used throughout buttons */
.btn__icon-circle,
.btn__icon-sm { transform: scaleX(-1); }

/* ------------------------------------------------------------
   Video/image-backed copy panels: these sit against shared,
   non-mirrored background media (hero video, audit-CTA video,
   the sv-contact hand graphic pinned with physical `right: 0`).
   The default RTL flip moves each panel to the opposite physical
   side from the English page, which either covers the video's
   focal subject or collides with a physically-pinned graphic.
   Pin each one to the same physical side as English instead.
   ------------------------------------------------------------ */
@media (min-width: 861px) {
  /* English: flush left. Keep Arabic flush left too, so the video
     stays visible on the right. */
  .hero__copy { margin-left: 0; margin-right: auto; }

  /* English: flush right (sits on the darker side of the overlay
     gradient, which always runs light-to-dark left-to-right).
     Keep Arabic flush right too. */
  .ec-cta__copy { margin-left: auto; margin-right: 0; }
}

/* English: flush left, leaving the hand graphic (pinned `right: 0`)
   clear on the right. Keep Arabic flush left too. */
.sv-contact__grid { margin-left: 0; margin-right: auto; }

/* Work-page banner caption: still pinned to the physical left (same
   shared-video reasoning as above), but the Arabic text itself reads
   right-to-left, so give it a fixed width and right-align it within
   that box instead of left-aligning — both lines then share a clean
   right edge instead of a ragged one. */
@media (min-width: 861px) {
  .work-banner__caption { width: 56%; max-width: 56%; text-align: right; }
}