/* ==========================================================
   CREDIBILITY BAND  (sits directly below the hero on every page)

   Standalone, hand-written stylesheet — NOT part of the Tailwind
   build, so editing it never requires `npm run build:css` and can't
   affect the compiled style.css. Linked after style.css on each page.

   Bespoke class names so the global `main .container-custom` mobile
   rules in style.css never touch it.
     Desktop -> 3 logos, evenly spaced and centred
     Mobile  -> one logo at a time, sliding carousel on a loop
   ========================================================== */
.cred-band {
    /* Matches the section directly below (bg-background-gray) so the
       strip blends seamlessly into the page. */
    background: #F8F9FA;
}

/* White variant — for pages where the band sits above a section whose top
   fades in from white (e.g. index's Core Focus section has a from-white
   gradient overlay), so the strip blends into that white instead. */
.cred-band--on-white {
    background: #ffffff;
}

.cred-band__inner {
    max-width: 1400px;
    margin-inline: auto;
    padding: clamp(0.875rem, 2vw, 1.125rem) clamp(1.5rem, 5vw, 3rem);
    display: flex;
    justify-content: center;
}

.cred-band__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(clamp(2.5rem, 8vw, 6rem) + 50px);
}

.cred-band__item {
    display: flex;
    align-items: center;
    justify-content: center;
}

.cred-band__logo {
    display: block;
    width: auto;
    object-fit: contain;
}

/* Optical sizing per logo — different shapes (and built-in whitespace)
   need different heights so they read as the same visual weight.
   Gas Safe is enlarged because its mark sits small within its image. */
.cred-band__logo--ciob     { height: 76px; }
.cred-band__logo--gassafe  { height: 86px; }
.cred-band__logo--rics     { height: 48px; }

/* The Gas Safe image carries extra transparent whitespace on its left,
   so the gap before it reads ~34px wider than the others. Pull it back
   on desktop so the visible spacing between all three logos is even.
   (Desktop only — on mobile the logos are a one-at-a-time carousel.) */
@media (min-width: 768px) {
    .cred-band__item:has(.cred-band__logo--gassafe) {
        margin-left: -34px;
    }
}

/* ---------- MOBILE: sliding single-logo carousel ---------- */
@media (max-width: 767px) {
    .cred-band__inner {
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
    }

    /* The list becomes a fixed-size stage; logos slide through it */
    .cred-band__list {
        position: relative;
        width: 100%;
        height: 96px;
        gap: 0;
        overflow: hidden;
    }

    .cred-band__item {
        position: absolute;
        inset: 0;
        opacity: 0;
        animation: credCarousel 12s infinite;
        will-change: transform, opacity;
    }

    /* Negative delays stagger the three across one shared 12s loop */
    .cred-band__item:nth-child(1) { animation-delay: 0s; }
    .cred-band__item:nth-child(2) { animation-delay: -4s; }
    .cred-band__item:nth-child(3) { animation-delay: -8s; }

    /* A touch larger on mobile since only one is visible at a time */
    .cred-band__logo--ciob     { height: 84px; }
    .cred-band__logo--gassafe  { height: 94px; }
    .cred-band__logo--rics     { height: 56px; }
}

/* Carousel: each logo slides in from the right, holds centre ~1/3 of
   the cycle, then slides off to the left. transform + opacity only. */
@keyframes credCarousel {
    0%      { opacity: 0; transform: translateX(60px); }
    5%      { opacity: 1; transform: translateX(0); }
    28.33%  { opacity: 1; transform: translateX(0); }
    33.33%  { opacity: 0; transform: translateX(-60px); }
    100%    { opacity: 0; transform: translateX(-60px); }
}

/* Reduced-motion: stop the loop, show all three in a calm wrapped row */
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
    .cred-band__list {
        height: auto;
        flex-wrap: wrap;
        gap: 1.5rem 2rem;
        overflow: visible;
    }
    .cred-band__item {
        position: static;
        inset: auto;
        opacity: 1;
        animation: none;
        transform: none;
    }
}