/* ==========================================================================
   Mouldshop Logo Slider — TASK-0120. Skin for Paragraph/Mouldshop_LogoSlider/Default.cshtml.

   Background: none of its own - the row's colour scheme shows through (DEC-0063). The logo and
   hover colours are the paragraph's two admin picks, written by the template as
   --ms-logo-colour / --ms-logo-hover on the section; everything below reads those two.
   The logos are inline SVG recoloured to currentColor server-side, so `color` on the link is
   the whole colour mechanism.

   HEADING. One Title field, bold by the B button (the info stripe's pattern, DEC-0050): the
   heading is Light 300 and the words the editor bolded arrive as <strong> at 700. Display face,
   uppercase, centred, a thin line under it. Its colour and the line's follow the row unless the
   paragraph picks one (Title colour / Divider colour, operator 2026-09-25), in which case the
   template sets .has-title-colour / .has-rule-colour and the two custom properties below.

   PER VIEW: 6 / 4 / 3 / 2 / 1 at >= 1200 / 992 / 768 / 576 / below (operator, 2026-09-25), through
   swiffy's own item count (vendor sets it to 1 below 62rem on .swiffy-slider; 0,2,0 here beats
   that 0,1,0). The 992 / 768 / 576 steps are the product sliders' and the listing grid's.

   EVERY LOGO THE SAME WIDTH (operator, 2026-09-25: "all logos have same width and same gap"): a
   logo is drawn at --ms-logo-w and its height follows its own proportions, so a wide wordmark
   comes out short and a stacked mark taller. Equal columns and one gap token give the same gap.
   ========================================================================== */

:root {
  --ms-logo-grey:      #A09A9B;   /* operator, 2026-09-25: "a09a9b". About 2.8:1 on white - below AA, by instruction */
  --ms-logo-w:         140px;    /* every logo this wide, or its cell if narrower */
  --ms-logo-gap:       2rem;
  --ms-logo-cell-pad:  .75rem;
}

.ms-logos {
  width: 100%;
}

.ms-logos__title {
  margin: 0;
  text-align: center;
  font-family: var(--ms-font-head, var(--ms-font-display, system-ui, sans-serif));
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  line-height: 1.2;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: inherit;
}

.ms-logos__title { font-weight: 300; }
.ms-logos__title strong { font-weight: 700; }

/* A picked Title / Divider colour beats the row. Stated twice: plain, and inside a schemed row at
   a specificity no scheme rule on headings or rules reaches. */
.ms-logos.has-title-colour .ms-logos__title,
[data-dw-colorscheme] .ms-logos.has-title-colour .ms-logos__title.ms-logos__title {
  color: var(--ms-logos-title-colour);
}

.ms-logos__rule {
  margin: 1rem 0 1.5rem;
  border: 0;
  border-top: 1px solid var(--ms-rule, rgba(10, 41, 121, .35));
  opacity: 1;
}

.ms-logos.has-rule-colour .ms-logos__rule,
[data-dw-colorscheme] .ms-logos.has-rule-colour .ms-logos__rule.ms-logos__rule {
  border-top-color: var(--ms-logos-rule-colour);
}

/* The track: swiffy's slider-container (grid, one column per item, scroll-snap). The count
   decides each cell's width. `safe center`: a row with fewer logos than fit sits in the middle,
   and a row that overflows still starts at the left edge (plain `center` would push its first
   logos out of reach). */
.ms-logos .ms-logos__slider {
  --swiffy-slider-item-count: 6;
  --swiffy-slider-item-gap: var(--ms-logo-gap);
}

@media (max-width: 1199.98px) {
  .ms-logos .ms-logos__slider { --swiffy-slider-item-count: 4; }
}

@media (max-width: 991.98px) {
  .ms-logos .ms-logos__slider { --swiffy-slider-item-count: 3; }
}

@media (max-width: 767.98px) {
  .ms-logos .ms-logos__slider { --swiffy-slider-item-count: 2; }
}

@media (max-width: 575.98px) {
  .ms-logos .ms-logos__slider { --swiffy-slider-item-count: 1; }
}

.ms-logos__track {
  justify-content: safe center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ms-logos__cell {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding-block: var(--ms-logo-cell-pad);
}

/* THE LOGO: one fixed width for all, height from its own proportions, never wider than its cell. */
.ms-logos__logo {
  display: block;
  width: var(--ms-logo-w);
  max-width: 100%;
  color: var(--ms-logo-colour, var(--ms-logo-grey));
  text-decoration: none;
  transition: color .2s ease;
}

.ms-logos__svg {
  display: block;
  width: 100%;
  height: auto;
}

a.ms-logos__logo:hover,
a.ms-logos__logo:focus-visible {
  color: var(--ms-logo-hover, var(--ms-navy, #0A2979));
}

/* Keyboard: hover colour plus a ring (the packet: "Focus-visible = same as hover + focus ring"). */
a.ms-logos__logo:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
  border-radius: 2px;
}

/* INSIDE A SCHEMED ROW (operator, 2026-09-25, DevTools on the first logo: navy at rest, no hover).
   The colour-scheme stylesheet paints every link in a schemed row with the row's text colour:
     [data-dw-colorscheme]:not([data-dw-colorscheme=""]) a:not(.btn):not(.page-link):not(.dropdown-item)
   at specificity 0,5,1 - over the 0,1,0 / 0,2,1 rules above, at rest AND on hover. These restate
   the logo's own two colours at 0,6,1 / 0,7,1, only where that rule can match; outside a schemed
   row the rules above decide. The paragraph's colour picks are explicit, so they win over the row. */
[data-dw-colorscheme] .ms-logos a.ms-logos__logo:not(.btn):not(.page-link):not(.dropdown-item) {
  color: var(--ms-logo-colour, var(--ms-logo-grey));
}

[data-dw-colorscheme] .ms-logos a.ms-logos__logo:not(.btn):not(.page-link):not(.dropdown-item):hover,
[data-dw-colorscheme] .ms-logos a.ms-logos__logo:not(.btn):not(.page-link):not(.dropdown-item):focus-visible {
  color: var(--ms-logo-hover, var(--ms-navy, #0A2979));
}

@media (prefers-reduced-motion: reduce) {
  .ms-logos__logo { transition: none; }
}