/* ============================================================
   Full-bleed sliders — cut by the screen, aligned to the page
   ------------------------------------------------------------
   slider-bleed.js does the work; this covers the two things CSS
   has to own: the empty slide that holds the closing margin, and
   a first paint that is roughly right before the script runs.

   Which sliders are treated is listed in functions.php.
   ============================================================ */

/* Hold the news slider's height until Swiper takes over.

   Before Swiper runs, the cards are laid out by the page's own rules and come
   out taller than the row it builds; when it takes over the block shrinks and
   everything below jumps up. Deciding the height before the cards are
   measured rather than after removes that jump — the home page went from 0.34
   to 0.001.

   The ratio is the row Swiper settles on, and it is not one number: the cards
   keep a fixed count per view while the screen grows, so the row gets
   proportionally shorter on a wide monitor. Two values cover the range.

   Only the news slider is held this way. The same was tried on the project
   galleries and measured: it changes nothing there, because what moves on
   those pages is not the height this can set. Blocking Swiper outright takes
   them from 0.57 to 0, so the move is its doing — just not the part a
   reserved height prevents. Left out rather than left in doing nothing.
   See docs/PERFORMANCE_CHANGES.md. */

@media (min-width: 1024px) {
  .my-news-swiper:not(.swiper-initialized) {
    aspect-ratio: var(--msk-news-ratio, 2.25);
    min-height: 0;
    overflow: hidden;
  }
}

@media (min-width: 1600px) {
  .my-news-swiper:not(.swiper-initialized) { --msk-news-ratio: 3; }
}

@media (min-width: 1024px) {


  /* The empty slide parked at the end of the run to hold the closing margin.
     Card widths are set per slider, often with !important, so this one has to
     out-shout them — its width is set inline by the script. */
  .swiper-slide.msk-slider-tail {
    width: var(--msk-tail-width, 0px) !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    background: none !important;
    border: 0 !important;
    padding: 0 !important;
    pointer-events: none;
  }

}