/* =========================================================
   Tasharuky Hub — تحسينات الموبايل والآيباد
   كل القواعد هنا تحت 1024px، وقسم أخير لآيباد بالعرض (1024–1279px) — الويب الكبير ما بيتأثر.
   الهدف: نفس روح الويب (الصورة، المسار، الخط المايل، الكروت) بدل تبسيطها.
   ========================================================= */

/* ---------- الهيرو (موبايل): مشهد اللابتوب والأيقونات يظهر تحت الأزرار متل الويب ---------- */
@media (max-width: 767px) {
  /* مسافة 32px تحت الهيدر (72px) بدل ما يكون المحتوى ملزق فيه، ومشهد أقصر حتى ما يطول الهيرو */
  .hero .hero-content { padding-top: 104px; padding-bottom: 190px; }
  .hero-img {
    inset: auto 0 0 auto; width: max(470px, calc(100vw + 40px)); height: 250px;
    object-fit: cover; object-position: center bottom;
  }
  .hero-shade-mobile {
    background: linear-gradient(180deg,
      #0E1A38 0%, #0E1A38 calc(100% - 250px),
      rgba(14, 26, 56, .55) calc(100% - 205px),
      rgba(14, 26, 56, 0) calc(100% - 145px));
  }
}

/* ---------- لماذا: صورة قبل/بعد على الموبايل + أطول على الآيباد ---------- */
@media (max-width: 1023px) {
  .compare-frame {
    aspect-ratio: 1200 / 430;
    clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 26px 100%, 0 calc(100% - 26px));
  }
  [dir="ltr"] .compare-frame { clip-path: polygon(26px 0, 100% 0, 100% calc(100% - 26px), calc(100% - 26px) 100%, 0 100%, 0 26px); }
  .compare-handle { --hw: 64px; }
}
@media (max-width: 767px) {
  .compare { margin-top: 32px; }
  .compare-frame {
    aspect-ratio: 342 / 250;
    clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
  }
  [dir="ltr"] .compare-frame { clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px); }
  .compare-handle { --hw: 54px; }
}

/* ---------- الخدمات (آيباد): عمودين متل الويب ---------- */
@media (min-width: 768px) and (max-width: 1023px) {
  .svc-list { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; margin-top: 28px; }
  .svc-col { display: flex; flex-direction: column; gap: 12px; }
  .svc-head { gap: 13px; min-height: 72px; padding-inline: 14px 16px; }
  .svc-title { font-size: 15.5px; line-height: 1.5; }
  .svc-num { font-size: 13px; margin-inline-end: 2px; }
  .svc-panel-in p { margin-inline: 16px; font-size: 13.5px; line-height: 22.5px; }
}

/* ---------- البرامج (موبايل + آيباد): الكرتين ملزوقين بخط مايل و"أو" سداسي على الخط ---------- */
@media (max-width: 1023px) {
  .prg-cards { --d: 34px; --s: 7px; gap: 0; }
  .prg-card:hover { translate: none; box-shadow: none; }

  /* الجهة العالية = جهة الرقم (نهاية السطر) حتى ما ينقص الرقم بالقص */
  .prg-card--navy {
    padding-bottom: calc(23px + var(--d));
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - var(--d)));
  }
  .prg-card--green {
    margin-top: calc(var(--s) - var(--d));
    clip-path: polygon(0 0, 100% var(--d), 100% 100%, 0 100%);
  }
  .prg-card--green .prg-ico { margin-top: calc(var(--d) * .55); }
  [dir="ltr"] .prg-card--navy { clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--d)), 0 100%); }
  [dir="ltr"] .prg-card--green { clip-path: polygon(0 var(--d), 100% 0, 100% 100%, 0 100%); }

  .prg-or {
    display: grid; height: 0; z-index: 3;
    translate: 0 calc((var(--s) - var(--d)) / 2);
  }
  .prg-or::before {
    content: ""; position: absolute; left: 50%; top: 50%; translate: -50% -50%;
    width: 62px; height: 62px; border-radius: 50%; background: rgba(255, 255, 255, .92);
    box-shadow: 0 8px 22px -6px rgba(14, 26, 56, .35);
  }
  .prg-or svg { width: 44px; height: 50px; }
  .prg-or svg polygon { fill: #18753C; stroke: none; }
  .prg-or b { position: absolute; left: 50%; top: 50%; translate: -50% -50%; color: #fff; font-size: 14px; line-height: 1; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .prg-cards { --d: 46px; --s: 8px; }
  .prg-or::before { width: 74px; height: 74px; }
  .prg-or svg { width: 52px; height: 60px; }
  .prg-or b { font-size: 16px; }
  .prg-card--green .prg-title { margin-top: 0; }
}

/* ---------- رحلة العمل (موبايل): كروت على المسار بأرقام مفرّغة متل الويب ---------- */
@media (max-width: 767px) {
  .wk-steps { gap: 14px; padding-bottom: 40px; }
  .wk-step { gap: 14px; min-height: 0; }
  .wk-card {
    padding: 12px 16px 16px; border: 1px solid #E1E6EE; border-radius: 4px;
    background: var(--wk-mark) no-repeat left -30px bottom -36px / 100px 115px, #fff;
  }
  [dir="ltr"] .wk-card { background-position: right -30px bottom -36px, 0 0; }
  .wk-card::before { content: ""; position: absolute; top: -1px; inset-inline: -1px; height: 3px; border-radius: 4px 4px 0 0; background: #15234A; }
  .wk-step--green .wk-card::before { background: var(--brand); }
  .wk-card-head { align-items: center; }
  .wk-title { font-size: 18px; line-height: 1.5; }
  .wk-num { display: block; color: transparent; -webkit-text-stroke: 1.2px #15234A; font-size: 34px; font-weight: 700; line-height: 1; letter-spacing: -1px; }
  .wk-step--green .wk-num { -webkit-text-stroke-color: var(--brand); }
  .wk-desc { max-width: none; margin-top: 6px; font-size: 13.5px; line-height: 23px; }

  /* الخطوة الأخيرة = الوجهة: كارد كحلي */
  .wk-step:last-child .wk-card {
    --wk-mark: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%22-33%20-38%2066%2076%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.14%22%20stroke-width%3D%221.2%22%3E%3Cpolygon%20points%3D%220%2C-36%2031.2%2C-18%2031.2%2C18%200%2C36%20-31.2%2C18%20-31.2%2C-18%22/%3E%3Cpolygon%20points%3D%220%2C-24%2020.8%2C-12%2020.8%2C12%200%2C24%20-20.8%2C12%20-20.8%2C-12%22/%3E%3C/g%3E%3C/svg%3E");
    border-color: #15234A;
    background: var(--wk-mark) no-repeat left -30px bottom -36px / 100px 115px, linear-gradient(158deg, #15234A 0%, #163760 125%);
    box-shadow: 0 20px 34px -24px rgba(21, 35, 74, .6);
  }
  [dir="ltr"] .wk-step:last-child .wk-card { background-position: right -30px bottom -36px, 0 0; }
  .wk-step:last-child .wk-card::before { background: #3DB86A; }
  .wk-step:last-child .wk-title { color: #fff; }
  .wk-step:last-child .wk-num { -webkit-text-stroke-color: rgba(255, 255, 255, .7); }
  .wk-step:last-child .wk-desc { color: #C9D2E3; }

  /* المسار يمتد مع طول الكروت وينتهي بنقطة الوصول */
  .wk-line--m { height: auto; bottom: 16px; }
  .wk-end { top: auto; bottom: 4px; }
}

/* ---------- النتائج (موبايل): مسار منقّط يربط الأيقونات ---------- */
@media (max-width: 767px) {
  .res-grid { position: relative; }
  .res-grid::before {
    content: ""; position: absolute; top: 22px; bottom: 22px; inset-inline-start: calc(5px + 19.1px - 3px); width: 6px;
    background: radial-gradient(circle, rgba(21, 35, 74, .3) 1.8px, transparent 2.3px) center 3px / 6px 9px repeat-y;
  }
  .res-hex { z-index: 1; }
  .res-shape polygon { stroke: #fff; stroke-width: 3px; paint-order: stroke; }
}

/* ---------- قصة النجاح (موبايل): الصورة فوق، وشعار الشريك (بدون خلفية) أعلى المحتوى ---------- */
@media (max-width: 767px) {
  .st-media { position: relative; display: block; height: 312px; margin: 0; overflow: hidden; border-radius: 4px; }
  .st-photo { width: 100%; height: 100%; object-fit: cover; object-position: 60% 45%; }
  .st-media::after { content: ""; position: absolute; inset: auto 0 0; height: 150px; background: linear-gradient(to bottom, rgba(21, 35, 74, 0), rgba(21, 35, 74, .92)); pointer-events: none; }
  .st-media::before { content: ""; position: absolute; inset: 0; z-index: 2; border: 1px solid rgba(61, 184, 106, .45); border-radius: 4px; pointer-events: none; }

  /* تقصير البطاقة: صورة أقصر، بدون الخط الفاصل، والنتائج بعمودين */
  .st-media { height: 210px; }
  .st-photo { object-position: 55% 40%; }
  .st-media::after { height: 110px; }
  .st-logo { margin-top: 16px; }
  .st-logo img { width: 112px; }
  .st-title { margin-top: 10px; font-size: 21px; line-height: 1.3; }
  .st-sub { margin-top: 6px; font-size: 14px; line-height: 1.6; }
  .st-bar { display: none; }
  .st-h3 { margin-top: 14px; font-size: 15px; }
  .st-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 10px; row-gap: 12px; margin-top: 10px; padding-inline-start: 0; }
  .st-item { align-items: flex-start; gap: 8px; font-size: 13.5px; line-height: 1.45; }
  .st-hex { width: 24px; height: 27.6px; }
  .st-cta { height: 50px; margin-top: 18px; }
}

/* ---------- قصة النجاح (آيباد): عمودي النتائج كانوا بعرض ثابت (2×255px) أعرض من المساحة فيدخلوا فوق الصورة ---------- */
@media (min-width: 768px) and (max-width: 1023px) {
  .st-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; }
}

/* ---------- البرامج (شاشات ضيقة جدًا ~320px): نص الزر أطول من الزر فكان ينقص والسهم يختفي ---------- */
@media (max-width: 359px) {
  .prg-btn { height: auto; min-height: 58px; padding: 10px 20px; gap: 12px; white-space: normal; line-height: 1.45; text-align: start; }
  .prg-btn .prg-arrow { flex: none; }
}

/* ---------- لماذا تختار تشاركي (موبايل): أرقام الكروت متل الويب ---------- */
@media (max-width: 767px) {
  .wu-num { display: block; top: 14px; inset-inline-end: 14px; }
}

/* =========================================================
   آيباد بالعرض (1024–1279px): الهيدر والهيرو وقسم الدعوة بتصميم الآيباد
   تصميم الويب هون ضيق: الروابط بتنكسر لسطرين، النص بيركب على اللابتوب، وأزرار الدعوة بتنضغط
   ========================================================= */
@media (min-width: 1024px) and (max-width: 1279px) {
  /* الهيدر: قائمة الموبايل بدل الروابط */
  .header-bar > ul { display: none; }
  .header-bar [data-menu-open] { display: inline-flex; }
  #mobileMenu:not(.hidden) { display: block; }

  /* الهيرو: النص فوق واللابتوب تحت (متل الآيباد العمودي) */
  .hero { min-height: 1190px; }
  .hero-bg { background: none; }
  .hero-img { inset: auto 0 0 auto; width: 1440px; height: 768px; }
  .hero-bg > .hero-shade-tablet, .hero-bg > .hero-shade-tablet-fade { display: block; }
  .hero-bg > .hero-shade-desktop { display: none; }
  html .hero .hero-content { width: 514px; margin-inline: auto; padding-top: 140px; padding-bottom: 491px; }
  html[lang="en"] .hero h1 { font-size: 38px; }

  /* قسم الدعوة: عمود واحد والخطوات أفقية */
  .cta-card { grid-template-columns: minmax(0, 1fr); gap: 36px; padding: 48px 44px 40px; }
  .cta-title { font-size: 44px; }
  .cta-path { padding: 24px 26px 4px; }
  .cta-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 18px; }
  .cta-step { flex-direction: column; gap: 12px; padding-bottom: 20px; }
  .cta-step:not(:last-child)::before {
    top: 23px; bottom: auto; inset-inline-start: 54px; inset-inline-end: -8px;
    border-inline-start: 0; border-top: 2px dotted rgba(255,255,255,.28);
  }
  .cta-step-t { padding-top: 0; }
}

/* قائمة الموبايل: خط أصغر ومسافات أقل (كل المقاسات) */
.mobile-nav { font-size: 1.125rem; line-height: 1.6; }
.mobile-nav a { padding-block: 10px; }