/* =========================================================
   Mission newspaper carousel
   - Spans the viewport.
   - Keeps every cover at a controlled responsive width.
   - Scrolls horizontally one cover at a time.
========================================================= */

/* Own the viewport breakout here, after the generic card stylesheet, so its
   centered-band defaults cannot pull the carousel back onto the text rail. */
#mission-bg #m-news {
  position: relative;
  left: 50%;
  width: 100vw;
  max-width: none;
  margin-left: -50vw;
  margin-right: 0;
}

/* Keep the inner grid pinned to that single full-width parent. */
#mission-bg #m-news-grid {
  /* A responsive base size with subtle variation preserves each cover's
     aspect ratio while creating an irregular top edge above the baseline. */
  --mission-news-cover-width: clamp(220px, 20vh, 360px);
  position: relative;
  width: 100%;
  max-width: none;
  left: auto;
  margin: 0;
}

@supports (height: 100dvh) {
  #mission-bg #m-news-grid {
    --mission-news-cover-width: clamp(220px, 20dvh, 360px);
  }
}
@media (max-width: 767.98px) {
  #mission-bg #m-news-grid {
    --mission-news-cover-width: 12vh;
  }
}

@media (max-width: 767.98px) {
  @supports (height: 100dvh) {
    #mission-bg #m-news-grid {
      --mission-news-cover-width: 12dvh;
    }
  }
}
#mission-bg #m-news-grid .newspapers-news-carousel__track {
  display: flex;
  flex-wrap: nowrap;
  gap: .25rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  align-items: flex-end;
}
#mission-bg #m-news-grid .newspapers-news-carousel__track::-webkit-scrollbar {
  display: none;
}
#mission-bg #m-news-grid .newspapers-news-carousel__slide {
  --mission-news-size: 1;
  flex: 0 0 calc(var(--mission-news-cover-width) * var(--mission-news-size));
  width: calc(var(--mission-news-cover-width) * var(--mission-news-size));
  max-width: none;
  scroll-snap-align: start;
  transform: none;
}
/* Deliberately irregular sizes; preserve image proportions and a shared baseline. */
#mission-bg #m-news-grid .newspapers-news-carousel__slide:nth-child(11n + 1) { --mission-news-size: 0.96; }
#mission-bg #m-news-grid .newspapers-news-carousel__slide:nth-child(11n + 2) { --mission-news-size: 1.04; }
#mission-bg #m-news-grid .newspapers-news-carousel__slide:nth-child(11n + 3) { --mission-news-size: 0.90; }
#mission-bg #m-news-grid .newspapers-news-carousel__slide:nth-child(11n + 4) { --mission-news-size: 1.01; }
#mission-bg #m-news-grid .newspapers-news-carousel__slide:nth-child(11n + 5) { --mission-news-size: 0.94; }
#mission-bg #m-news-grid .newspapers-news-carousel__slide:nth-child(11n + 6) { --mission-news-size: 1.07; }
#mission-bg #m-news-grid .newspapers-news-carousel__slide:nth-child(11n + 7) { --mission-news-size: 0.98; }
#mission-bg #m-news-grid .newspapers-news-carousel__slide:nth-child(11n + 8) { --mission-news-size: 0.92; }
#mission-bg #m-news-grid .newspapers-news-carousel__slide:nth-child(11n + 9) { --mission-news-size: 1.03; }
#mission-bg #m-news-grid .newspapers-news-carousel__slide:nth-child(11n + 10) { --mission-news-size: 0.95; }
#mission-bg #m-news-grid .newspapers-news-carousel__slide:nth-child(11n + 11) { --mission-news-size: 1.00; }
#mission-bg #m-news-grid .newspapers-news-carousel__slide > img {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  max-height: none;
}
#mission-bg #m-news-grid .newspapers-news-carousel__slide:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -2px;
}
.newspapers-news-carousel__controls {
  position: absolute;
  z-index: 12;
  inset: 0;
  pointer-events: none;
}
.newspapers-news-carousel__controls button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: auto;
  background: transparent;
  color: #fff;
  border: 1px solid currentColor;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  font-size: 1.5rem;
  line-height: 1;
}
.newspapers-news-carousel__controls [data-news-direction="-1"] { left: .75rem; }
.newspapers-news-carousel__controls [data-news-direction="1"] { right: .75rem; }
.newspapers-news-carousel__controls button:disabled { opacity: .3; }

/* Newspaper popups are image-only overlays. Keep the image and close control
   interactive while transparent dialog space behaves like the backdrop. */
body .popup.popup--m-news.popup--m-news-image-only .popup-dialog {
  pointer-events: none !important;
}

body .popup.popup--m-news.popup--m-news-image-only .popup-body {
  overflow-y: hidden !important;
}

body .popup.popup--m-news.popup--m-news-image-only .popup-media {
  border-bottom: 0 !important;
}

body .popup.popup--m-news.popup--m-news-image-only .chart-news-popup-img {
  pointer-events: auto !important;
}

body .popup.popup--m-news.popup--m-news-image-only [data-popup-close] {
  position: absolute !important;
  top: .75rem !important;
  right: .75rem !important;
  z-index: 3 !important;
  pointer-events: auto !important;
}