/* BucketCarousel — testimonial mode (&mode=`testimonial`). Scoped under .tc / --tc-*.
   Default: dark blue panel (#00558a) with light text. Add class tc--light for a white background. */
.tc {
    --tc-font: 'Montserrat', sans-serif;
    --tc-bg: #003558;
    --tc-pad: 4rem 2rem 3rem;
    --tc-quote-color: #ffffff;
    --tc-quote-size: 1.15rem;
    --tc-name-active: #ffffff;
    --tc-name-muted: rgba(255, 255, 255, .55);
    --tc-title-active: #ffffff;
    --tc-title-muted: rgba(255, 255, 255, .55);
    --tc-overlay: var(--tc-bg);       /* colour laid over inactive photos */
    --tc-overlay-opacity: .6;         /* how dark inactive photos get */
    --tc-dot: rgba(255, 255, 255, .45);
    --tc-dot-active: #0097c7;         /* site --accent-cyan */
    --tc-img: 220px;                  /* set inline by the snippet (&imgSize) */
    --tc-speed: .6s;
    --tc-quote-fade: .35s;

    box-sizing: border-box;
    padding: var(--tc-pad);
    background: var(--tc-bg);
    font-family: var(--tc-font);
    color: var(--tc-quote-color);
    text-align: center;
    position: relative;
}
.tc *, .tc *::before, .tc *::after { box-sizing: border-box; }

.tc.tc--light {
    --tc-bg: #ffffff;
    --tc-quote-color: #3a3a3a;
    --tc-name-active: #00578a;
    --tc-name-muted: #a0a8ae;
    --tc-title-active: #3a3a3a;
    --tc-title-muted: #a0a8ae;
    --tc-overlay: #ffffff;
    --tc-dot: #d0d6da;
}
/* No padding/background of its own (when the section already provides them) */
.tc.tc--bare { --tc-pad: 0; background: transparent; }

/* Quote — stacked in one grid cell so height doesn't jump */
.tc .tc__quotes {
    display: grid;
    max-width: 820px;
    margin: 0 auto 3rem;
}
.tc .tc__quote {
    grid-area: 1 / 1;
    margin: 0;
    padding: 0;
    border: 0;
    color: var(--tc-quote-color);
    font-size: var(--tc-quote-size);
    font-style: normal;
    line-height: 1.65;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--tc-quote-fade) ease, visibility 0s linear var(--tc-quote-fade);
}
.tc .tc__quote.is-active {
    opacity: 1;
    visibility: visible;
    transition: opacity var(--tc-quote-fade) ease .15s, visibility 0s linear .15s;
}
.tc .tc__quote p { margin: 0; color: inherit; font-size: inherit; line-height: inherit; }

/* Track */
.tc .tc__viewport { overflow: hidden; }
.tc .tc__track {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    margin: 0;
    padding: 0;
    transition: transform var(--tc-speed) cubic-bezier(.4, 0, .2, 1);
    will-change: transform;
}
.tc .tc__track.is-snapping { transition: none; }
.tc .tc__slide {
    flex: 0 0 calc(100% / var(--tc-cols, 5));
    max-width: calc(100% / var(--tc-cols, 5));
    padding: 0 .75rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Name / title */
.tc .tc__meta {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-height: 4.6em;
    margin: 0 0 1.5rem;
    font-size: .9rem;
    line-height: 1.45;
    letter-spacing: .02em;
    text-transform: uppercase;
}
.tc .tc__name,
.tc a.tc__name {
    display: block;
    font-weight: 700;
    color: var(--tc-name-muted);
    text-decoration: none;
    transition: color .4s ease;
}
.tc .tc__title {
    display: block;
    font-weight: 400;
    color: var(--tc-title-muted);
    transition: color .4s ease;
}
.tc .tc__slide.is-active .tc__name,
.tc .tc__slide.is-active a.tc__name { color: var(--tc-name-active); }
.tc .tc__slide.is-active .tc__title { color: var(--tc-title-active); }
.tc a.tc__name:hover, .tc a.tc__name:focus { text-decoration: underline; }

/* Avatar with overlay on inactive */
.tc .tc__avatar {
    position: relative;
    display: block;
    width: var(--tc-img);
    height: var(--tc-img);
    max-width: 100%;
    aspect-ratio: 1 / 1;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    overflow: hidden;
    background: #d9dee2;
    cursor: pointer;
    transform: scale(.94);
    transition: transform .5s ease;
    -webkit-appearance: none;
    appearance: none;
}
.tc .tc__avatar::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--tc-overlay);
    opacity: var(--tc-overlay-opacity);
    transition: opacity .5s ease;
    pointer-events: none;
}
.tc .tc__avatar:focus-visible { outline: 3px solid var(--tc-dot-active); outline-offset: 4px; }
.tc .tc__avatar img { display: block; width: 100%; height: 100%; object-fit: cover; margin: 0; }
.tc .tc__initials {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    font-size: calc(var(--tc-img) * .32);
    font-weight: 600;
    color: #ffffff;
    background: linear-gradient(135deg, #003a5c, #0097c7);
}
.tc .tc__slide.is-active .tc__avatar { transform: scale(1); }
.tc .tc__slide.is-active .tc__avatar::after { opacity: 0; }

/* Dots */
.tc .tc__dots {
    display: flex;
    justify-content: center;
    gap: .75rem;
    margin: 3rem 0 0;
    padding: 0;
}
.tc .tc__dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--tc-dot);
    font-size: 0;
    line-height: 0;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: background .3s ease, transform .3s ease;
}
.tc .tc__dot:hover, .tc .tc__dot:focus-visible { transform: scale(1.25); outline: none; }
.tc .tc__dot.is-active { background: var(--tc-dot-active); }

@media (max-width: 991.98px) {
    .tc { --tc-img: 160px; --tc-quote-size: 1.05rem; }
    .tc .tc__meta { font-size: .8rem; }
}
@media (max-width: 575.98px) {
    .tc { --tc-img: 200px; --tc-quote-size: 1rem; --tc-pad: 3rem 1.25rem 2.5rem; }
    .tc .tc__quotes { margin-bottom: 2rem; }
    .tc .tc__dots { margin-top: 2rem; }
}
@media (prefers-reduced-motion: reduce) {
    .tc { --tc-speed: 0s; --tc-quote-fade: 0s; }
    .tc .tc__avatar, .tc .tc__avatar::after, .tc .tc__name, .tc .tc__title, .tc .tc__dot { transition: none; }
}