/*
  Public news page (News and Money Matters on one page).
  The old Pages/News/default.aspx's elements, kept: per section a banner, the newest articles as
  grey rounded tiles (date in red, headline, "Read more ›"), and a grey side panel listing every
  article (grouped by year, collapsible). Made lighter and fluid: tiles size to their column (no fixed 350px height, no
  40-character cut-off), smaller radii and type, the side panel as tall as the tiles beside it,
  and on phones the tiles become compact rows with the picture on the left.
  Every class is prefixed nwl-.
*/
.sp-app.nwl {
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
  padding-top: var(--space-5);
  padding-bottom: var(--space-7);
}

/* Long unbroken text in a headline wraps instead of spilling out of its tile */
.nwl .nwl-card__body,
.nwl .nwl-side__inner {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* ---- Jump links (News · Money Matters) ---- */
.nwl .nwl-jump {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0 0 calc(var(--space-5) * -1);
}

.nwl .nwl-jump__link:is(:link, :visited) {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 var(--space-4);
  border: 1px solid var(--app-border);
  border-radius: 16px;
  background: var(--app-surface);
  color: var(--app-navy) !important;
  font-size: 14px;
  font-weight: 700;
}

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

/* ---- Section ---- */
.nwl .nwl-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  scroll-margin-top: var(--space-4);
}

.nwl .nwl-banner {
  margin: 0;
  font-size: 0;
  line-height: 0;
}

.nwl .nwl-banner__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--app-radius);
}

/* The News artwork is much taller than Money Matters'; shown as a shorter strip, centred on its
   text, so both banners read as a pair and the tiles stay near the top of the screen */
.nwl .nwl-banner--tall .nwl-banner__img {
  aspect-ratio: 1656 / 430;
  object-fit: cover;
  object-position: center 55%;
}

.nwl .nwl-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: var(--space-6);
  align-items: stretch;
}

.nwl .nwl-main {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  min-width: 0;
}

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

.nwl .nwl-section--empty .nwl-side {
  display: none;
}

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

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

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

.nwl .nwl-card__link:is(:link, :visited) {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border-radius: var(--app-radius);
  background: var(--app-tile);
  color: var(--app-text) !important;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.nwl .nwl-card__link:hover {
  box-shadow: 0 8px 22px rgba(25, 47, 85, 0.14);
  transform: translateY(-2px);
  color: var(--app-text) !important;
}

.nwl .nwl-card__img {
  display: block;
  aspect-ratio: 1200 / 630;
  overflow: hidden;
  background: #dfe1e2;
}

.nwl .nwl-card__img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Money Matters tiles without a thumbnail: the section's own artwork, alternating */
.nwl .nwl-card__img--art {
  background-color: #b3191f;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.nwl .nwl-card__img--art1 {
  background-image: url("../assets/images/MoneyMattersThumbnail-First.png?v=1964f8ff");
}

.nwl .nwl-card__img--art2 {
  background-image: url("../assets/images/MoneyMattersThumbnail-Second.png?v=41a14f76");
}

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

.nwl .nwl-card__kicker {
  color: var(--app-red);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
}

.nwl .nwl-card__title {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  color: var(--app-text);
  font-family: var(--app-font) !important;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.3;
}

.nwl .nwl-card__more {
  margin-top: auto;
  padding-top: var(--space-1);
  color: var(--app-red);
  font-size: 14px;
  font-weight: 700;
}

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

.nwl .nwl-card__link:hover .nwl-card__more {
  text-decoration: underline;
}

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

.nwl .nwl-more:has([hidden]) {
  display: none;
}

/* ---- Side panel: every article in the section ---- */
.nwl .nwl-side {
  position: relative;
  min-height: 460px;
}

/* As tall as the tiles beside it (wide screens): the list scrolls inside */
.nwl .nwl-side__inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-5) var(--space-4);
  border-radius: var(--app-radius);
  background: var(--app-tile);
}

.nwl .nwl-side__title {
  margin: 0;
  color: var(--app-grey);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.1;
}

.nwl .nwl-side__search {
  display: block;
}

.nwl .nwl-side__input {
  width: 100%;
  border-radius: 18px;
  padding: 0 var(--space-4);
}

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

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

/* The year groups (and an archive, if the section has one) scroll together */
.nwl .nwl-side__scroll {
  flex: 1 1 0;
  min-height: 0;
  margin: 0 calc(var(--space-2) * -1) 0 0;
  padding: 0 var(--space-2) 0 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.nwl .nwl-side__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ---- Year groups: collapsible; the open year's heading stays in view while its list scrolls ---- */
.nwl .nwl-side__group {
  margin: 0;
}

.nwl .nwl-side__summary {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 40px;
  padding: 6px 0;
  border-bottom: 1px solid #c9cbcd;
  background: var(--app-tile);
  color: var(--app-grey);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  list-style: none;
  cursor: pointer;
  user-select: none;
}

.nwl .nwl-side__summary::-webkit-details-marker {
  display: none;
}

/* Chevron: right when closed, down when open */
.nwl .nwl-side__summary::before {
  content: "";
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  margin: 0 4px 0 2px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 0.15s ease;
}

.nwl .nwl-side__group[open] > .nwl-side__summary {
  border-bottom: 2px solid var(--app-brand-red);
}

.nwl .nwl-side__group[open] > .nwl-side__summary::before {
  transform: translateY(-2px) rotate(45deg);
}

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

.nwl .nwl-side__summary:focus-visible {
  outline: 2px solid var(--app-navy);
  outline-offset: -2px;
}

.nwl .nwl-side__n {
  margin-left: auto;
  color: var(--app-muted);
  font-size: 12px;
  font-weight: 400;
}

/* The Money Matters archive (PDF): set apart from the years */
.nwl .nwl-side__group--archive {
  margin-top: var(--space-4);
}

.nwl .nwl-side__item {
  margin: 0;
  padding: 0;
  border-bottom: 1px solid #c9cbcd;
}

.nwl .nwl-side__link:is(:link, :visited) {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 0;
  color: var(--app-grey) !important;
}

.nwl .nwl-side__headline {
  font-size: 15px;
  line-height: 1.35;
}

.nwl .nwl-side__link:hover .nwl-side__headline {
  color: var(--app-red);
}

.nwl .nwl-side__issue {
  color: var(--app-red);
  font-weight: 700;
}

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

@media (prefers-reduced-motion: reduce) {
  .nwl .nwl-card__link:is(:link, :visited),
  .nwl .nwl-side__summary::before {
    transition: none;
  }

  .nwl .nwl-card__link:hover {
    transform: none;
  }
}

/* ---- Tile columns follow the space the tiles have, not the screen ---- */
@container (max-width: 640px) {
  .nwl .nwl-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
  }
}

/* Narrow: compact rows, picture on the left */
@container (max-width: 460px) {
  .nwl .nwl-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
  }

  .nwl .nwl-card__link:is(:link, :visited) {
    display: grid;
    grid-template-columns: 38% minmax(0, 1fr);
    border-radius: var(--app-radius-small);
  }

  .nwl .nwl-card__img {
    aspect-ratio: auto;
    min-height: 96px;
    height: 100%;
  }

  .nwl .nwl-card__body {
    gap: 4px;
    padding: var(--space-2) var(--space-3);
  }

  .nwl .nwl-card__kicker {
    font-size: 12px;
  }

  .nwl .nwl-card__title {
    font-size: 15px;
  }

  .nwl .nwl-card__more {
    display: none;
  }
}

/* ---- Below 992px the side panel goes under the tiles, with a shorter list ---- */
@media (max-width: 991px) {
  .nwl .nwl-body {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
  }

  .nwl .nwl-side {
    min-height: 0;
  }

  .nwl .nwl-side__inner {
    position: static;
  }

  .nwl .nwl-side__scroll {
    flex: 0 1 auto;
    max-height: 300px;
  }
}

@media (max-width: 600px) {
  .sp-app.nwl {
    gap: var(--space-6);
    padding-top: var(--space-4);
  }

  .nwl .nwl-section {
    gap: var(--space-4);
  }

  .nwl .nwl-banner__img {
    border-radius: var(--app-radius-small);
  }

  .nwl .nwl-side__inner {
    padding: var(--space-4);
    border-radius: var(--app-radius-small);
  }

  .nwl .nwl-side__title {
    font-size: 22px;
  }
}