/*
 * News and Reports listings — the parts the DGA stylesheet does not carry.
 *
 * shareek.css holds the frame's own classes (sk-news-list, sk-news-card,
 * sk-report-card, sk-news-featured). What is here is this site's functionality
 * that the static frame has no markup for: the sort menu behind the "sort by"
 * button, and the empty state the search falls back to.
 *
 * Loaded after style.css, which the site fetches through an async loader, so
 * ordering buys nothing — selectors are written to out-specify the legacy rules
 * rather than merely to follow them.
 */

/* --- Sort menu -------------------------------------------------------- */

.sk-sort {
  position: relative;
}

/* Anchored to the button and taken out of flow, so opening it does not push the
   grid down. Inset-inline-start, so it hangs from the same edge in both
   directions. */
.sk-sort__menu {
  position: absolute;
  z-index: 20;
  inset-inline-start: 0;
  top: calc(100% + 8px);
  min-width: 240px;
  margin: 0;
  padding: 8px;
  list-style: none;
  border: 1px solid var(--border-neutral-primary, #e5e7eb);
  border-radius: 8px;
  background: var(--background-white, #fff);
  box-shadow: 0 12px 24px rgba(16, 24, 40, 0.12);
}

.sk-sort__menu[hidden] {
  display: none;
}

.sk-sort__menu li {
  list-style: none;
}

.sk-sort__menu a {
  display: block;
  padding: 10px 12px;
  border-radius: 6px;
  color: var(--text-default, #1f2a37);
  font-size: 16px;
  line-height: 24px;
  text-align: start;
  text-decoration: none;
  white-space: nowrap;
}

.sk-sort__menu a:hover,
.sk-sort__menu a:focus-visible {
  background: var(--background-neutral-50, #f2f4f7);
  color: var(--text-default, #1f2a37);
}

.sk-sort__menu a.active {
  background: var(--background-neutral-50, #f2f4f7);
  color: var(--text-brand-primary, #1b8354);
}

/* --- Empty state ------------------------------------------------------ */

/* The frame has no "no results" screen; this is the legacy .no-result-wrapper
   rebuilt with the section's own type so it reads as part of the page. */
.sk-news-list__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 64px 0;
  text-align: center;
}

.sk-news-list__empty[hidden] {
  display: none;
}

/* --- Featured story --------------------------------------------------- */

/* The frame's excerpt is a written summary; the CMS has no summary field, so the
   excerpt is taken from the article body and clamped here rather than cut in the
   script — the full text stays in the DOM and the clamp reflows with the column. */
.sk-news-featured__excerpt {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
  line-clamp: 6;
  overflow: hidden;
}

/* --- Load more -------------------------------------------------------- */

/* dga-button is inline by default, so the row would not centre on its own. */
.sk-news-list__cta[hidden] {
  display: none;
}

@media (max-width: 767px) {
  .sk-sort__menu {
    min-width: 200px;
  }
}