/* R156 — Arabic arrow parity + About values frame alignment */

/* --------------------------------------------------------------------------
   1. Arabic arrows must use the exact same physical orientation as English.
   RTL is for text/layout only; arrow artwork is never mirrored or rotated.
   -------------------------------------------------------------------------- */
html[lang="ar"] :is(
  .icon-arrow-left-angle,
  .icon-arrow-right-angle,
  .icon-arrow-down,
  .icon-book-arrow,
  .ayamen-project-locations__arrow,
  .ayr-lightbox__nav svg,
  .js-exquisite-carousel-prev svg,
  .js-exquisite-carousel-next svg,
  .js-gallery-carousel-prev svg,
  .js-gallery-carousel-next svg,
  .js-services-carousel-prev svg,
  .js-services-carousel-next svg,
  .js-carousel-prev svg,
  .js-carousel-next svg,
  .js-content-animation-prev svg,
  .js-content-animation-next svg,
  [data-ayr-lightbox-prev] svg,
  [data-ayr-lightbox-next] svg
){
  transform:none!important;
  -webkit-transform:none!important;
  scale:1!important;
  rotate:0deg!important;
  direction:ltr!important;
  transform-origin:center!important;
  transform-box:fill-box!important;
}

/* Keep the English project-detail arrow glyphs and hover direction. */
html[lang="ar"] .ayr-project-card__cta::after{
  content:"→"!important;
}
html[lang="ar"] .ayr-project-card:hover .ayr-project-card__cta::after,
html[lang="ar"] .ayr-project-card:focus-within .ayr-project-card__cta::after{
  transform:translateX(5px)!important;
}
html[lang="ar"] .ayr-about__detail-tab::after{
  content:"↗"!important;
}

/* Projects-map location arrow moves in the same physical direction as EN. */
html[lang="ar"] .ayamen-project-locations__item:hover .ayamen-project-locations__arrow,
html[lang="ar"] .ayamen-project-locations__item:focus-within .ayamen-project-locations__arrow,
html[lang="ar"] .ayamen-project-locations__item.is-map-active .ayamen-project-locations__arrow{
  transform:translateX(5px)!important;
  -webkit-transform:translateX(5px)!important;
}

/* --------------------------------------------------------------------------
   2. Arabic About / Our Values: keep the mechanical three-column layout in
      the same physical direction as EN. This places the counter inside the
      left side of the frame and the image inside the right side of the frame.
      Arabic copy itself remains RTL.
   -------------------------------------------------------------------------- */
@media (min-width:568px){
  html[lang="ar"] .ab-values__container > .row.is-hidden--sm-down{
    direction:ltr!important;
  }

  html[lang="ar"] .ab-values__container > .row.is-hidden--sm-down > .col:first-child{
    direction:ltr!important;
    text-align:left!important;
    min-width:0!important;
  }

  html[lang="ar"] .ab-values__container > .row.is-hidden--sm-down > .ab-values__content{
    direction:rtl!important;
    text-align:right!important;
    min-width:0!important;
  }

  html[lang="ar"] .ab-values__container > .row.is-hidden--sm-down > .col:last-child{
    direction:ltr!important;
    min-width:0!important;
  }

  html[lang="ar"] .ab-values__image{
    max-width:100%!important;
  }
}

/* Tablet / compact desktop: add a small physical inset so neither edge item
   can touch the rounded section frame when the grid is compressed. */
@media (min-width:568px) and (max-width:1199px){
  html[lang="ar"] .ab-values__container > .row.is-hidden--sm-down > .col:first-child{
    padding-left:clamp(14px,2.3vw,28px)!important;
  }
  html[lang="ar"] .ab-values__container > .row.is-hidden--sm-down > .col:last-child{
    padding-right:clamp(14px,2.3vw,28px)!important;
  }
}

/* Desktop: preserve the same small frame-safe inset without changing image
   dimensions or slider interaction. */
@media (min-width:1200px){
  html[lang="ar"] .ab-values__container > .row.is-hidden--sm-down > .col:first-child{
    padding-left:clamp(20px,1.8vw,34px)!important;
  }
  html[lang="ar"] .ab-values__container > .row.is-hidden--sm-down > .col:last-child{
    padding-right:clamp(20px,1.8vw,34px)!important;
  }
}