/* ==========================================================================
   ABOUT.CSS
   Styles specific to the Nodra About page (/about/).

   This folder is self-contained, same as /academy/: it keeps its own
   copies of variables.css and components.css rather than referencing
   the root's, and its own translations/ folder. Nothing here is shared
   with or imported from the root Nodra landing page.

   Reuse-first check performed before writing this file:
   - .navbar, .hero*, .footer*, .tag, .card, .glow, .reveal, .btn*,
     .mission/.mission-box, .section-title, .section-description all
     already exist in this folder's own components.css and are reused
     as-is.
   - Nothing here duplicates the Academy's .next-grid/.next-card: this
     file defines its own .principle-card and .roadmap-item because
     their content shape (a title + one short paragraph, no button, no
     eyebrow) doesn't match .next-card closely enough to force a reuse.
   ========================================================================== */

/* ==========================================================================
   1. SECTION SHELL (mission / principles / roadmap share one rhythm)
   ========================================================================== */

.about-section{
    padding:96px 0;
}

.about-section__header{
    max-width:640px;
    margin:0 0 48px;
}

/* ==========================================================================
   2. PRINCIPLES GRID
   ========================================================================== */

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

.principle-card{
    padding:32px;
}

.principle-card h3{
    font-family:var(--font-heading);
    text-transform:uppercase;
    font-size:20px;
    margin-bottom:12px;
}

.principle-card p{
    color:var(--text-secondary);
    line-height:1.7;
    font-size:15px;
}

/* ==========================================================================
   3. ROADMAP LIST
   ========================================================================== */

.roadmap-list{
    display:flex;
    flex-direction:column;
    gap:16px;
}

.roadmap-item{
    padding:0;
    overflow:hidden;
}

.roadmap-item__header{
    appearance:none;
    -webkit-appearance:none;
    -webkit-tap-highlight-color:transparent;
    touch-action:manipulation;
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    padding:28px 32px;
    background:none;
    border:none;
    outline:none;
    cursor:pointer;
    text-align:left;
    font-family:inherit;
    color:inherit;
}

.roadmap-item__header:focus{
    outline:none;
}

.roadmap-item__header:focus-visible{
    box-shadow:inset 0 0 0 2px var(--primary);
    border-radius:16px;
}

.roadmap-item__body h3{
    font-family:var(--font-heading);
    text-transform:uppercase;
    font-size:18px;
    margin-bottom:8px;
}

.roadmap-item__body p{
    color:var(--text-secondary);
    line-height:1.7;
    font-size:15px;
    max-width:56ch;
}

.roadmap-item__chevron{
    flex-shrink:0;
    font-size:20px;
    color:var(--text-muted);
    transition:transform .25s ease;
}

.roadmap-item.is-open .roadmap-item__chevron{
    transform:rotate(180deg);
}

.roadmap-item__details{
    max-height:0;
    overflow:hidden;
    transition:max-height .35s ease;
}

.roadmap-item.is-open .roadmap-item__details{
    max-height:1400px;
}

.roadmap-item__details-inner{
    padding:20px 32px 32px;
    border-top:1px solid var(--border);
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));
    gap:24px 40px;
}

.roadmap-detail__title{
    font-family:var(--font-heading);
    text-transform:uppercase;
    font-size:13px;
    letter-spacing:.03em;
    color:var(--primary);
    margin-bottom:6px;
}

.roadmap-detail__text{
    color:var(--text-secondary);
    font-size:14px;
    line-height:1.7;
}

/* ==========================================================================
   4. RESPONSIVE
   ========================================================================== */

@media (max-width: 900px){
    .principles-grid{
        grid-template-columns:1fr;
    }

    .roadmap-item__header{
        flex-direction:column;
        align-items:flex-start;
        gap:12px;
    }
}