/* =====================================================================
   ScholarHat home - alumni strip (Views/Home/_Alumni.cshtml)
   A slim trust band under the hero: who our learners work for. Logos are shown as quiet one-colour marks that
   come alive on hover; the strip drifts slowly and pauses when you point at it. Page background, no fill of its own.
   ===================================================================== */
.al {
    --al-ink: #0f1b2d;
    --al-body: #46566b;
    --al-muted: #6b7c91;
    --al-line: rgba(20, 90, 140, .16);
    --al-a: #0891b2;
    --al-b: #2563eb;
    --al-tile: rgba(255, 255, 255, .92);
    --al-tile-line: rgba(20, 90, 140, .14);
    --al-tile-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 8px 18px -12px rgba(15, 80, 130, .35);
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    padding: clamp(14px, 2vw, 22px) 0 clamp(8px, 1.4vw, 14px);
}

[data-bs-theme="dark"] .al {
    --al-ink: #eef7ff;
    --al-body: #b4c6d9;
    --al-muted: #7f95ab;
    --al-line: rgba(110, 190, 230, .16);
    --al-a: #2fb8d6;
    --al-b: #3b82f6;
    --al-tile: rgba(255, 255, 255, .95);
    --al-tile-line: rgba(255, 255, 255, .0);
    --al-tile-shadow: 0 10px 22px -14px rgba(0, 0, 0, .8);
}

.al *, .al *::before, .al *::after {
    box-sizing: border-box;
}

.al-shell {
    width: min(1240px, 100% - 32px);
    margin-inline: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    align-items: center;
    padding-top: clamp(18px, 2.2vw, 26px);
    border-top: 1px solid var(--al-line);
}

@media (min-width: 992px) {
    .al-shell {
        grid-template-columns: auto minmax(0, 1fr);
        gap: 44px;
    }
}

.al-lead {
    text-align: center;
}

@media (min-width: 992px) {
    .al-lead {
        text-align: left;
        padding-right: 44px;
        border-right: 1px solid var(--al-line);
    }
}

.al-title {
    margin: 0 0 2px;
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--al-ink);
    white-space: nowrap;
}

    .al-title b {
        background: linear-gradient(100deg, var(--al-a), var(--al-b));
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }

.al-sub {
    margin: 0;
    font-size: .8125rem;
    color: var(--al-muted);
}

.al-strip {
    position: relative;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}

.al-track {
    display: flex;
    width: max-content;
    animation: al-scroll 52s linear infinite;
    will-change: transform;
}

.al-strip:hover .al-track {
    animation-play-state: paused;
}

@keyframes al-scroll {
    to {
        transform: translateX(-50%);
    }
}

.al-set {
    display: flex;
    align-items: center;
    gap: 14px;
    list-style: none;
    margin: 0;
    padding: 6px 14px 14px 6px;
}

    .al-set li {
        flex: none;
        display: grid;
        place-items: center;
        height: 54px;
        padding: 0 22px;
        /*        border-radius: 12px;*/
        /*        border: 1px solid var(--al-tile-line);*/
        /*        background: var(--al-tile);*/
        /*        box-shadow: var(--al-tile-shadow);*/
        transition: opacity .3s, transform .3s cubic-bezier(.2, .7, .2, 1), box-shadow .3s;
    }

.al-logo {
    display: block;
    height: var(--h, 26px);
    width: auto;
    max-width: none;
}

.al-strip:hover .al-set li {
    opacity: .5;
}

.al-strip .al-set li:hover {
    opacity: 1;
    transform: translateY(-3px);
}

@media (max-width: 575.98px) {
    .al-set {
        gap: 10px;
        padding: 6px 10px 14px 6px;
    }

        .al-set li {
            height: 46px;
            padding: 0 16px;
        }

    .al-logo {
        height: calc(var(--h, 26px) * .8);
    }

    .al-track {
        animation-duration: 40s;
    }
}

@media (prefers-reduced-motion: reduce) {
    .al-track {
        animation: none;
        width: auto;
        flex-wrap: wrap;
        justify-content: center;
    }

    .al-strip {
        -webkit-mask-image: none;
        mask-image: none;
    }

    .al-set {
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px 36px;
        padding: 0;
    }

        .al-set[aria-hidden="true"] {
            display: none;
        }
}

/* inside the hero it is the closing band, with room above it */
.hh > .al {
    margin-top: clamp(24px, 3vw, 44px);
}

/* real follower counts: one quiet line */
.al-social {
    list-style: none;
    width: min(1240px, 100% - 32px);
    margin: 0 auto 14px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: end;
    gap: 8px 28px;
    font-size: .8125rem;
    color: var(--al-muted);
}

    .al-social a {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        color: inherit;
        text-decoration: none;
        transition: color .2s;
    }

        .al-social a:hover {
            color: var(--al-ink);
        }

    .al-social i {
        font-size: .95rem;
        color: var(--al-a);
    }

    .al-social b {
        font-weight: 700;
        color: var(--al-ink);
    }

/* dark mode: logos sit on soft light tiles so the dark ones (Accenture, Cisco, Deloitte...) stay readable */
[data-bs-theme="dark"] .al-set li {
    border-radius: 12px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 10px 22px -14px rgba(0, 0, 0, .8);
}

[data-bs-theme="dark"] .al-strip:hover .al-set li {
    opacity: .6;
}