/* ── steps-01 · صورة عريضة + خطوات مرقّمة + نداء الفعل ──
   مرجع البنية: قسم `boutique` بـ`hagitantebi.co.il/elvea` (صورة عريضة ثم
   قائمة مرقّمة)، **بس الغرض مختلف**: عندهم عرض عالم البراند، وعنّا
   **الخطوة التجارية** — كيف بيطلب الزبون فعلاً.
   🔑 الأرقام `direction:ltr` — أرقام لاتينية جوّا فقرة عربية بتنساق غلط. */
.stp01{padding-block:var(--s-8)}
.stp01 .s-head{text-align:center;max-width:60ch;margin:0 auto var(--s-4)}
.stp01 .kicker{font-family:var(--lat);font-size:14px;font-weight:600;
               letter-spacing:.18em;color:var(--accent);margin-bottom:var(--s-2);
               direction:ltr}
.stp01 h2{font-size:clamp(26px,3.6vw,40px);line-height:1.25;font-weight:800;
          letter-spacing:-.02em;text-wrap:balance}
.stp01 h2 b{color:var(--accent);font-weight:800}

.stp01 .wide{border-radius:var(--r);overflow:hidden;margin-bottom:var(--s-6)}
.stp01 .wide img{width:100%;height:min(46vh,400px);object-fit:cover;display:block}

.stp01 .grid{display:grid;gap:var(--s-6);align-items:start}

.stp01 ol{list-style:none;display:grid;gap:var(--s-3)}
.stp01 li{display:flex;gap:var(--s-2);align-items:flex-start}
.stp01 .n{font-family:var(--lat);font-size:13px;font-weight:700;
          letter-spacing:.1em;color:var(--accent);direction:ltr;
          flex:none;min-width:34px;padding-top:4px}
.stp01 li b{display:block;font-size:18px;font-weight:800;margin-bottom:2px}
.stp01 li span.t{font-size:15.5px;color:var(--muted);line-height:1.75}

.stp01 .box{padding:var(--s-4);border-radius:var(--r);
            background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.stp01 .box h3{font-size:20px;font-weight:800;margin-bottom:var(--s-1)}
.stp01 .box p{font-size:15.5px;color:var(--muted);line-height:1.75;
              margin-bottom:var(--s-3)}
.stp01 .btn{background:var(--accent);color:var(--on-accent);font-weight:700;
            font-size:16px;padding:14px var(--s-4);border-radius:999px;
            display:inline-flex;align-items:center;gap:10px;
            transition:filter .2s ease}
.stp01 .btn:hover{filter:brightness(1.07)}
.stp01 .btn svg{width:19px;height:19px;fill:currentColor}
.stp01 .alt{display:block;margin-top:var(--s-2);font-size:14.5px;
            color:var(--muted)}
.stp01 .alt a{color:var(--accent);font-weight:700}

/* ── تخطيط `.femme` من المرجع — **على المقاسين** (طلب أحمد 2026-09-10) ──
   عندهم: عمود نص (قائمة مرقّمة بفواصل + كتلة مظلّلة) جنب عمود فيه **صورتان
   متراكبتان** — كبيرة ملازقة للنص وصغيرة مطلّعة برّا عليها إطار بلون الصفحة.
   وعندهم بالموبايل بينزلوا عمود واحد **والصور تحت النص** (`order:2`) —
   وهاد بالضبط اللي عناه أحمد بـ«اعملو متلهم على التلفون»
   (طلبها ديسكتوب أول، وبعدين طلبها للتلفون كمان). */
/* بلا `margin-top`: `gap` تبع الشبكة (‎--s-6‎) أصلاً بيفصلهم عن النص،
   وزيادة هامش فوقه بتفتح فراغاً بيقطع القسم نصّين على التلفون (مقيس) */
.stp01 .photos{position:relative;height:min(560px,72vw)}
.stp01 .photos img{position:absolute;width:100%;height:100%;
                   object-fit:cover;border-radius:var(--r);
                   box-shadow:var(--shadow-3)}
/* 🔑 `inset-inline-*` لا `left/right`: الكبيرة بتضل ملازقة لجهة النص
   بالعربي وبالإنجليزي بلا ولا سطر خاص بكل لغة ([[rules-arabic-web]]).
   المرجع عبري بس فكتبها `right/left` وخلص.
   🔑 مجموع العرضين ١٠٨٪ ⇒ **التراكب مقصود لا صدفة**. */
.stp01 .photos .p1{width:62%;height:82%;inset-inline-start:0;top:0}
.stp01 .photos .p2{width:46%;height:56%;inset-inline-end:0;bottom:0;
                   border:6px solid var(--bg)}
/* بعد ما انلفّت الخطوات والكتلة بـ`.s-copy`، الـgap ما عاد بيفصل بينهم */
.stp01 .box{margin-top:var(--s-6)}

@media(min-width:900px){
  .stp01 .grid{grid-template-columns:1.05fr .95fr;
               gap:clamp(28px,5vw,80px);align-items:center}
  /* بالديسكتوب الصور بعمودها ⇒ القيد بيصير على عرض العمود لا عرض الشاشة */
  .stp01 .photos{height:min(560px,46vw)}

  /* الخطوات: فواصل خطية بدل الفراغ — نفس قائمة المرجع */
  .stp01 ol{gap:0}
  .stp01 li{padding-block:14px;border-bottom:1px solid var(--line)}
  .stp01 li:last-child{border-bottom:none}

  .stp01 .box{margin-top:var(--s-4);background:var(--accent-soft);
              box-shadow:inset 0 0 0 1px var(--accent-line)}
}