/* Academy — track cards, lesson list, self-check reveal */

.academy-header {
    border-bottom: 1px solid var(--bs-border-color);
}

.academy-breadcrumb {
    font-size: 0.9rem;
    color: var(--bs-secondary-color);
}

.academy-breadcrumb a {
    text-decoration: none;
}

.academy-track-card {
    background: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
    border-left: 4px solid var(--track-accent, var(--bs-primary));
    border-radius: var(--bs-border-radius);
    transition: transform 0.15s, border-color 0.15s;
    color: inherit;
    overflow: hidden;
}

.academy-track-card:hover {
    transform: translateY(-2px);
    border-color: var(--track-accent, var(--bs-primary));
}

/* Locked variant for tracks with no published lessons — same shape as the
   live card but visually muted and not interactive. */
.academy-track-card-locked {
    opacity: 0.7;
    cursor: default;
    color: inherit;
}

.academy-track-card-locked:hover {
    transform: none;
    border-color: var(--bs-border-color);
}

.academy-track-card-subtitle {
    color: var(--bs-secondary-color);
    font-size: 0.95rem;
    line-height: 1.45;
}

.academy-track-card-meta {
    border-top: 1px solid var(--bs-border-color);
    padding-top: 0.75rem;
    margin-top: 0.5rem;
}

.academy-track-hero {
    /* Per-track dark gradient — same palette as the OG cards. Track identity
       is carried by the accent color on the bottom border, the section
       labels, and the numeric circles, so the hero needs no image. */
    background: linear-gradient(180deg,
        var(--hero-bg-top, #0E1816) 0%,
        var(--hero-bg-bottom, #104836) 100%);
    border-bottom: 3px solid var(--track-accent, var(--bs-primary));
    margin-bottom: 1rem;
    min-height: 200px;
    display: flex;
    align-items: center;
}

@media (max-width: 768px) {
    .academy-track-hero {
        min-height: 160px;
    }
    .academy-track-hero h1 {
        font-size: 2rem;
    }
    .academy-track-hero-tagline {
        font-size: 0.95rem;
    }
    .academy-track-hero-meta {
        gap: 0.4rem !important;
        font-size: 0.8rem;
    }
    .academy-track-hero-meta span {
        padding: 0.2rem 0.55rem;
        white-space: nowrap;
    }
}

/* The hero has a dark image background regardless of color theme, so all
   text inside it must be light. Override Bootstrap's theme-driven defaults. */
.academy-track-hero h1 {
    color: #fff;
}

.academy-track-hero-tagline {
    max-width: 720px;
    font-size: 1.05rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.85) !important;
}

.academy-track-hero .academy-breadcrumb,
.academy-track-hero .academy-breadcrumb a {
    color: rgba(255, 255, 255, 0.75);
}

.academy-track-hero .academy-breadcrumb a {
    color: var(--track-accent, #3ED389);
}

.academy-track-hero-meta {
    color: rgba(255, 255, 255, 0.85) !important;
}

.academy-track-hero-meta span {
    background: rgba(0, 0, 0, 0.45);
    color: rgba(255, 255, 255, 0.95);
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    backdrop-filter: blur(2px);
}

/* Coming-soon pill — uses the track accent color so it stands out
   against the other dark pills, but inherits the same padding/border-radius
   from .academy-track-hero-meta span so it aligns vertically with them. */
.academy-coming-soon {
    background: var(--track-accent, var(--bs-primary)) !important;
    color: #000 !important;
    font-weight: 600;
    backdrop-filter: none !important;
}

.academy-lesson-link {
    background: var(--bs-tertiary-bg);
    color: inherit;
    transition: background 0.15s, transform 0.15s;
}

.academy-lesson-link:hover {
    background: var(--bs-secondary-bg);
    transform: translateX(2px);
}

.academy-lesson-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--track-accent, var(--bs-primary));
    color: var(--bs-dark);
    font-weight: 700;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.academy-lesson-circle-muted {
    background: var(--bs-secondary-bg);
    color: var(--bs-secondary-color);
    border: 1px solid var(--bs-border-color);
}

.academy-section-label {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--track-accent, var(--bs-primary));
    border-bottom: 1px solid var(--bs-border-color);
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
}

.academy-track-chip {
    display: inline-block;
    padding: 0.15rem 0.75rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    background: var(--bs-primary-bg-subtle);
    color: var(--bs-primary);
    margin-right: 0.5rem;
}

.academy-lesson-body {
    font-size: 1rem;
    line-height: 1.7;
    max-width: 720px;
}

.academy-lesson-body table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.25rem 0;
    font-size: 0.9rem;
}

.academy-lesson-body th,
.academy-lesson-body td {
    padding: 0.55rem 0.9rem;
    border: 1px solid var(--bs-border-color);
    text-align: left;
    vertical-align: top;
}

.academy-lesson-body th {
    background: var(--bs-tertiary-bg);
    font-weight: 600;
    white-space: nowrap;
}

.academy-lesson-body td:first-child {
    white-space: nowrap;
    font-weight: 500;
}

.academy-lesson-body tr:nth-child(even) td {
    background: var(--bs-secondary-bg);
}

.academy-callout {
    margin: 1.5rem 0;
    padding: 0.85rem 1.1rem;
    border-radius: var(--bs-border-radius);
    border-left: 4px solid var(--bs-info);
    background: var(--bs-info-bg-subtle);
}

.academy-callout > :first-child {
    margin-top: 0;
}

.academy-callout > :last-child {
    margin-bottom: 0;
}

.academy-callout-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.35rem;
    color: var(--bs-info-text-emphasis, var(--bs-info));
}

.academy-callout--warning {
    border-left-color: var(--bs-warning);
    background: var(--bs-warning-bg-subtle);
}

.academy-callout--warning .academy-callout-label {
    color: var(--bs-warning-text-emphasis, var(--bs-warning));
}

.academy-self-check {
    background: var(--bs-tertiary-bg);
    border-left: 4px solid var(--bs-primary);
}

.academy-self-check summary {
    cursor: pointer;
    font-weight: 600;
}

.academy-lesson-nav a {
    text-decoration: none;
    color: var(--bs-primary);
}

.academy-lesson-row-coming-soon {
    background: var(--bs-tertiary-bg);
    border-radius: var(--bs-border-radius);
    opacity: 0.5;
    cursor: default;
}