/* =====================================================================
   ScholarHat home - self-paced courses (Views/Components/_LiveTraining.cshtml)
   Centered premium pill bar + minimal course cards. Same accent and surfaces as the hero and bootcamps:
   the ScholarHat logo's cyan to blue. This section is the "gradient" band of the home rhythm
   (page bg / gradient / page bg / gradient ...), using the same gradient the bootcamps section uses.
   ===================================================================== */
.lt {
    --lt-ink: #0f1b2d;
    --lt-body: #46566b;
    --lt-muted: #6b7c91;
    --lt-line: rgba(20, 90, 140, .16);
    --lt-card: rgba(255, 255, 255, .72);
    --lt-a: #0891b2;
    --lt-b: #2563eb;
    --lt-a-ink: #0b6f8c;
    --lt-soft: rgba(8, 145, 178, .10);
    --lt-on-a: #ffffff;
    --lt-hi: rgba(255, 255, 255, .95);
    --lt-glow: 8, 145, 178;
    --lt-lift: 0 1px 0 var(--lt-hi) inset, 0 2px 4px rgba(15, 60, 100, .08), 0 22px 36px -26px rgba(15, 80, 130, .45);
    --lt-lift-hover: 0 1px 0 var(--lt-hi) inset, 0 4px 8px rgba(15, 60, 100, .08), 0 34px 48px -26px rgba(var(--lt-glow), .6);
    --lt-pill-bg: linear-gradient(150deg, rgba(8, 145, 178, .20), rgba(37, 99, 235, .14));
    --lt-glide: rgba(255, 255, 255, .85);
    position: relative;
    overflow: hidden;
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    color: var(--lt-body);
    padding: clamp(40px, 6vw, 72px) 0 clamp(36px, 5vw, 60px);
    background: radial-gradient(circle at 70% 80%, rgba(0, 150, 200, .15), transparent 60%), radial-gradient(circle at 30% 20%, rgba(0, 180, 255, .2), transparent 60%), var(--job-gradient-bg-light, linear-gradient(to bottom right, #f0f9ff, #e0f2fe, #bae6fd));
}

[data-bs-theme="dark"] .lt {
    --lt-ink: #eef7ff;
    --lt-body: #b4c6d9;
    --lt-muted: #7f95ab;
    --lt-line: rgba(110, 190, 230, .16);
    --lt-card: rgba(7, 24, 44, .62);
    --lt-a: #2fb8d6;
    --lt-b: #3b82f6;
    --lt-a-ink: #7fd6ec;
    --lt-soft: rgba(47, 184, 214, .12);
    --lt-on-a: #04233a;
    --lt-hi: rgba(255, 255, 255, .07);
    --lt-glow: 47, 184, 214;
    --lt-lift: 0 1px 0 var(--lt-hi) inset, 0 2px 4px rgba(0, 0, 0, .4), 0 22px 36px -26px rgba(0, 0, 0, .85);
    --lt-lift-hover: 0 1px 0 var(--lt-hi) inset, 0 4px 8px rgba(0, 0, 0, .4), 0 34px 48px -26px rgba(var(--lt-glow), .45);
    --lt-pill-bg: linear-gradient(150deg, rgba(47, 184, 214, .16), rgba(59, 130, 246, .12));
    --lt-glide: rgba(255, 255, 255, .14);
    background: radial-gradient(circle at 70% 80%, rgba(147, 51, 234, .25), transparent 50%), radial-gradient(circle at 30% 20%, rgba(59, 130, 246, .3), transparent 50%), var(--job-gradient-bg-dark, linear-gradient(to bottom right, #0f172a, #155e7520, #020617));
}

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

.lt-shell {
    position: relative;
    width: min(1240px, 100% - 32px);
    margin-inline: auto;
}

.lt i.bi {
    line-height: 1;
}

.lt button:focus-visible, .lt a:focus-visible {
    outline: 2px solid var(--lt-a);
    outline-offset: 3px;
}

/* ---------- heading ---------- */
.lt-head {
    text-align: center;
    margin-bottom: clamp(22px, 3vw, 32px);
}

    .lt-head h2 {
        margin: 0 0 10px;
        font-size: clamp(1.8rem, 3.6vw, 2.75rem);
        line-height: 1.1;
        letter-spacing: -.03em;
        font-weight: 800;
        color: var(--lt-ink);
        text-wrap: balance;
    }

        .lt-head h2 em {
            font-style: normal;
            background: linear-gradient(100deg, var(--lt-a), var(--lt-b) 80%);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            padding-bottom: .06em;
        }

    .lt-head p {
        margin: 0 auto;
        max-width: 38em;
        font-size: 1.0625rem;
        line-height: 1.55;
        color: var(--lt-body);
        text-wrap: balance;
    }

/* ---------- premium pill bar, centered ---------- */
.lt-pillbar {
    display: flex;
    justify-content: center;
    margin-bottom: clamp(24px, 3vw, 34px);
}

.lt-pills {
    position: relative;
    display: inline-flex;
    gap: 4px;
    max-width: 100%;
    padding: 6px;
    overflow-x: auto;
    scrollbar-width: none;
    border: 1px solid var(--lt-line);
    border-radius: 999px;
    background: var(--lt-pill-bg), var(--lt-card);
    box-shadow: 0 1px 0 var(--lt-hi) inset, 0 24px 40px -30px rgba(var(--lt-glow), .55);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

    .lt-pills::-webkit-scrollbar {
        display: none;
    }

.lt-glider {
    position: absolute;
    z-index: 0;
    top: 6px;
    bottom: 6px;
    left: 0;
    width: var(--w, 0);
    transform: translateX(var(--x, 0));
    border-radius: 999px;
    background: var(--lt-glide);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .4) inset, 0 0 0 1px color-mix(in srgb, var(--lt-a) 40%, transparent) inset, 0 12px 22px -12px rgba(var(--lt-glow), .65);
    transition: transform .45s cubic-bezier(.3, .8, .3, 1), width .45s cubic-bezier(.3, .8, .3, 1);
}

.lt-pill {
    position: relative;
    z-index: 1;
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    height: 42px;
    padding: 0 18px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--lt-body);
    font: inherit;
    font-size: .9375rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: color .2s, transform .15s;
}

    .lt-pill small {
        display: grid;
        place-items: center;
        min-width: 22px;
        height: 22px;
        padding: 0 7px;
        border-radius: 999px;
        background: var(--lt-soft);
        font-size: .72rem;
        font-weight: 700;
        color: var(--lt-a-ink);
        transition: background .25s, color .25s;
    }

    .lt-pill:hover, .lt-pill.on {
        color: var(--lt-ink);
    }

    .lt-pill:active {
        transform: scale(.97);
    }

    .lt-pill.on small {
        background: linear-gradient(135deg, var(--lt-a), var(--lt-b));
        color: var(--lt-on-a);
    }

/* ---------- cards ---------- */
.lt-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 18px;
}

.lt-card {
    --mx: -200px;
    --my: -200px;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
    padding: 18px;
    text-decoration: none;
    color: inherit;
    border: 1px solid var(--lt-line);
    border-radius: 20px;
    background: radial-gradient(240px circle at var(--mx) var(--my), rgba(var(--lt-glow), .14), transparent 65%), var(--lt-card);
    box-shadow: var(--lt-lift);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .3s, border-color .3s;
}

    .lt-card[hidden] {
        display: none;
    }

    .lt-card:hover {
        transform: translateY(-5px);
        border-color: color-mix(in srgb, var(--lt-a) 50%, var(--lt-line));
        box-shadow: var(--lt-lift-hover);
        color: inherit;
    }

    .lt-card:active {
        transform: translateY(-1px) scale(.995);
    }

    .lt-card.swap {
        animation: lt-pop .5s calc(var(--k) * 55ms) backwards cubic-bezier(.2, .7, .2, 1);
    }

.js-in:not(.in) .lt-card {
    opacity: 0;
    transform: translateY(18px);
}

.js-in.in .lt-card:not(.swap) {
    animation: lt-pop .6s calc(var(--k) * 70ms) backwards cubic-bezier(.2, .7, .2, 1);
}

@keyframes lt-pop {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
}

.lt-top {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom : 0.7rem;
}

    .lt-top img {
        flex: none;
        width: 52px;
        height: 52px;
        object-fit: cover;
        border-radius: 14px;
/*        border: 1px solid var(--lt-line);*/
/*        background: var(--lt-soft);*/
        transition: transform .45s cubic-bezier(.3, 1.4, .5, 1);
    }

.lt-card:hover .lt-top img {
    transform: scale(1.08) rotate(-3deg);
}

.lt-top h3 {
    margin: 0;
    font-size: 1rem;
    line-height: 1.35;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--lt-ink);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.lt-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px 12px;
    font-size: .8125rem;
    color: var(--lt-muted);
}

    .lt-stats span {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .lt-stats i {
        flex: none;
        color: var(--lt-a);
        font-size: .95rem;
    }

    .lt-stats b {
        color: var(--lt-ink);
        font-weight: 700;
    }

.lt-go {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .875rem;
    font-weight: 700;
    color: var(--lt-a-ink);
}

    .lt-go i {
        display: grid;
        place-items: center;
        width: 26px;
        height: 26px;
        border-radius: 50%;
        background: var(--lt-soft);
        transition: transform .3s cubic-bezier(.2, .7, .2, 1), background .2s;
    }

.lt-card:hover .lt-go i {
    transform: translateX(4px);
    background: linear-gradient(135deg, var(--lt-a), var(--lt-b));
    color: var(--lt-on-a);
}

.lt-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: clamp(22px, 3vw, 32px);
}

    .lt-foot p {
        margin: 0;
        font-size: .875rem;
        color: var(--lt-muted);
    }

    .lt-foot b {
        color: var(--lt-ink);
    }

.lt-all {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 44px;
    padding: 0 20px;
    border: 1px solid var(--lt-line);
    border-radius: 999px;
    background: var(--lt-card);
    color: var(--lt-ink);
    font-size: .9375rem;
    font-weight: 700;
    text-decoration: none;
    transition: transform .2s cubic-bezier(.2, .7, .2, 1), border-color .2s, background .2s;
}

    .lt-all:hover {
        transform: translateY(-2px);
        border-color: var(--lt-a);
        background: var(--lt-soft);
        color: var(--lt-ink);
    }

    .lt-all:active {
        transform: scale(.98);
    }

    .lt-all i {
        transition: transform .25s;
    }

    .lt-all:hover i {
        transform: translate(2px, -2px);
    }

/* ---------- phones ---------- */
@media (max-width: 639.98px) {
    .lt-pillbar {
        margin-inline: -16px;
        padding-inline: 16px;
    }

    .lt-pills {
        padding: 5px;
    }

    .lt-pill {
        height: 38px;
        padding: 0 14px;
        font-size: .875rem;
    }

    .lt-glider {
        top: 5px;
        bottom: 5px;
    }

    .lt-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .lt-card {
        padding: 14px;
        gap: 12px;
        border-radius: 18px;
    }

    .lt-top img {
        width: 44px;
        height: 44px;
        border-radius: 12px;
    }

    .lt-top h3 {
        font-size: .9375rem;
    }

    .lt-stats {
        grid-template-columns: repeat(3, minmax(0, auto));
        justify-content: start;
        gap: 8px 14px;
        font-size: .75rem;
    }

    .lt-card:hover {
        transform: none;
    }

    .lt-foot {
        flex-direction: column-reverse;
        align-items: stretch;
        text-align: center;
    }

    .lt-all {
        justify-content: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lt *, .lt *::before, .lt *::after {
        animation: none !important;
        transition: none !important;
    }

    .js-in:not(.in) .lt-card {
        opacity: 1;
        transform: none;
    }

    .lt-card:hover {
        transform: none;
    }
}