/* ============================================================
   lesson.css  --  Prime Learning Educational Series
   Styles shared by ALL lesson pages (not the index)
   Requires shared.css to be loaded first
   ============================================================ */

/* ---------- BRAND BAR (push below taller lesson nav) ---------- */
.pl-brand-bar { top:120px; }

/* ---------- HERO (full-viewport lesson hero) ---------- */
/* Nav-brand stacks logo (66px) + gap (6px) + series row (~20px) + padding (28px) ≈ 120px
   Brand bar sits below that (~50px). Total fixed header ≈ 170px. Padding clears it. */
.hero { position:relative; min-height:100vh; display:flex; flex-direction:column; align-items:center; text-align:center; padding:220px var(--pad-x) 80px; overflow:hidden; }
.hero-grid { position:absolute; inset:0; background-image:linear-gradient(rgba(3,136,166,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(3,136,166,.06) 1px,transparent 1px); background-size:56px 56px; pointer-events:none; }
.hero-glow { position:absolute; inset:0; background:radial-gradient(ellipse 70% 50% at 50% 0%,rgba(3,136,166,.2) 0%,transparent 65%),radial-gradient(ellipse 50% 40% at 80% 100%,rgba(94,219,160,.06) 0%,transparent 60%); pointer-events:none; }
.ghost-num { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-family:"Lora",serif; font-size:clamp(260px,35vw,420px); font-weight:800; color:rgba(3,136,166,.04); line-height:1; pointer-events:none; user-select:none; letter-spacing:-.05em; z-index:0; }
.hero-inner { position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; text-align:center; margin-top:auto; margin-bottom:auto; }
.series-badge { display:inline-flex; align-items:center; gap:8px; background:var(--blue-dim); border:1px solid rgba(3,136,166,.35); border-radius:30px; padding:6px 16px; font-family:"DM Mono",monospace; font-size:10px; letter-spacing:.2em; color:var(--blue-light); text-transform:uppercase; margin-bottom:28px; opacity:0; animation:fadeUp .7s ease .2s forwards; }
.series-badge::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--blue-light); animation:pulse 2s ease-in-out infinite; }
.hero h1 { font-family:"Lora",serif; font-size:clamp(1.8rem,4vw,3.2rem); font-weight:400; line-height:1.15; max-width:860px; letter-spacing:-.01em; opacity:0; animation:fadeUp .8s ease .4s forwards; }
.hero h1 .accent { color:var(--blue); display:block; }
.hero-sub { margin-top:24px; font-size:1.15rem; font-weight:300; color:var(--white-dim); max-width:580px; opacity:0; animation:fadeUp .8s ease .6s forwards; }

.scroll-cue { margin-top:52px; display:flex; flex-direction:column; align-items:center; gap:8px; opacity:0; animation:fadeUp .8s ease 1.1s forwards; }
.scroll-cue span { font-family:"DM Mono",monospace; font-size:10px; letter-spacing:.2em; color:var(--white-dim); text-transform:uppercase; }
.scroll-line { width:1px; height:48px; background:linear-gradient(to bottom,var(--blue),transparent); animation:scrollPulse 2s ease-in-out infinite; }

/* ---------- LEARNING OBJECTIVES ---------- */
.learning-objectives { max-width:var(--content-max); margin:0 auto; padding:0 var(--pad-x); }
.learning-objectives-inner { background:var(--blue-dim); border:1px solid rgba(3,136,166,.25); border-radius:16px; padding:36px var(--pad-x-sm); margin-top:-40px; position:relative; z-index:2; }
.learning-objectives .lo-title { font-family:"DM Mono",monospace; font-size:10px; letter-spacing:.3em; color:var(--blue); text-transform:uppercase; margin-bottom:16px; }
.learning-objectives ul { list-style:none; padding:0; display:flex; flex-direction:column; gap:10px; }
.learning-objectives li { font-size:.95rem; color:var(--white-dim); padding-left:20px; position:relative; }
.learning-objectives li::before { content:"\2192"; position:absolute; left:0; color:var(--blue-light); }
.learning-objectives .lo-meta { display:flex; gap:24px; margin-top:20px; padding-top:16px; border-top:1px solid rgba(3,136,166,.15); }
.learning-objectives .lo-meta span { font-family:"DM Mono",monospace; font-size:10px; letter-spacing:.1em; color:var(--blue-light); text-transform:uppercase; }

/* ---------- SHARED SECTIONS (lesson body) ---------- */
.section { max-width:var(--content-max); margin:0 auto; padding:100px var(--pad-x); }
.section-label { font-family:"DM Mono",monospace; font-size:10px; letter-spacing:.3em; color:var(--blue); text-transform:uppercase; margin-bottom:16px; }
.section h2 { font-family:"Lora",serif; font-size:clamp(1.8rem,4vw,3rem); font-weight:400; line-height:1.15; margin-bottom:24px; letter-spacing:-.01em; }
.section p { font-size:clamp(0.92rem, 0.8vw + 0.5rem, 1.08rem); color:var(--white-dim); max-width:780px; margin-bottom:16px; }
.alt-section { background:var(--navy-mid); padding:100px 0; }
.alt-inner { max-width:var(--content-max); margin:0 auto; padding:0 var(--pad-x); }
.highlight-box { background:var(--blue-dim); border:1px solid rgba(3,136,166,.25); border-left:4px solid var(--blue); border-radius:0 12px 12px 0; padding:24px 28px; margin:32px 0; font-size:1.05rem; font-style:italic; color:var(--white); line-height:1.75; }

/* ---------- STATS BAR ---------- */
.stats-bar { background:var(--navy-mid); padding:60px var(--pad-x); }
.stats-inner { max-width:var(--content-max); margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr); gap:24px; text-align:center; }
.stat-num { font-family:"Lora",serif; font-size:clamp(2rem,4vw,3rem); color:var(--blue-light); font-weight:700; line-height:1; margin-bottom:8px; }
.stat-label { font-size:.85rem; color:var(--white-dim); font-weight:300; line-height:1.45; }

/* ---------- TABLE SCROLL WRAPPER (mobile) ---------- */
.table-scroll-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; margin-top:52px; }
.table-scroll-wrap .compare-table { margin-top:0; min-width:540px; }

/* ---------- RESPONSIVE  --  lesson layouts ---------- */
@media(max-width:1024px){
  .pl-brand-bar { top:95px; }
  .hero { padding:160px var(--pad-x) 60px; }
  .section { padding:72px var(--pad-x); }
  .alt-section { padding:72px 0; }
  .stats-inner { grid-template-columns:1fr 1fr; }
  .learning-objectives .lo-meta { flex-wrap:wrap; gap:16px; }
}

@media(max-width:600px){
  .hero { min-height:auto; }
  .stats-inner { grid-template-columns:1fr; }
  .learning-objectives .lo-meta { flex-direction:column; gap:10px; }
}