/* ==========================================================================
   home.css — page styles for / (EN, Elementor page 8) and its Arabic twin
   (post 762). Shared by home.en.html + home.ar.html.

   Structure (one block per Elementor container, top to bottom):
     1. .hero          80vh boxed container 97c3b80 (.hero__inner = e-con-inner,
                       flex row, centred): .hero__text (fe85274, 47% / tablet 53%)
                       > .hero__title (h1) / .hero__subtitle (h2) / .hero__lead (p)
                       / .hero__arrow > .hero__arrow-box > img (desktop only)
                       / .hero__cta > .hero__btn (desktop only);
                       .hero__media (8b357dc, 53% / 47%) > .hero__img
     2. .about         8c7b9ae: absolutely positioned (top 115vh) over the wave,
                       desktop + tablet only. .about__inner (60vw / 80vw column)
                       > .about__title (h1) + 3 × .about__card (dashed boxes)
                       > .about__card-title (h3) / .about__card-text (p)
        .about--mobile d5c4f7c: the in-flow mobile variant (own background image,
                       margin-top -100px) — same inner classes.
     3. .wave          af8b757: full-width Wave-bg.png illustration (.wave__img),
                       desktop + tablet only.
     4. .values        e87e2dc (margin 100px 0): .values__inner > .values__title
                       (h1 on the brush-stroke png) + .values__grid (8e18642,
                       wrapping flex row, butterfly backgrounds: one on the
                       element, one on ::before = Elementor background overlay)
                       > 5 × .values__item (image-box widget, 32% / 48% / 100%)
                       > .values__box > .values__img (figure) + .values__content
                       > .values__name (h3) / .values__desc (p)
     5. .board         ea24383 (grey band, padding 5vw): .board__inner >
                       .board__panel (4af553c, board.png contain) > .board__title
                       / .board__subtitle (h2) / .board__calligraphy (img 20vw)
                       / .board__cta > .board__btn (icon after text, gap 50px).
                       Desktop + tablet only.
     6. .board-m       467c40c: the mobile card variant. .board-m__inner >
                       .board-m__card (4px #01174C border) > .board-m__title /
                       .board-m__subtitle / .board-m__icon-wrap > .board-m__icon-inner
                       (margin -80px 0) > .board-m__icon (250px inline SVG)
                       / .board-m__cta > .board-m__btn
     7. .cta           0f01b55 (70vh, CTA.png cover): .cta__inner > 2 × .cta__title
                       (h2) + .cta__action (margin-top 2vw) > .cta__btn
     8. RTL            [dir="rtl"] overrides taken from post-762.css, at the end.
   Buttons extend .btn from base.css (.hero__btn, .board__btn, .board-m__btn,
   .cta__btn all use the primary text colour + 12px radius).
   Values are the Elementor source values (vw units on desktop, px overrides at
   ≤1024px / ≤767px) from post-8.css; heading levels follow the live DOM.
   Everything uses logical properties, so the AR page only needs the [dir="rtl"]
   block at the bottom for the places the live AR page really differs.
   Background positions stay physical (Elementor does not mirror them).
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Shared: page buttons (button widgets 25c6b49 / 38353eb / 3c50442 / 4af00ab:
      colour + fill = primary, radius 12px; the colour also wins over .btn:hover)
   -------------------------------------------------------------------------- */
.hero__btn,
.board__btn,
.board-m__btn,
.cta__btn,
.hero__btn:hover, .hero__btn:focus, .hero__btn:visited,
.board__btn:hover, .board__btn:focus, .board__btn:visited,
.board-m__btn:hover, .board-m__btn:focus, .board-m__btn:visited,
.cta__btn:hover, .cta__btn:focus, .cta__btn:visited {
  border-radius: 12px;
  color: var(--color-primary);
  fill: var(--color-primary);
  font-weight: 500;
}
/* button icon (elementor-button-icon: inline svg, 1em square) */
.btn__icon svg {
  width: 1em;
  height: 1em;
}
.btn__content--icon-end { flex-direction: row-reverse; }

/* --------------------------------------------------------------------------
   1. Hero (container 97c3b80: min-height 80vh, gradient, row centred, gap 0)
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  min-height: 80vh;
  padding-inline: var(--con-pad);
  background-color: transparent;
  background-image: linear-gradient(180deg, #FFFFFF33 0%, #99999933 100%);
}
.hero__inner {
  display: flex;
  flex: 1 1 auto;
  flex-direction: row;
  align-items: center;
  gap: 0;
  width: 100%;
  max-width: min(100%, var(--container-max));
  margin-inline: auto;
  padding-block: var(--con-pad);
}
.hero__text,
.hero__media {
  position: relative;
  display: flex;
  flex: 0 1 auto;
  flex-direction: column;
  gap: var(--widget-gap);
  min-width: 0;
  padding: var(--con-pad);
}
.hero__text  { width: 47%; }
.hero__media { width: 53%; }

.hero__title,
.hero__subtitle,
.hero__lead {
  margin: 0;
  padding: 0;
  max-width: 100%;
  color: var(--color-primary);
  font-family: var(--font-tajawal);
}
.hero__title {
  font-size: 3vw;
  font-weight: 700;
  line-height: 3.5vw;
}
.hero__subtitle {
  font-size: 2.8vw;
  font-weight: 500;
  line-height: 3vw;
}
.hero__lead {
  font-size: 1.2vw;
  font-weight: 500;
  line-height: 1.5vw;
}

/* curly arrow (image widget cb1a0e6: align-self flex-end, z-index 2, the
   widget container pulled out with negative margins, img 7vw) */
.hero__arrow {
  position: relative;
  z-index: 2;
  align-self: flex-end;
  max-width: 100%;
  text-align: center;
}
.hero__arrow-box {
  margin-block: -5vw;
  margin-inline: 0 -5vw;
}
.hero__arrow img {
  display: inline-block;
  vertical-align: middle;
  width: 8vw;
  max-width: 100%;
  height: auto;
}

/* "Teacher Login" button (widget 25c6b49, align justify → full width) */
.hero__cta {
  position: relative;
  max-width: 100%;
}
.hero__btn {
  width: 100%;
  padding: 0;
  font-size: 2.2vw;
  line-height: 5vw;
}

/* books image (widget 3d825bb: img 80vw capped by the column) */
.hero__media > .hero__img {
  display: block;
  width: 80vw;
  max-width: 100%;
  height: auto;
  margin-inline: auto;
}

@media (max-width: 1024px) {
  .hero { min-height: 60vh; }
  .hero__text  { width: 53%; }
  .hero__media { width: 47%; }
  .hero__title    { font-size: 30px; line-height: 36px; }
  .hero__subtitle { font-size: 28px; line-height: 32px; }
  .hero__lead     { font-size: 20px; line-height: 24px; }
}
@media (max-width: 767px) {
  .hero { margin-block-start: 50px; }
  .hero__inner { flex-wrap: wrap; }
  .hero__text,
  .hero__media { flex-wrap: wrap; width: 100%; }
  .hero__media { padding: 0; }
  .hero__title    { font-size: 6.9vw; }
  .hero__subtitle { font-size: 22px; line-height: 1.2em; }
  .hero__media > .hero__img { width: 100vw; }
}

/* --------------------------------------------------------------------------
   2. About (container 8c7b9ae: position absolute, top 115vh, z-index 2,
      content width 60vw; tablet: top 85vh, 80vw, padding 20px)
   -------------------------------------------------------------------------- */
.about {
  position: absolute;
  top: 115vh;
  inset-inline-start: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  padding-inline: var(--con-pad);
}
.about__inner {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: center;
  gap: var(--widget-gap);
  width: 100%;
  max-width: min(100%, 60vw);
  margin-inline: auto;
  padding-block: var(--con-pad);
}
.about__title {
  margin: 0;
  padding: 0;
  max-width: 100%;
  color: var(--color-primary);
  font-family: var(--font-tajawal);
  font-size: 4vw;
  font-weight: 700;
  line-height: 5vw;
  text-align: center;
}
/* dashed cards (containers a5365a4 / 4f76077 / 6486380) */
.about__card {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--widget-gap);
  width: 100%;
  min-height: 180px;
  padding: 15px 34px;
  border: 4px dashed #1B1B1B5C;
  border-radius: 14px;
  background-color: #F5F5F5A3;
}
.about__card-title,
.about__card-text {
  margin: 0;
  padding: 0;
  max-width: 100%;
  color: var(--color-primary);
  font-family: var(--font-tajawal);
}
.about__card-title {
  font-size: 2.2vw;
  font-weight: 700;
  line-height: 2.5vw;
}
.about__card-text {
  font-size: 1.2vw;
  font-weight: 500;
  line-height: 1.5vw;
}
@media (max-width: 1024px) {
  .about {
    top: 85vh;
    padding-inline: 20px;
  }
  .about__inner {
    max-width: min(100%, 80vw);
    padding-block: 20px;
  }
  .about__title { font-size: 40px; line-height: 44px; }
  .about__card  { gap: 10px; }
  .about__card-title { font-size: 32px; line-height: 36px; }
  .about__card-text  { font-size: 18px; line-height: 24px; }
}
@media (max-width: 767px) {
  .about { top: 125vh; }
  .about__card {
    flex-wrap: wrap;
    min-height: 330px;
    padding: 20px;
  }
}

/* mobile variant (container d5c4f7c: in flow, about-mobile.png cover,
   margin-top -100px, padding 100px 20px 60px; cards f05fdb8 / a6b2cdb / c2fdd27
   min-height 200px → 263px on mobile) */
.about--mobile {
  position: relative;
  top: auto;
  inset-inline-start: auto;
  background-image: url("../../img/about-mobile.png");
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;
}
.about--mobile .about__card { min-height: 200px; }
@media (max-width: 1024px) {
  .about--mobile { background-position: center right; }
}
@media (max-width: 767px) {
  .about--mobile {
    margin-block-start: -100px;
    padding-inline: 20px;
    background-position: center center;
  }
  .about--mobile .about__inner {
    flex-wrap: wrap;
    max-width: min(100%, var(--container-max));
    padding-block: 100px 60px;
  }
  .about--mobile .about__card { min-height: 263px; }
}

/* --------------------------------------------------------------------------
   3. Wave / landscape (container af8b757: no padding, #99999933 background,
      image widget 4c8c523 100% wide; tablet 80vh cover top right)
   -------------------------------------------------------------------------- */
.wave {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--widget-gap);
  width: 100%;
  max-width: 100%;
  background-color: #99999933;
}
.wave__img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}
@media (max-width: 1024px) {
  .wave__img {
    height: 80vh;
    object-fit: cover;
    object-position: top right;
  }
}
@media (max-width: 767px) {
  .wave__img {
    height: 120vh;
    object-position: top center;
  }
}

/* --------------------------------------------------------------------------
   4. Our Values (container e87e2dc: margin 100px 0; heading a9f9a96 on the
      Our-values.png brush stroke; grid 8e18642 = wrapping row, gap 20px,
      butterfly backgrounds; 5 image boxes 32% wide)
   -------------------------------------------------------------------------- */
.values {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  margin-block: 100px;
  padding-inline: var(--con-pad);
}
.values__inner {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--widget-gap);
  width: 100%;
  max-width: min(100%, var(--container-max));
  margin-inline: auto;
  padding-block: var(--con-pad);
}
.values__title {
  margin: 0;
  padding: 0;
  max-width: 100%;
  color: var(--color-primary);
  font-family: var(--font-tajawal);
  font-size: 3vw;
  font-weight: 700;
  line-height: 6vw;
  text-align: center;
  background-image: url("../../img/Our-values.png");
  background-position: center center;
  background-repeat: no-repeat;
}
.values__grid {
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  width: 100%;
  padding: var(--con-pad);
  background-image: url("../../img/butterfly1-1.png");
  background-position: 8% 66%;
  background-repeat: no-repeat;
  background-size: 10vw auto;
}
/* Elementor background overlay (.e-con::before) = the second butterfly */
.values__grid::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  background-image: url("../../img/Group-28.png");
  background-position: 100% 85%;
  background-repeat: no-repeat;
  background-size: 15vw auto;
  opacity: 1;
}
/* image-box widgets (a909039 / 37d0695 / 663716e / a8691e5 / 0f9ac61) */
.values__item {
  position: relative;
  flex-grow: 0;
  width: 32%;
  max-width: 32%;
  min-width: 0;
}
.values__box {
  height: 100%;
  padding: 3px;
  text-align: center;
}
.values__img {
  display: inline-block;
  width: 188px;
  max-width: 100%;
  margin: 0;
}
.values__img img {
  max-width: 100%;
  height: auto;
}
.values__content {
  width: 100%;
  text-align: center;
}
.values__name {
  margin: 8px 0 5px;
  padding: 0;
  color: var(--color-primary);
  font-family: var(--font-tajawal);
  font-size: 2vw;
  font-weight: 700;
  line-height: 2.5vw;
}
.values__desc {
  margin: 0;
  padding: 0;
  color: var(--color-primary);
  font-family: var(--font-tajawal);
  font-size: 1.16vw;
  font-weight: 500;
  line-height: 1.5vw;
}
/* custom CSS of container 8e18642 (desktop only): figure 10vw, img 100% */
@media (min-width: 1025px) {
  .values__img { width: 10vw; }
  .values__img img { width: 100%; }
}
@media (max-width: 1024px) {
  .values__title {
    font-size: 40px;
    line-height: 120px;
    background-image: url("../../img/Our-values-bg.png");
  }
  .values__grid {
    background-position: 10% 90%;
    background-size: 120px auto;
  }
  .values__grid::before {
    background-position: bottom right;
    background-size: 200px auto;
  }
  .values__item {
    width: 48%;
    max-width: 48%;
  }
  .values__name { font-size: 30px; line-height: 36px; }
  .values__desc { font-size: 18px; line-height: 24px; }
}
@media (max-width: 767px) {
  .values { margin-block: 20px 0; }
  .values__grid {
    gap: 40px;
    padding: 10px 10px 120px;
    background-image: url("../../img/butterfly2-1.png");
    background-position: 100% 60%;
    background-size: 75px auto;
  }
  .values__grid::before {
    background-image: url("../../img/blue-butterfly-1.png");
    background-position: 2% 100%;
    background-size: 100px auto;
  }
  .values__item {
    width: 100%;
    max-width: 100%;
  }
}

/* --------------------------------------------------------------------------
   5. Curriculum board (container ea24383: min-height 80vh, padding 5vw,
      #63636314; panel 4af553c: board.png contain, gap 1.5vw 1vw, centred)
   -------------------------------------------------------------------------- */
.board {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  min-height: 80vh;
  padding-inline: 5vw;
  background-color: #63636314;
}
.board__inner {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: center;
  gap: var(--widget-gap);
  width: 100%;
  max-width: min(100%, var(--container-max));
  margin-inline: auto;
  padding-block: 5vw;
}
.board__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.5vw 1vw;
  width: 100%;
  min-height: 80vh;
  padding: var(--con-pad);
  background-image: url("../../img/board.png");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
}
.board__title,
.board__subtitle {
  padding: 0;
  color: #FFFFFF;
  font-family: var(--font-tajawal);
  text-align: center;
}
.board__title {
  margin: 18px;
  font-size: 6vw;
  font-weight: 700;
  line-height: 4vw;
}
.board__subtitle {
  margin: 4px;
  font-size: 2.5vw;
  font-weight: 400;
  line-height: 2vw;
}
.board__calligraphy,
.board__cta {
  position: relative;
  max-width: 100%;
  text-align: center;
}
.board__calligraphy img {
  display: inline-block;
  vertical-align: middle;
  width: 20vw;
  max-width: 100%;
  height: auto;
}
.board__btn {
  padding-block: 30px 20px;
  padding-inline: 120px 50px;
  font-size: 2vw;
  line-height: 2vw;
}
.board__btn .btn__content { gap: 50px; }
@media (max-width: 1024px) {
  .board {
    min-height: 480px;
    padding-inline: 0;
  }
  .board__inner { padding-block: 0; }
  .board__panel { min-height: 480px; }
  .board__title    { font-size: 55px; line-height: .5em; }
  .board__subtitle { font-size: 23px; line-height: .4em; }
  .board__calligraphy img { width: 30%; }
  .board__btn {
    padding-block: 20px 15px;
    padding-inline: 50px 30px;
    font-size: 24px;
    line-height: 1em;
  }
}

/* --------------------------------------------------------------------------
   6. Curriculum card, mobile variant (container 467c40c: padding 20px 20px 40px;
      card 62107cf: 4px solid #01174C, radius 12px, padding 33px 27px;
      icon widget 2585ca0: 250px inline SVG pulled in with -80px margins)
   -------------------------------------------------------------------------- */
.board-m {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  padding-inline: var(--con-pad);
}
.board-m__inner {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: center;
  gap: var(--widget-gap);
  width: 100%;
  max-width: min(100%, var(--container-max));
  margin-inline: auto;
  padding-block: var(--con-pad);
}
.board-m__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--widget-gap);
  width: 100%;
  padding: var(--con-pad);
  border: 0 solid #01174C;
}
.board-m__title,
.board-m__subtitle {
  margin: 0;
  padding: 0;
  max-width: 100%;
  color: var(--color-primary);
  font-family: var(--font-tajawal);
  line-height: 37px;
  text-align: center;
}
.board-m__title {
  font-size: 56px;
  font-weight: 700;
}
.board-m__subtitle {
  font-size: 26px;
  font-weight: 400;
}
.board-m__icon-wrap {
  position: relative;
  max-width: 100%;
}
.board-m__icon-inner { text-align: center; }
.board-m__icon {
  display: inline-block;
  color: var(--color-primary);
  fill: var(--color-primary);
  font-size: 50px;
  line-height: 1;
  text-align: center;
  transition: all .3s;
}
.board-m__icon svg {
  position: relative;
  display: block;
  width: 1em;
  height: 1em;
}
.board-m__cta {
  position: relative;
  max-width: 100%;
  text-align: center;
}
.board-m__btn {
  padding-block: 15px 10px;
  padding-inline: 50px 30px;
  font-size: 20px;
}
.board-m__btn .btn__content { gap: 30px; }
@media (max-width: 767px) {
  .board-m { padding-inline: 20px; }
  .board-m__inner {
    flex-wrap: wrap;
    padding-block: 20px 40px;
  }
  .board-m__card {
    flex-wrap: wrap;
    padding: 33px 27px;
    border-width: 4px;
    border-radius: 12px;
  }
  .board-m__icon-inner { margin-block: -80px; }
  .board-m__icon { font-size: 250px; }
  .board-m__icon svg { height: 250px; }
  .board-m__btn {
    padding-block: 15px 5px;
    line-height: 1.5em;
  }
}

/* --------------------------------------------------------------------------
   7. "Any Inquiries?" CTA (container 0f01b55: min-height 70vh, CTA.png cover
      top right, gap 40px; two white h2 + centred button with 2vw top margin)
   -------------------------------------------------------------------------- */
.cta {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  min-height: 70vh;
  padding-inline: var(--con-pad);
  background-image: url("../../img/CTA.png");
  background-position: top right;
  background-repeat: no-repeat;
  background-size: cover;
}
.cta__inner {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: center;
  gap: 40px;
  width: 100%;
  max-width: min(100%, var(--container-max));
  margin-inline: auto;
  padding-block: var(--con-pad);
}
.cta__title {
  margin: 0;
  padding: 0;
  max-width: 100%;
  color: #FFFFFF;
  font-family: var(--font-tajawal);
  font-size: 3vw;
  font-weight: 700;
  line-height: 2.5vw;
  text-align: center;
}
.cta__action {
  position: relative;
  max-width: 100%;
  margin-block-start: 2vw;
  text-align: center;
}
.cta__btn {
  padding: 25px 75px;
  font-size: 2vw;
}
@media (max-width: 1024px) {
  .cta { min-height: 440px; }
  .cta__title { font-size: 36px; line-height: 1em; }
  .cta__btn { font-size: 24px; }
}
@media (max-width: 767px) {
  .cta { background-image: url("../../img/CTA-1.png"); }
  .cta__inner {
    flex-wrap: wrap;
    gap: 20px;
  }
  .cta__btn {
    padding: 20px 50px 12px;
    font-size: 24px;
    line-height: 1.5em;
  }
}

/* --------------------------------------------------------------------------
   8. RTL (Arabic home, post-762.css) — only where the AR template differs
      from a pure mirror of the EN one. Values copied from post-762.css; the
      AR page agent verifies them against ref/styles/home-ar--*.json.
   -------------------------------------------------------------------------- */
/* arrow widget (cb1a0e6 in 762): flipped horizontally; margins already
   logical (AR: margin -5vw 0 -5vw -5vw = block -5vw, inline-start 0, inline-end -5vw) */
[dir="rtl"] .hero__arrow-box { transform: scaleX(-1); }
/* board title (4151c63 in 762): margin -40px 0 0 0 (tablet 1px) instead of 18px,
   line-height 7vw instead of 4vw on desktop */
[dir="rtl"] .board__title { margin: -40px 0 0; line-height: 7vw; }
/* calligraphy image (f989364 in 762): 25vw instead of 20vw on desktop */
[dir="rtl"] .board__calligraphy img { width: 25vw; }
/* values image-box widgets (a909039/37d0695/663716e/a8691e5/0f9ac61 in 762):
   no .elementor-widget-container padding — EN has 3px all around, AR has none
   (post-762.css never emits the padding rule for these 5 widgets at any
   breakpoint), which shortens each row by 6px */
[dir="rtl"] .values__box { padding: 0; }
@media (max-width: 1024px) {
  [dir="rtl"] .board__title { margin: 1px; }
  [dir="rtl"] .board__calligraphy img { width: 30%; }
}
/* hero title (99e7401 in 762): 7.4vw instead of 6.9vw on mobile */
@media (max-width: 767px) {
  [dir="rtl"] .hero__title { font-size: 7.4vw; }
}

/* --------------------------------------------------------------------------
   9. Islamic curriculum board (added 2026-09-24): a second .board section after
      the original one — same section, padding, panel and chalkboard size. Its
      visual is "رَوْضَةُ الإيمانِ" in the lettering of the book cover (white
      on the board, near-black on the mobile card), in the same
      .board__calligraphy box as "أحب لغتي العربية" at the SAME height
      (7.829vw / 9.786vw on the Arabic page / 30% × 137/350 below 1024px), so
      title, subtitle and button sit exactly where they do on the original
      board; the width (artwork ratio 2.976) gives the lettering the same ink
      area — the same visual weight — as the original calligraphy. Mobile: the
      dark version in a row of the same 96px height as the original card's
      calligraphy icon, at the same ink area.
   -------------------------------------------------------------------------- */
.board.board--islamic .board__calligraphy img { width: 23.299vw; }
[dir="rtl"] .board.board--islamic .board__calligraphy img { width: 29.123vw; }
@media (max-width: 1024px) {
  .board.board--islamic .board__calligraphy img,
  [dir="rtl"] .board.board--islamic .board__calligraphy img { width: 34.947%; }
}
.board-m__calligraphy {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 96px;
}
.board-m__calligraphy img {
  display: block;
  width: 250px;                                  /* = the original card icon width; same ink area (measured) */
  max-width: 100%;
  height: auto;
}

/* --------------------------------------------------------------------------
   10. Hero book stacks (client, 2026-10-05): the original Arabic books image
       on top and the Rawdat Al-Iman pair below it, both in the original
       picture column. The Islamic pair is fanned at the same angles as the
       Arabic image of its page (EN BOOKS-HERO.png fans left, AR
       ARABIC-BOOKS.png fans right) and shown at the same book size.
       Both stacks fit inside the hero's own min-height (80vh, tablet 60vh),
       so the hero keeps its height and the About box stays where it was on
       the wave. --stack-k = total height of both images per pixel of the
       Arabic image's width; --isl = Islamic width / Arabic width.
       Phones: text first, then the two images side by side (Islamic first).
   -------------------------------------------------------------------------- */
.hero__media--stack {
  --stack-h: calc(80vh - 4 * var(--con-pad) - 2vh);
  --stack-k: 1.838;                  /* 663/741 + (657/741)·(699/657) */
  --isl: 0.8866;                     /* 657/741 */
  align-items: center;
  justify-content: center;
  gap: 2vh;
}
[dir="rtl"] .hero__media--stack {
  --stack-k: 1.719;                  /* 631/776 + (671/776)·(703/671) */
  --isl: 0.8647;                     /* 671/776 */
}
.hero__media--stack > .hero__img--arabic {
  width: min(100%, calc(var(--stack-h) / var(--stack-k)));
  margin-inline: auto;
}
.hero__media--stack > .hero__img--islamic {
  display: block;
  width: min(calc(100% * var(--isl)), calc(var(--stack-h) / var(--stack-k) * var(--isl)));
  height: auto;
  margin-inline: auto;
}
@media (max-width: 1024px) {
  .hero__media--stack { --stack-h: calc(60vh - 4 * var(--con-pad) - 2vh); }
}
@media (max-width: 767px) {
  .hero__media--stack {
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 2%;
    /* the mobile About section is pulled up 100px over the hero (original layout): keep the books clear of its wave */
    padding-block-end: 92px;
  }
  .hero__media--stack > .hero__img--arabic  { width: 52%; margin: 0; }
  .hero__media--stack > .hero__img--islamic { order: -1; width: 46%; margin: 0; }
}