/* ════════════════════════════════════════════════════════════════════
   قسمُ التسويق في الرئيسيّة (`sections/marketing.php`) — هجرة ٠٨٨
   ════════════════════════════════════════════════════════════════════
   🔑 يُحمَّل بـ`$PAGE_CSS` حين يظهر القسمُ وحدَه — لا بايتَ زائدٌ في كلِّ زيارةٍ لقسمٍ قد يغيب.
   🔑 **والبطاقاتُ هي بطاقاتُ `services` و`portfolio` نفسُها** (`.service-card` · `.pm-card`) — فلا نمطَ لها هنا؛ هنا الغلافُ
      والعناوينُ الفرعيّةُ وزرُّ «الكلّ» فقط. ولا خطَّ ولا لونٌ خارجَ `tokens.css`: الخطُّ يرثه القسمُ من الصفحة.
   ⚠️ خلفيّةٌ داكنةٌ كقسم الأعمال — فبعد «خدماتنا» البيضاء يتناوب اللونان ولا يلتصق قسمان أبيضان. */

.marketing {
    background: var(--dark-gray);
    position: relative;
}

/* تمهيدُ القسم يرث `.portfolio-intro` (مركزٌ · رماديّ) — وهنا مسافةٌ أصغرُ تحته لأنّ بعده عنواناً فرعيّاً */
.marketing .portfolio-intro { margin-bottom: 44px; }

.mk-block + .mk-block { margin-top: 64px; }

/* 🔴 **صفوفُ الشبكة ٢٠٠px ثابتةٌ في `site.css` (`grid-auto-rows`) وللبطاقة `aspect-ratio: 4/3` من كتلةٍ أقدم** — فتصير البطاقةُ ٢٨٨px
   في صفٍّ ارتفاعُه ٢٠٠: **تتداخل الصفوفُ ويركب زرُّ «كلُّ الأعمال» على آخرها** (قِيس في المتصفّح). قسمُ الإنتاج يخفيه بطاقتُه الكبيرةُ
   التي تأخذ صفّين؛ وهنا بطاقاتٌ كلُّها صغيرة. ⇒ تملأ البطاقةُ صفَّها (والجوّالُ ارتفاعُه صريحٌ في `site.css` فلا أثرَ للنسبة).
   ⚠️ **ولا يُمسّ قسمُ الإنتاج** — موقعٌ حيٌّ يعمل بما هو عليه. */
.marketing .portfolio-grid-mini .pm-card { aspect-ratio: auto; }

.mk-sub {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 28px;
    color: var(--vmp-white);
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.4;
}
/* خطّان يحيطان بالعنوان الفرعيّ — يفصلان الكتلتين بصريّاً بلا حدٍّ ثقيل */
.mk-sub::before,
.mk-sub::after {
    content: '';
    flex: 1 1 24px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 78, 0, .45), transparent);
}

.mk-more {
    text-align: center;
    margin-top: 34px;
}
.mk-more .portfolio-view-all svg { flex: 0 0 auto; }
/* السهمُ يتبع اتّجاه القراءة — في RTL يشير إلى اليسار */
html[dir="rtl"] .mk-more .portfolio-view-all svg { transform: scaleX(-1); }

@media (max-width: 768px) {
    .marketing .portfolio-intro { margin-bottom: 30px; }
    .mk-block + .mk-block { margin-top: 44px; }
    .mk-sub { font-size: 1rem; gap: 10px; margin-bottom: 18px; }
    .mk-more { margin-top: 22px; }
}

@media (prefers-reduced-motion: reduce) {
    .mk-more .portfolio-view-all { transition: none; }
}