/* ═══════════════════════════════════════════════════════════════
   SINGLE PROJECT — "أحدث المستجدات" / Latest Updates
   Markup: inc/project-updates.php → rcrc_project_updates_render().
   Loaded only on project pages that have the section switched on.

   Light-grey band with up to 3 news cards (title, date, read-more).
   The band runs to the viewport edges while its content stays on the
   page grid — also when the editor placed it inside a `.container`
   group — via the box-shadow + clip-path bleed (no 100vw, so no
   horizontal scrollbar). Class names carry "fdp-" so the project body
   typography overrides (:not([class*="fdp-"])) leave them alone.
   ═══════════════════════════════════════════════════════════════ */

.fdp-updates {
  --fdp-updates-bg: var(--fp-bg, #F9FAFB);
  position: relative;
  margin-block: 32px;
  padding-block: 48px;
  background: var(--fdp-updates-bg);
  box-shadow: 0 0 0 100vmax var(--fdp-updates-bg);
  clip-path: inset(0 -100vmax);
  font-family: var(--fp-font);
  color: var(--fp-text, #161616);
}

.fdp-updates .fdp-updates__title {
  margin: 0 0 24px;
  font-family: var(--fp-font);
  font-size: 24px;
  font-weight: 700;
  line-height: 32px;
  letter-spacing: 0;
  color: var(--fp-text, #161616);
}

.fdp-updates .fdp-updates__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fdp-updates .fdp-updates__item {
  display: flex;
  margin: 0;
  padding: 0;
  font-weight: 400;
}

.fdp-updates .fdp-updates__item::before,
.fdp-updates .fdp-updates__item::marker {
  content: none;
}

/* ── Card ── */
.fdp-updates .fdp-updates__card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  padding: 24px;
  background: var(--fp-white, #fff);
  border: 1px solid #E5E7EB; /* SDS neutral-200 — same surface border as .fd-card */
  border-radius: var(--fp-radius-lg, 16px);
}

.fdp-updates .fdp-updates__card-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  margin: 0;
  font-family: var(--fp-font);
  font-size: 18px;
  font-weight: 600;
  line-height: 28px;
  letter-spacing: 0;
  color: var(--fp-text, #161616);
}

.fdp-updates .fdp-updates__date {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px; /* + card gap = 16px minimum above the button */
  font-family: var(--fp-font);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--fp-accent, #1B8354);
}

.fdp-updates .fdp-updates__icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

/* ── "قراءة المزيد" — DGA neutral (secondary) button, pinned to the card bottom ── */
.fdp-updates .fdp-updates__btn {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  min-height: 40px;
  margin-top: auto;
  padding: 8px 16px;
  font-family: var(--fp-font);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: var(--fp-text, #161616);
  background: var(--fp-bg-2, #F3F4F6);
  border: 0;
  border-radius: var(--fp-radius-xs, 4px);
  text-decoration: none;
  transition: background-color var(--fp-trans, .22s ease);
}

.fdp-updates .fdp-updates__btn:visited {
  color: var(--fp-text, #161616);
}

.fdp-updates .fdp-updates__btn:hover {
  color: var(--fp-text, #161616);
  background: #E5E7EB; /* SDS neutral-200 */
  text-decoration: none;
}

.fdp-updates .fdp-updates__btn:active {
  background: var(--fp-border, #D2D6DB); /* SDS neutral-300 — pressed */
}

.fdp-updates .fdp-updates__btn:focus-visible {
  outline: 2px solid var(--fp-text, #161616);
  outline-offset: 2px;
  text-decoration: none;
}

/* ── Responsive ── */
@media (max-width: 991.98px) {
  .fdp-updates .fdp-updates__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767.98px) {
  .fdp-updates {
    margin-block: 24px;
    padding-block: 32px;
  }

  .fdp-updates .fdp-updates__title {
    margin-bottom: 16px;
    font-size: 20px;
    line-height: 30px;
  }

  .fdp-updates .fdp-updates__list {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .fdp-updates .fdp-updates__card {
    padding: 20px;
  }

  .fdp-updates .fdp-updates__card-title {
    -webkit-line-clamp: 3;
    line-clamp: 3;
    font-size: 16px;
    line-height: 24px;
  }
}

@media (forced-colors: active) {
  .fdp-updates .fdp-updates__card,
  .fdp-updates .fdp-updates__btn {
    border: 1px solid CanvasText;
  }
}

@media print {
  .fdp-updates {
    box-shadow: none;
    clip-path: none;
    background: none;
  }
}