/*
  Public news listing pages (Group news, Capricorn Foundation news).
  capricorn.com.na CI: Calibri Light headings, slate navy, flat and square. The newest article
  sits in a navy panel like the old News Centre's featured tiles; the rest are cards with the
  1.91:1 thumbnail. Every class is prefixed nwl-.
*/
.sp-app.nwl {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding-top: var(--space-6);
  padding-bottom: var(--space-7);
}

/* Long unbroken text in a headline or summary wraps instead of spilling out of its card */
.nwl .nwl-header,
.nwl .nwl-feature__text,
.nwl .nwl-card__body,
.nwl .nwl-other {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* ---- Header ---- */
.nwl .nwl-header {
  max-width: 820px;
}

.nwl .nwl-kicker {
  margin: 0 0 var(--space-2);
  color: var(--app-red);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.nwl .nwl-title {
  margin: 0 0 var(--space-4);
  font-family: var(--app-font-light);
  font-size: 40px;
  font-weight: 300;
  line-height: 1.1;
  color: var(--app-navy);
}

.nwl .nwl-intro p {
  margin: 0 0 var(--space-3);
  color: var(--app-text);
  font-size: 16px;
  line-height: 1.6;
}

.nwl .nwl-intro a:is(:link, :visited) {
  color: var(--app-navy) !important;
  font-weight: 700;
  border-bottom: 1px solid var(--app-red);
}

.nwl .nwl-intro a:hover {
  color: var(--app-red) !important;
}

/* ---- Search and year ---- */
.nwl .nwl-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-3) var(--space-4);
  padding: var(--space-4) 0;
  border-top: 1px solid var(--app-rule);
  border-bottom: 1px solid var(--app-rule);
}

.nwl .nwl-tools[hidden] {
  display: none !important;
}

.nwl .nwl-tool {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.nwl .nwl-tool--search {
  flex: 1 1 320px;
  max-width: 520px;
}

.nwl .nwl-tool .sp-input {
  width: 100%;
}

.nwl .nwl-tool__label {
  color: var(--app-navy);
  font-size: 13px;
  font-weight: 700;
}

.nwl .nwl-count {
  margin: 0 0 var(--space-2);
  color: var(--app-muted);
  font-size: 14px;
}

.nwl .nwl-status {
  margin: 0;
  padding: var(--space-6) 0;
  color: var(--app-muted);
  font-size: 16px;
}

/* ---- Featured (newest) ---- */
.nwl .nwl-featured:empty {
  display: none;
}

.nwl .nwl-feature__link:is(:link, :visited) {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  background: var(--app-navy);
  color: #fff !important;
}

.nwl .nwl-feature__img {
  display: block;
  aspect-ratio: 1200 / 630;
  overflow: hidden;
  background: var(--app-navy-dark);
}

.nwl .nwl-feature__img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.nwl .nwl-feature__link:hover .nwl-feature__img img {
  transform: scale(1.03);
}

.nwl .nwl-feature__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-6);
}

.nwl .nwl-feature__label {
  align-self: flex-start;
  padding: 2px 8px;
  background: var(--app-red);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.nwl .nwl-feature__title {
  margin: 0;
  font-family: var(--app-font-light) !important;
  font-size: 28px;
  font-weight: 300;
  line-height: 1.2;
  color: #fff !important;
}

.nwl .nwl-feature__date {
  color: #c9cfdc;
  font-size: 14px;
  font-style: italic;
}

.nwl .nwl-feature__summary {
  color: #e8ebf2;
  font-size: 16px;
  line-height: 1.5;
}

.nwl .nwl-feature__more {
  margin-top: var(--space-2);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
}

.nwl .nwl-feature__more::after {
  content: " ›";
}

.nwl .nwl-feature__link:hover .nwl-feature__more {
  text-decoration: underline !important;
}

/* ---- Grid ---- */
.nwl .nwl-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6) var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.nwl .nwl-grid:empty {
  display: none;
}

.nwl .nwl-card {
  margin: 0;
}

.nwl .nwl-card__link:is(:link, :visited) {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-bottom: 1px solid var(--app-rule);
  color: var(--app-navy) !important;
}

.nwl .nwl-card__img {
  display: block;
  aspect-ratio: 1200 / 630;
  overflow: hidden;
  background: var(--app-navy);
}

.nwl .nwl-card__img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.nwl .nwl-card__link:hover .nwl-card__img img {
  transform: scale(1.04);
}

.nwl .nwl-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3) 0 var(--space-4);
}

.nwl .nwl-card__date {
  color: var(--app-muted);
  font-size: 13px;
  font-style: italic;
}

.nwl .nwl-card__title {
  margin: 0;
  font-family: var(--app-font) !important;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--app-navy);
}

.nwl .nwl-card__link:hover .nwl-card__title {
  color: var(--app-red);
}

.nwl .nwl-card__summary {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  color: var(--app-text);
  font-size: 15px;
  line-height: 1.5;
}

.nwl .nwl-more {
  display: flex;
  justify-content: center;
}

/* ---- The other section ---- */
.nwl .nwl-other:empty {
  display: none;
}

.nwl .nwl-other__link:is(:link, :visited) {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-left: 3px solid var(--app-red);
  background: var(--app-surface-alt);
  color: var(--app-navy) !important;
}

.nwl .nwl-other__label {
  color: var(--app-muted);
  font-size: 13px;
}

.nwl .nwl-other__title {
  font-family: var(--app-font-light);
  font-size: 22px;
}

.nwl .nwl-other__title::after {
  content: " ›";
}

.nwl .nwl-other__link:hover .nwl-other__title {
  color: var(--app-red);
}

@media (prefers-reduced-motion: reduce) {
  .nwl .nwl-card__img img,
  .nwl .nwl-feature__img img {
    transition: none;
  }
}

/* ---- Wide screens: four cards a row ---- */
@media (min-width: 1500px) {
  .nwl .nwl-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .nwl .nwl-feature__title {
    font-size: 32px;
  }
}

/* ---- Narrow screens ---- */
@media (max-width: 991px) {
  .nwl .nwl-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .nwl .nwl-feature__link:is(:link, :visited) {
    grid-template-columns: minmax(0, 1fr);
  }

  .nwl .nwl-feature__text {
    padding: var(--space-5);
  }
}

@media (max-width: 600px) {
  .nwl .nwl-title {
    font-size: 32px;
  }

  .nwl .nwl-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .nwl .nwl-feature__title {
    font-size: 24px;
  }
}