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

   البنية والمقاسات مقيسة من صفحة خبر الهيئة العامة للعقار في متصفح
   حقيقي (نسخة محلية مع أنماطها، قراءة getComputedStyle لا تقدير):
       شريط علوي #f7fdf9 حشوته 40px: فتات خبز ← h1 30px/38px ←
       سطر «نشرت في» 16px ← صورة رئيسية متوسّطة ← فقرات 16px/24px
       ← قسم «اقرأ ايضاً» على #f7fdf9 ببطاقات 416×310 نصف قطرها 16px.
   ومعرض الصور مأخوذ عن صفحة خبر الهيئة الملكية لمدينة الرياض:
       ثلاثة أعمدة، فجوة 8px، object-fit:cover.
   الألوان هي ألوان المشروع نفسها: #1b8354 و#161616 و#1f2a37 و#f7fdf9. */

/* UDesign يضع padding:40px 0 على كل section، فنصفّره ونتحكّم بأنفسنا */
.news-detail {
    padding: 0;
}

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

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

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

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

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

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

.news-title {
    margin: 0 0 8px;
    font-size: 1.875rem;
    font-weight: 700;
    line-height: 1.27;
    color: #161616;
}

/* سطر التاريخ: الأيقونة ثم النص، ويبدآن من جهة البداية (اليمين) */
.news-date {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.2;
    color: #1f2a37;
}

.news-date svg {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    color: #1b8354;
}

/* ===== الصورة الرئيسية =====
   متوسّطة ولا تتمدّد فوق حجمها الطبيعي، كما في المرجع. */
.news-figure {
    display: flex;
    justify-content: center;
    margin: 0 0 32px;
}

.news-figure img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

/* ===== متن الخبر ===== */
.news-body p {
    margin: 0 0 16px;
    font-size: 1rem;
    line-height: 1.9;
    color: #161616;
}

.news-body p:last-child {
    margin-bottom: 0;
}

/* ===== معرض الصور =====
   يظهر فقط حين يكون للخبر صور إضافية غير الصورة الرئيسية.
   النسبة 461÷289 مأخوذة من قياس المعرض في المرجع. */
.news-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 32px;
}

/* height:auto ضروري لا زائد: cwv-fix.js في UDesign يضيف سمتَي
   width/height إلى كل صورة وقت التشغيل لمنع القفز التخطيطي، وسمة
   height تصير تلميحاً تقديمياً بقيمة الارتفاع الطبيعي — ومتى كان
   البعدان محدّدين أُهمل aspect-ratio، فتظهر الصور بأطوال متفاوتة. */
.news-gallery img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 461 / 289;
    object-fit: cover;
    border-radius: 8px;
}

/* ===== اقرأ ايضاً ===== */
.news-more {
    position: relative;
    background: #f7fdf9;
    margin-top: 40px;
    padding: 40px 0;
    box-shadow: 0 0 0 100vmax #f7fdf9;
    clip-path: inset(0 -100vmax);
}

.news-more__title {
    margin: 0 0 16px;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.33;
    color: #161616;
}

.news-more__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

/* البطاقة: 416×310 في المرجع — نتركها مرنة ونثبّت المظهر */
.news-more__card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 16px;
    padding: 24px;
}

/* والعلّة نفسها في عنوان البطاقة: بلا تثبيت الحالات يظهر
   بلون الروابط قبل الزيارة وبلون موروث بعدها. */
.news-more__card h3,
.news-more__card h3 a,
.news-more__card h3 a:link,
.news-more__card h3 a:visited {
    margin: 0 0 8px;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.2;
    color: #1f2a37;
}

.news-more__card p {
    margin: 0 0 16px;
    font-size: 1rem;
    line-height: 1.6;
    color: #4b5563;
}

/* شارة التاريخ داخل البطاقة، ويدفعها auto إلى أسفل البطاقة
   فتتساوى مواضع الأزرار مهما اختلفت أطوال العناوين */
.news-more__date {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    margin-top: auto;
    padding: 4px 10px;
    border: 1px solid #d7f0e2;
    border-radius: 6px;
    background: #f3fcf6;
    font-size: .875rem;
    color: #1f2a37;
}

.news-more__date svg {
    width: 14px;
    height: 14px;
    color: #1b8354;
}

/* الزر بمقاسات المرجع نفسها، وهي مقاسات زر «بدء الخدمة» عندنا */
/* :visited لازم لا زائد: في UDesign قاعدة a:visited{color:unset}
   ومحدّديتها (0,1,1) تغلب .news-more__btn (0,1,0)، فكان نصّ زرّ كل
   خبر سبقت زيارته يرث لون البطاقة الداكن بدل الأبيض. */
.news-more__btn,
.news-more__btn:link,
.news-more__btn:visited {
    align-self: flex-start;
    margin-top: 16px;
    padding: 6px 12px;
    border: 1px solid #1b8354;
    border-radius: 4px;
    background: #1b8354;
    color: #fff;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.2;
    text-decoration: none;
}

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

/* ===== زر العودة ===== */
.news-back {
    margin-top: 32px;
}

.news-back a,
.news-back a:link,
.news-back a:visited {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 1rem;
    color: #1b8354;
    text-decoration: none;
}

.news-back a:hover {
    text-decoration: underline;
}

/* ===== الشاشات المتوسطة والصغيرة ===== */
@media (max-width: 991.98px) {
    .news-more__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

    .news-title {
        font-size: 1.375rem;
    }

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

    .news-more {
        margin-top: 32px;
        padding: 32px 0;
    }

    .news-more__grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575.98px) {
    .news-gallery {
        grid-template-columns: 1fr;
    }
}