/* =============================================================================
   CREDENTIALS STRIP — accreditation logo marquee.
   Shared between home and service-template pages.
   cred-strip.js drives motion and writes --cred-active per item from
   distance to the centre. calc() rules below interpolate filter, opacity,
   transform, background and label visibility. CSS marquee keyframe is the
   no-JS fallback. Hover / focus pin a logo to --cred-active: 1.
   ========================================================================== */
.cred-strip {
  position: relative;
  padding: var(--sp-4) 0 var(--sp-5);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(15, 187, 245, 0.06) 0%, transparent 60%),
    var(--clr-bg-surface-solid);
  border-top: 1px solid var(--clr-border-bright, rgba(255, 255, 255, 0.12));
  border-bottom: 1px solid var(--clr-border-bright, rgba(255, 255, 255, 0.12));
  box-shadow:
    inset 0 1px 0 rgba(15, 187, 245, 0.08),
    inset 0 -1px 0 rgba(15, 187, 245, 0.08);
  overflow: hidden;
}

.cred-strip::before,
.cred-strip::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  height: 2px;
  width: clamp(80px, 18vw, 220px);
  background: linear-gradient(90deg, transparent, var(--clr-accent), transparent);
  opacity: 0.55;
  pointer-events: none;
}

.cred-strip::before { top: -1px; }
.cred-strip::after  { bottom: -1px; }

.cred-strip__heading {
  text-align: center;
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  margin: 0 0 var(--sp-2);
}

.cred-strip__footnote {
  text-align: center;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--clr-text-muted);
  margin: var(--sp-4) auto 0;
  max-width: 560px;
  font-style: italic;
  opacity: 0.85;
}

.cred-strip__viewport {
  position: relative;
  width: 100%;
  /* Tablet cap. Desktop override below widens this so the marquee visually
     matches the surrounding ~1200px container while staying narrower than
     one pass of the track (so the wrap-point stays off-screen). */
  max-width: 560px;
  margin-inline: auto;
  overflow: hidden;
  /* Let the browser keep vertical page scroll; we handle horizontal
     touch ourselves in cred-strip.js. */
  touch-action: pan-y;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}

@media (max-width: 560px) {
  .cred-strip__viewport {
    max-width: none;
  }
}

.cred-strip__track {
  display: flex;
  align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
  width: max-content;
  padding: var(--sp-2) 0 var(--sp-6);
  margin: 0;
  list-style: none;
  animation: cred-marquee 32s linear infinite;
  will-change: transform;
}

/* Desktop: viewport matches .container exactly (90% width, 1200px cap) so
   the marquee sits in the same horizontal band as the intro text above it.
   Items widen and gaps widen in lockstep — with 5 logos in the track, each
   pass stays well above the 1200px viewport cap so the wrap stays hidden. */
@media (min-width: 768px) {
  .cred-strip__heading {
    font-size: clamp(1.4rem, 2.4vw, 1.75rem);
  }

  .cred-strip__viewport {
    width: 90%;
    max-width: var(--container-max);
  }

  .cred-strip__track {
    gap: clamp(3rem, 8vw, 9rem);
  }

  .cred-strip__item {
    min-width: 200px;
  }
}

.cred-strip:hover .cred-strip__track {
  animation-play-state: paused;
}

/* --cred-active is updated every frame by cred-strip.js from each
   item's distance to the viewport centre (0 = far, 1 = at the title).
   Hover / focus force the value to 1 so users can lock a logo in. */
.cred-strip__item {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 110px;
  --cred-active: 0;
}

.cred-strip__item:hover,
.cred-strip__item:focus-within {
  --cred-active: 1 !important;
}

.cred-strip__label {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  white-space: nowrap;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--clr-text-bright);
  pointer-events: none;
  /* Opacity ramp: stays at 0 until activeness ~0.2, then climbs to
     full opacity by ~0.87. Keeps neighbouring partial labels invisible. */
  opacity: calc(var(--cred-active) * 1.5 - 0.3);
  transform: translate(-50%, calc(-4px + 4px * var(--cred-active)));
  /* Short transition smooths only the hover snap to 1 — JS updates
     every frame and doesn't need transition smoothing. */
  transition: opacity 0.18s ease-out, transform 0.18s ease-out;
}

.cred-strip__picture {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md, 8px);
  padding: 0.6rem 0.9rem;
  filter: grayscale(calc(1 - var(--cred-active))) contrast(calc(0.95 + 0.05 * var(--cred-active)));
  opacity: calc(0.55 + 0.45 * var(--cred-active));
  transform: scale(calc(1 + 0.05 * var(--cred-active)));
  background: rgba(255, 255, 255, calc(0.92 + 0.08 * var(--cred-active)));
  transition: filter 0.18s ease-out, opacity 0.18s ease-out, transform 0.18s ease-out, background-color 0.18s ease-out;
}

.cred-strip__img {
  display: block;
  width: auto;
  height: auto;
}

.cred-strip__item[data-key="corc"]        .cred-strip__img { max-height: 56px; max-width: 110px; }
.cred-strip__item[data-key="citb"]        .cred-strip__img { max-height: 34px; max-width: 130px; }
.cred-strip__item[data-key="nwrtg"]       .cred-strip__img { max-height: 32px; max-width: 140px; }
.cred-strip__item[data-key="nvq"]         .cred-strip__img { max-height: 42px; max-width: 120px; }
.cred-strip__item[data-key="city-guilds"] .cred-strip__img { max-height: 50px; max-width: 110px; }
.cred-strip__item[data-key="nfrc"]        .cred-strip__img { max-height: 60px; max-width: 60px; }

@keyframes cred-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* Reduced-motion: stop the marquee, hide the duplicate copies, pin every
   logo to fully coloured. JS bails out so no --cred-active updates fire. */
@media (prefers-reduced-motion: reduce) {
  .cred-strip__viewport {
    -webkit-mask-image: none;
            mask-image: none;
  }

  .cred-strip__track {
    animation: none;
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--sp-4);
  }

  .cred-strip__item[aria-hidden="true"] {
    display: none;
  }

  .cred-strip__picture {
    filter: none;
    opacity: 1;
    transform: none;
    background: #ffffff;
  }

  .cred-strip__label {
    position: static;
    transform: none;
    opacity: 1;
    margin-bottom: 0.4rem;
  }
}