/* project.css — مكوّنات خاصة بمشروع منارة.
   لم تُضف إلى _system لأنها لم تُختبر في مشروعين بعد: .band · .card--media · .claims · .check
   <!-- مرشّح للترقية --> نراجعها عند أول مشروع يحتاج صورًا أو قائمة ادعاء/دليل.

   القاعدة الحاكمة هنا: الصورة تحمل **معلومة** (نوع البضاعة، سياق الشحن)، لا زخرفة.
   والصور الفوتوغرافية تُقصّ بـ object-fit:cover داخل نسبة ثابتة — بخلاف المخططات التي لا تُقصّ. */

/* شريط صورة عريض */
.band{background:var(--surface-3); line-height:0}
.band img{display:block; width:100%; height:clamp(170px, 26vw, 360px); object-fit:cover}
/* الصور الجوية رمادية: توحّد صورًا نائبة متباينة الألوان، وتحصر اللون في البطاقات التي تحمل معلومة.
   والإجراء سطر واحد عند استبدالها بصور العميل. */
.band img{filter:grayscale(1) contrast(1.06)}

/* كرت القطاع: الشارة على الصورة، والنصّ محاذى للبداية (لا توسيط)، وجسم أقصر.
   مختلف عن كروت الخدمات (بلا صورة) وعن شريط القيم فلا تتكرّر الأشكال. */
.card--sector{overflow:hidden; display:flex; flex-direction:column}
.card--sector .card__media{position:relative; aspect-ratio:16/10; background:var(--surface-3); overflow:hidden; line-height:0}
.card--sector .card__media img{display:block; width:100%; height:100%; object-fit:cover}
.card--sector .card__chip{position:absolute; inset-block-start:var(--s3); inset-inline-start:var(--s3);
  padding:4px var(--s3); border-radius:var(--radius-pill); background:rgba(255,255,255,.95);
  color:var(--brand-deep); font-size:var(--fz-xs); font-weight:var(--fw-semibold);
  /* خطّ الصورة عليه line-height:0 لمنع فراغ الصور السطرية — والشارة ترثه فيُقصّ نصّها */
  line-height:1.5}
.card--sector .card__body{padding:var(--s5); text-align:start; display:flex; flex-direction:column; gap:var(--s2); flex:1}
.card--sector .card__title{font-size:var(--fz-h4); font-weight:var(--fw-semibold); margin:0}
.card--sector .card__products{margin:0; font-size:var(--fz-sm); color:var(--ink-muted); line-height:1.75}

/* «التزاماتنا» — أربعة التزامات في صفّ واحد، أيقونة بلا مربّع وخطّ علوي رقيق:
   مختلف عن شريط الحقائق (نصّ بلا أيقونات) وعن كروت الخدمات (حدود) فلا تتكرّر الأشكال. */
.claims{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--s7) var(--s6)}
.claims__item{padding-block-start:var(--s5); border-block-start:2px solid var(--line-strong)}
.claims__icon{display:block; color:var(--brand); margin-block-end:var(--s4)}
.claims__icon .icon{inline-size:1.75rem; block-size:1.75rem}
.claims__claim{display:block; font-weight:var(--fw-semibold); font-size:1.0625rem; margin-block-end:var(--s2)}
.claims__proof{margin:0; font-size:var(--fz-sm); color:var(--ink-muted); line-height:1.8; max-width:36ch}
@media (max-width:980px){.claims{grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s6)}}
@media (max-width:620px){.claims{grid-template-columns:1fr; gap:var(--s5)}}

/* شريط الحقائق تحت الواجهة (المحتوى الجديد): ثلاث حقائق مفصولة بنقطة، بلا أيقونات —
   مختلف عن الالتزامات (أيقونات) وعن كروت الخدمات (حدود). */
.factstrip{list-style:none; margin:0; padding-block:var(--s5); display:flex; flex-wrap:wrap;
  justify-content:center; gap:var(--s2) var(--s4); border-block-end:1px solid var(--line)}
.factstrip li{font-size:var(--fz-sm); color:var(--ink-muted)}
.factstrip li + li::before{content:"·"; margin-inline-end:var(--s4); color:var(--line-strong)}
@media (max-width:620px){.factstrip{flex-direction:column; align-items:center; gap:var(--s2)}
  .factstrip li + li::before{content:none}}

/* طريق الطلب — الشريط تحت الواجهة (كان داخل كرت في الهيرو، والمحتوى الجديد يجعله شريطًا كامل العرض).
   ستّ عقد بلا وصف فرعي: النص نفسه يحمل الوصف. */
.routestrip{padding-block:var(--s7) var(--s6)}
/* سطر الشرح: base.css يقصّ عرض <p> القصير، فيلتصق الصندوق بالبداية (يمين) بينما نصّه متوسّط.
   توسيط الصندوق نفسه يجعل السطر فوق منتصف الشريط تمامًا. */
.routestrip p{margin-inline:auto}

/* آلية العمل بثماني مراحل: خطّ الوصل المرسوم في .steps مصمّم لصف واحد،
   فمع صفّين يوهم بتسلسل واحد ويقع في غير موضعه — يُخفى والترقيم يكفي. */
.steps--8::before{display:none}

/* خانة معلومة يزوّدها العميل: ظاهرة عمدًا حتى لا تُنسى ولا تُخترع */
.slot{display:inline-block; padding:0 var(--s2); border:1px dashed var(--line-control);
  border-radius:6px; font-size:.92em; color:var(--ink-muted); background:var(--surface-2)}

/* كرت التكلفة — بعد تحديث المحتوى: عنوان + جملة واحدة + زرّ (حُذف سطر السعر والبنود الثلاثة).
   الجملة صارت متن الكرت، فتُقرأ بلون النصّ لا الرمادي، والزرّ يثبت أسفل الكرت مهما اختلف طول النصّ. */
.plan__desc{margin:0; font-size:var(--fz-body); color:var(--ink); line-height:1.85; max-width:34ch}
.plan .btn{margin-block-start:auto}
.plan .service__title{margin-block-end:0}   /* حُذف سطر السعر: كان الفراغ المتباعد 32px مقابل 24px — تُوحَّد الفجوات */

/* بطاقة قطاع بلا صورة: نفس هندسة بطاقة الصورة، والمحتوى أيقونة — لا صورة عامة تُوهم */
.card--media .card__media--icon{display:grid; place-items:center; background:var(--brand-soft); color:var(--brand-deep)}
.card--media .card__media--icon .icon{inline-size:2.75rem; block-size:2.75rem}

/* أرقام الحالة داخل كرت «حالة من عملنا» */
.casestats{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s5)}
.casestats li{font-size:var(--fz-sm); color:var(--ink-muted)}
.casestats__n{display:block; font-size:var(--fz-h3); font-weight:var(--fw-bold); color:var(--brand-deep); line-height:1.3}
@media (max-width:560px){.casestats{grid-template-columns:1fr; gap:var(--s4)}}

/* روابط نصية صغيرة: توسيع مساحة اللمس إلى ≥24px بطبقة شفّافة، بلا تكبير الشكل الظاهر
   (القاعدة: نوسّع مساحة اللمس بحشو أو طبقة، ولا نكبّر الصندوق المرئي) */
.tap{padding-block:3px}   /* الصندوق المقيس 28px ✓ (الحشو على عنصر سطري يوسّع منطقة اللمس ولا يغيّر ارتفاع السطر) */

/* بطاقة الموقع — بديل تضمين خريطة Google.
   السبب: الـ iframe لا يرسم داخل لقطة الصفحة الكاملة (يخرج مربعًا فارغًا)، ويضيف طلبًا خارجيًا
   وكوكيز طرف ثالث على موقع العميل. الروابط تفتح الخرائط بضغطة، بلا أثر على الأداء ولا الخصوصية. */
.mapbox{display:flex; gap:var(--s4); align-items:flex-start; flex-wrap:wrap;
  padding:var(--s5); border:1px solid var(--line); border-radius:var(--radius); background:var(--surface)}
.mapbox__pin{flex:none; inline-size:2.25rem; block-size:2.25rem; border-radius:var(--radius);
  display:grid; place-items:center; background:var(--brand-soft); color:var(--brand-deep)}
.mapbox__addr{margin:0; font-weight:var(--fw-semibold); max-width:26ch}
.mapbox .btn{margin-inline-start:auto}


/* ملاحظة بيانات نائبة: ظاهرة ومحدَّدة بخط رمادي — لا تُنشر بلا استبدال.
   لا تستخدم لون الفعل: الأصفر محصور بالأفعال. */
.demo-note{font-size:var(--fz-xs); color:var(--ink-muted); margin-block-start:var(--s5);
  padding-inline-start:var(--s3); border-inline-start:3px solid var(--line-control)}

/* مربع موافقة داخل نموذج */
.check{display:flex; gap:var(--s2); align-items:flex-start; font-size:var(--fz-sm); color:var(--ink-muted)}
.check input{inline-size:1.15rem; block-size:1.15rem; margin-block-start:.2rem; accent-color:var(--brand); flex:none}
.check a{color:var(--brand)}

/* إصلاح من الرندر: «اطلب عرض سعر» في شريط الجوال كان ينكسر سطرين في 390px */
.nav__cta .btn{white-space:nowrap}
@media (max-width:430px){
  .nav__cta .btn--primary{padding-inline:var(--s4); font-size:var(--fz-sm)}
}

/* رفع ملف: عنصر المتصفح يكتب «No file chosen / Choose File» بالإنجليزية دائمًا —
   نخفي الأصل ونعرض بديلًا عربيًا. الكل داخل <label> فيبقى الضغط والكيبورد يعملان. */
.filepick{display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap; cursor:pointer;
  border:1px solid var(--line-control); border-radius:var(--radius); padding:var(--s2) var(--s3); background:var(--surface)}
.filepick:focus-within{outline:2px solid var(--brand); outline-offset:2px}
.filepick__input{position:absolute; inline-size:1px; block-size:1px; opacity:0; overflow:hidden}
.filepick__btn{border:1px solid var(--line-control); border-radius:var(--radius); padding:var(--s2) var(--s4);
  font-size:var(--fz-sm); font-weight:var(--fw-semibold); color:var(--brand)}
.filepick:hover .filepick__btn{border-color:var(--brand)}
.filepick__name{font-size:var(--fz-sm); color:var(--ink-muted); overflow-wrap:anywhere}