/* ============================================================
   Shared editorial landing system for verticals
   (/programming, /exams, /programs) — thin, not catalogues.
   Reuses design-system tokens + brand purple overrides.
   ============================================================ */
.led { --lp:#5E256D; --lp2:#7D2F91; --pink:#D170E1; --gold:#E8B72E;
       --ink:var(--color-gray-900); --muted:var(--color-gray-600);
       --line:var(--color-gray-200); --soft:#F6EFF8; }
.led *{ box-sizing:border-box }
.led { color:var(--ink); font-family:Nunito, system-ui, -apple-system, sans-serif;
       font-size:var(--font-size-base); line-height:1.5; }
.led .container{ max-width:1280px; margin:auto; padding:var(--space-6) 4.5% var(--space-12) }

/* thin hero */
.led .hero{ position:relative; overflow:hidden; background:linear-gradient(120deg,#fff,#faf7fb);
            border:1px solid var(--line); border-radius:24px; padding:var(--space-10) 5.5%;
            display:flex; align-items:center; justify-content:space-between; gap:var(--space-8); flex-wrap:wrap }
.led .hero:after{ content:""; position:absolute; width:300px; height:300px; border-radius:50%;
                  background:#efd9f4; right:-140px; top:-150px; opacity:.45 }
.led .hero > *{ position:relative; z-index:1 }
.led .kicker{ font-size:var(--font-size-xs); letter-spacing:1.5px; color:var(--lp); font-weight:900;
              text-transform:uppercase }
.led .hero h1{ font-family:var(--font-display); font-size:var(--font-size-4xl); line-height:1.08;
               letter-spacing:-1.4px; margin:var(--space-2) 0 var(--space-3); max-width:620px; color:var(--ink) }
.led .hero h1 span{ color:var(--lp2) }
.led .hero p{ font-size:var(--font-size-base); color:var(--muted); line-height:1.7; max-width:600px; margin:0 0 var(--space-4) }
.led .hero-cta{ display:inline-flex; align-items:center; gap:var(--space-2); background:var(--lp); color:#fff;
                padding:var(--space-3) var(--space-5); border-radius:12px; font-weight:800;
                font-size:var(--font-size-base); text-decoration:none; white-space:nowrap }
.led .hero-cta:hover{ background:var(--lp2) }
.led .hero-side{ flex:0 0 300px; background:#fff; border:1px solid var(--line); border-radius:18px;
                 padding:var(--space-5); box-shadow:0 18px 45px rgba(48,25,57,.1) }
.led .hero-side .big{ font-family:var(--font-display); font-size:var(--font-size-3xl); font-weight:800;
                      color:var(--lp) }
.led .hero-side .big small{ display:block; font-size:var(--font-size-sm); color:var(--muted); font-weight:700; margin-top:var(--space-1) }
.led .hero-side .mini{ font-size:var(--font-size-sm); color:var(--muted); margin-top:var(--space-3); line-height:1.5 }

/* positioning strip */
.led .strip{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-3); margin-top:var(--space-6) }
.led .stripItem{ background:#fff; border:1px solid var(--line); border-radius:15px; padding:var(--space-4) var(--space-4);
                 display:flex; gap:var(--space-3); align-items:flex-start }
.led .stripIco{ height:var(--space-8); width:var(--space-8); border-radius:9px; background:var(--soft); display:grid;
                 place-items:center; color:var(--lp); font-size:var(--font-size-lg); flex:none }
.led .stripItem b{ font-family:var(--font-display); font-size:var(--font-size-base); color:var(--ink); display:block }
.led .stripItem span{ font-size:var(--font-size-sm); color:var(--muted); line-height:1.5; display:block; margin-top:var(--space-1) }

/* section + preview */
.led .section{ margin-top:var(--space-8) }
.led .sectionHead{ display:flex; justify-content:space-between; align-items:end; gap:var(--space-5); margin-bottom:var(--space-4) }
.led .sectionHead .kicker{ margin-bottom:var(--space-1) }
.led .sectionHead h2{ font-family:var(--font-display); font-size:var(--font-size-3xl); margin:0; letter-spacing:-.7px; color:var(--ink) }
.led .sectionHead p{ font-size:var(--font-size-base); color:var(--muted); margin:var(--space-1) 0 0 }
.led .view{ color:var(--lp); font-size:var(--font-size-base); font-weight:850; text-decoration:none; white-space:nowrap }
.led .view:hover{ color:var(--lp2) }

.led .grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-4) }
.led .card{ background:#fff; border:1px solid var(--line); border-radius:17px; overflow:hidden; transition:.2s;
            text-decoration:none; color:inherit; display:flex; flex-direction:column }
.led .card:hover{ transform:translateY(-3px); box-shadow:0 14px 35px rgba(45,25,60,.09) }
.led .thumb{ height:118px; background:linear-gradient(135deg,#f5eaf7,#eee2f2); display:flex; align-items:flex-end;
             padding:var(--space-3); position:relative }
.led .thumbLabel{ font-size:var(--font-size-xs); color:var(--lp); font-weight:900; letter-spacing:.7px }
.led .lvl{ position:absolute; top:var(--space-3); right:var(--space-3); background:#fff; color:var(--lp);
           font-size:var(--font-size-xs); padding:var(--space-1) var(--space-2); border-radius:99px; font-weight:800 }
.led .cardBody{ padding:var(--space-3) var(--space-4); display:flex; flex-direction:column; flex:1 }
.led .cardTag{ font-size:var(--font-size-xs); color:var(--lp); font-weight:900; text-transform:uppercase; letter-spacing:.4px }
.led .cardBody h3{ font-family:var(--font-display); font-size:var(--font-size-lg); margin:var(--space-1) 0; color:var(--ink) }
.led .cardBody p{ font-size:var(--font-size-sm); line-height:1.5; color:var(--muted); margin:0; flex:1 }
.led .cardMeta{ display:flex; justify-content:space-between; align-items:center; margin-top:var(--space-3);
                font-size:var(--font-size-sm); color:var(--muted) }
.led .icoMini{ height:26px; width:26px; border-radius:50%; background:var(--soft); display:grid; place-items:center;
               color:var(--lp); font-weight:900; font-size:var(--font-size-sm) }

/* big CTA back to the hub */
.led .hub{ margin-top:var(--space-8); border-radius:22px; background:linear-gradient(120deg,#241029,#4c1859);
           padding:var(--space-10) 5.5%; color:#fff; display:flex; justify-content:space-between; align-items:center; gap:var(--space-8) }
.led .hub .kicker{ color:#e2b2eb }
.led .hub h2{ font-family:var(--font-display); font-size:var(--font-size-3xl); margin:var(--space-2) 0; color:#fff }
.led .hub p{ font-size:var(--font-size-base); color:#d9c9df; max-width:620px; line-height:1.6; margin:0 }
.led .hub a{ border:0; background:var(--gold); padding:var(--space-3) var(--space-5); border-radius:12px; font-weight:900;
             color:#30230a; text-decoration:none; white-space:nowrap; font-size:var(--font-size-base) }

@media(max-width:900px){ .led .strip{ grid-template-columns:1fr } .led .grid{ grid-template-columns:1fr 1fr } }
@media(max-width:640px){
  .led .hero{ padding:var(--space-8) var(--space-5) }
  .led .hero-side{ flex:1 1 100% }
  .led .grid{ grid-template-columns:1fr }
  .led .hub{ display:block; padding:var(--space-8) var(--space-5) }
  .led .hub a{ display:inline-block; margin-top:var(--space-3) }
}