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

   البنية والمقاسات مقيسة من صفحة «الشركاء الاستراتيجيون» في هيئة تنمية
   الصادرات السعودية (النسخة المحفوظة في المشروع) بقراءة getComputedStyle
   في متصفح حقيقي لا بالتقدير:
       شريط علوي #f7fdf9 ارتفاعه 200px: فتات خبز ← h1 36px/500
       ← شبكة بطاقات .card-default عرضها 316px بحدّ 1px #d2d6db
         ونصف قطر 16px وحشوة 16px، أربع في الصف بفجوة 16px،
         داخلها الشعار (object-fit:contain) ثم الاسم h3 18px/500 #1f2a37.
   الألوان ألوان المشروع نفسها: #1b8354 و#161616 و#1f2a37 و#f7fdf9. */

/* UDesign يضع padding:40px 0 على كل section. نصفّر العلوية لأن الشريط
   الأخضر يجب أن يلاصق الهيدر، ونُبقي سفلية أوسع كي لا يلتصق آخر
   عنصر بالفوتر — وهي 72px نفسها المستعملة في صفحات المحتوى. */
.partners-page {
    padding: 0 0 72px;
}

/* ===== الشريط العلوي =====
   يمتد بعرض النافذة ومحتواه داخل الحاوية. ظلّ أفقي بدل هوامش
   سالبة بـ100vw لأن الأخيرة تُحدث تمريراً أفقياً مع شريط التمرير. */
.partners-hero {
    position: relative;
    background: #f7fdf9;
    padding: 40px 0;
    margin-bottom: 32px;
    box-shadow: 0 0 0 100vmax #f7fdf9;
    clip-path: inset(0 -100vmax);
}

.partners-hero__crumb {
    margin-bottom: 16px;
    font-size: .875rem;
    line-height: 1.5;
    color: #161616;
}

.partners-hero__crumb a,
.partners-hero__crumb a:link,
.partners-hero__crumb a:visited {
    color: #161616;
    text-decoration: none;
}

.partners-hero__crumb a:hover {
    text-decoration: underline;
}

.partners-hero__crumb .sep {
    margin: 0 8px;
    color: #6c737f;
}

.partners-hero__crumb .current {
    color: #4b5563;
}

/* العنوان 36px بوزن 500 كما في المرجع */
.partners-title {
    margin: 0;
    font-size: 2.25rem;
    font-weight: 500;
    line-height: 1.21;
    color: #161616;
}

/* ===== النصّ التمهيدي ===== */
.partners-intro p {
    margin: 0 0 16px;
    font-size: 1rem;
    line-height: 1.9;
    color: #1f2a37;
}

/* سطر التواصل: بطاقة صغيرة أسفل قائمة الشركاء، فالهامش أعلاه لا أسفله */
.partners-contact {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 32px 0 0;
    padding: 16px;
    border: 1px solid #d7f0e2;
    border-radius: 12px;
    background: #f7fdf9;
    font-size: 1rem;
    color: #1f2a37;
}

.partners-contact svg {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    color: #1b8354;
}

.partners-contact a,
.partners-contact a:link,
.partners-contact a:visited {
    color: #1b8354;
    font-weight: 700;
    text-decoration: none;
}

.partners-contact a:hover {
    text-decoration: underline;
}

/* ===== شبكة الشركاء ===== */
.partners-count {
    margin: 0 0 16px;
    font-size: .875rem;
    color: #6c737f;
}

.partners-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

/* البطاقة بمقاسات المرجع: حدّ 1px #d2d6db، نصف قطر 16px، حشوة 16px،
   عمود بفجوة 24px، وكل محتواها بمحاذاة البداية (اليمين) لا الوسط. */
.partner-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    padding: 16px;
    border: 1px solid #d2d6db;
    border-radius: 16px;
    background: #fff;
    text-align: start;
}

/* منطقة الشعار ثابتة الارتفاع كي تستوي أسماء البطاقات في الصف
   مهما اختلفت نسب الشعارات. المرجع يستعمل 25px لأن شعاراته كلها
   عريضة قصيرة، وشعاراتنا فيها أختام دائرية تصير غير مقروءة عندها،
   فرفعناها إلى 48px وهو أدنى ارتفاع بقيت فيه الأختام مقروءة. */
.partner-card__logo {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    height: 48px;
}

/* height:auto ضروري: cwv-fix.js في UDesign يضيف سمتَي width/height
   لكل صورة وقت التشغيل، وسمة height تجعل الارتفاع الطبيعي ملزِماً
   فتتجاوز الشعارات الطويلة حدّ المنطقة. */
.partner-card__logo img {
    max-width: 100%;
    max-height: 48px;
    width: auto;
    height: auto;
    object-fit: contain;
    object-position: right center;
}

/* الاسم 18px بوزن 500 كما في المرجع، ويأخذ ما تبقّى من الارتفاع
   فيستقرّ الزر في أسفل كل بطاقة مهما طال الاسم */
.partner-card__name {
    flex: 1 1 auto;
    margin: 0;
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 1.2;
    color: #1f2a37;
}

/* زر «زيارة الموقع» بمقاسات المرجع: ارتفاع 40px وحشوة أفقية 16px
   ونصف قطر 4px على #1b8354 — وهي مقاسات أزرارنا الخضراء نفسها. */
.partner-card__link,
.partner-card__link:link,
.partner-card__link:visited {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 16px;
    border: 1px solid #1b8354;
    border-radius: 4px;
    background: #1b8354;
    color: #fff;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.2;
    text-decoration: none;
}

.partner-card__link:hover,
.partner-card__link:focus {
    background: #166a45;
    border-color: #166a45;
    color: #fff;
}

.partner-card__link svg {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
}

/* ===== الترقيم =====
   المكوّن نفسه المستخدم في صفحتَي الأخبار والخدمات، يقوده
   js/GEOSA_Site.js عبر data-grid-prefix و data-total-pages. */
.partners-grid[hidden] {
    display: none;
}

/* ===== الشاشات الأصغر ===== */
@media (max-width: 991.98px) {
    .partners-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 767.98px) {
    .partners-hero {
        padding: 24px 0;
        margin-bottom: 24px;
    }

    .partners-title {
        font-size: 1.5rem;
    }

    .partners-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 479.98px) {
    .partners-grid {
        grid-template-columns: 1fr;
    }
}