/* R177 — Arabic services-card parity, project gallery arrow geometry,
   and project-card title typography. */

/* 1) Arabic homepage "مايميزنا": use the same centered card composition as EN.
   Keep the mechanical frame LTR so the layout does not drift under RTL; the
   Arabic copy itself remains RTL and centered. */
@media (min-width: 980px) {
  html[lang="ar"] body.ayamen-landing-r3 #services .l-services-card__content {
    direction: ltr !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: center !important;
  }

  html[lang="ar"] body.ayamen-landing-r3 #services .l-services-card__title {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    align-self: center !important;
    width: min(100%, 31rem) !important;
    max-width: 31rem !important;
    min-width: 0 !important;
    min-height: clamp(175px, 19vh, 225px) !important;
    margin: clamp(6.25rem, 11vh, 8rem) auto 0 !important;
    text-align: center !important;
    overflow: visible !important;
    direction: rtl !important;
  }

  html[lang="ar"] body.ayamen-landing-r3 #services .l-services-card__title > [data-plugin~="contentAnimation"],
  html[lang="ar"] body.ayamen-landing-r3 #services .l-services-card__title .content-animation,
  html[lang="ar"] body.ayamen-landing-r3 #services .l-services-card__title [data-content-animation-item] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    text-align: center !important;
  }

  html[lang="ar"] body.ayamen-landing-r3 #services .l-services-card__title .text-tiny,
  html[lang="ar"] body.ayamen-landing-r3 #services .l-services-card__title h3,
  html[lang="ar"] body.ayamen-landing-r3 #services .l-services-card__title .l-services-mob-card__content-title {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: auto !important;
    text-align: center !important;
    direction: rtl !important;
    unicode-bidi: plaintext !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
  }

  html[lang="ar"] body.ayamen-landing-r3 #services .l-services-card__text {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    align-self: center !important;
    width: min(100%, 27rem) !important;
    max-width: 27rem !important;
    min-width: 0 !important;
    min-height: clamp(120px, 14vh, 165px) !important;
    margin: auto auto 0 !important;
    padding: 0 !important;
    text-align: center !important;
    overflow: visible !important;
    direction: rtl !important;
  }

  html[lang="ar"] body.ayamen-landing-r3 #services .l-services-card__text > [data-plugin~="contentAnimation"],
  html[lang="ar"] body.ayamen-landing-r3 #services .l-services-card__text .content-animation,
  html[lang="ar"] body.ayamen-landing-r3 #services .l-services-card__text [data-content-animation-item],
  html[lang="ar"] body.ayamen-landing-r3 #services .l-services-card__text p,
  html[lang="ar"] body.ayamen-landing-r3 #services .l-services-card__text .l-services-mob-card__content-text {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-inline: auto !important;
    text-align: center !important;
    direction: rtl !important;
    unicode-bidi: plaintext !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
  }

  /* The arrows stay in the exact same physical top-right position as EN. */
  html[lang="ar"] body.ayamen-landing-r3 #services .l-services-card__nav {
    direction: ltr !important;
    left: auto !important;
    right: clamp(1.6rem, 2.4vw, 2.4rem) !important;
    align-self: auto !important;
    justify-content: flex-start !important;
  }
}

/* Mobile service cards use the same centered typographic treatment. */
@media (max-width: 979px) {
  html[lang="ar"] body.ayamen-landing-r3 #services .l-exquisite-mob-card__content,
  html[lang="ar"] body.ayamen-landing-r3 #services .l-exquisite-mob-card__content-counter,
  html[lang="ar"] body.ayamen-landing-r3 #services .l-exquisite-mob-card__content-title,
  html[lang="ar"] body.ayamen-landing-r3 #services .l-exquisite-mob-card__content-text,
  html[lang="ar"] body.ayamen-landing-r3 #services .l-services-mob-card__content-title,
  html[lang="ar"] body.ayamen-landing-r3 #services .l-services-mob-card__content-text {
    text-align: center !important;
    margin-inline: auto !important;
  }
}

/* 2) Individual project gallery: navigation is a physical LTR control even on
   Arabic pages. Previous is always LEFT with a left arrow; Next is always RIGHT
   with a right arrow. */
.ayamen-signature-residence .ayr-lightbox__dialog {
  direction: ltr !important;
}
.ayamen-signature-residence .ayr-lightbox__nav--prev {
  grid-column: 1 !important;
  grid-row: 1 !important;
  direction: ltr !important;
}
.ayamen-signature-residence .ayr-lightbox__stage {
  grid-column: 2 !important;
  grid-row: 1 !important;
}
.ayamen-signature-residence .ayr-lightbox__nav--next {
  grid-column: 3 !important;
  grid-row: 1 !important;
  direction: ltr !important;
}
html[lang="ar"] .ayamen-signature-residence .ayr-lightbox__meta {
  direction: rtl !important;
  text-align: right !important;
}

/* 3) Related-project card titles: use the same display/title family as the
   rest of each project page instead of falling back to the rounded body font. */
.ayamen-signature-residence .ayr-project .ayr-project-card__body > strong {
  font-family: var(--font-display, AyamenSans, AyamenHelvetica, Helvetica, Arial, sans-serif) !important;
  font-style: normal !important;
  font-weight: 400 !important;
  letter-spacing: -.025em !important;
}
html[lang="ar"] .ayamen-signature-residence .ayr-project .ayr-project-card__body > strong {
  font-family: var(--font-display, var(--ayamen-ar-display, AyamenCamel, Tahoma, Arial, sans-serif)) !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
}