/* ================================================
   TEAM GLAM — As Seen In (Logo Grid / Carousel)
   ================================================ */

.tg-asi-wrapper { width: 100%; }

/* ── Heading & Locations ── */
.tg-asi-header-block {
    text-align: center;
    margin-bottom: 48px;
}

.tg-asi-heading {
    text-align: center;
    font-family: var(--tg-font-heading, 'beaufort-pro', Georgia, serif);
    font-weight: 400;
    margin: 0 0 10px 0;
}

.tg-asi-locations {
    text-align: center;
    font-family: var(--tg-font-body, 'brandon-grotesque', sans-serif);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #555555;
    margin: 0;
}

/* ── Static grid ── */
.tg-asi-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    align-items: center;
    gap: 40px;
}

@media (max-width: 1024px) {
    .tg-asi-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 767px) {
    .tg-asi-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}

/* ── Shared logo item ── */
.tg-asi-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.tg-asi-logo a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.tg-asi-logo img {
    max-height: 50px;
    width: auto;
    max-width: 160px;
    display: block;
    object-fit: contain;
    opacity: 0.65;
    transition: opacity 0.28s ease, filter 0.28s ease;
}

/* ── Colour effect modifiers ── */
.tg-asi-filter--grayscale .tg-asi-logo img         { filter: grayscale(1); }
.tg-asi-filter--grayscale .tg-asi-logo:hover img   { filter: grayscale(0); opacity: 1; }
.tg-asi-filter--grayscale-always .tg-asi-logo img  { filter: grayscale(1); }
.tg-asi-filter--none .tg-asi-logo img              { filter: none; }
.tg-asi-logo:hover img                             { opacity: 1; }

/* ── Carousel (CSS marquee) ── */
.tg-asi-carousel-wrap {
    overflow: hidden;
    width: 100%;
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0%,
        black 8%,
        black 92%,
        transparent 100%
    );
    mask-image: linear-gradient(
        to right,
        transparent 0%,
        black 8%,
        black 92%,
        transparent 100%
    );
}

.tg-asi-track {
    display: flex;
    align-items: center;
    width: max-content;
    gap: var(--tg-asi-gap, 60px);
    animation: tg-asi-scroll var(--tg-asi-duration, 30s) linear infinite;
    will-change: transform;
}

/* Doubled logo set → moving -50% = exactly one full original set → seamless loop */
@keyframes tg-asi-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.tg-asi-track.tg-asi-paused {
    animation-play-state: paused;
}