/* R157 — Arabic Our Values frame correction + physical English arrow order */

/* Arrow pairs are mechanical UI, not RTL text. Keep the same physical button
   order as English: LEFT arrow on the left, RIGHT arrow on the right. */
html[lang="ar"] :is(
  .ab-values__content-buttons,
  .l-exquisite-content__nav,
  .l-gallery__links .group--small,
  .ayr-lightbox__nav,
  .ayamen-project-carousel__controls
){
  direction:ltr!important;
  flex-direction:row!important;
}

html[lang="ar"] :is(
  .group,
  .group--small,
  .group--middle
):has(> .js-content-animation-prev):has(> .js-content-animation-next),
html[lang="ar"] :is(
  .group,
  .group--small,
  .group--middle
):has(> .js-gallery-carousel-prev):has(> .js-gallery-carousel-next),
html[lang="ar"] :is(
  .group,
  .group--small,
  .group--middle
):has(> .js-exquisite-carousel-prev):has(> .js-exquisite-carousel-next),
html[lang="ar"] :is(
  .group,
  .group--small,
  .group--middle
):has(> .js-services-carousel-prev):has(> .js-services-carousel-next){
  direction:ltr!important;
  flex-direction:row!important;
}

/* No icon mirroring in Arabic. */
html[lang="ar"] :is(
  .icon-arrow-left-angle,
  .icon-arrow-right-angle,
  .js-content-animation-prev svg,
  .js-content-animation-next svg,
  .js-gallery-carousel-prev svg,
  .js-gallery-carousel-next svg,
  .js-exquisite-carousel-prev svg,
  .js-exquisite-carousel-next svg,
  .js-services-carousel-prev svg,
  .js-services-carousel-next svg
){
  transform:none!important;
  -webkit-transform:none!important;
  rotate:0deg!important;
  scale:1!important;
}

/* About / Our Values desktop + tablet mechanical layout.
   The old col/offset system inherits RTL and was squeezing the Arabic title
   into the image. Use one explicit physical grid while keeping copy RTL. */
@media (min-width:568px){
  html[lang="ar"] .ab-values__container > .row.is-hidden--sm-down{
    display:grid!important;
    grid-template-columns:minmax(88px,14fr) minmax(230px,24fr) minmax(0,54fr)!important;
    column-gap:clamp(22px,2.2vw,44px)!important;
    align-items:stretch!important;
    direction:ltr!important;
    padding-left:clamp(22px,2.2vw,44px)!important;
    padding-right:clamp(22px,2.2vw,44px)!important;
    box-sizing:border-box!important;
    width:100%!important;
  }

  html[lang="ar"] .ab-values__container > .row.is-hidden--sm-down > .col,
  html[lang="ar"] .ab-values__container > .row.is-hidden--sm-down > .ab-values__content{
    width:auto!important;
    max-width:none!important;
    min-width:0!important;
    margin-left:0!important;
    margin-right:0!important;
    padding-left:0!important;
    padding-right:0!important;
  }

  /* Counter: physical left and safely inset from rounded frame. */
  html[lang="ar"] .ab-values__container > .row.is-hidden--sm-down > .col:first-child{
    grid-column:1!important;
    direction:ltr!important;
    text-align:left!important;
    justify-self:stretch!important;
  }

  /* Arabic copy keeps its natural RTL flow in a wider dedicated column. */
  html[lang="ar"] .ab-values__container > .row.is-hidden--sm-down > .ab-values__content{
    grid-column:2!important;
    direction:rtl!important;
    text-align:right!important;
    align-self:stretch!important;
    position:relative!important;
  }

  html[lang="ar"] .ab-values__content-title,
  html[lang="ar"] .ab-values__content .content-animation p{
    max-width:100%!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
  }

  /* Image controller: physical right, with no legacy offset/padding pushing it
     out of the visible rounded section frame. */
  html[lang="ar"] .ab-values__container > .row.is-hidden--sm-down > .col:last-child{
    grid-column:3!important;
    direction:ltr!important;
    justify-self:stretch!important;
    align-self:stretch!important;
    transform:none!important;
  }

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

  /* Values arrows: same visual order as EN, anchored within copy column. */
  html[lang="ar"] .ab-values__content-buttons{
    left:0!important;
    right:auto!important;
    width:auto!important;
    display:flex!important;
    justify-content:flex-start!important;
    align-items:center!important;
    direction:ltr!important;
  }
}

/* Compact tablet: preserve breathing room without allowing the title to touch
   the image. */
@media (min-width:568px) and (max-width:979px){
  html[lang="ar"] .ab-values__container > .row.is-hidden--sm-down{
    grid-template-columns:minmax(68px,12fr) minmax(190px,27fr) minmax(0,53fr)!important;
    column-gap:clamp(14px,2vw,24px)!important;
    padding-inline:clamp(14px,2.4vw,26px)!important;
  }
}