/* ==========================================================================
   Monal Group — News & Events widget
   Converted from the static build (assets/css/style.css). Values are the
   original Figma-derived numbers: 1 unit of --monal-u == 1 Figma px / 10.
   ========================================================================== */

/* ==========================================================================
   NEWS  (Figma 1:1071 panel 1890×1169 r50)
   ========================================================================== */
.monal-news { padding-top: calc(var(--monal-u) * 8); }
.monal-news__panel {
  position: relative; overflow: hidden; isolation: isolate;
  margin: 0 var(--monal-inset); padding: calc(var(--monal-u) * 4.4) 0 calc(var(--monal-u) * 3.6); border-radius: var(--monal-radius-panel);
  background: var(--monal-news-panel, #244e44); color: #fff;
}
.monal-news__bg { position: absolute; inset: 0; z-index: -2; background: var(--monal-news-bg, url(../../assets/monal/img/news-bg.jpg)) center / cover no-repeat; filter: grayscale(1) contrast(1.15); opacity: .55; mix-blend-mode: luminosity; }
.monal-news__panel::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(32, 70, 61, .78); }
.monal-news__panel::after { /* film grain (Figma noise effect) */
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .18; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.monal-news__pattern { position: absolute; z-index: -1; width: calc(var(--monal-u) * 31.5); opacity: .9; pointer-events: none; display: none; }
.monal-news__pattern--tr { top: 0; right: 0; }
.monal-news__pattern--bl { bottom: 0; left: 0; transform: rotate(180deg); }
.monal-news__inner { padding: 0 calc(var(--monal-u) * .9); }
.monal-news__head { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 calc(var(--monal-u) * .6); }
.monal-news__eyebrow { display: flex; flex-direction: column-reverse; align-items: center; gap: calc(var(--monal-u) * .6); }
.monal-news__eyebrow p { font-size: calc(var(--monal-u) * 1.1); font-weight: 300; text-transform: uppercase; line-height: 1.3; }
.monal-news__title { margin-top: calc(var(--monal-u) * 2.4); }
.monal-news__lead { margin-top: calc(var(--monal-u) * 1.2); font-size: calc(var(--monal-u) * 1.6); line-height: calc(var(--monal-u) * 2.2); color: var(--monal-c-white-70); max-width: calc(var(--monal-u) * 29); }
.monal-news__cta { width: 100%; margin-top: calc(var(--monal-u) * 2.6); }
.monal-news__nav { display: none; }
.monal-filters {
  display: flex; gap: calc(var(--monal-u) * 2.2); margin-top: calc(var(--monal-u) * 2); padding: 0 calc(var(--monal-u) * .6) calc(var(--monal-u) * .8); overflow-x: auto; scrollbar-width: none; justify-content: center;
}
.monal-filters::-webkit-scrollbar { display: none; }
.monal-filters button {
  position: relative; flex: none; font-size: calc(var(--monal-u) * 1.4); line-height: calc(var(--monal-u) * 2.4); font-weight: 300; color: var(--monal-c-white-70);
  transition: color .25s;
}
.monal-filters button::after {
  content: ""; position: absolute; left: 0; bottom: calc(var(--monal-u) * -.5); width: calc(var(--monal-u) * 1.6); height: 2px; border-radius: 2px; background: var(--monal-c-orange);
  transform: scaleX(0); transform-origin: left; transition: transform .35s var(--monal-ease-out);
}
.monal-filters button.monal-is-active { font-weight: 600; color: #fff; }
.monal-filters button.monal-is-active::after, .monal-filters button:hover::after { transform: scaleX(1); }

.monal-news-slider { margin-top: calc(var(--monal-u) * 2.6); }
.monal-news-grid { display: grid; gap: calc(var(--monal-u) * 1.6); }
.monal-story { position: relative; }
.monal-story__link {
  position: relative; display: flex; flex-direction: column; height: 100%;
  border-radius: calc(var(--monal-u) * 4) 0 calc(var(--monal-u) * 4) 0; border: 1px solid rgba(255,255,255,.4); overflow: hidden;
  background: none;
}
.monal-story__body { flex: 1; background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.2)); } /* Figma glass: 0 → 20% over the text area */
.monal-story__media { height: calc(var(--monal-u) * 22); background: var(--monal-c-green-10); color: var(--monal-c-green-70); border-radius: calc(var(--monal-u) * 4) 0 calc(var(--monal-u) * 4) 0; font-size: calc(var(--monal-u) * 1.6); transition: filter .5s; }
.monal-story__body { display: flex; flex-direction: column; padding: calc(var(--monal-u) * 2.8) calc(var(--monal-u) * 1.6) calc(var(--monal-u) * 2.6); }
.monal-story__tag { font-size: calc(var(--monal-u) * 1.3); font-weight: 300; letter-spacing: .12em; text-transform: uppercase; }
.monal-story__title { margin-top: calc(var(--monal-u) * 1.4); font-family: var(--monal-f-display); font-size: calc(var(--monal-u) * 2.6); line-height: calc(var(--monal-u) * 2.8); letter-spacing: -.02em; }
.monal-story__text { margin-top: calc(var(--monal-u) * 1.2); font-size: calc(var(--monal-u) * 1.5); line-height: calc(var(--monal-u) * 2.2); color: var(--monal-c-white-70); }
.monal-story .monal-arrow-circle { position: absolute; top: calc(var(--monal-u) * 22.6); right: calc(var(--monal-u) * 1.2); width: calc(var(--monal-u) * 3.6); height: calc(var(--monal-u) * 3.6); border-color: rgba(255,255,255,.9); background: transparent; color: #fff; }
.monal-story__link:hover .monal-arrow-circle { background: var(--monal-c-orange); border-color: var(--monal-c-orange); }
.monal-story__link:hover .monal-story__media { filter: brightness(1.04); }
.monal-story.monal-is-extra { display: none; }
.monal-news-grid.monal-is-expanded .monal-story.monal-is-extra { display: block; }

.monal-dots { display: none; }
/* The desktop rules below set display on these, which would beat the hidden
   attribute's UA style, so the carousel furniture needs an explicit out. */
.monal-dots[hidden], .monal-news__nav[hidden] { display: none !important; }

@media (min-width: 768px) {
  .monal-news__inner { padding: 0 calc(var(--monal-u) * 3); }
  .monal-news__lead { max-width: calc(var(--monal-u) * 44); }
  .monal-news__cta { width: auto; }
  .monal-news-grid { grid-template-columns: 1fr 1fr; }
  .monal-story--featured { grid-column: 1 / -1; }
}
@media (min-width: 1200px) {
  .monal-news { padding-top: calc(var(--monal-u) * 19.8); }
  .monal-news__panel { height: calc(var(--monal-u) * 116.9); padding: calc(var(--monal-u) * 8.8) 0 0; }
  .monal-news__pattern { width: calc(var(--monal-u) * 40.2); display: block; }
  .monal-news__pattern--tr { transform: rotate(90deg) translate(calc(var(--monal-u) * 4.4), calc(var(--monal-u) * -4.4)); transform-origin: center; top: 0; right: 0; }
  .monal-news__pattern--bl { transform: rotate(-90deg) translate(calc(var(--monal-u) * -4.4), calc(var(--monal-u) * -4.4)); bottom: 0; left: 0; }
  .monal-news__inner { padding: 0 calc(var(--monal-u) * 7.7); }
  .monal-news__head { flex-direction: row; align-items: flex-start; text-align: left; padding: 0; }
  .monal-news__eyebrow { flex-direction: column; align-items: flex-start; gap: calc(var(--monal-u) * 3); width: calc(var(--monal-u) * 20.8); flex: none; }
  .monal-news__eyebrow p { font-size: max(calc(var(--monal-u) * 2.2), 13px); line-height: calc(var(--monal-u) * 2.8); width: calc(var(--monal-u) * 14.2); }
  .monal-news__title { margin: calc(var(--monal-u) * 2.1) calc(var(--monal-u) * 3.5) 0 0; white-space: nowrap; }
  .monal-news__lead { margin: calc(var(--monal-u) * 3) 0 0; width: calc(var(--monal-u) * 42.8); max-width: none; font-size: max(calc(var(--monal-u) * 2.2), 14px); line-height: calc(var(--monal-u) * 3); }
  .monal-news__cta { margin: calc(var(--monal-u) * 2.3) 0 0 calc(var(--monal-u) * 4.4); width: calc(var(--monal-u) * 32.1); height: calc(var(--monal-u) * 7.4); padding: 0; gap: calc(var(--monal-u) * 2.2); font-size: max(calc(var(--monal-u) * 1.8), 12px); }
  .monal-news__nav { display: flex; margin: calc(var(--monal-u) * 3.4) calc(var(--monal-u) * 9.6) 0 auto; }
  .monal-round-btn--ghost, .monal-news__nav .monal-round-btn { width: calc(var(--monal-u) * 5.3); height: calc(var(--monal-u) * 5.3); }
  .monal-filters { justify-content: flex-start; gap: calc(var(--monal-u) * 2.8); margin: calc(var(--monal-u) * 3.4) 0 0 calc(var(--monal-u) * 20.8); padding: 0; overflow: visible; }
  .monal-filters button { font-size: max(calc(var(--monal-u) * 1.6), 12px); }
  .monal-filters button::after { bottom: calc(var(--monal-u) * -.6); }
  .monal-news-slider { margin-top: calc(var(--monal-u) * 6.1); position: relative; }
  .monal-news-grid { grid-template-columns: calc(var(--monal-u) * 96.8) calc(var(--monal-u) * 64.8); grid-template-rows: calc(var(--monal-u) * 35.7) calc(var(--monal-u) * 35.7); gap: calc(var(--monal-u) * 2.4); }
  .monal-story--featured { grid-column: 1; grid-row: 1 / 3; }
  .monal-story__link { border-radius: calc(var(--monal-u) * 5) 0 calc(var(--monal-u) * 5) 0; }
  .monal-story--featured .monal-story__media { height: calc(var(--monal-u) * 50); border-radius: calc(var(--monal-u) * 5) 0 calc(var(--monal-u) * 5) 0; font-size: calc(var(--monal-u) * 1.8); line-height: calc(var(--monal-u) * 2.8); }
  .monal-story--featured .monal-story__body { padding: calc(var(--monal-u) * 3.6) calc(var(--monal-u) * 2) 0 calc(var(--monal-u) * 4.4); }
  .monal-story__tag { font-size: max(calc(var(--monal-u) * 1.8), 12px); line-height: calc(var(--monal-u) * 2.4); }
  .monal-story__title { font-size: calc(var(--monal-u) * 4); line-height: calc(var(--monal-u) * 4.2); letter-spacing: -.04em; }
  .monal-story--featured .monal-story__title { margin-top: calc(var(--monal-u) * 1.7); }
  .monal-story__text { font-size: max(calc(var(--monal-u) * 1.8), 13px); line-height: calc(var(--monal-u) * 2.7); }
  .monal-story--featured .monal-story__text { margin-top: calc(var(--monal-u) * 2); }
  .monal-story .monal-arrow-circle { top: calc(var(--monal-u) * 2); right: calc(var(--monal-u) * 2); width: calc(var(--monal-u) * 5.3); height: calc(var(--monal-u) * 5.3); border-color: #d9d9d9; background: transparent; color: var(--monal-c-black); }
  .monal-story--side .monal-story__link { flex-direction: row; }
  .monal-story--side .monal-story__media { flex: 0 0 calc(var(--monal-u) * 31.2); height: auto; border-radius: calc(var(--monal-u) * 5) 0 calc(var(--monal-u) * 5) 0; font-size: calc(var(--monal-u) * 1.8); line-height: calc(var(--monal-u) * 2.8); }
  .monal-story--side .monal-story__body { padding: calc(var(--monal-u) * 3.3) calc(var(--monal-u) * 3.6) 0 calc(var(--monal-u) * 3.1); }
  .monal-story--side .monal-story__title { margin-top: calc(var(--monal-u) * 1.6); width: calc(var(--monal-u) * 25); }
  .monal-story--side .monal-story__text { margin-top: calc(var(--monal-u) * 1.7); width: calc(var(--monal-u) * 24.9); }
  .monal-story--side .monal-arrow-circle { right: auto; left: calc(var(--monal-u) * 23.9); }
  .monal-news-grid .monal-story.monal-is-extra { display: none; }
  .monal-news .monal-show-more { display: none; }
  .monal-dots { display: flex; justify-content: center; gap: calc(var(--monal-u) * 1); margin-top: calc(var(--monal-u) * 5.9); }
  .monal-dots button { width: calc(var(--monal-u) * 1.2); height: calc(var(--monal-u) * 1.2); border-radius: 50%; background: rgba(255,255,255,.45); transition: background-color .3s, transform .3s; }
  .monal-dots button[aria-current="true"] { background: #fff; }
  .monal-dots button:hover { transform: scale(1.25); }
}

@media (max-width: 1199px) {
  .monal-story--featured .monal-story__text { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
}
@media (max-width: 767px) {
  /* News (Figma mobile): panel 15→363, content 24→351 */
  .monal-news__panel { margin: 0 calc(var(--monal-u) * 1.2) 0 calc(var(--monal-u) * 1.5); padding-bottom: calc(var(--monal-u) * 4.6); }
  .monal-news .monal-show-more { margin-top: calc(var(--monal-u) * 4.3); }
  .monal-news__inner { padding: 0 calc(var(--monal-u) * 1.2) 0 calc(var(--monal-u) * .9); }
  .monal-news__lead { max-width: calc(var(--monal-u) * 23); }
  .monal-filters { gap: calc(var(--monal-u) * 1.6); }
  .monal-story__body { padding: calc(var(--monal-u) * 2.1) calc(var(--monal-u) * 3.4) calc(var(--monal-u) * 2.2) calc(var(--monal-u) * 1.7); }
  .monal-story__media { font-size: calc(var(--monal-u) * 1.8); line-height: calc(var(--monal-u) * 2.8); }
  .monal-story__title { max-width: calc(var(--monal-u) * 24); }
  .monal-story__text { font-size: calc(var(--monal-u) * 1.6); }
}

/* --------------------------------------------------------------------------
   Widget additions
   - real story images fill the media box like the placeholder block does
   - stories filtered out stay hidden even when the mobile grid is expanded
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   Widget addition — a real image fills the media box exactly like the design's
   placeholder block. The image is taken out of flow: inside the grid that
   centres the placeholder label, height:100% would resolve against an
   auto-sized row and the picture would keep its intrinsic ratio and overflow.
   -------------------------------------------------------------------------- */
.monal-story__media { display: grid; position: relative; overflow: hidden; }
.monal-story__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.monal-news-grid .monal-story[hidden] { display: none !important; }

/* ==========================================================================
   LIGHT VARIANT — Newsroom/Awards page (Figma 1:3051)

   Same carousel, no green panel: the section sits on the page background with
   dark text, the header is a single left column, and pagination is dots only.
   Scoped to .monal-news--light so the Home page treatment is untouched.
   ========================================================================== */
/* The green treatment is painted by two pseudo-elements on the panel — a
   rgba(32,70,61,.78) tint and the film grain — not by its background, so both
   have to be removed as well. */
.monal-news--light .monal-news__panel { background: none; box-shadow: none; }
.monal-news--light .monal-news__panel::before,
.monal-news--light .monal-news__panel::after { content: none; }
.monal-news--light .monal-news__title { color: var(--monal-c-ink); }
.monal-news--light .monal-news__lead { color: var(--monal-c-muted); }
.monal-news--light .monal-filters button { color: var(--monal-c-muted); }
.monal-news--light .monal-filters button.monal-is-active { color: var(--monal-c-ink); }
.monal-news--light .monal-story__title { color: var(--monal-c-ink); }
.monal-news--light .monal-story__tag,
.monal-news--light .monal-story__text { color: var(--monal-c-muted); }
/* 8-12px dots are below the 24px tap minimum, so the button is padded out to
   a 28 x 24 hit area (cancelled by an equal negative margin: the dots sit
   exactly where they did) and the visible dot is drawn by ::before in the
   content box. It grows upward and sideways only, because the panel clips
   below the dots. The button itself paints nothing. */
.monal-news--light .monal-dots button {
  --monal-dot-pad: calc(24px - var(--monal-u) * 1.2);
  box-sizing: content-box;
  padding: var(--monal-dot-pad) calc(var(--monal-dot-pad) / 2) 0;
  margin: calc(var(--monal-dot-pad) * -1) calc(var(--monal-dot-pad) / -2) 0;
  background: transparent; border-radius: 0;
}
/* Figma 1:3051 draws these dots at y2246.44, 49.19 under the card grid
   (which ends at 2197.25); the shared 5.9u was 10 low. */
@media (min-width: 1200px) {
  .monal-news--light .monal-dots { margin-top: calc(var(--monal-u) * 4.919); }
}
.monal-news--light .monal-dots button::before {
  content: ""; display: block; width: 100%; height: 100%;
  border-radius: 50%; background-color: rgba(30, 25, 22, .2);
}
/* The script marks the current dot with aria-current, not .monal-is-active,
   and the shared rule paints that dot white for Home's green panel - so on
   this white panel the current page was invisible. */
.monal-news--light .monal-dots button.monal-is-active::before,
.monal-news--light .monal-dots button[aria-current="true"]::before { background-color: var(--monal-c-orange); }
.monal-news--light .monal-show-more { min-height: 24px; }
/* "All" is only 18 wide at its own text width - under the 24px tap minimum. */
.monal-news--light .monal-filters button { min-width: max(calc(var(--monal-u) * 2.4), 24px); }

/* Below 1200 the light variant inherited the Home panel's geometry: 1.5u /
   1.2u side margins and .9u / 1.2u inner padding (3u from 768), plus 4.4u /
   4.6u of top and bottom panel padding. With no green panel to fill, all of
   that was invisible extra space, putting the content at 24 on phones and 41
   on tablets and adding ~45 to the gaps either side. The light panel now
   sits on the page gutter, like every other section, and the page gap is
   the only space above it. */
@media (max-width: 1199px) {
  .monal-news--light { padding-top: var(--monal-page-gap); }
  .monal-news--light .monal-news__panel { margin: 0 var(--monal-gutter); padding: 0; }
  .monal-news--light .monal-news__inner,
  .monal-news--light .monal-news__head,
  .monal-news--light .monal-filters { padding-inline: 0; }
  /* The title's 2.4u top margin spaces it from Home's eyebrow; the light
     variant has none (its desktop rule already zeroes it). */
  .monal-news--light .monal-news__title { margin-top: 0; }
}

/* Phones: the light grid becomes a swipe carousel of every matching story
   (monal-news.js paints them all and hides "Show more", dots and arrows).
   The cards keep their mobile design; only the container changes.
   Each card is 90% of the column, so the next one peeks in at the right
   edge. The rail starts on the page gutter and runs out
   to the viewport edge (negative right margin, padded back); the section's
   overflow-x: clip keeps that bleed off the page width. Grid stretch keeps
   every card the height of the tallest. */
@media (max-width: 767px) {
  .monal-news--light .monal-news__panel { overflow: visible; }
  .monal-news--light .monal-news-grid {
    --monal-rail-gap: calc(var(--monal-u) * 1.6);
    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-news--light .monal-news-grid::-webkit-scrollbar { display: none; }
  .monal-news--light .monal-story { scroll-snap-align: start; }
}
/* The light variant's empty filter state, in the lead style. */
.monal-news__empty { margin: calc(var(--monal-u) * 2.4) 0 0; text-align: center; }
.monal-news__empty[hidden] { display: none; }

@media (min-width: 1200px) {
  /* 1:3140 heading at y1322.3, 1:3141 lead at y1405.3, filters at y1359.09. */
  .monal-news--light .monal-news__panel { padding: 0; border-radius: 0; }
  /* Figma runs this content on the 1544 container (x188 -> x1732), not the
     full panel width the green treatment uses. */
  /* The filters are a sibling of the head, not a child, so the two-column
     header row is built on the inner wrapper; everything below spans both. */
  .monal-news--light .monal-news__inner {
    width: calc(var(--monal-u) * 154.4); max-width: 100%; margin-inline: auto; padding: 0;
    display: grid; grid-template-columns: 1fr auto; align-items: start;
  }
  .monal-news--light .monal-news__lead { max-width: none; width: auto; }
  .monal-news--light { padding-top: calc(var(--monal-u) * 15); }
  .monal-news--light .monal-news__head { grid-column: 1; grid-row: 1; display: block; }
  .monal-news--light .monal-filters { grid-column: 2; grid-row: 1; justify-self: end; }
  .monal-news--light .monal-news-slider,
  .monal-news--light .monal-dots,
  .monal-news--light .monal-show-more { grid-column: 1 / -1; }
  .monal-news--light .monal-news__title {
    grid-column: 1; margin: 0;
    font-size: calc(var(--monal-u) * 6.6); line-height: calc(var(--monal-u) * 7.2);
    letter-spacing: calc(var(--monal-u) * -.264);
  }
  .monal-news--light .monal-news__lead {
    grid-column: 1; margin: calc(var(--monal-u) * 1.1) 0 0;
    font-size: calc(var(--monal-u) * 2.2); line-height: calc(var(--monal-u) * 3.6);
  }
  /* 1:3143-3147 — 23.874/35.811, "All" active with a 25.506 x 3.649 underline. */
  .monal-news--light .monal-filters {
    grid-column: 2; grid-row: 1 / span 2; align-self: start;
    margin: calc(var(--monal-u) * 3.68) 0 0;
    gap: calc(var(--monal-u) * 4.2);
  }
  .monal-news--light .monal-filters button {
    font-size: calc(var(--monal-u) * 2.39); line-height: calc(var(--monal-u) * 3.58);
    /* "All" measures 18-20 wide between 1024 and 1280, under the 24 minimum
       hit area. The extra width goes to the right, so the label and its
       underline do not move, and at 1920 it is already wider than 24. */
    min-width: 24px; min-height: 24px;
  }
  /* 1:3151 featured 911.18 x 694.533 at y1502.72; 1:3167/3168 sides 610.228 x
     335.855, the second 358.68 lower. Cards carry a 0.941 green-50 outline and
     a TL/BR 47.065 radius; the featured one fades to green 20% from 72.7%. */
  /* The slider already carries the 61 that puts the grid at y1502.72, so the
     grid itself adds none. */
  /* The green layout pins both rows to 35.7u, which clipped longer copy. Two
     1fr tracks instead: in an auto-height grid they take the size the tallest
     row needs and share it, so the two stacked side cards stay level with each
     other whatever their copy length, and nothing is ever cut off. The design
     height comes from the cards own min-height, not from the tracks. */
  .monal-news--light .monal-news-grid {
    margin-top: 0;
    grid-template-columns: calc(var(--monal-u) * 91.118) calc(var(--monal-u) * 61.023);
    grid-template-rows: repeat(2, 1fr);
    gap: calc(var(--monal-u) * 2.26);
  }
  /* The green panel is a fixed 1169 tall; the light one is only as tall as its
     content. */
  .monal-news--light .monal-news__panel { height: auto; min-height: 0; }
  /* 1:3151 featured 911.18 x 694.533 with a 470.651 image; 1:3167 sides
     610.228 x 335.855 with a 293.819 wide image. */
  /* min-height, not height: these are the Figma sizes for the designed copy,
     but a longer story must be able to grow rather than clip. Grid stretch
     keeps the two side cards level with each other either way. */
  .monal-news--light .monal-story--featured { min-height: calc(var(--monal-u) * 69.45); }
  .monal-news--light .monal-story--featured .monal-story__media { height: calc(var(--monal-u) * 47.07); flex: none; }
  .monal-news--light .monal-story--side { min-height: calc(var(--monal-u) * 33.59); }
  .monal-news--light .monal-story--side .monal-story__media { width: calc(var(--monal-u) * 29.38); height: auto; }
  /* The green layout outlines the link in white 40%; here the outline belongs
     to the card, so clear the inherited one -- two 1px borders were adding 4
     to every card height on top of the cards own outline. */
  .monal-news--light .monal-story__link { height: 100%; border: 0; background: none; }
  .monal-news--light .monal-story__body { background: none; }
  /* The 0.941 stroke is an inset shadow, not a border: a Figma stroke is drawn
     over the box rather than added to it, and 1:3151 695 / 1:3167 336 are the
     content heights. A border would push both cards 2 past the design. */
  .monal-news--light .monal-story {
    box-shadow: inset 0 0 0 0.941px rgba(44, 90, 79, .5);
    border-radius: calc(var(--monal-u) * 4.71) 0 calc(var(--monal-u) * 4.71) 0;
    background: none;
  }
  /* 1:3167 / 1:3168 -- the sides wash green 20% in from the right edge. */
  .monal-news--light .monal-story--side {
    background: linear-gradient(-90deg, rgba(44, 90, 79, .2) 0%, rgba(44, 90, 79, 0) 53.455%);
  }
  .monal-news--light .monal-story--featured {
    background: linear-gradient(to bottom, rgba(44, 90, 79, 0) 72.705%, rgba(44, 90, 79, .2));
    box-shadow: inset 0 0 0 0.941px var(--monal-c-green);
  }
  .monal-news--light .monal-dots { margin-top: calc(var(--monal-u) * 4.92); }
}

/* --------------------------------------------------------------------------
   Light-variant card internals.

   The Home card is tuned to its own frame, so its padding and type made these
   cards about 42 (featured) and 21 (side) taller than Figma 1:3051 allows.
   These values come from that frame, so the cards reach their design height
   naturally and min-height never has to force it:

     featured 1:3151  911.18 x 694.533, image 470.651
       FEATURED 1:3156  16.943/22.591  at y2007.49  (34.12 below the image)
       title    1:3157  37.652/39.535  at y2045.32  (15.24 after the label)
       copy     1:3155  16.943/25.415  at y2103.68  (18.83 after the title)
     side     1:3167  610.228 x 335.855, image 293.819 wide
       EVENTS   1:3177  at x1444.47 y1533.98 -> 28.88 in from the image, 31.26 down
   -------------------------------------------------------------------------- */
@media (min-width: 1200px) {
  /* max(), as the mobile rules do: the desktop layer scales with 100vw/192,
     so a bare 1.69u reads 11.3 at 1280. The floor only engages below about
     1360 and leaves the 1920 design untouched. */
  .monal-news--light .monal-story__tag {
    font-size: max(calc(var(--monal-u) * 1.69), 12px); line-height: calc(var(--monal-u) * 2.26);
  }
  .monal-news--light .monal-story__title {
    font-size: calc(var(--monal-u) * 3.77); line-height: calc(var(--monal-u) * 3.95);
  }
  /* 1:3157 sets the featured title green; the side titles stay black. */
  .monal-news--light .monal-story--featured .monal-story__title { color: var(--monal-c-green); }
  .monal-news--light .monal-story__text {
    font-size: max(calc(var(--monal-u) * 1.69), 12px); line-height: calc(var(--monal-u) * 2.54);
  }

  .monal-news--light .monal-story--featured .monal-story__body {
    padding: calc(var(--monal-u) * 3.41) calc(var(--monal-u) * 2) calc(var(--monal-u) * 4.27) calc(var(--monal-u) * 4.09);
  }
  .monal-news--light .monal-story--featured .monal-story__title { margin-top: calc(var(--monal-u) * 1.52); }
  .monal-news--light .monal-story--featured .monal-story__text {
    margin-top: calc(var(--monal-u) * 1.88); width: calc(var(--monal-u) * 82.83);
  }

  .monal-news--light .monal-story--side .monal-story__media { flex: 0 0 calc(var(--monal-u) * 29.38); }
  .monal-news--light .monal-story--side .monal-story__body {
    padding: calc(var(--monal-u) * 3.13) calc(var(--monal-u) * 2.5) calc(var(--monal-u) * 3.13) calc(var(--monal-u) * 2.89);
  }
  .monal-news--light .monal-story--side .monal-story__title {
    margin-top: calc(var(--monal-u) * 1.52); width: calc(var(--monal-u) * 25.1);
  }
  /* 1:3176 boxes this copy at 234.032, where it wraps to four lines (101.66).
     That is what the 335.855 card height is built from, so keep the box. */
  .monal-news--light .monal-story--side .monal-story__text {
    margin-top: calc(var(--monal-u) * 1.53); width: calc(var(--monal-u) * 23.4);
  }

  /* 1:3163 / 1:3185 -- a 49.859 circle inset 18.83 from the top right of the
     image. The green layout sizes it 53 and, for a side card, offsets it 23.9
     from the left to clear that layout 31.2 image; this one is 29.38 wide, so
     both numbers are restated here rather than inherited. */
  .monal-news--light .monal-story .monal-arrow-circle {
    top: calc(var(--monal-u) * 1.883); right: calc(var(--monal-u) * 1.883);
    width: calc(var(--monal-u) * 4.986); height: calc(var(--monal-u) * 4.986);
  }
  .monal-news--light .monal-story--side .monal-arrow-circle {
    right: auto; left: calc(var(--monal-u) * 22.513);
  }
}

/* ==========================================================================
   Both variants (2026-10-15): phone carousel, empty state, hit areas, arrows
   ========================================================================== */
/* Phones: every matching story in a swipe carousel, each card 90% of the column.
   Home's rail runs to the green
   panel's right edge (its 1.2u inner padding, cancelled and padded back);
   the light variant keeps its own bleed to the page edge (above). Grid
   stretch gives every card the tallest card's height. */
@media (max-width: 767px) {
  .monal-news-grid {
    --monal-rail-gap: calc(var(--monal-u) * 1.6);
    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-u) * -1.2); padding-right: calc(var(--monal-u) * 1.2);
    overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory; scrollbar-width: none;
  }
  .monal-news-grid::-webkit-scrollbar { display: none; }
  .monal-story { scroll-snap-align: start; }
}

/* An empty filter: the grid steps aside and one line says so, in the lead's
   type (white 70% on the green panel, ink 70% on the light page). */
.monal-news-grid[hidden] { display: none !important; }
.monal-news__empty {
  font-size: max(calc(var(--monal-u) * 1.6), 15px); line-height: 1.5; color: var(--monal-c-white-70);
}
.monal-news--light .monal-news__empty { color: var(--monal-c-muted); }
@media (min-width: 1200px) {
  .monal-news__empty { margin-top: calc(var(--monal-u) * 6.1); font-size: max(calc(var(--monal-u) * 2.2), 14px); }
}

/* Filter tabs: at least a 24 x 24 hit area at every width. */
.monal-filters button { min-width: 24px; min-height: 24px; }

/* Story arrows: a solid white circle with the ink glyph, so the arrow reads on
   any photo; the existing #D9D9D9 ring plus a soft shadow keep the circle
   visible on a white photo. Hover keeps its orange fill, with the glyph in
   ink (white on orange is under 3:1). Placed last so it wins over the
   per-breakpoint rules above. */
.monal-story .monal-arrow-circle {
  background: #fff; border-color: #d9d9d9; color: var(--monal-c-ink);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .28);
}
.monal-story__link:hover .monal-arrow-circle,
.monal-story__link:focus-visible .monal-arrow-circle {
  background: var(--monal-c-orange); border-color: var(--monal-c-orange); color: var(--monal-c-ink);
}