/* ==========================================================================
   ACADEMY.CSS
   Academy-specific styles only.

   ARCHITECTURE NOTE (2026 platform reorganization)
   --------------------------------------------------------------------
   Everything generic that used to live here (.navbar, .hero*, .footer*,
   .tag, .section-title, .section-description, .glow, .reveal, the
   dashboard mockup's outer chrome) was promoted to components.css,
   because Nodra is now an ecosystem with its own Home — those
   primitives are shared by pages that are not part of the Academy.
   See the note at the top of components.css for the full reasoning.

   What remains here is genuinely Academy-only:
   - Learning Paths / tracks and the modules grid
   - the "next" comparison grid, reused both by the Academy landing and
     by lesson content inside modules (e.g. Consensus, Custodial vs
     Non-Custodial) since those pages already load this file

   Note: the dashboard mockup's inner checklist content
   (.dashboard-title/.dashboard-item/.dashboard-divider/
   .dashboard-progress/.dashboard-footer) and the ".mission-box" callout
   were ALSO promoted to components.css, one level further than
   originally planned — both are generic patterns (a checklist card,
   and a centered gradient callout box) with no Academy-specific
   styling, reused identically by the Nodra Home. Only the text content
   differs, and that lives in HTML/i18n, not CSS.
   ========================================================================== */

@import url("./variables.css");
@import url("./components.css");

/* ==========================================================================
   LEARNING PATHS / TRACKS
   ========================================================================== */

.learning-paths{
    padding:140px 0;
}

.paths-header{
    max-width:760px;
    margin:0 auto 72px;
    text-align:center;
}

.paths-header h2{
    font-family:var(--font-heading);
    font-size:64px;
    text-transform:uppercase;
    margin:18px 0;
}

.paths-header p{
    color:var(--text-secondary);
    line-height:1.9;
    font-size:18px;
}

/* ---- Track overview cards (Foundations / DeFi / Security) ---- */

.tracks-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;
    margin-bottom:96px;
}

.track-card{
    display:block;
    background:var(--surface-1);
    border:1px solid var(--border);
    border-radius:24px;
    padding:32px;
    text-decoration:none;
    color:inherit;
    transition:.25s;
}

.track-card:hover{
    transform:translateY(-8px);
    border-color:var(--primary);
}

.track-card__count{
    color:var(--primary);
    text-transform:uppercase;
    letter-spacing:.15em;
    font-size:12px;
    margin-bottom:16px;
}

.track-card h3{
    font-family:var(--font-heading);
    font-size:32px;
    text-transform:uppercase;
    margin-bottom:14px;
}

.track-card p{
    color:var(--text-secondary);
    line-height:1.8;
}

/* ---- Per-track module group ---- */

.path{
    margin-bottom:96px;
}

.path-title{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:36px;
}

.path-title h3{
    font-family:var(--font-heading);
    font-size:42px;
    text-transform:uppercase;
}

.path-progress{
    display:flex;
    gap:12px;
}

.path-progress span{
    width:12px;
    height:12px;
    border-radius:50%;
    border:2px solid var(--primary);
}

.path-progress span.active{
    background:var(--primary);
}

.modules{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:24px;
}

.module{
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    min-height:300px;
    padding:28px;
    background:var(--surface-1);
    border:1px solid var(--border);
    border-radius:24px;
    transition:.25s;
}

.module:hover{
    transform:translateY(-8px);
    border-color:var(--primary);
    box-shadow:var(--shadow-md);
}

.module-number{
    color:var(--primary);
    text-transform:uppercase;
    letter-spacing:.15em;
    font-size:12px;
    margin-bottom:16px;
}

.module h4{
    font-family:var(--font-heading);
    font-size:40px;
    margin-bottom:18px;
    text-transform:uppercase;
}

.module p{
    color:var(--text-secondary);
    line-height:1.8;
}

.module-footer{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-top:32px;
}

.module-meta{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}

.meta{
    border:1px solid var(--border);
    padding:6px 12px;
    border-radius:999px;
    font-size:12px;
    color:var(--text-secondary);
}

.module-link{
    color:var(--primary);
    font-weight:700;
    transition:.25s;
}

.module-link:hover{
    transform:translateX(4px);
}

/* ==========================================================================
   NEXT (comparison grid — reused by the Academy landing and by lesson
   content inside modules, e.g. Consensus, Custodial vs Non-Custodial)
   ========================================================================== */

.next{
    padding:140px 0;
}

.next-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;
}

.next-card{
    background:var(--surface-1);
    border:1px solid var(--border);
    border-radius:24px;
    padding:34px;
    transition:.25s;
}

.next-card:hover{
    transform:translateY(-8px);
    border-color:var(--primary);
}

.next-card h3{
    font-family:var(--font-heading);
    font-size:38px;
    margin-bottom:16px;
}

.next-card p{
    color:var(--text-secondary);
    line-height:1.8;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width:1200px){

    .modules{
        grid-template-columns:repeat(2,1fr);
    }

    .next-grid{
        grid-template-columns:1fr;
    }

    .tracks-grid{
        grid-template-columns:1fr;
    }
}

@media (max-width:768px){

    .modules{
        grid-template-columns:1fr;
    }

    .path-title{
        flex-direction:column;
        align-items:flex-start;
        gap:20px;
    }

    .paths-header h2{
        font-size:44px;
    }

    .mission-box{
        padding:42px 28px;
    }

    .mission-box h2{
        font-size:48px;
    }
}