/* ============================================================
   ARABIC RTL OVERRIDES
   Place in /styles/arabic-rtl.css
   Add LAST in index-ar.html:
   <link rel="stylesheet" href="./styles/arabic-rtl.css">

   LAYOUT LOGIC (mirrors English):
   - English: text LEFT  | photo RIGHT | X top-right
   - Arabic:  text RIGHT | photo LEFT  | X top-LEFT
   ============================================================ */

/* ─── Arabic Fonts ────────────────────────────────────────── */
@font-face {
  font-family: "IntelOneDisplayAR";
  src: url("../assets/fonts/IntelOneDisplayAR-Light.ttf") format("truetype"),
       url("../assets/fonts/IntelOneDisplayAR-Light.woff") format("woff"),
       url("../assets/fonts/IntelOneDisplayAR-Light.otf") format("opentype");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IntelOneDisplayAR";
  src: url("../assets/fonts/IntelOneDisplayAR-Regular.ttf") format("truetype"),
       url("../assets/fonts/IntelOneDisplayAR-Regular.woff") format("woff"),
       url("../assets/fonts/IntelOneDisplayAR-Regular.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IntelOneDisplayAR";
  src: url("../assets/fonts/IntelOneDisplayAR-Medium.ttf") format("truetype"),
       url("../assets/fonts/IntelOneDisplayAR-Medium.woff") format("woff"),
       url("../assets/fonts/IntelOneDisplayAR-Medium.otf") format("opentype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IntelOneDisplayAR";
  src: url("../assets/fonts/IntelOneDisplayAR-Bold.ttf") format("truetype"),
       url("../assets/fonts/IntelOneDisplayAR-Bold.woff") format("woff"),
       url("../assets/fonts/IntelOneDisplayAR-Bold.otf") format("opentype");
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ─── Arabic Font Applied Globally ───────────────────────── */
body,
.hero-card__description, .text-wrapper__box-text,
.arc-section .text-wrapper__box-text, .battery-section__description,
.legals__text, .arc-section__disclaimer, .arc-section__badges-title,
.expanded-text, .card__list .list__element,
.header__title, .header__badge-title,
.hero-card__title, .hero-card__subtitle,
.card__title, .battery-section__title,
.design-section__title, .arc-section__title {
  font-family: "IntelOneDisplayAR", "Segoe UI", Arial, sans-serif;
  font-style: normal; /* Arabic has no italic */
}

/* ─── Global RTL ──────────────────────────────────────────── */
html, body {
  direction: rtl;
  text-align: right;
}

/* ================================================================
   HEADER
   ================================================================ */
.header-section {
  padding-left: unset;
  padding-right: 5%;
  align-items: flex-end; /* anchor to right side */
}
.header__title { text-align: right; }
.header__badge-box {
  margin-right: unset;
  margin-left: 27px;
  justify-content: flex-start;
}
.header__badge-title {
  margin-left: unset;
  margin-right: 18px;
}

/* ================================================================
   HERO CARD
   ================================================================ */
.text-wrapper__box {
  margin-left: unset;
  margin-right: 13px;
}

/* ================================================================
   CLOSE BUTTON
   English: top-right corner
   Arabic:  top-LEFT corner (mirrored)
   ================================================================ */
.card--expanded .close-btn,
.card-section-2 .card--expanded .close-btn {
  right: unset !important;
  left: 10px !important;
}

/* ================================================================
   EXPANDABLE CARDS (Performance / Gaming) — COLLAPSED
   ================================================================ */
.performance-card .card__button {
  margin-left: unset;
  margin-right: 8px;
}
.gaming-card .card__button {
  margin-left: unset;
}

/* ================================================================
   EXPANDABLE CARDS — EXPANDED (MOBILE)
   On mobile these cards use a background image — the photo fills
   the whole card. We split the card into left (photo) and right
   (text) by making it a flex row and pushing ALL text to the right.
   ================================================================ */

/* Performance expanded — mobile */
.performance-card.card--expanded {
  display: flex;
  flex-direction: row;
  align-items: stretch;
}
.performance-card.card--expanded .performance-card__content {
  display: flex;
  flex-direction: column;
  align-items: flex-end;       /* anchor to right */
  justify-content: center;
  width: 50%;                  /* text takes right half */
  margin-left: auto;           /* push to the right edge */
  margin-right: 0;
  padding-right: 12px;
  padding-left: 4px;
  box-sizing: border-box;
}
.performance-card.card--expanded .performance-card__img {
  display: none;               /* hide inline img; bg-image is the photo */
}
.performance-card.card--expanded .performance-card__title-box {
  text-align: right;
}
.performance-card.card--expanded .card__title {
  text-align: right;
  padding: 0;
  margin-right: 0;
  margin-left: unset;
}
.performance-card.card--expanded .expanded-text {
  text-align: right;
  padding: 0;
  margin-right: 0;
  margin-left: unset;
}

/* Gaming expanded — mobile */
.gaming-card.card--expanded {
  display: flex;
  flex-direction: row;
  align-items: stretch;
}
.gaming-card.card--expanded .card-icon {
  display: none;               /* hide icon on mobile expanded */
}
/* Wrap title + text in a right-side column */
.gaming-card.card--expanded .card__title,
.gaming-card.card--expanded .expanded-text {
  width: 48%;
  margin-left: auto;           /* push to right edge */
  margin-right: 0;
  padding-right: 12px;
  padding-left: 0;
  box-sizing: border-box;
}
.gaming-card.card--expanded .card__title {
  text-align: right;
  align-self: flex-end;
  padding-bottom: 4px;
}
.gaming-card.card--expanded .expanded-text {
  text-align: right;
  align-self: flex-start;
  margin-top: 0;
  padding-top: 8px;
}

/* ================================================================
   CARD SECTION 2 — COLLAPSED
   Icon and title anchored to the right
   ================================================================ */
.card-section-2 .card-icon { margin-left: unset; margin-right: 14px; }
.card-section-2 .card__title { margin-left: unset; margin-right: 13px; text-align: right; }
.card-section-2 .card__button { margin-left: unset; margin-right: 14px; }
.graphics-card .card-icon { margin-left: unset; margin-right: 18px; }
.graphics-card .card__title { margin-left: unset; margin-right: 2px; text-align: right; }
.run-card .card__title { margin-left: unset; margin-right: 10px; text-align: right; }

/* ================================================================
   CARD SECTION 2 — EXPANDED
   English: text anchored LEFT
   Arabic:  text anchored RIGHT — align-items: flex-end
   ================================================================ */

/* AI card expanded */
.ai-card.card--expanded {
  align-items: flex-end;
}
.ai-card.card--expanded .card-icon {
  align-self: flex-end;
  margin-left: unset;
  margin-right: 30px;
}
.ai-card.card--expanded .card__title {
  text-align: right;
  margin-left: unset;
  margin-right: 30px;
}
.ai-card.card--expanded .expanded-text {
  text-align: right;
  margin-left: unset;
  margin-right: 30px;
}
.ai-card.card--expanded .card__list {
  margin-left: unset;
  margin-right: 13px;
  padding-right: 20px;
  padding-left: unset;
  list-style-position: inside;
  text-align: right;
}
.card__list .list__element {
  padding-left: unset;
  padding-right: 4px;
  text-align: right;
}

/* Graphics card expanded */
.graphics-card.card--expanded {
  align-items: flex-end;
}
.graphics-card.card--expanded .card__content {
  align-items: flex-end;
  margin-left: unset;
  margin-right: 10px;
}
.graphics-card.card--expanded .card-icon {
  align-self: flex-end;
  margin-left: unset;
  margin-right: 10px;
}
.graphics-card.card--expanded .card__title {
  text-align: right;
  margin-left: unset;
}
.graphics-card.card--expanded .expanded-text {
  text-align: right;
  margin-left: unset;
  padding: 5px 0 0 20px;
}

/* Run card expanded */
.run-card.card--expanded {
  align-items: flex-end;
}
.run-card.card--expanded .card-icon {
  align-self: flex-end;
  margin-left: unset;
  margin-right: 26px;
}
.run-card.card--expanded .card__title {
  text-align: right;
  margin-left: unset;
  margin-right: 14px;
}
.run-card.card--expanded .expanded-text {
  text-align: right;
  margin-left: unset;
  padding: 8px 14px 0 0;
}

/* ================================================================
   BATTERY SECTION
   ================================================================ */
.battery-section__title { text-align: center; }
.battery-section__description { text-align: center; }

/* ================================================================
   DESIGN SECTION
   ================================================================ */
.design-section__title { text-align: right; }
.design-section__description { text-align: right; }

/* ================================================================
   ARC SECTION
   ================================================================ */
.arc-section__title { text-align: right; margin-left: unset; margin-right: 20px; }
.arc-section__text-wrapper { margin-right: unset; margin-left: 0; align-self: flex-start; }
.arc-section__text-wrapper .text-wrapper__box { margin-left: unset; }
.arc-section .text-wrapper__box-text { text-align: right; }
.arc-section__badges { align-self: flex-end; }
.arc-section__img-badge { margin-left: unset; margin-right: 15px; }
.arc-section__badges-title { margin-left: unset; margin-right: 11px; text-align: right; }
.arc-section__disclaimer { align-self: baseline; margin: auto 10px 12px 0; text-align: right; }

/* ================================================================
   LEGALS
   ================================================================ */
.legals-section { padding-left: unset; padding-right: 86px; direction: rtl; }
.legals__text { text-align: right; }

/* ================================================================
   RESPONSIVE — min-width: 700px
   ================================================================ */
@media screen and (min-width: 700px) {

  .header-section { padding-left: unset; padding-right: 5%; align-items: flex-end; }
  .header__title { text-align: right; }
  .header__badge-box { margin-left: unset; margin-right: unset; margin-top: 17%; justify-content: flex-start; margin-bottom: 31px; }

  /* Hero: LTR uses row-reverse (image left, text right).
     RTL: use row so image goes right, text goes left — then
     text-align:right keeps Arabic text reading correctly */
  .hero-card { flex-direction: row; }

  .expandable-cards { flex-direction: row; }

  /* Close button: top-LEFT in Arabic */
  .card--expanded .close-btn,
  .card-section-2 .card--expanded .close-btn {
    right: unset !important;
    left: 2% !important;
    top: 4%;
  }

  /* Collapsed buttons */
  .gaming-card .card__button { margin-left: unset; margin-right: 6%; }
  .performance-card .card__button { margin-left: unset; margin-right: 6%; }

  /* Gaming expanded — desktop: reset mobile row hack, use column + flex-end */
  .gaming-card.card--expanded {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }
  .gaming-card.card--expanded .card-icon {
    display: block;
    align-self: flex-end;
    margin-left: unset;
    margin-right: 17px;
  }
  .gaming-card.card--expanded .card__title {
    text-align: right;
    margin-left: unset;
    margin-right: 17px;
    width: auto;
    padding-right: 0;
  }
  .gaming-card.card--expanded .expanded-text {
    text-align: right;
    margin-left: unset;
    max-width: 313px;
    width: auto;
    padding-right: 0;
    margin-top: unset;
    padding-top: unset;
  }

  /* Performance expanded — reset mobile row hack */
  .performance-card.card--expanded {
    flex-direction: column;
    align-items: flex-end;
  }
  .performance-card.card--expanded .performance-card__content {
    width: auto;
    margin-left: unset;
    padding-right: 0;
    align-items: flex-end;
  }
  .performance-card__content { align-items: center; }

  /* Battery */
  .battery-section__img { margin-left: unset; margin-right: 26%; }

  /* Card section 2 */
  .card-section-2 { flex-direction: row; margin: auto; }
  .card-section-2 .card__title { margin-left: unset; align-self: center; text-align: right; }
  .card-section-2 .card--expanded .card__title { text-align: right; align-self: unset; }
  .card-section-2 .card--expanded .expanded-text { text-align: right; margin-left: unset; margin-right: 50px; }
  .card-section-2 .ai-card.card--expanded .expanded-text { margin-left: unset; margin-right: 20px; }
  .run-card.card--expanded .card__title { margin-left: unset; margin-right: 40px; }

  /* Graphics expanded — text RIGHT */
  .graphics-card.card--expanded { align-items: flex-end; }
  .graphics-card.card--expanded .card__content { margin-left: unset; margin-right: 10px; align-items: flex-end; }
  .graphics-card.card--expanded .card-icon { margin-left: unset; margin-right: 10px; align-self: flex-end; }
  .graphics-card.card--expanded .expanded-text { margin-left: unset; text-align: right; }

  /* Design */
  .design-section__content { flex-direction: row; }
  .design-section__description { text-align: right; transform: translateX(-13px); }

  /* ARC */
  .arc-section__text-wrapper { align-self: flex-start; margin-right: unset; margin-left: 8%; transform: translateY(63px); }
  .arc-section__img-badge { margin-left: unset; margin-right: 25px; }
  .arc-section__disclaimer { margin-left: unset; margin-right: 30px; text-align: right; }
  .arc-section__badges-title { margin-left: unset; text-align: right; }

  .legals-section { padding-left: unset; padding-right: 86px; }
}

/* ================================================================
   RESPONSIVE — min-width: 1200px
   ================================================================ */
@media screen and (min-width: 1200px) {

  .header-section { padding-left: unset; padding-right: 3%; }
  .header__subtitle-only-dt { margin-left: unset; margin-right: 23px; }
  .hero-card__subtitle { margin-left: unset; margin-right: 52px; }
  .hero-card__text-wrapper { margin-left: unset; margin-right: 74px; }

  /* Close button: top-LEFT in Arabic */
  .card--expanded .close-btn,
  .card-section-2 .card--expanded .close-btn {
    right: unset !important;
    left: 2% !important;
  }

  /* Performance expanded — text RIGHT */
  .performance-card.card--expanded { align-items: flex-end; }
  .performance-card.card--expanded .performance-card__title-box { text-align: right; margin-right: 53px; margin-left: unset; }
  .performance-card.card--expanded .card__title { text-align: right; margin-right: 53px; margin-left: unset; }
  .performance-card.card--expanded .performance-card__img { margin-left: unset; margin-right: 121px; }
  .performance-card.card--expanded .expanded-text { text-align: right; margin-right: 33px; margin-left: unset; }

  /* Gaming expanded — text RIGHT */
  .gaming-card.card--expanded { align-items: flex-end; }
  .gaming-card.card--expanded .card__title { text-align: right; margin-left: unset; margin-right: 112px; }
  .gaming-card.card--expanded .card-icon { margin-left: unset; margin-right: 97px; align-self: flex-end; }
  .gaming-card.card--expanded .expanded-text { text-align: right; margin-left: unset; margin-right: 70px; }

  /* ARC */
  .arc-section__title { margin-left: unset; margin-right: 20px; }
  .arc-section__text-wrapper { margin-right: unset; margin-left: 24px; }
  .arc-section__img-badge { margin-left: unset; margin-right: 60px; }
  .arc-section__badges-title { margin-left: unset; margin-right: 27px; }
  .arc-section__disclaimer { margin-left: unset; margin-right: 42px; text-align: right; }

  /* Card section 2 collapsed */
  .card-section-2 .card__title { padding: 35px 31px 0; text-align: right; }
  .run-card .card__title { padding: 35px 63px 0; text-align: right; }
  .card-section-2 .card__button { margin-left: unset; margin-right: 43px; }

  /* AI card expanded — text RIGHT */
  .ai-card.card--expanded { align-items: flex-end; }
  .ai-card.card--expanded .card-icon { margin-left: unset; margin-right: 98px; align-self: flex-end; }
  .ai-card.card--expanded .card__title { margin-left: unset; margin-right: 96px; text-align: right; }
  .card-section-2 .card--expandable.card--expanded .expanded-text { margin-left: unset; margin-right: 74px; text-align: right; }
  .card-section-2 .card--expanded .card__list { margin-left: unset; margin-right: 74px; padding-right: 20px; padding-left: unset; }

  /* Graphics expanded — text RIGHT */
  .graphics-card.card--expanded { align-items: flex-end; }
  .graphics-card.card--expanded .card__content { margin-left: unset; margin-right: 77px; align-items: flex-end; }
  .graphics-card.card--expanded .card-icon { margin-left: unset; align-self: flex-end; margin-top: 139px; }
  .card-section-2 .graphics-card.card--expanded .expanded-text { margin: unset; text-align: right; margin-top: 20px; }

  /* Run card expanded — text RIGHT */
  .run-card.card--expanded { align-items: flex-end; }
  .run-card.card--expanded .card-icon { margin-left: unset; margin-right: 98px; align-self: flex-end; }
  .run-card.card--expanded .card__title { margin-left: unset; margin-right: 135px; text-align: right; }
  .card-section-2 .run-card.card--expanded .expanded-text { margin-left: unset; margin-right: 96px; text-align: right; }

  /* Design */
  .design-section__description { transform: translateX(-13px); text-align: right; }

  .legals-section { padding-left: unset; padding-right: 86px; }
}