/* ==========================================================================
   sections.css — مكتبة الأقسام. كل صنف هنا مربوط بقسم في _system/sections/.
   تُستورد بعد base.css. تعتمد على متغيّرات tokens.css فقط.
   ========================================================================== */

/* ---------- 01 · الشريط العلوي ---------- */
.nav{position:sticky; top:0; z-index:50; background:color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter:blur(10px); border-block-end:1px solid var(--line)}
.nav__inner{display:flex; align-items:center; justify-content:space-between; gap:var(--s5);
  min-height:72px}
.nav__logo{display:flex; align-items:center; gap:var(--s3); font-weight:var(--fw-bold);
  font-size:1.0625rem; padding-block:6px}   /* مساحة لمس ≥ 44px */
.nav__logo img{height:34px; width:auto}
.nav__links{display:flex; align-items:center; gap:var(--s5)}
.nav__links a{font-size:var(--fz-sm); color:var(--ink-muted); font-weight:var(--fw-medium);
  transition:color var(--dur) var(--ease)}
.nav__links a:hover,.nav__links a[aria-current="page"]{color:var(--ink)}
.nav__cta{display:flex; align-items:center; gap:var(--s3)}
.nav__toggle{display:none; background:none; border:1px solid var(--line-control); border-radius:var(--radius-sm);
  padding:10px; cursor:pointer; min-width:44px; min-height:44px; place-items:center}
@media (max-width:900px){
  .nav__links,.nav__cta .btn--ghost{display:none}
  .nav__toggle{display:inline-flex}
}

/* ---------- 02 · الهيرو ---------- */
.hero{padding-block:clamp(48px,7vw,104px) var(--section-y); position:relative; overflow:hidden}
.hero__inner{display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(28px,5vw,64px); align-items:center}
.hero__actions{display:flex; gap:var(--s3); flex-wrap:wrap}
.hero__media{border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-2);
  border:1px solid var(--line); background:var(--surface-2); aspect-ratio:4/3}
.hero__media img{width:100%; height:100%; object-fit:cover}
/* للمخططات والجداول المصوّرة: لا تُقصّ، وتحافظ على نسبة الأصل */
.hero__media--wide{aspect-ratio:800/244}
.hero__media--wide img{object-fit:contain; padding:var(--s5)}
.hero--center{text-align:center}
.hero--center .hero__inner{grid-template-columns:1fr; justify-items:center}
.hero--center p{margin-inline:auto}
/* بديل: هيرو بخلفية لون */
.hero--tinted{background:linear-gradient(180deg,var(--brand-soft),var(--surface))}
@media (max-width:1000px){.hero__inner{grid-template-columns:1fr}}

/* ---------- مخطط المسار (HTML لا صورة: النص يبقى مقروءًا ويُترجم) ---------- */
.route{display:flex; align-items:flex-start; position:relative}
.route::before{content:""; position:absolute; inset-inline:7%; inset-block-start:26px; height:2px;
  background:repeating-linear-gradient(90deg, var(--line-control) 0 9px, transparent 9px 18px)}
.route__node{flex:1; display:flex; flex-direction:column; align-items:center; gap:var(--s2); text-align:center; position:relative}
.route__dot{width:54px; height:54px; border-radius:50%; background:var(--surface);
  border:1px solid var(--line-control); display:grid; place-items:center; color:var(--steel);
  position:relative; z-index:1; font-size:1.35rem}
.route__label{font-size:var(--fz-xs); font-weight:var(--fw-semibold); line-height:1.5}
.route__sub{font-size:12px; color:var(--ink-muted); line-height:1.5}
.route--end .route__dot{border-color:var(--action); color:var(--action)}
@media (max-width:700px){
  .route{flex-direction:column; gap:var(--s4)}
  .route::before{display:none}
  .route__node{flex-direction:row; align-items:center; text-align:start; gap:var(--s3)}
  .route__dot{flex:none}
}

/* ---------- 03 · شريط الثقة (شعارات/عملاء) ---------- */
.trust{padding-block:var(--s6); border-block:1px solid var(--line)}
.trust__label{font-size:var(--fz-xs); color:var(--ink-muted); text-align:center; margin-block-end:var(--s5)}
.trust__logos{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:clamp(24px,5vw,56px)}
.trust__logos img{height:30px; width:auto; opacity:.55; filter:grayscale(1);
  transition:opacity var(--dur) var(--ease), filter var(--dur) var(--ease)}
.trust__logos img:hover{opacity:1; filter:none}

/* ---------- 04 · الخدمات ---------- */
.services__head{max-width:640px; margin-block-end:var(--s7)}
.service{padding:clamp(20px,3vw,30px); border:1px solid var(--line); border-radius:var(--radius-lg);
  background:var(--surface); transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease)}
.service:hover{border-color:var(--line-strong); box-shadow:var(--shadow-2)}
.service__icon{width:46px; height:46px; border-radius:var(--radius); background:var(--brand-soft);
  color:var(--brand-dark); display:grid; place-items:center; margin-block-end:var(--s4)}
.service__title{font-size:var(--fz-h4); font-weight:var(--fw-semibold); margin-block-end:var(--s2)}
.service__text{font-size:var(--fz-sm); color:var(--ink-muted); line-height:1.8}
.service__list{margin-block-start:var(--s4); display:flex; flex-direction:column; gap:var(--s2)}
.service__list li{font-size:var(--fz-sm); color:var(--ink-muted); display:flex; gap:var(--s2); align-items:flex-start}
.service__list li::before{content:"✓"; color:var(--brand); font-weight:var(--fw-bold)}

/* ---------- 05 · من نحن ---------- */
.about__media{border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--line); aspect-ratio:1/1}
.about__media img{width:100%; height:100%; object-fit:cover}
.about__points{display:grid; gap:var(--s4); margin-block-start:var(--s5)}
.point{display:flex; gap:var(--s3); align-items:flex-start}
.point__mark{width:26px; height:26px; border-radius:50%; background:var(--brand-soft); color:var(--brand-dark);
  display:grid; place-items:center; font-size:.75rem; font-weight:var(--fw-bold); flex:none; margin-block-start:4px}

/* ---------- 06 · الأعمال ---------- */
.work__head{display:flex; align-items:flex-end; justify-content:space-between; gap:var(--s5);
  margin-block-end:var(--s7); flex-wrap:wrap}
.work__item{border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--line);
  background:var(--surface); display:block; transition:box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease)}
/* التحويم لِما هو قابل للضغط فقط — البطاقة الساكنة ما توهم بالتفاعل */
a.work__item:hover, a.work__item:focus-visible{box-shadow:var(--shadow-2); transform:translateY(-3px)}
.work__thumb{aspect-ratio:4/3; background:var(--surface-3); overflow:hidden}
.work__thumb img{width:100%; height:100%; object-fit:cover; transition:transform .4s var(--ease)}
a.work__item:hover .work__thumb img, a.work__item:focus-visible .work__thumb img{transform:scale(1.03)}
.work__body{padding:var(--s5)}
.work__title{font-weight:var(--fw-semibold); margin-block-end:var(--s1)}
.work__meta{font-size:var(--fz-xs); color:var(--ink-muted)}
.work__tags{display:flex; gap:var(--s2); margin-block-start:var(--s3); flex-wrap:wrap}

/* ---------- 07 · أرقام ---------- */
.stats{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--s5); text-align:center}
.stat__num{font-size:clamp(2rem,3.5vw,2.75rem); font-weight:var(--fw-bold); line-height:1.2; color:var(--brand)}
/* على الخلفية الغامقة الأزرق الغامق بلا تباين — نستخدم الدرجة الفاتحة */
.section--ink .stat__num{color:var(--brand-light)}
.stat__label{font-size:var(--fz-sm); color:var(--ink-muted)}
@media (max-width:640px){.stats{grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s6)}}

/* ---------- 08 · آراء العملاء ---------- */
.quote{padding:clamp(22px,3vw,32px); border:1px solid var(--line); border-radius:var(--radius-lg);
  background:var(--surface); display:flex; flex-direction:column; gap:var(--s4); height:100%}
.quote__text{font-size:1.0625rem; line-height:1.85}
.quote__who{display:flex; align-items:center; gap:var(--s3); margin-block-start:auto}
.quote__avatar{width:44px; height:44px; border-radius:50%; background:var(--surface-3); flex:none; overflow:hidden}
.quote__name{font-size:var(--fz-sm); font-weight:var(--fw-semibold)}
.quote__role{font-size:var(--fz-xs); color:var(--ink-muted)}
.stars{color:#b8860b; letter-spacing:2px; font-size:var(--fz-sm)}

/* ---------- 09 · الأسعار ---------- */
.plan{padding:clamp(22px,3vw,34px); border:1px solid var(--line); border-radius:var(--radius-lg);
  background:var(--surface); display:flex; flex-direction:column; gap:var(--s5); height:100%}
.plan--featured{border-color:var(--brand); box-shadow:var(--shadow-2); position:relative}
.plan__badge{position:absolute; inset-block-start:-13px; inset-inline-start:50%; transform:translateX(50%)}
[dir="ltr"] .plan__badge{transform:translateX(-50%)}
.plan__price{font-size:2rem; font-weight:var(--fw-bold); line-height:1.2}
.plan__price small{font-size:var(--fz-sm); font-weight:var(--fw-regular); color:var(--ink-muted)}
.plan__list{display:flex; flex-direction:column; gap:var(--s3); margin-block:var(--s2) auto}
.plan__list li{font-size:var(--fz-sm); color:var(--ink-muted); display:flex; gap:var(--s2)}
.plan__list li::before{content:"✓"; color:var(--brand); font-weight:var(--fw-bold)}

/* ---------- 10 · أسئلة شائعة ---------- */
.faq{display:flex; flex-direction:column; gap:var(--s3); max-width:820px; margin-inline:auto}
.faq details{border:1px solid var(--line); border-radius:var(--radius); background:var(--surface);
  padding:var(--s4) var(--s5)}
.faq summary{cursor:pointer; font-weight:var(--fw-semibold); display:flex; justify-content:space-between;
  padding-block:8px;
  gap:var(--s4); align-items:center; list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; font-size:1.35rem; color:var(--brand); font-weight:var(--fw-regular); line-height:1}
.faq details[open] summary::after{content:"–"}
.faq p{margin-block-start:var(--s3); color:var(--ink-muted); font-size:var(--fz-sm)}

/* ---------- 11 · شريط دعوة ---------- */
.cta-band{background:var(--ink); color:#fff; border-radius:var(--radius-lg);
  padding:clamp(32px,5vw,64px); text-align:center}
.cta-band p{margin-inline:auto; color:rgba(255,255,255,.78)}
.cta-band .btn--ghost{border-color:rgba(255,255,255,.35); color:#fff}
.cta-band .btn--ghost:hover{background:rgba(255,255,255,.1); border-color:#fff}

/* ---------- 12 · تواصل ---------- */
.contact__grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(24px,5vw,56px)}
.contact__item{display:flex; gap:var(--s3); align-items:flex-start}
.contact__item a{display:inline-block; padding-block:10px}   /* مساحة لمس ≥ 44px */
.contact__item .service__icon{margin-block-end:0; width:40px; height:40px}
.map{border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); background:var(--surface-2);
  aspect-ratio:16/10; display:grid; place-items:center; color:var(--ink-subtle); font-size:var(--fz-sm)}
@media (max-width:900px){.contact__grid{grid-template-columns:1fr}}

/* ---------- 13 · الفوتر ---------- */
.footer{background:var(--surface-2); border-block-start:1px solid var(--line);
  padding-block:var(--s8) var(--s6); color:var(--ink-muted)}
.footer__grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:var(--s6)}
.footer h4{font-size:var(--fz-sm); color:var(--ink); margin-block-end:var(--s4)}
.footer a{font-size:var(--fz-sm); color:var(--ink-muted); display:inline-block; padding-block:8px}
.footer a:hover{color:var(--brand)}
.footer__col{display:flex; flex-direction:column; gap:var(--s3)}
.footer__bottom{margin-block-start:var(--s7); padding-block-start:var(--s5); border-block-start:1px solid var(--line);
  display:flex; justify-content:space-between; gap:var(--s4); flex-wrap:wrap; font-size:var(--fz-xs)}
.social{display:flex; gap:var(--s3)}
.social a{width:38px; height:38px; border:1px solid var(--line-control); border-radius:50%;
  display:grid; place-items:center; transition:border-color var(--dur) var(--ease), color var(--dur) var(--ease)}
.social a:hover{border-color:var(--brand); color:var(--brand)}
@media (max-width:900px){.footer__grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.footer__grid{grid-template-columns:1fr}}

/* ---------- قائمة الموبايل (مع site.js) ---------- */
.nav__links.is-open{display:flex; position:absolute; inset-inline:0; top:100%; flex-direction:column; align-items:stretch; gap:0; background:var(--surface); border-block-end:1px solid var(--line); padding:var(--s3) var(--gutter) var(--s5); box-shadow:var(--shadow-2)}
.nav__links.is-open a{padding:14px 0; border-block-end:1px solid var(--line); font-size:1.0625rem}
body.nav-open{overflow:hidden}
/* مساحة لمس أوسع للأزرار الصغيرة بلا تكبير شكلها (الحد الأدنى 48px) */
.social a{position:relative}
.social a::after{content:""; position:absolute; inset:-6px}

/* ========== أقسام 14–18 (أُضيفت لمشروع منارة — شركة تصدير) ========== */

/* ---------- بيان الخدمات (صفوف لا كروت) ----------
   بديل شبكة الكروت المتطابقة (بصمة §11 رقم ٤). مستخلص من مفردات بيان الشحن:
   صفوف بحدود أفقية فقط، عمودان: الخدمة وما تخرج به.
   ⚠ بلا ترقيم: الأرقام للتسلسل الحقيقي فقط — والخدمات قائمة لا تسلسل. */
.manifest{list-style:none; margin:0; padding:0; border-block-start:1px solid var(--line)}
.manifest__row{display:grid; grid-template-columns:1.05fr .95fr; gap:var(--s4) var(--s7);
  align-items:start; padding-block:var(--s6); border-block-end:1px solid var(--line)}
.manifest__name{font-size:1.125rem; font-weight:var(--fw-semibold); margin-block-end:var(--s2)}
.manifest__text{font-size:var(--fz-sm); color:var(--ink-muted); max-width:44ch}
.manifest__out{display:flex; flex-direction:column; gap:var(--s3)}
.manifest__out li{font-size:var(--fz-sm); color:var(--ink-muted); display:flex; gap:var(--s3); align-items:flex-start}
.manifest__out li::before{content:""; flex:none; width:6px; height:6px; margin-block-start:.55em;
  background:var(--brand); border-radius:1px}
.manifest__note{font-size:var(--fz-xs); color:var(--ink-muted); margin-block-start:var(--s5)}
@media (max-width:760px){
  .manifest__row{grid-template-columns:1fr; gap:var(--s4)}
}

/* ---------- قائمة تعريفية (بلا كروت) ---------- */
.deflist{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s6) var(--s8)}
.deflist__item dt{font-weight:var(--fw-semibold); margin-block-end:var(--s1)}
.deflist__item dd{margin:0; font-size:var(--fz-sm); color:var(--ink-muted); line-height:1.75}
@media (max-width:700px){.deflist{grid-template-columns:1fr; gap:var(--s5)}}

/* ---------- 14 · المنتجات / الكتالوج ---------- */
.products__head{max-width:680px; margin-block-end:var(--s7)}
.product{display:flex; flex-direction:column; border:1px solid var(--line); border-radius:var(--radius-lg);
  background:var(--surface); overflow:hidden; height:100%; transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease)}
.product:hover{border-color:var(--line-strong); box-shadow:var(--shadow-2)}
.product__plate{aspect-ratio:16/10; background:var(--brand-soft); display:grid; place-items:center; position:relative; overflow:hidden}
.product__plate svg{width:60%; height:auto; opacity:.9}
.product__body{padding:var(--s5); display:flex; flex-direction:column; gap:var(--s3); flex:1}
.product__top{display:flex; align-items:flex-start; justify-content:space-between; gap:var(--s3)}
.product__name{font-size:var(--fz-h4); font-weight:var(--fw-semibold)}
.product__latin{font-size:var(--fz-xs); color:var(--ink-muted); direction:ltr; unicode-bidi:isolate}
.product__specs{display:grid; grid-template-columns:auto 1fr; gap:var(--s2) var(--s4); margin-block:var(--s2) auto;
  padding-block-start:var(--s4); border-block-start:1px solid var(--line)}
.product__specs dt{font-size:var(--fz-xs); color:var(--ink-muted)}
.product__specs dd{font-size:var(--fz-xs); font-weight:var(--fw-medium); margin:0}
.product__foot{display:flex; align-items:center; justify-content:space-between; gap:var(--s3); padding-block-start:var(--s3)}

/* ---------- 15 · خطوات العمل ---------- */
.steps{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--s5); position:relative}
.steps::before{content:""; position:absolute; inset-block-start:23px; inset-inline:8%; height:1px; background:var(--line)}
.step{position:relative; display:flex; flex-direction:column; gap:var(--s3)}
.step__num{width:46px; height:46px; border-radius:50%; background:var(--surface); border:1px solid var(--line-strong);
  color:var(--brand); display:grid; place-items:center; font-weight:var(--fw-bold); position:relative; z-index:1}
.step__title{font-size:var(--fz-h4); font-weight:var(--fw-semibold)}
.step__text{font-size:var(--fz-sm); color:var(--ink-muted)}
@media (max-width:900px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))} .steps::before{display:none}}
@media (max-width:560px){.steps{grid-template-columns:1fr}}

/* ---------- 16 · الشهادات والجودة ---------- */
.certs{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--s5)}
.cert{border:1px solid var(--line); border-radius:var(--radius); padding:var(--s5); background:var(--surface);
  display:flex; flex-direction:column; gap:var(--s3); text-align:center; align-items:center}
.cert__mark{width:52px; height:52px; border-radius:50%; background:var(--brand-soft); color:var(--brand);
  display:grid; place-items:center}
.cert__name{font-weight:var(--fw-semibold); font-size:var(--fz-sm)}
.cert__issuer{font-size:var(--fz-xs); color:var(--ink-muted)}
@media (max-width:900px){.certs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.certs{grid-template-columns:1fr}}

/* ---------- 17 · الشحن والمنافذ ---------- */
.table{width:100%; border-collapse:collapse; font-size:var(--fz-sm); background:var(--surface);
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden}
.table th,.table td{text-align:start; padding:14px var(--s5); border-block-end:1px solid var(--line)}
.table thead th{background:var(--surface-2); font-weight:var(--fw-semibold); font-size:var(--fz-xs);
  color:var(--ink-muted); white-space:nowrap}
.table tbody tr:last-child td{border-block-end:0}
.table td:first-child{font-weight:var(--fw-medium)}
.table .num{font-variant-numeric:tabular-nums}
.lanes-note{font-size:var(--fz-xs); color:var(--ink-muted); margin-block-start:var(--s4)}

/* ---------- 18 · القسم الإنجليزي للمشتري الدولي ---------- */
.intl-band{background:var(--brand); color:#fff}
.intl-band .measure{max-width:60ch}
.intl-band p{color:rgba(255,255,255,.82)}
.intl-band .btn--ghost{border-color:rgba(255,255,255,.4); color:#fff}
.intl-band .btn--ghost:hover{background:rgba(255,255,255,.12); border-color:#fff}
.intl-list{display:grid; gap:var(--s3); margin-block:var(--s5)}
.intl-list li{display:flex; gap:var(--s3); font-size:var(--fz-sm); color:rgba(255,255,255,.9)}
.intl-list li::before{content:"—"; color:rgba(255,255,255,.6)}
.intl-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(24px,5vw,64px); align-items:center}
@media (max-width:900px){.intl-grid{grid-template-columns:1fr}}
/* فورم طلب العرض */
.rfq-note{background:var(--accent-soft); border:1px solid var(--line); border-radius:var(--radius);
  padding:var(--s4); font-size:var(--fz-sm); color:var(--ink)}