/* ==========================================================================
   SERVICES
   ========================================================================== */
.service-card{ padding: var(--space-md); text-align: center; }
.service-card__icon{
  width: 64px; height: 64px; margin: 0 auto var(--space-sm); display:flex; align-items:center; justify-content:center;
  background: var(--color-primary-light); border-radius: var(--radius-md); color: var(--color-primary);
}
.service-card__icon svg{ width: 30px; height: 30px; }
.service-card__title{ font-size: var(--fs-md); margin-bottom: 6px; }
.service-card__desc{ color: var(--color-ink-soft); font-size: var(--fs-xs); margin: 0; }

/* ==========================================================================
   NEWS / PROGRAMS
   ========================================================================== */
.post-card__media{ position: relative; aspect-ratio: 4/3; overflow: hidden; }
.post-card__media img{ width:100%; height:100%; object-fit:cover; transition: transform var(--dur-slow) var(--ease-out); }
.card:hover .post-card__media img{ transform: scale(1.06); }
.post-card__date{
  position:absolute; top:12px; inset-inline-start:12px; background: var(--color-secondary); color: var(--color-brand-brown);
  font-weight:700; font-size: var(--fs-2xs); padding: 6px 12px; border-radius: var(--radius-pill);
}
.post-card__body{ padding: var(--space-sm) var(--space-sm) var(--space-md); }
.post-card__title{ font-size: var(--fs-md); margin-bottom: 8px; }
.post-card__title a::after{ content:""; position:absolute; inset:0; }
.post-card{ position: relative; }
.post-card__excerpt{ color: var(--color-ink-soft); font-size: var(--fs-xs); margin-bottom: var(--space-xs); }
.post-card__more{ font-weight: 700; font-size: var(--fs-2xs); color: var(--color-primary); }

/* بطاقة أخبار مصغّرة - تُستخدم في شبكة "آخر الأخبار" (8 بطاقات، 4 أعلى + 4 أسفل) */
.grid--news{ row-gap: var(--space-md); }
.post-card--sm .post-card__media{ aspect-ratio: 16/11; }
.post-card--sm .post-card__body{ padding: var(--space-xs) var(--space-xs) var(--space-sm); }
.post-card--sm .post-card__title{ font-size: var(--fs-sm); margin-bottom: 4px; line-height: 1.5; }
.post-card--sm .post-card__excerpt{ font-size: var(--fs-2xs); margin-bottom: 6px; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.post-card--sm .post-card__date{ font-size: var(--fs-2xs); padding: 4px 10px; }

.program-card__meta{ display:flex; flex-wrap:wrap; gap: 10px 16px; font-size: var(--fs-2xs); color: var(--color-ink-soft); margin-bottom: var(--space-xs); }
.program-card__meta span{ display:flex; align-items:center; gap:6px; }

/* ==========================================================================
   PROJECTS
   ========================================================================== */
.project-card__body{ padding: var(--space-sm) var(--space-sm) var(--space-md); }
.project-card__cat{ font-size: var(--fs-2xs); font-weight:700; color: var(--color-secondary-dark); text-transform: uppercase; letter-spacing:.03em; }
.progress{ height: 10px; border-radius: var(--radius-pill); background: var(--color-surface-alt); overflow: hidden; margin-block: var(--space-2xs); }
.progress__bar{ height:100%; background: linear-gradient(90deg, var(--color-secondary), var(--color-primary)); border-radius: inherit; }
.project-card__figures{ display:flex; justify-content: space-between; font-size: var(--fs-2xs); color: var(--color-ink-soft); }
.project-card__figures strong{ color: var(--color-primary); font-family: var(--font-display); font-size: var(--fs-sm); }

/* ==========================================================================
   TIMELINE (الإنجازات)
   ========================================================================== */
.timeline{ position: relative; max-width: 820px; margin-inline:auto; }
.timeline::before{ content:""; position:absolute; inset-inline-start: 11px; top:6px; bottom:6px; width:2px; background: var(--color-border); }
.timeline__item{ position: relative; padding-inline-start: 44px; padding-bottom: var(--space-lg); }
.timeline__item::before{ content:""; position:absolute; inset-inline-start:0; top:2px; width:24px; height:24px; border-radius:50%; background:#fff; border:3px solid var(--color-secondary); }
.timeline__year{ font-family: var(--font-display); font-weight:800; color: var(--color-primary); font-size: var(--fs-lg); }
.timeline__text{ color: var(--color-ink-soft); }

/* ==========================================================================
   GALLERY (masonry)
   ========================================================================== */
.masonry{ column-count: 4; column-gap: var(--space-sm); }
.masonry__item{ break-inside: avoid; margin-bottom: var(--space-sm); border-radius: var(--radius-md); overflow:hidden; position:relative; }
.masonry__item img{ width:100%; display:block; transition: transform var(--dur-slow) var(--ease-out); }
.masonry__item:hover img{ transform: scale(1.05); }
.masonry__item a{ display:block; position:relative; }
.masonry__item a::after{ content:"+"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:2rem; color:#fff; background: rgba(15,107,70,0); transition: background var(--dur-fast); }
.masonry__item a:hover::after{ background: rgba(15,107,70,.45); }
@media (max-width: 980px){ .masonry{ column-count:3; } }
@media (max-width: 640px){ .masonry{ column-count:2; } }

/* ==========================================================================
   VIDEO
   ========================================================================== */
.video-feature{ display:grid; grid-template-columns: 1.1fr .9fr; gap: var(--space-lg); align-items:center; }
.video-feature__frame{ position:relative; border-radius: var(--radius-lg); overflow:hidden; box-shadow: var(--shadow-md); aspect-ratio:16/9; }
.video-feature__frame iframe{ width:100%; height:100%; border:0; }
@media (max-width: 900px){ .video-feature{ grid-template-columns:1fr; } }

/* ==========================================================================
   TESTIMONIALS
   ========================================================================== */
.testimonial-card{ padding: var(--space-md); text-align: center; }
.testimonial-card__avatar{ width:64px; height:64px; border-radius:50%; overflow:hidden; margin: 0 auto var(--space-2xs); border: 3px solid var(--color-secondary-light); }
.testimonial-card__quote{ color: var(--color-ink-soft); font-size: var(--fs-sm); margin-bottom: var(--space-2xs); }
.testimonial-card__name{ font-weight:700; }
.testimonial-card__role{ font-size: var(--fs-2xs); color: var(--color-ink-soft); }

/* ==========================================================================
   PARTNERS
   ========================================================================== */
.partners-track{ display:flex; align-items:center; gap: var(--space-xl); overflow-x:auto; padding-block: var(--space-sm); scrollbar-width:none; }
.partners-track::-webkit-scrollbar{ display:none; }
.partners-track img{ height: 48px; width:auto; filter: grayscale(1); opacity:.7; transition: all var(--dur-base); flex-shrink:0; }
.partners-track img:hover{ filter:none; opacity:1; }