/*!
 * Monal Group — Latest News (Figma 1:3051, nodes 1:3201 / 1:3202-1:3266).
 *
 * Mobile first. Desktop values are the Figma frame's, expressed as
 * --monal-u units (1u == 1 Figma px / 10), matching the rest of the theme.
 */

/* The page carries each leading gap as the section padding-top and leaves the
   bottom to the next block, but the footer only contributes its own small
   padding, so the closing gap belongs here. Below 1200 both are the shared
   --monal-page-gap, as on Story and Leadership (the footer adds its 1u). */
.monal-latest { position: relative; padding: var(--monal-page-gap) 0; }
.monal-latest__title { text-align: center; }

.monal-latest__grid {
  display: grid; gap: calc(var(--monal-u) * 2.4);
  margin: calc(var(--monal-u) * 3.2) 0 0; padding: 0; list-style: none;
}

/* 1:3206 — 1px rgba(44,90,79,.5) outline, radius TL/BR 47.065.
   An inset shadow, not a border: the Figma stroke is drawn over the
   367.396 x 516.989 box, so a border would shrink the image inside it and
   add 2 to the card height. */
.monal-latest-card {
  display: flex; flex-direction: column;
  box-shadow: inset 0 0 0 1px rgba(44, 90, 79, .5);
  border-radius: calc(var(--monal-u) * 4.71) 0 calc(var(--monal-u) * 4.71) 0;
  overflow: hidden;
}
/* 1:3207 — the image fills the card's width at 367.396 x 278.75. */
.monal-latest-card__media {
  aspect-ratio: 367.396 / 278.75; width: 100%;
  background: var(--monal-c-green-10);
}
.monal-latest-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.monal-latest-card__body {
  display: flex; flex-direction: column; flex: 1;
  padding: calc(var(--monal-u) * 1.6) calc(var(--monal-u) * 1.6) calc(var(--monal-u) * 2);
}
.monal-latest-card__meta {
  display: flex; align-items: center; justify-content: space-between; gap: calc(var(--monal-u) * 1);
  margin: 0;
}
/* 1:3209 — 16.943/22.591 Poppins Light. */
.monal-latest-card__date {
  font-weight: 300; font-size: max(calc(var(--monal-u) * 1.3), 12px); line-height: 1.33;
  color: var(--monal-c-muted);
}
.monal-latest-card__link { flex: none; }
/* 1:3210 — Libertinus Serif Display 37.652/39.535. */
.monal-latest-card__title {
  margin: calc(var(--monal-u) * 1.2) 0 0;
  font-family: var(--monal-f-display); font-weight: 400;
  font-size: max(calc(var(--monal-u) * 2.2), 20px); line-height: 1.05; letter-spacing: -.04em;
  color: var(--monal-c-ink);
}
/* 1:3208 — 16.943/25.415 Poppins Regular at 70%. */
.monal-latest-card__text {
  margin: calc(var(--monal-u) * 1) 0 0;
  font-size: max(calc(var(--monal-u) * 1.3), 12px); line-height: 1.5;
  color: var(--monal-c-muted);
}

/* 1:3331 — the Show More button, with a down arrow after the label. */
.monal-latest__more {
  display: inline-flex; margin: calc(var(--monal-u) * 3.2) auto 0;
}
.monal-latest__more { margin-inline: auto; }
.monal-latest .monal-container { display: flex; flex-direction: column; }
.monal-latest__more-icon {
  width: calc(var(--monal-u) * 1.25); height: calc(var(--monal-u) * 1.25);
  background: currentColor;
  -webkit-mask: url(../../assets/monal/icons/arrow-ne.svg) center / contain no-repeat;
  mask: url(../../assets/monal/icons/arrow-ne.svg) center / contain no-repeat;
  /* The shared arrow points north-east; the design's points straight down. */
  transform: rotate(135deg);
}

/* Phones: a swipe carousel, each card 90% of the column - the same rule as the News &
   Events rail; the rail starts on
   the page gutter and bleeds to the viewport edge, which the section clips.
   Grid stretch gives every card the tallest card's height. The "Show More"
   below is a link to the full listing, not a pager, so it stays. */
@media (max-width: 767px) {
  .monal-latest__grid {
    --monal-rail-gap: calc(var(--monal-u) * 2.4);
    grid-auto-flow: column;
    grid-auto-columns: 90%; /* one card at 90% of the column, the next peeking in */
    gap: var(--monal-rail-gap);
    margin-right: calc(var(--monal-gutter) * -1); padding-right: var(--monal-gutter);
    overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory; scrollbar-width: none;
  }
  .monal-latest__grid::-webkit-scrollbar { display: none; }
  .monal-latest-card { scroll-snap-align: start; }
}

@media (min-width: 768px) {
  .monal-latest__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1200px) {
  /* Heading 1:3201 at y2362; the grid 1:3206 at y2494.27. The band starts at
     the News & Events dots (y2246.44 + 11.911), so the offset is measured from
     there by the page assembly rather than hard-coded here. */
  /* Figma puts the heading at y2362. The News section above ends at its
     pagination dots, which only render once there is more than one page of
     stories; with the three designed stories it ends at the card grid, so the
     offset is measured from there: 2362 - 2197.253 = 164.747. */
  /* Figma 1:3056 puts the footer panel at y3268.49 and the Show More button
     ends at 3118.48 — a 150 gap. The footer section supplies 24 of it, so the
     remaining 126 sits here. */
  .monal-latest {
    padding-top: calc(var(--monal-u) * 16.475);
    padding-bottom: calc(var(--monal-u) * 12.6);
  }
  /* When the stories run to more than one page the dots render, and the News
     section then ends at the dots (2246.44 + 11.911 = 2258.35), so the
     heading's 2362 is 103.65 below them. Either way it lands on 2362, and it
     stays put as filters show or hide the dots. */
  body:has(.monal-news--light .monal-dots:not([hidden])) .monal-latest { padding-top: calc(var(--monal-u) * 10.365); }
  .monal-latest__title {
    font-size: calc(var(--monal-u) * 6.6); line-height: calc(var(--monal-u) * 7.2);
    letter-spacing: calc(var(--monal-u) * -.264);
  }
  /* Four 367.396 cards, pitch 392.4 => 25 gap, inside the 1544 container. */
  .monal-latest__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: calc(var(--monal-u) * 2.5);
    margin-top: calc(var(--monal-u) * 6.03);
  }
  /* 1:3206 — card 367.396 x 516.989. The image is 278.75, and the body below
     it is 238.239: 27.99 + date 22.591 + 15.239 + title 39.535 + 24.275 +
     copy 76.245 (three lines in a 274.724 box) + 32.364. */
  .monal-latest-card { min-height: calc(var(--monal-u) * 51.699); }
  .monal-latest-card__media { flex: none; }
  .monal-latest-card__body {
    position: relative;
    padding: calc(var(--monal-u) * 2.799) calc(var(--monal-u) * 3.085) calc(var(--monal-u) * 3.236);
  }
  /* 1:3212 — the arrow is a 41.645 badge inset 30.39 from the right and 18.67
     below the image, overlapping the date row rather than sitting beside it.
     Inline it would make that row 41.6 tall and push the card 19 over. */
  /* The row is the date line, so it has to carry the date metrics itself: the
     paragraph strut (24) otherwise sets the line box and the card runs 1.4
     over 516.989. */
  .monal-latest-card__meta {
    display: block;
    font-size: calc(var(--monal-u) * 1.694); line-height: calc(var(--monal-u) * 2.259);
  }
  .monal-latest-card__link {
    position: absolute; top: calc(var(--monal-u) * 1.867); right: calc(var(--monal-u) * 3.039);
    width: calc(var(--monal-u) * 4.165); height: calc(var(--monal-u) * 4.165);
  }
  /* 1:3209 — black at full strength with 2.0332 tracking, not the muted grey. */
  /* max(), as the mobile rules do: 1.694u reads 11.3 at 1280 because the
     desktop layer scales with 100vw/192. 1920 is unaffected. */
  .monal-latest-card__date {
    font-size: max(calc(var(--monal-u) * 1.694), 12px); line-height: calc(var(--monal-u) * 2.259);
    letter-spacing: .12em; color: var(--monal-c-ink);
  }
  .monal-latest-card__title {
    margin-top: calc(var(--monal-u) * 1.524);
    font-size: calc(var(--monal-u) * 3.765); line-height: calc(var(--monal-u) * 3.954);
  }
  .monal-latest-card__text {
    margin-top: calc(var(--monal-u) * 2.428);
    width: calc(var(--monal-u) * 27.472);
    font-size: max(calc(var(--monal-u) * 1.694), 12px); line-height: calc(var(--monal-u) * 2.542);
  }
  /* 1:3332 — 159.239 x 57.223, centred, 50 below the grid. */
  .monal-latest__more {
    margin-top: calc(var(--monal-u) * 5);
    width: calc(var(--monal-u) * 15.92); min-height: calc(var(--monal-u) * 5.72); padding: 0;
  }
}