/* قواعد خاصة بصفحة نشأة الجيومكانية فقط.
   المشترك (الهيدر/الناف/الفوتر) في css/site.css ويُحمَّل قبل هذا الملف.

   منقولة عن قسم "التأسيس" في صفحة الهيئة العامة للنقل (TGA)
   — الملف المحفوظ في المشروع + site.bundle.min.css في مجلد أصوله:
       .establish-list        { position:relative }
       .establish-list::before{ content:""; position:absolute; left:50%;
                                transform:translateX(-50%); top:0; bottom:0;
                                width:2px; background:var(--colors-brand-200) }
       .dot-container         { display:flex; justify-content:center;
                                width:40px!important; flex:0 0 auto!important }
       .dot                   { width:12px; height:12px; border-radius:50%;
                                background:var(--colors-brand-600); position:relative; z-index:1 }
       .aboutus-custom        { border-radius:var(--spacing-sm)=6px;
                                background:var(--colors-success-900);
                                color:var(--colors-base-white);
                                gap:var(--spacing-md)=8px; display:grid; position:relative }
       .text-secondary-light  { color:var(--colors-yellow-996) }
       .gap-4xl=32px  .gap-3xl=24px  .padding-5xl-8xl=40px 80px
   ألوان TGA المستخدمة هنا:
       --colors-brand-600  = #1b8354  ← وهو نفس أخضر الجيومكانية المعتمد
       --colors-brand-200  = #b8eacb
       --colors-success-900= #074d31
       --colors-yellow-996 = #fae996

   الفرق المقصود الوحيد عن الأصل: TGA لا تملك أي media query لهذا القسم،
   فتنضغط الأعمدة على الجوال. أضفنا تكديساً رأسياً تحت 768px. */

.establish-section {
    padding: 40px 0 72px;
}

.establish-head {
    display: grid;
    gap: 24px;             /* gap-3xl */
    margin-bottom: 32px;   /* gap-4xl */
}

.establish-head h2 {
    margin: 0;
    text-align: center;
    font-size: 1.5rem;     /* fs-4 */
    font-weight: 700;
    color: #161616;
}

.establish-head p {
    margin: 0;
    text-align: center;
    font-size: 1rem;
    line-height: 1.9;
    color: #4b5563;
}

/* الخط الرأسي في المنتصف */
.establish-list {
    position: relative;
    display: grid;
    gap: 32px;             /* gap-4xl */
    padding: 0;
}

.establish-list::before {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
    bottom: 0;
    width: 2px;
    background: #b8eacb;
}

/* عمود النقطة: عرض ثابت 40px لا يتمدّد، فتبقى النقطة على الخط تماماً */
.establish-list .dot-container {
    display: flex;
    justify-content: center;
    width: 40px !important;
    flex: 0 0 auto !important;
}

.establish-list .dot {
    width: 12px;
    height: 12px;
    background: #1b8354;
    border-radius: 50%;
    position: relative;
    z-index: 1;
}

/* min-width الافتراضي auto فيتّسع عمود التاريخ لمحتواه غير القابل للالتفاف
   ويزيح مركز الصف ⇒ النقطة تنحرف عن الخط ببضعة بكسلات. تصفيره يجعل
   العمودين متساويين تماماً فتقع النقطة على الخط. */
.establish-list > .row > .col:not(.dot-container) {
    min-width: 0;
}

/* البطاقة المميّزة (المرحلة الأولى) */
.establish-list .aboutus-custom {
    border-radius: 6px;
    background: #074d31;
    color: #fff;
    position: relative;
    gap: 8px;
    display: grid;
}

.establish-list .text-secondary-light {
    color: #fae996 !important;
}


/* رقم المرحلة "1." — يُترك باتجاه الصفحة الطبيعي (RTL) فتقع النقطة يسار
   الرقم، أي بعده في ترتيب القراءة العربي. لا span ولا dir=ltr: كلاهما كان
   يقلب الترتيب ويجرّ الرقم لليسار، لأن ‎.row > *‎ من بوتستراب يمنح الابن
   width:100% فيصير صندوقاً بعرض البطاقة بدايته يسار.
   يبقى تصفير هوامش ‎.row‎ السالبة (‎-12px‎) التي تحملها بطاقات 2-4 وحدها،
   لتتساوى مسافة الرقم عن الحافة مع البطاقة الأولى (وهي ليست row). */
.establish-list .stage-num {
    margin-right: 0;
    margin-left: 0;
	color:#6c757d!;
}

/* البطاقات العادية */
.establish-list .border.rounded {
    border-color: #e5e7eb !important;
    background: #fff;
}

.establish-list .stage-title {
    margin: 0 0 8px;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.7;
    color: inherit;
}

.establish-list span {
    line-height: 1.9;
}

/* التواريخ */
.establish-list .fs-4 span {
    font-weight: 700;
    color: #1b8354;
    white-space: nowrap;
}

/* الجوال: تكديس رأسي والخط ينتقل إلى حافة البداية.
   الصفحة RTL بالكامل (<html dir="rtl">) فنستخدم قيماً فيزيائية متسقة على اليمين؛
   خلط right مع inset-inline-end يضعهما على جهتين متقابلتين في RTL. */
@media (max-width: 767.98px) {
    .establish-section {
        padding: 24px 0 48px;
    }

    /* الخط على يمين العمود ذي الـ40px: 40/2 - 2/2 = 19px */
    .establish-list::before {
        left: auto;
        right: 19px;
        transform: none;
    }

    /* flex-wrap:wrap من بوتستراب + h-100 على الأعمدة: في اتجاه العمود يطلب
       كل عنصر ارتفاع الحاوية كاملاً فلا يتّسع لهما عمود واحد، فيلتفّان إلى
       عمودين متجاورين. لذلك nowrap وإلغاء h-100 معاً. */
    .establish-list > .row {
        display: flex !important;
        flex-direction: column;
        flex-wrap: nowrap;
        position: relative;
        padding-right: 40px;
        margin-right: 0;
        margin-left: 0;
    }

    .establish-list > .row > .col.h-100 {
        height: auto !important;
    }

    /* في اتجاه العمود يشير flex-basis إلى الارتفاع، فالعرض يُضبط بـwidth */
    .establish-list > .row > .col {
        flex: 0 0 auto !important;
        width: 100%;
        max-width: 100%;
    }

    .establish-list > .row > .dot-container {
        position: absolute;
        top: 26px;
        right: 0;
        width: 40px !important;
        padding: 0;
    }

    /* التاريخ فوق البطاقة دائماً مهما كان ترتيبه في الترميز */
    .establish-list > .row > .col.fs-4 {
        order: -1;
        justify-content: flex-start !important;
        padding-bottom: 0 !important;
    }
}

/* زر "نص القرار" — رابط ملف القرار كما في الصفحة الرسمية.
   .aboutus-custom شبكة بفجوة 8px، فنزيد الفصل عن النص إلى 16px. */
.establish-list .stage-action {
    margin-top: 8px;
}

.establish-list .stage-action .dga-btn {
    text-decoration: none;
}