/* ============================================
   SUB-PAGE (detail) STYLES
   Shared across all stage / topic pages
   ============================================ */

/* Page hero (dark banner below the fixed nav) */
.page-hero{position:relative;padding:calc(var(--nav-height) + var(--spacing-lg)) 0 var(--spacing-lg);background:linear-gradient(155deg,#1a1a2e 0%,#16213e 40%,#1a2745 100%);color:#fff;overflow:hidden}
.page-hero::after{content:'';position:absolute;bottom:-45%;right:-10%;width:480px;height:480px;background:radial-gradient(circle,rgba(184,148,75,0.12) 0%,transparent 70%);border-radius:50%;pointer-events:none}
.page-hero .container{position:relative;z-index:1}
.breadcrumb{display:flex;align-items:center;flex-wrap:wrap;gap:0.5rem;font-size:0.72rem;letter-spacing:0.08em;text-transform:uppercase;color:rgba(255,255,255,0.45);margin-bottom:var(--spacing-md)}
.breadcrumb a{color:var(--color-accent-light)}
.breadcrumb a:hover{color:#fff}
.breadcrumb .sep{opacity:0.4}
.page-stage-badge{display:inline-block;padding:0.35rem 1rem;border-radius:4px;font-size:0.7rem;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;border:1px solid rgba(184,148,75,0.5);color:var(--color-accent-light);margin-bottom:var(--spacing-sm)}
.page-hero-title{font-family:var(--font-display);font-size:clamp(2.2rem,5vw,3.4rem);font-weight:600;letter-spacing:0.03em;line-height:1.1;margin-bottom:var(--spacing-sm)}
.page-hero-sub{font-size:0.95rem;font-weight:300;color:rgba(255,255,255,0.6);line-height:1.8;max-width:720px}

/* Body layout */
.page-body{padding:var(--spacing-xl) 0;background:var(--color-bg)}
.page-body .container{max-width:960px}
.page-intro{font-size:1.05rem;line-height:1.9;color:var(--color-text);margin-bottom:var(--spacing-lg);max-width:860px}
.page-intro strong{color:var(--color-primary)}

/* Prose (long-form text) */
.prose{font-size:0.95rem;line-height:1.95;color:var(--color-text)}
.prose p{margin-bottom:var(--spacing-sm)}
.prose h2{font-size:1.8rem;margin:var(--spacing-lg) 0 var(--spacing-sm)}
.prose h3{font-size:1.3rem;margin:var(--spacing-md) 0 var(--spacing-sm)}
.prose ul,.prose ol{margin:0 0 var(--spacing-sm) 1.4rem;color:var(--color-text-light)}
.prose ul{list-style:disc}
.prose ol{list-style:decimal}
.prose li{margin-bottom:0.45rem}
.prose strong{color:var(--color-primary)}
.prose a{color:var(--color-accent);border-bottom:1px solid var(--color-accent-medium)}
.prose a:hover{color:var(--color-primary);border-bottom-color:var(--color-primary)}

/* Topic (detail) cards */
.topic{background:var(--color-surface);border:1px solid var(--color-border-light);border-radius:10px;padding:var(--spacing-md);margin-bottom:var(--spacing-md);transition:border-color var(--transition)}
.topic:hover{border-color:var(--color-accent-medium)}
.topic-head{display:flex;align-items:flex-start;gap:0.8rem;margin-bottom:0.8rem}
.topic-icon{font-size:1.9rem;line-height:1}
.topic-title{font-family:var(--font-display);font-size:1.45rem;font-weight:600;color:var(--color-primary)}
.topic-sub{font-size:0.74rem;color:var(--color-accent);letter-spacing:0.06em;text-transform:uppercase;margin-top:0.15rem}
.topic-body p{font-size:0.9rem;color:var(--color-text-light);line-height:1.85;margin-bottom:0.7rem}
.topic-body strong{color:var(--color-primary)}
.topic-cols{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-md);margin-top:var(--spacing-sm)}
.topic-col h5{font-family:var(--font-body);font-weight:600;font-size:0.72rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--color-accent);margin-bottom:0.5rem}
.topic-col ul{list-style:none;margin:0}
.topic-col li{font-size:0.83rem;color:var(--color-text-light);line-height:1.6;padding-left:1.1rem;position:relative;margin-bottom:0.4rem}
.topic-col li::before{content:'—';position:absolute;left:0;color:var(--color-accent)}
.topic-tags{display:flex;flex-wrap:wrap;gap:0.3rem;margin-top:var(--spacing-sm)}
.topic-tags .need-tag{background:var(--color-accent-dim);color:var(--color-accent);border-radius:3px;padding:0.15rem 0.55rem;font-size:0.68rem}

/* Callout boxes */
.note-box{margin:var(--spacing-md) 0;padding:var(--spacing-sm) var(--spacing-md);border-radius:8px;font-size:0.85rem;line-height:1.7;border-left:3px solid var(--color-accent);background:var(--color-bg-alt)}
.note-box.warn{border-left-color:#c53030;background:#fdeeee}
.note-box.tip{border-left-color:var(--color-phase1);background:#eaf5f0}
.note-box strong{display:block;margin-bottom:0.2rem;color:var(--color-primary)}
.law-ref{font-size:0.72rem;color:var(--color-text-muted);font-style:italic;margin-top:0.5rem}

/* Bottom CTA band */
.page-cta{margin-top:var(--spacing-lg);background:var(--color-primary);color:#fff;border-radius:12px;padding:var(--spacing-lg);display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-md);flex-wrap:wrap;position:relative;overflow:hidden}
.page-cta::before{content:'';position:absolute;top:-40px;right:-40px;width:180px;height:180px;background:radial-gradient(circle,rgba(184,148,75,0.28) 0%,transparent 70%);border-radius:50%}
.page-cta h3{color:#fff;font-size:1.5rem;position:relative;z-index:1}
.page-cta p{color:rgba(255,255,255,0.7);font-size:0.9rem;position:relative;z-index:1;max-width:520px}
.page-cta .btn-primary{position:relative;z-index:1}

/* Active nav state */
.nav-links a.active{color:var(--color-primary)}
.nav-links a.active::after{width:100%}

/* Simple two-column list used in pitfalls / team */
.spec-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-md);margin-top:var(--spacing-sm)}
@media(max-width:768px){
    .topic-cols,.spec-grid{grid-template-columns:1fr}
    .page-hero{padding-top:calc(var(--nav-height) + var(--spacing-md))}
}