/* Arabic pages read from the right; the booking rail follows the left margin. */
@media (min-width: 901px) {
  html[lang="ar"] .booking-rail {
    right: auto;
    left: max(48px, calc((100% - 1320px) / 2));
  }
  html[lang="ar"] .course-hero .hero-content {
    padding-right: 0;
    padding-left: 380px;
  }
  html[lang="ar"] .course-flow .course-reading {
    margin-inline-start: 0;
    margin-inline-end: auto;
  }
  html[lang="ar"] .booking-rail .booking-card {
    max-height: calc(100dvh - 104px) !important;
    overflow: auto !important;
    overscroll-behavior-y: auto;
    scrollbar-width: thin;
    direction: rtl;
  }
}
@media (min-width: 901px) and (max-width: 1150px) {
  html[lang="ar"] .booking-rail { left: 32px; }
  html[lang="ar"] .course-hero .hero-content { padding-left: 342px; }
}
html[lang="ar"] .course-hero h1 .display,
html[lang="ar"] .course-reading h2 .display {
  width: auto;
  transform: none;
  white-space: normal;
}
html[lang="ar"] .revised-course-hero::after {
  background: linear-gradient(270deg, #0b0d0cbd, transparent 83%), linear-gradient(0deg, #0b0d0c99, transparent 70%);
}
html[lang="ar"] .enrolment-dialog { direction: rtl; }
html[lang="ar"] .enrolment-close { right: auto; left: 12px; }
@media (max-width: 650px), (max-height: 580px) {
  html[lang="ar"] .enrolment-switch { padding-inline: 14px 56px; }
}

/* Move the artwork, rather than mirroring the streets, labels and school pin. */
html[lang="ar"] :is(.course-map-light, .venue-map-blend) .venue-copy {
  margin-inline-start: 0;
  margin-inline-end: auto;
  text-align: start;
}
@media (min-width: 761px) {
  html[lang="ar"] :is(.course-map-light, .venue-map-blend) .venue-art > img {
    position: absolute;
    inset: 0 auto 0 0;
    width: 69%;
    height: 100%;
    min-width: 0;
    transform: none;
    object-fit: contain;
    object-position: center 67%;
  }
  html[lang="ar"] :is(.course-map-light, .venue-map-blend) .venue-art::after {
    background: linear-gradient(270deg, rgb(var(--map-paper-rgb, 255,255,255)) 0 28%, rgba(var(--map-paper-rgb, 255,255,255),.94) 35%, transparent 59%),
                linear-gradient(0deg, rgb(var(--map-paper-rgb, 255,255,255)), transparent 18%);
  }
  html[lang="ar"] .course-after-gallery .course-map-light .venue-art {
    mask-image: linear-gradient(180deg, transparent, #000 40%);
  }
  html[lang="ar"] .venue-story-map .venue-copy {
    padding-inline: 0 !important;
  }
}
@media (max-width: 760px) {
  html[lang="ar"] :is(.course-map-light, .venue-map-blend) .venue-panorama {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
    height: auto;
    min-height: 0;
    padding: 24px 0 34px;
  }
  html[lang="ar"] :is(.course-map-light, .venue-map-blend) .venue-panorama .venue-art {
    position: relative;
    inset: auto !important;
    width: 100%;
    height: auto;
    aspect-ratio: 1.8;
    margin: 0;
    transform: none;
    z-index: 0;
    mask-image: none;
    -webkit-mask-image: none;
  }
  html[lang="ar"] :is(.course-map-light, .venue-map-blend) .venue-art > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-width: 0;
    transform: none;
    object-fit: contain;
    object-position: center;
  }
  html[lang="ar"] :is(.course-map-light, .venue-map-blend) .venue-art::after { display: none; }
  html[lang="ar"] :is(.course-map-light, .venue-map-blend) .venue-copy {
    width: 100%;
    max-width: none !important;
    padding: 0;
  }
}