/* Home, Arabic (right-to-left). Loaded only by src/pages-ar/index.html; the shared home styles live in ghers.css. */

/* hero: the arch sits on the left, the words on the right. home.js measures the arch where it stands
   (offsetLeft) and opens it from there, so only the resting place changes. Phones keep it centred (--x: 20vw). */
[dir="rtl"] .ha__arch { left: var(--x, 10vw); }

/* the balcony that fills: the shade sits behind the words, now on the right */
[dir="rtl"] .bs__shade { background: linear-gradient(270deg, rgba(10,14,12,.62) 0%, rgba(10,14,12,.28) 38%, rgba(10,14,12,0) 62%), linear-gradient(0deg, rgba(10,14,12,.55) 0%, rgba(10,14,12,0) 34%); }
[dir="rtl"] .bs__rail li::before { background-position: right center; }

/* light and water levels fill from the right */
[dir="rtl"] .lvl b { background: linear-gradient(270deg, var(--zellige) calc(var(--n) * 25%), rgba(18,20,18,.14) 0); }

/* centred with inset-inline-start: 50% + translate -50%: in right-to-left the inset starts from the right */
[dir="rtl"] .sv__plus::before, [dir="rtl"] .sv__plus::after { translate: 50% -50%; }

/* lines draw from the right; hover nudges go the reading way */
[dir="rtl"] .sv::after, [dir="rtl"] .serv::after, [dir="rtl"] .vow::after { transform-origin: right; }
[dir="rtl"] .sv:not(.is-open) .sv__btn:hover .sv__name, [dir="rtl"] .sv.is-peek .sv__name { translate: -10px 0; }
[dir="rtl"] .pr:not(.is-on) .pr__t:hover { translate: -6px 0; }
[dir="rtl"] .serv__cta:hover svg { translate: -4px 0; }
[dir="rtl"] .spot__card a:hover svg { translate: -3px 0; }
[dir="rtl"] .s9 .chat { rotate: -1.2deg; }

/* before / after: a photo comparison keeps "before" on the left, so the slider, the clip and the handle agree;
   the cards inside still read right to left */
[dir="rtl"] .ba { direction: ltr; }
[dir="rtl"] .ba .spot__card { text-align: right; }
[dir="rtl"] .ba .spot__card > * { direction: rtl; }

/* the map: SVG labels are placed from their left edge */
[dir="rtl"] .map__svg { direction: ltr; }