/* ==========================================================================
   Mouldshop News slider — the last five posts, image-led, ONE per view, FLAT.
   M4 / TASK-0065 built it. TASK-0067 made it flat and one-up (DEC-0034 ruling A).

   ── WHAT TASK-0067 CHANGED, AND IT IS MOSTLY REMOVAL ─────────────────────────────────
   TASK-0065 gave this component a CARD: radius, a hover shadow declared at zero alpha,
   a translateY lift, a padded text block under the image. **All of that is gone.**
   Item 2 is explicit — the slide fills its block edge to edge, with no padding, margin,
   border, radius, shadow or hover lift. It replaces TASK-0065 item 8's borrowed card
   values for this component, so the shared `--ms-card-*` properties are no longer read
   here at all.

   That is a deliberate reversal rather than a tweak, and it is worth saying why it was
   wrong the first time: TASK-0065 reasoned from "one card everywhere is an invariant"
   and reached for the product card's values. The invariant is about the PRODUCT card and
   the surfaces that show products. A news slide on live is a full-bleed image panel with
   dots on it and nothing else — it was never a card, and dressing it as one was the
   error.

   ── ONE PER VIEW, ALWAYS ─────────────────────────────────────────────────────────────
   `slider-item-show1` on the element. TASK-0065 shipped show2 because live shows two
   panels at 1440; measured properly, those are two SEPARATE single-item sliders sitting
   side by side, not one two-up slider. One per view is what actually matches, and it is
   what the component does in any block width — item 1.

   ── DOTS SIT OVER THE IMAGE ──────────────────────────────────────────────────────────
   Item 3, and live does the same: the indicators are absolutely positioned over the
   bottom of the panel rather than below it. Swiffy's own `.slider-indicators` is static
   by default and would otherwise push the slide up and add height to the block.

   ── IMAGE RATIO ──────────────────────────────────────────────────────────────────────
   1:1, cropped by the platform's own image handler (`GetImageSettings`) rather than by
   CSS — item 6, and the same thing vendor's post templates do. A CSS-only crop of a
   wrong-ratio file still downloads the wrong-ratio file.

   4/3 is GONE (DEC-0034 ruling A). `Panoramic` — the second ruled format — is MEASURED
   and waiting on a field that is blocked: the home banner is natively 1488 x 415 on all
   three hero slides, rendered 1288 x 359, ratio **3.586**. See Q-0099.

   ── COLOUR ───────────────────────────────────────────────────────────────────────────
   No hex in this file. What little colour remains resolves from the row's scheme.
   ========================================================================== */

.ms-news {
  width: 100%;
}

/* FLAT: the slider is the block. No gap between slides is needed at one-per-view, and a
   gap would show as a sliver of background mid-swipe. */
.ms-news-slider {
  position: relative;
}

.ms-news-slider .slider-container {
  gap: 0;
  /* NO NEIGHBOUR SLIVER (operator, 2026-09-24: "we can see a vertical line like a start of next
     slide"). Now that the News row stays two columns down to 576 (`7b4f66b`), the column - and so
     each slide - is a fractional width; a scroll position rounded to a whole pixel leaves up to
     one device pixel of the next slide's image at the right edge. Clipping the scrollport's
     last pixel hides it; the loss on the current image is 1px. */
  clip-path: inset(0 1px 0 0);
}

.ms-news-slide {
  display: flex;
}

/* THE SLIDE BOX IS THE BLOCK BOX — item 2. Every one of these is a removal of something
   TASK-0065 added, and they are written out rather than deleted so that the next person
   can see the intent was "flat", not "nobody got round to styling it". */
.ms-news-card {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transform: none;
  text-decoration: none;
  color: var(--dw-color-foreground, currentColor);
}

/* No hover lift and no hover shadow. Stated explicitly so a later `:hover` inherited from
   a shared card file cannot quietly reintroduce them. */
.ms-news-card:hover,
.ms-news-card:focus-visible {
  box-shadow: none;
  transform: none;
}

.ms-news-card__media {
  display: block;
  width: 100%;
  /* 1:1 — the ruled default. The platform crops to this ratio; the aspect-ratio here is
     what reserves the box before the image arrives, so the block does not jump on load. */
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

/* 16:9 (operator, 2026-09-25): the slider's Format field. The template crops to 16/9 and adds
   .ms-news--16-9; this reserves the matching box. */
.ms-news--16-9 .ms-news-card__media { aspect-ratio: 16 / 9; }

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

/* DOTS OVER THE IMAGE, bottom centre — item 3.
   Swiffy renders `.slider-indicators` as a static block after the track, which would add
   its height to the block and push the panel up. Absolutely positioning it takes it out
   of flow so the slide box and the block box stay identical, which is what item 2's
   "slide box = block box" acceptance measures. */
.ms-news-slider .slider-indicators {
  position: absolute;
  left: 0;
  right: 0;
  bottom: .75rem;
  z-index: 2;
  margin: 0;
  pointer-events: auto;
}

@media (max-width: 767.98px) {
  .ms-news-slider .slider-indicators {
    bottom: .5rem;
  }
}