/* MIDZ Arabic final layout layer.
   This file intentionally loads after ar-mobile-hotfix.css. */

/* Services archive — copy stays on the right and the floating artwork moves
   to the free left side on laptop/desktop. */
html[lang="ar"][dir="rtl"] body.services-page:not(.about-page) .midz-service-card-copy {
  width: 72% !important;
  max-width: 72% !important;
  margin-left: auto !important;
  margin-right: 0 !important;
  direction: rtl !important;
  text-align: right !important;
}

html[lang="ar"][dir="rtl"] body.services-page:not(.about-page) .midz-service-card-copy h3,
html[lang="ar"][dir="rtl"] body.services-page:not(.about-page) .midz-service-card-copy p,
html[lang="ar"][dir="rtl"] body.services-page:not(.about-page) .midz-service-card-copy ul,
html[lang="ar"][dir="rtl"] body.services-page:not(.about-page) .midz-service-card-copy li {
  direction: rtl !important;
  text-align: right !important;
}

html[lang="ar"][dir="rtl"] body.services-page:not(.about-page) .midz-service-card-copy li {
  padding-left: 0 !important;
  padding-right: 18px !important;
}

html[lang="ar"][dir="rtl"] body.services-page:not(.about-page) .midz-service-card-copy li::before {
  left: auto !important;
  right: 0 !important;
}

html[lang="ar"][dir="rtl"] body.services-page:not(.about-page) .midz-service-card-media {
  /* Keep the artwork in the card's free left column, but leave enough room
     for the fixed Follow Us rail. */
  left: clamp(72px, 6vw, 112px) !important;
  right: auto !important;
  width: min(42%, 230px) !important;
}

/* Desktop Arabic inner heroes — artwork right, RTL content in an independent
   left column. No image/text or image/social-rail collision. */
@media (min-width: 992px) {
  html[lang="ar"][dir="rtl"] body.about-page .midz-services-hero-shape {
    left: auto !important;
    right: clamp(40px, 4.5vw, 72px) !important;
    bottom: -40px !important;
  }

  html[lang="ar"][dir="rtl"] body.about-page .midz-services-hero-content {
    width: 56% !important;
    max-width: 760px !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    text-align: right !important;
  }

  html[lang="ar"][dir="rtl"] body.contact-page .midz-page-hero-inner {
    direction: ltr !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1.05fr) minmax(280px, 0.78fr) !important;
    align-items: center !important;
  }

  html[lang="ar"][dir="rtl"] body.contact-page .midz-page-hero-content {
    grid-column: 1 !important;
    direction: rtl !important;
    text-align: right !important;
  }

  html[lang="ar"][dir="rtl"] body.contact-page .midz-page-hero-shape {
    grid-column: 2 !important;
    position: relative !important;
    inset: auto !important;
    justify-self: end !important;
    margin: 0 !important;
  }
}

/* Phones/tablets — copy first, CTA second, artwork last. CTA and artwork are
   aligned on the right, away from the fixed Follow Us rail on the left. */
@media (max-width: 991px) {
  html[lang="ar"][dir="rtl"] body.about-page .midz-services-hero-inner,
  html[lang="ar"][dir="rtl"] body.contact-page .midz-page-hero-inner {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
      "copy"
      "actions"
      "shape" !important;
    align-items: start !important;
    row-gap: 20px !important;
  }

  html[lang="ar"][dir="rtl"] body.about-page .midz-services-hero-content,
  html[lang="ar"][dir="rtl"] body.contact-page .midz-page-hero-content {
    display: contents !important;
  }

  html[lang="ar"][dir="rtl"] body.about-page .midz-services-copy,
  html[lang="ar"][dir="rtl"] body.contact-page .midz-page-hero-copy {
    grid-area: copy !important;
    width: 100% !important;
    max-width: 100% !important;
    direction: rtl !important;
    text-align: right !important;
  }

  html[lang="ar"][dir="rtl"] body.about-page .midz-services-actions,
  html[lang="ar"][dir="rtl"] body.contact-page .midz-page-hero-actions {
    grid-area: actions !important;
    /* In an RTL grid, start is the physical right edge. */
    justify-self: start !important;
    align-self: center !important;
    width: max-content !important;
    max-width: 100% !important;
    margin: 0 0 0 auto !important;
    padding: 0 !important;
  }

  html[lang="ar"][dir="rtl"] body.about-page .midz-services-hero-shape,
  html[lang="ar"][dir="rtl"] body.contact-page .midz-page-hero-shape {
    grid-area: shape !important;
    position: relative !important;
    inset: auto !important;
    justify-self: start !important;
    align-self: center !important;
    width: min(56vw, 230px) !important;
    max-width: 68vw !important;
    margin: 0 0 0 auto !important;
  }

  /* Mobile service cards keep artwork on the physical right, away from the
     Follow Us rail. It is in normal flow beneath the Arabic list. */
  html[lang="ar"][dir="rtl"] body.services-page:not(.about-page) .midz-service-card-copy {
    width: 100% !important;
    max-width: 100% !important;
  }

  html[lang="ar"][dir="rtl"] body.services-page:not(.about-page) .midz-service-card-media {
    position: relative !important;
    inset: auto !important;
    width: min(60%, 220px) !important;
    max-width: 220px !important;
    align-self: flex-start !important;
    margin: -4px -10px 0 0 !important;
  }
}

/* Final requested Arabic hero layout.
   Desktop: copy right / artwork left.
   Phone + tablet: hide the artwork and keep a clean RTL copy + CTA stack. */
@media (min-width: 992px) {
  html[lang="ar"][dir="rtl"] body.about-page .midz-services-hero-shape {
    left: clamp(96px, 8vw, 150px) !important;
    right: auto !important;
  }

  html[lang="ar"][dir="rtl"] body.about-page .midz-services-hero-content {
    width: 56% !important;
    max-width: 760px !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    direction: rtl !important;
    text-align: right !important;
  }

  html[lang="ar"][dir="rtl"] body.contact-page .midz-page-hero-inner {
    display: grid !important;
    direction: ltr !important;
    grid-template-columns: minmax(260px, 0.78fr) minmax(0, 1.05fr) !important;
    align-items: center !important;
  }

  html[lang="ar"][dir="rtl"] body.contact-page .midz-page-hero-content {
    grid-column: 2 !important;
    direction: rtl !important;
    text-align: right !important;
  }

  html[lang="ar"][dir="rtl"] body.contact-page .midz-page-hero-shape {
    display: block !important;
    grid-column: 1 !important;
    position: relative !important;
    inset: auto !important;
    justify-self: start !important;
    margin: 0 0 0 clamp(36px, 3vw, 58px) !important;
  }
}

@media (max-width: 991px) {
  html[lang="ar"][dir="rtl"] body.about-page .midz-services-hero-inner,
  html[lang="ar"][dir="rtl"] body.contact-page .midz-page-hero-inner {
    display: block !important;
    min-height: auto !important;
    direction: rtl !important;
  }

  html[lang="ar"][dir="rtl"] body.about-page .midz-services-hero-content,
  html[lang="ar"][dir="rtl"] body.contact-page .midz-page-hero-content {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    direction: rtl !important;
    text-align: right !important;
  }

  html[lang="ar"][dir="rtl"] body.about-page .midz-services-copy,
  html[lang="ar"][dir="rtl"] body.contact-page .midz-page-hero-copy {
    width: 100% !important;
    max-width: 100% !important;
    direction: rtl !important;
    text-align: right !important;
  }

  html[lang="ar"][dir="rtl"] body.about-page .midz-services-actions,
  html[lang="ar"][dir="rtl"] body.contact-page .midz-page-hero-actions {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    justify-content: flex-start !important;
    align-items: center !important;
    margin: 22px 0 0 !important;
    padding: 0 !important;
    direction: rtl !important;
    text-align: right !important;
  }

  html[lang="ar"][dir="rtl"] body.about-page .midz-services-hero-shape,
  html[lang="ar"][dir="rtl"] body.contact-page .midz-page-hero-shape {
    display: none !important;
  }
}

@media (max-width: 575px) {
  html[lang="ar"][dir="rtl"] body.about-page .midz-services-hero-shape,
  html[lang="ar"][dir="rtl"] body.contact-page .midz-page-hero-shape {
    width: min(52vw, 205px) !important;
  }
}

/* Laptop/desktop alignment only: About and Contact use the same hero geometry.
   Mobile/tablet rules are intentionally untouched. */
@media (min-width: 992px) {
  html[lang="ar"][dir="rtl"] body.about-page .midz-services-hero-inner,
  html[lang="ar"][dir="rtl"] body.contact-page .midz-page-hero-inner {
    display: block !important;
    position: relative !important;
  }

  html[lang="ar"][dir="rtl"] body.about-page .midz-services-hero-content,
  html[lang="ar"][dir="rtl"] body.contact-page .midz-page-hero-content {
    width: 56% !important;
    max-width: 760px !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    direction: rtl !important;
    text-align: right !important;
  }

  html[lang="ar"][dir="rtl"] body.about-page .midz-services-hero-shape,
  html[lang="ar"][dir="rtl"] body.contact-page .midz-page-hero-shape {
    display: block !important;
    position: absolute !important;
    left: clamp(96px, 8vw, 150px) !important;
    right: auto !important;
    top: 50% !important;
    bottom: auto !important;
    width: clamp(220px, 32vw, 460px) !important;
    max-width: 46% !important;
    height: auto !important;
    margin: 0 !important;
    transform: translateY(-50%) !important;
  }

  html[lang="ar"][dir="rtl"] body.contact-page .floating-social {
    top: calc(50% + 54px) !important;
  }
}

/* Arabic projects: the translated heading is much longer than its English
   counterpart, so keep it readable without letting it dominate the hero. */
html[lang="ar"][dir="rtl"] body.projects-page .midz-page-hero-copy h1 {
  font-size: clamp(44px, 4.35vw, 64px) !important;
  line-height: 1.12 !important;
  letter-spacing: 0 !important;
}

/* Contact only: lower the fixed rail slightly and reserve its physical-left
   lane inside the Arabic hero so it cannot sit over the introductory copy. */
@media (max-width: 991px) {
  html[lang="ar"][dir="rtl"] body.contact-page .floating-social {
    top: calc(50% + 86px) !important;
  }

  html[lang="ar"][dir="rtl"] body.contact-page .midz-page-hero-content {
    padding-left: clamp(92px, 18vw, 112px) !important;
    box-sizing: border-box !important;
  }

  html[lang="ar"][dir="rtl"] body.projects-page .midz-page-hero-copy h1 {
    font-size: clamp(32px, 8.2vw, 42px) !important;
    line-height: 1.2 !important;
  }
}