/* =============================================================================
   Mouldshop SLIDE TEXT OVERLAY — the one stylesheet for every slider-like module.
   TASK-0068 / DEC-0043. Pairs with Custom/MouldshopSlideOverlay.cshtml.

   NOT mouldshop-hero.css. That file styles the hero's frame, artwork and the
   TASK-0023 animation. This one styles only the text block the shared partial
   emits, so the hero and the News slider cannot drift apart.

   COLOUR COMES FROM THE ROW'S SCHEME, never from a literal. --dw-color-foreground
   is set by DW from `data-dw-colorscheme` on the row, so an overlay on a dark row
   and one on a light row are both legible without anybody picking a hex. The only
   literal here is the scrim, and it is rgba(0,0,0,...) over ARTWORK — a photo has
   no scheme, so there is nothing to inherit from.

   FONTS come from TASK-0063 via --ms-font-head / --ms-font-body, with fallbacks so
   a missing alias degrades to the system stack rather than to Times.

   NO JS. TASK-0023's invariant: the text is readable with scripting off. Nothing
   here starts hidden, nothing waits for a class a script adds. The TASK-0023
   word-rise animation stays parked and is not referenced.
   ============================================================================= */

.ms-overlay {
  /* Tokens first so a variant can retune without re-declaring the rules. */
  --ms-overlay-gap: .35rem;
  --ms-overlay-pad: clamp(1rem, 3vw, 2.5rem);
  --ms-overlay-title: clamp(1.25rem, 3.2vw, 2.75rem);
  --ms-overlay-sub: clamp(.9rem, 1.4vw, 1.125rem);
  --ms-overlay-date: .8125rem;

  position: absolute;
  inset-inline-start: 0;
  inset-block-end: 0;
  inline-size: 100%;
  z-index: 2;

  display: flex;
  flex-direction: column;
  gap: var(--ms-overlay-gap);
  padding: var(--ms-overlay-pad);

  /* Legibility over artwork. A scrim, not a solid: the image stays visible and the
     text stays readable on a light photo and a dark one alike. */
  background: linear-gradient(to top, rgba(0, 0, 0, .68) 0%, rgba(0, 0, 0, .32) 45%, rgba(0, 0, 0, 0) 100%);

  /* Over a scrim the scheme foreground can be too dark to read, so the overlay
     paints white and only falls back to the scheme colour where no scrim applies
     (see .ms-overlay--news below). */
  color: #fff;
}

/* The anchor variant must not look like a link or change the layout — the whole
   block is the click target, and the styling is identical either way. */
.ms-overlay__link {
  display: flex;
  flex-direction: column;
  gap: var(--ms-overlay-gap);
  color: inherit;
  text-decoration: none;
}
.ms-overlay__link:hover .ms-overlay__title,
.ms-overlay__link:focus-visible .ms-overlay__title {
  text-decoration: underline;
  text-underline-offset: .15em;
}
/* Keyboard users get a visible focus ring; it is on the block, not the text. */
.ms-overlay__link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

.ms-overlay__title {
  font-family: var(--ms-font-head, var(--ms-font-display, system-ui, sans-serif));
  font-size: var(--ms-overlay-title);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.01em;
  text-wrap: balance;
}

.ms-overlay__subtitle {
  font-family: var(--ms-font-body, var(--ms-font-body-stack, system-ui, sans-serif));
  font-size: var(--ms-overlay-sub);
  font-weight: 400;
  line-height: 1.35;
  max-inline-size: 48ch;
}

.ms-overlay__date {
  font-family: var(--ms-font-body, var(--ms-font-body-stack, system-ui, sans-serif));
  font-size: var(--ms-overlay-date);
  font-weight: 400;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .82;
}

/* -----------------------------------------------------------------------------
   VARIANTS. Same markup, same rules, two sets of numbers.
   -------------------------------------------------------------------------- */

/* Hero: full-bleed artwork, the text is the headline of the page. */
.ms-overlay--hero {
  --ms-overlay-title: clamp(1.5rem, 4vw, 3.25rem);
}

/* -----------------------------------------------------------------------------
   PER-SLIDE TEXT CONTROL (TASK-0111). The partial emits a modifier only for a
   NON-default choice, so a slide with nothing set renders exactly as before:
   left, bottom, light (white text, dark scrim rising from the bottom).
     --h-center / --h-right   text alignment across the slide
     --v-top / --v-middle     where the block sits; the scrim follows the text
     --tone-dark              dark text on a light scrim, for pale artwork
   -------------------------------------------------------------------------- */
.ms-overlay--h-center,
.ms-overlay--h-center .ms-overlay__link { align-items: center; text-align: center; }
.ms-overlay--h-right,
.ms-overlay--h-right .ms-overlay__link { align-items: flex-end; text-align: end; }

.ms-overlay--v-top {
  inset-block-start: 0;
  inset-block-end: auto;
  background: linear-gradient(to bottom, rgba(0, 0, 0, .68) 0%, rgba(0, 0, 0, .32) 45%, rgba(0, 0, 0, 0) 100%);
}
.ms-overlay--v-middle {
  inset-block: 0;
  justify-content: center;
  background: rgba(0, 0, 0, .38);
}

.ms-overlay--tone-dark { color: var(--ms-ink, #0e1a33); }
.ms-overlay--tone-dark {
  background: linear-gradient(to top, rgba(255, 255, 255, .82) 0%, rgba(255, 255, 255, .4) 45%, rgba(255, 255, 255, 0) 100%);
}
.ms-overlay--tone-dark.ms-overlay--v-top {
  background: linear-gradient(to bottom, rgba(255, 255, 255, .82) 0%, rgba(255, 255, 255, .4) 45%, rgba(255, 255, 255, 0) 100%);
}
.ms-overlay--tone-dark.ms-overlay--v-middle { background: rgba(255, 255, 255, .55); }

/* News: text OVER the image, bottom-left, 24px in (TASK-0111, operator's shop review
   2026-09-24). It used to sit UNDER the image in the row's colour, on the reasoning that
   a full scrim would swallow a 1:1 thumbnail. The scrim here is therefore BOTTOM-ONLY:
   the overlay box is only as tall as its text plus padding, and its gradient fades to
   nothing at the top of that box, so the upper part of the image is untouched.
   White text on a dark scrim is fixed, not scheme-driven: it sits on a photograph, not on
   the row, so the row's colour has nothing to say about it (same as the hero). */
.ms-news-card { position: relative; }
.ms-overlay--news {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  padding: 24px;
  background: linear-gradient(to top, rgba(0, 0, 0, .72) 0%, rgba(0, 0, 0, .38) 60%, rgba(0, 0, 0, 0) 100%);
  color: #fff;
  --ms-overlay-title: clamp(.95rem, 1.2vw, 1.125rem);
  --ms-overlay-sub: .875rem;
}
.ms-overlay--news .ms-overlay__title { font-weight: 600; line-height: 1.25; }
.ms-overlay--news .ms-overlay__subtitle {
  /* Two lines, then ellipsis — a teaser of unknown length must not change the
     slide height, or the slider's own measurements drift. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* The hero card is the positioning context for the absolutely-placed hero overlay.
   Declared defensively: if mouldshop-hero.css ever stops setting it, the overlay
   would otherwise escape to the nearest positioned ancestor and land somewhere
   unrelated on the page. */
.ms-hero-card { position: relative; }

@media (prefers-reduced-motion: reduce) {
  .ms-overlay, .ms-overlay * { transition: none !important; animation: none !important; }
}