/* Arabic typography and About card sizing. */

/* 1. Arabic has no italic: stop inherited/synthesised slanting in Arabic mode. */
html#portfolio-root[lang="ar"] body,
html#portfolio-root[lang="ar"] body * {
  font-style: normal !important;
  font-synthesis: none;
}

/* 2. Display role now uses Alexandria (set in index.html @font-face), so the site
      runs on two Arabic families: Alexandria (display/headings) and Tajawal (body). */

/* 3. Desktop About card: wider, so the text breathes without crowding the portrait. */
#portfolio-root:not(.compact-layout) #about .intro-about {
  width: 45% !important;
  max-width: 720px !important;
}
#portfolio-root[lang="ar"]:not(.compact-layout) #about .intro-about {
  width: 45% !important;
  max-width: 720px !important;
}
#portfolio-root:not(.compact-layout) #about .intro-about p {
  max-width: 100% !important;
  font-size: clamp(14px, 1vw, 17px) !important;
  line-height: 1.72 !important;
}
/* Arabic glyphs read smaller than Latin at the same size. */
#portfolio-root[lang="ar"]:not(.compact-layout) #about .intro-about p {
  font-size: clamp(15.5px, 1.08vw, 18px) !important;
  line-height: 1.85 !important;
}

/* Phones and tablets: Arabic About heading needs more line spacing than Latin. */
#portfolio-root[lang="ar"].compact-layout #about .intro-about h2 {
  line-height: 1.38 !important;
}