/*--------------------------------------------------------------
# Alshaheen RTL overrides — the-building.html only
#
# Loaded after assets/css/rtl.css. See that file's header comment
# for the shared conventions; this partial only carries fixes
# unique to this page's markup.
--------------------------------------------------------------*/

/* .the-building__top / .the-building__bottom
   These are plain Bootstrap flex .row > .col-xl-6 pairs (text column +
   image column). aports.css sets the inter-column gutter with a
   PHYSICAL margin on the text column (margin-right on the top block's
   left/text col, margin-left on the bottom block's right/text col).
   Flexbox's "row" main axis follows the `direction` property, so under
   dir="rtl" the two columns swap visual sides (first DOM child moves
   to the right instead of the left) while the physical margin stays
   put — the gutter collapses against the image and a matching gap
   opens on the outer edge instead. Flip both to the opposite physical
   side so the gutter still sits between the text and the image. */
[dir="rtl"] .the-building__top-left {
  margin-right: 0;
  margin-left: 70px;
}

[dir="rtl"] .the-building__bottom-right {
  margin-left: 0;
  margin-right: 70px;
}
