/*--------------------------------------------------------------
# Services page-unique RTL overrides (services.html only)
#
# Loaded after assets/css/rtl.css. Fixes components that only
# services.html uses on this site: the "Value" checklist (value-three
# variant) and the Services grid checklist (services-one). Both share
# the same underlying bug family as the breadcrumb fix in rtl.css:
# a physical margin-left meant to sit *between* an icon and its label
# doesn't flip sides when flexbox's logical "row" direction reverses
# under [dir="rtl"], so the gap ends up on the wrong side of the pair.
--------------------------------------------------------------*/

/* Value section (value-three): two floated checklist columns
   -------------------------------------------------------------- */
/* .value__points floats left and .value__points-two (which also
   carries the .value__points class) floats left again with a
   margin-left offset to sit to its right. Under RTL both floats need
   to flip to the opposite edge, and the offset needs to become a
   margin-right so the second column still sits on the *inner* side of
   the first instead of collapsing onto/behind it. */
[dir="rtl"] .value__points {
  float: right;
}

[dir="rtl"] .value__points-two {
  margin-left: 0;
  margin-right: 85px;
}

/* Icon-then-label rows: the icon stays first in DOM order, and since
   flex "row" resolves against the current direction, the icon already
   moves to the right side of its row under RTL with no extra CSS —
   but the margin-left gap meant to separate icon from label stays on
   the physical left, landing on the far side of the label instead of
   between the icon and the label. */
[dir="rtl"] .value__points li .text {
  margin-left: 0;
  margin-right: 20px;
}

/* The image column's edge-bleed offset (margin-left: -90px pulls it
   toward the viewport edge, margin-right: 70px gutters the next
   column) is physical too, so it needs the same swap or the bleed
   points at the wrong viewport edge in RTL. */
[dir="rtl"] .value__left {
  margin-left: 70px;
  margin-right: -90px;
}

/* The decorative colour panel behind the image is built from a
   pseudo-element with right: 300px (leaves a 300px gap near one edge)
   and left: -10000000px (bleeds infinitely toward the other edge).
   Under RTL the whole .value__left column sits on the opposite side of
   the row, so left/right need to swap or the panel bleeds *underneath
   the text column* on the other side instead of behind the image. */
[dir="rtl"] .value-three .value__left:before {
  right: -10000000px;
  left: 300px;
}

/* Services grid (services-one): 4-column checklist cards
   -------------------------------------------------------------- */
/* Same icon-then-label gap bug as .value__points li .text above,
   applied to the checklist inside each services-one__single card. */
[dir="rtl"] .services-one__points li .text {
  margin-left: 0;
  margin-right: 15px;
}