/* ==========================================================================
   MOTIFS — the grid, the plus and the right angle
   Drawn in CSS rather than shipped as images so they tint from the accent
   token and cost no requests. Each is a background layer, never content.
   ========================================================================== */

/* ---- Grid field -------------------------------------------------------- */

.ssc-motif-grid {
  position: relative;
  isolation: isolate;
}

/*
 * The real mark, not an approximation of it.
 *
 * This was two CSS gradients drawing a plain square grid at 6% — which is
 * not the Suresafe motif. The prototypes use the actual plus-and-grid SVG
 * as a mask at an 80px tile, so it takes its colour from currentColor and
 * one asset serves every context. assets/img/mesh.svg is that file,
 * extracted from the prototypes.
 */
.ssc-motif-grid::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  color: var(--ss-motif-colour, var(--ssp-line-strong));
  opacity: var(--ss-motif-opacity, 0.5);
  background-color: currentColor;
  -webkit-mask-image: var(--ss-mesh);
          mask-image: var(--ss-mesh);
  -webkit-mask-size: var(--ss-motif-grid-size, 80px) var(--ss-motif-grid-size, 80px);
          mask-size: var(--ss-motif-grid-size, 80px) var(--ss-motif-grid-size, 80px);
}

/* On an ink ground the motif is white at the prototypes' 14%. */
.ssc-motif-grid--dark::before {
  color: #fff;
  opacity: 0.14;
}

/* ---- Plus -------------------------------------------------------------- */

.ssc-motif-plus {
  --ss-plus-size: 1.5rem;
  --ss-plus-weight: 2px;

  width: var(--ss-plus-size);
  aspect-ratio: 1;
  flex: 0 0 auto;
  background:
    linear-gradient(var(--ssp-accent), var(--ssp-accent)) center / 100% var(--ss-plus-weight) no-repeat,
    linear-gradient(var(--ssp-accent), var(--ssp-accent)) center / var(--ss-plus-weight) 100% no-repeat;
}

/* ---- Right angle ------------------------------------------------------- */

.ssc-motif-angle {
  --ss-angle-size: 2.5rem;
  --ss-angle-weight: 3px;

  width: var(--ss-angle-size);
  aspect-ratio: 1;
  flex: 0 0 auto;
  border-inline-start: var(--ss-angle-weight) solid var(--ssp-accent);
  border-block-end: var(--ss-angle-weight) solid var(--ssp-accent);
}

.ssc-motif-angle--tr { border: 0; border-inline-end: var(--ss-angle-weight) solid var(--ssp-accent); border-block-start: var(--ss-angle-weight) solid var(--ssp-accent); }

/* ---- Duotone ----------------------------------------------------------- */

/* ---- Duotone ------------------------------------------------------------
   Shadows take the ink, highlights take the accent. Two things keep it
   from flattening into a solid block of colour:

   1. The accent layer is held below full strength. At opacity 1 the
      multiply pass crushes every mid-tone and any image with a narrow
      tonal range — a flat product shot, a pale sky — comes out as one
      colour. --ss-duotone-strength is the dial.
   2. The grayscale pass adds brightness as well as contrast, so the
      highlights survive the screen blend rather than being clipped to
      the base.

   Tune per placement with --ss-duotone-strength rather than editing this
   rule: a hero behind white text wants more, a card thumbnail wants less. */

.ssc-duotone {
  isolation: isolate;
  position: relative;
  background: var(--ssp-ink);
}

.ssc-duotone > img {
  filter: grayscale(1) contrast(1.15) brightness(1.08);
  mix-blend-mode: screen;
}

.ssc-duotone::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ssp-accent);
  mix-blend-mode: multiply;
  opacity: var(--ss-duotone-strength, 0.62);
  pointer-events: none;
}

/* Placement defaults.

   Editorial imagery only. A department tile and a product thumbnail keep
   their real colours, because on a PPE catalogue colour IS information —
   a customer recognises hi-vis yellow and navy workwear at a glance, and
   tinting everything red takes that away to gain a house style nobody
   asked for. */
.ssc-hero__media                 { --ss-duotone-strength: 0.7; }
.ssc-card--post .ssc-card__media { --ss-duotone-strength: 0.5; }