/* ==========================================================================
   ICON — RTL overrides. Loaded only for Arabic (dir="rtl").
   Flex/grid containers already mirror with `dir`, so this layer handles the
   physical-property rules in icon.css: type, text-align, absolute offsets,
   one-sided borders/margins/paddings, transform-origins, and glyph mirroring.
   ========================================================================== */

/* ---------- Arabic type ---------- */
[dir="rtl"] body,
[dir="rtl"] input,
[dir="rtl"] textarea,
[dir="rtl"] select,
[dir="rtl"] button,
[dir="rtl"] .nav-links a,
[dir="rtl"] .menu a {
  font-family: 'IBM Plex Sans Arabic', 'Montserrat', system-ui, sans-serif;
}
/* Arabic shaping breaks under heavy tracking — neutralise letter-spacing on runs of
   Arabic body copy, but keep it on latin eyebrows/labels (uppercase micro-labels). */
[dir="rtl"] p,
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4,
[dir="rtl"] li, [dir="rtl"] .bcard__title, [dir="rtl"] .pcard__name,
[dir="rtl"] .scard__title, [dir="rtl"] .prow__name, [dir="rtl"] .tcard__name,
[dir="rtl"] .featured__title, [dir="rtl"] .article-hero__title,
[dir="rtl"] .nav-links a, [dir="rtl"] .menu a, [dir="rtl"] .nav-cta {
  letter-spacing: normal;
}

/* ---------- Base direction ---------- */
[dir="rtl"] body { text-align: right; }

/* ---------- text-align swaps ---------- */
[dir="rtl"] .hero-home__meta .loc { text-align: left; }
[dir="rtl"] .spec-value { text-align: left; }
[dir="rtl"] .prow__num { text-align: left; }
[dir="rtl"] .faq__q { text-align: right; }

/* ---------- skip link + fixed offsets ---------- */
[dir="rtl"] .skip-link { left: auto; right: 16px; }

/* ---------- project cards ---------- */
[dir="rtl"] .pcard__idx { left: auto; right: clamp(15px, 1.5vw, 22px); }
[dir="rtl"] .pcard__yeartag { right: auto; left: clamp(15px, 1.5vw, 22px); }
[dir="rtl"] .pfeat--02 { margin-left: 0; margin-right: auto; }

/* ---------- project detail ---------- */
[dir="rtl"] .phero__scroll { right: auto; left: var(--pad-x); }
[dir="rtl"] .ov-item {
  border-left: none;
  border-right: 1px solid var(--w14);
}
[dir="rtl"] .ov-item:first-child { padding-right: 0; border-right: none; }
[dir="rtl"] .spec-value { text-align: left; }
[dir="rtl"] .pullquote {
  padding-left: 0;
  padding-right: clamp(18px, 1.6vw, 26px);
  border-left: none;
  border-right: 1px solid rgba(255, 255, 255, .3);
}

/* ---------- filter tabs ---------- */
[dir="rtl"] .ftab { margin-right: 0; margin-left: clamp(14px, 2.4vw, 38px); }
[dir="rtl"] .ftab:last-child { margin-left: 0; }
[dir="rtl"] .ftab::after { left: auto; right: 0; }
[dir="rtl"] .ftab .fcount { margin-left: 0; margin-right: 6px; }

/* ---------- services / values / why one-sided borders ---------- */
[dir="rtl"] .why__item { border-left: none; border-right: 1px solid rgba(10, 10, 10, .18); }
[dir="rtl"] .why__item:first-child { border-right: none; }
[dir="rtl"] .vitem { border-left: none; border-right: 1px solid var(--w16); }
[dir="rtl"] .vitem:first-child { border-right: none; }

/* ---------- process timeline ---------- */
[dir="rtl"] .prow__div { transform-origin: right; }

/* ---------- duration chart: keep the horizontal timeline LTR (week 0 → 24) ---------- */
[dir="rtl"] .chart { direction: ltr; }
[dir="rtl"] .bar__label { direction: rtl; text-align: right; }
[dir="rtl"] .bar__fill { border-left: none; border-right: 1px solid var(--w50); transform-origin: right; }

/* ---------- about hero banner caption ---------- */
[dir="rtl"] .herobanner__cap { left: auto; right: clamp(20px, 3vw, 40px); }

/* ---------- awards hover shift ---------- */
[dir="rtl"] .arow { transition: padding-right .4s var(--expo); }
[dir="rtl"] .arow:hover { padding-left: 0; padding-right: 14px; }

/* ---------- article body ---------- */
[dir="rtl"] .article-pullquote {
  padding-left: 0;
  padding-right: clamp(20px, 2vw, 32px);
  border-left: none;
  border-right: 2px solid var(--c-near-black);
}
[dir="rtl"] .toc__link,
[dir="rtl"] .breadcrumb { text-align: right; }

/* ---------- contact form floating labels + select chevron ---------- */
[dir="rtl"] .field label {
  left: auto;
  right: 0;
  transform-origin: right top;
}
[dir="rtl"] .field select { padding-right: 0; padding-left: 26px; }
[dir="rtl"] .field.sel::after { right: auto; left: 2px; }
[dir="rtl"] .fline { transform-origin: right; }

/* ---------- mirror directional arrow glyphs (↗ → ↘) ---------- */
[dir="rtl"] .scard__cta span[aria-hidden],
[dir="rtl"] .process-teaser__link span[aria-hidden],
[dir="rtl"] .link-underline span[aria-hidden],
[dir="rtl"] .featured__cta span[aria-hidden],
[dir="rtl"] .pfeat__view span[aria-hidden],
[dir="rtl"] .pcard__view,
[dir="rtl"] .pwide__cta,
[dir="rtl"] .nav-cta span[aria-hidden],
[dir="rtl"] .menu-cta,
[dir="rtl"] .btn span[aria-hidden],
[dir="rtl"] .btn--solid span[aria-hidden],
[dir="rtl"] .bcard__read span,
[dir="rtl"] .author-card__more span[aria-hidden],
[dir="rtl"] .nextproj__cta span[aria-hidden],
[dir="rtl"] .form-foot .arr,
[dir="rtl"] .featured__cta span,
[dir="rtl"] .studio-panel span[aria-hidden] {
  display: inline-block;
  transform: scaleX(-1);
}