/* Class page (classes/show) and subject page (subjects/show): hero, cards, "other subjects".
   The animated background is partials/edu-bg, kept inside .sp-stage so it never covers the
   dashboard sidebar for logged-in students. */
.sp-stage{position:relative;isolation:isolate;min-height:calc(100vh - 140px);}
.sp-stage>.edu-bg{position:absolute;z-index:-1;-webkit-mask-image:linear-gradient(#000 80%,transparent);mask-image:linear-gradient(#000 80%,transparent);}
.sp-stage .crp-page{position:relative;background:transparent;}

.sp-crumb{font-size:13px;color:var(--muted,#64748b);margin-bottom:14px;}
.sp-crumb a{color:var(--blue,#2563eb);font-weight:600;}

/* hero */
.sp-hero{position:relative;overflow:hidden;border-radius:22px;padding:26px 28px;color:#fff;margin-bottom:22px;
  background:linear-gradient(135deg,var(--c,#2563eb) 0%,color-mix(in srgb,var(--c,#2563eb) 55%,#1e1b4b) 100%);
  box-shadow:0 18px 40px -18px color-mix(in srgb,var(--c,#2563eb) 70%,transparent);
  animation:sp-rise .6s ease both;}
.sp-hero::before,.sp-hero::after{content:"";position:absolute;border-radius:50%;background:rgba(255,255,255,.12);pointer-events:none;}
.sp-hero::before{width:260px;height:260px;right:-70px;top:-90px;animation:sp-float 9s ease-in-out infinite alternate;}
.sp-hero::after{width:150px;height:150px;right:120px;bottom:-80px;animation:sp-float 11s ease-in-out infinite alternate-reverse;}
.sp-hero-top{display:flex;align-items:center;gap:16px;position:relative;z-index:1;}
.sp-hero-ic{width:62px;height:62px;border-radius:18px;background:rgba(255,255,255,.18);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;font-size:30px;flex-shrink:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.25);animation:sp-bob 4s ease-in-out infinite;}
.sp-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px;}
.sp-chip{font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:3px 10px;border-radius:99px;background:rgba(255,255,255,.18);color:#fff;}
.sp-hero h1{font-size:30px;line-height:1.15;font-weight:800;color:#fff;margin:0;}
.sp-hero p.sp-lead{position:relative;z-index:1;margin:12px 0 0;font-size:14.5px;line-height:1.55;color:rgba(255,255,255,.9);max-width:620px;}
.sp-stats{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:10px;margin-top:18px;}
.sp-stat{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);border-radius:14px;padding:9px 14px;min-width:96px;}
.sp-stat b{display:block;font-size:20px;font-weight:800;line-height:1.1;}
.sp-stat span{font-size:11.5px;color:rgba(255,255,255,.85);}
.sp-cta{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:10px;margin-top:18px;}
.sp-btn{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:700;padding:10px 16px;border-radius:12px;text-decoration:none;transition:transform .15s ease,box-shadow .15s ease;}
.sp-btn:hover{transform:translateY(-2px);}
.sp-btn-main{background:#fff;color:var(--c,#2563eb);box-shadow:0 8px 18px -8px rgba(0,0,0,.35);}
.sp-btn-ghost{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.35);}

/* section headings */
.sp-h2{display:flex;align-items:center;gap:10px;font-size:18px;font-weight:800;color:var(--ink,#0f172a);margin:26px 0 12px;}
.sp-h2 .sp-h2-ic{width:32px;height:32px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:var(--cb,#eff4ff);color:var(--c,#2563eb);font-size:17px;}
.sp-h2 small{font-size:12.5px;font-weight:600;color:var(--muted,#64748b);margin-left:auto;}
.sp-sub{font-size:13.5px;color:var(--muted,#64748b);margin:-6px 0 14px;line-height:1.5;}

/* subject cards (class page + "other subjects") */
.sp-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;}
.sp-card{position:relative;display:flex;flex-direction:column;gap:12px;background:rgba(255,255,255,.92);backdrop-filter:blur(6px);
  border:1px solid var(--border,#e5e7eb);border-radius:18px;padding:18px;text-decoration:none;color:inherit;overflow:hidden;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;animation:sp-rise .5s ease both;animation-delay:calc(var(--i,0) * 60ms);}
.sp-card::before{content:"";position:absolute;left:0;top:0;right:0;height:4px;background:linear-gradient(90deg,var(--c),color-mix(in srgb,var(--c) 40%,#fff));}
.sp-card:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--c) 45%,#fff);box-shadow:0 16px 32px -16px color-mix(in srgb,var(--c) 55%,transparent);}
.sp-card-top{display:flex;align-items:center;gap:12px;}
.sp-card-ic{width:46px;height:46px;border-radius:14px;background:var(--cb);color:var(--c);display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;transition:transform .25s ease;}
.sp-card:hover .sp-card-ic{transform:rotate(-8deg) scale(1.08);}
.sp-card h3{font-size:15px;font-weight:800;color:var(--ink,#0f172a);line-height:1.3;margin:0;overflow-wrap:anywhere;}
.sp-medium{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;padding:2px 8px;border-radius:99px;display:inline-block;margin-top:4px;background:#eff4ff;color:#2563eb;}
.sp-medium.hindi{background:#fee2e2;color:#b91c1c;}
.sp-meta{display:flex;flex-wrap:wrap;gap:6px;}
.sp-meta span{font-size:11.5px;font-weight:600;color:#334155;background:#f1f5f9;border-radius:8px;padding:3px 8px;display:inline-flex;align-items:center;gap:4px;}
.sp-go{margin-top:auto;font-size:12.5px;font-weight:800;color:var(--c);display:inline-flex;align-items:center;gap:6px;}
.sp-card:hover .sp-go i{transform:translateX(3px);}
.sp-go i{transition:transform .2s ease;}
.sp-soon{opacity:.75;}
.sp-soon .sp-go{color:#64748b;}

/* chapter rows (subject page) */
.sp-ch{display:flex;align-items:center;gap:14px;background:rgba(255,255,255,.94);backdrop-filter:blur(6px);border:1px solid var(--border,#e5e7eb);border-radius:16px;
  padding:14px 18px;margin-bottom:10px;text-decoration:none;color:inherit;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
  animation:sp-rise .45s ease both;animation-delay:calc(var(--i,0) * 45ms);}
.sp-ch:hover{transform:translateX(4px);border-color:color-mix(in srgb,var(--c) 45%,#fff);box-shadow:0 12px 26px -16px color-mix(in srgb,var(--c) 60%,transparent);}
.sp-ch-num{width:42px;height:42px;border-radius:12px;background:var(--cb);color:var(--c);font-weight:800;font-size:15px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.sp-ch-info{flex:1;min-width:0;}
.sp-ch-info h3{font-size:15px;font-weight:700;color:var(--ink,#0f172a);margin:0 0 5px;overflow-wrap:anywhere;}
.sp-ch-info p{font-size:12.5px;color:var(--muted,#64748b);margin:0 0 6px;}
.sp-badge{font-size:10.5px;font-weight:800;text-transform:uppercase;padding:4px 10px;border-radius:999px;flex-shrink:0;}
.sp-badge.free{background:#dcfce7;color:#166534;}
.sp-badge.premium{background:#fef3c7;color:#b45309;}
.sp-ch-go{color:#94a3b8;font-size:18px;flex-shrink:0;transition:transform .2s ease,color .2s ease;}
.sp-ch:hover .sp-ch-go{color:var(--c);transform:translateX(3px);}

/* PYQ strip */
.sp-pyq{display:flex;align-items:center;gap:14px;text-decoration:none;background:linear-gradient(135deg,#fef2f2,#fff7ed);border:1px solid #fecaca;border-radius:16px;padding:14px 18px;margin-bottom:6px;transition:transform .2s ease,box-shadow .2s ease;}
.sp-pyq:hover{transform:translateY(-2px);box-shadow:0 10px 24px -10px rgba(220,38,38,.25);}
.sp-pyq .sp-card-ic{--c:#dc2626;--cb:#fff;box-shadow:0 4px 12px rgba(0,0,0,.06);}
.sp-pyq b{display:block;font-size:14.5px;color:var(--ink,#0f172a);}
.sp-pyq small{font-size:12.5px;color:var(--muted,#64748b);}
.sp-pyq .sp-go{--c:#dc2626;margin-left:auto;white-space:nowrap;}

/* "complete your class" banner */
.sp-more{position:relative;overflow:hidden;border-radius:20px;padding:20px 22px;margin-top:28px;
  background:linear-gradient(135deg,#eef2ff,#fdf4ff 55%,#fff7ed);border:1px solid #e0e7ff;}
.sp-more .sp-h2{margin-top:0;}
.sp-more::after{content:"";position:absolute;width:180px;height:180px;border-radius:50%;right:-60px;top:-70px;background:radial-gradient(circle,#c7d2fe 0%,transparent 70%);opacity:.8;animation:sp-float 10s ease-in-out infinite alternate;pointer-events:none;}
.sp-more .sp-grid{position:relative;z-index:1;}

/* quick tools */
.sp-tools{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:18px;}
.sp-tool{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.92);border:1px solid var(--border,#e5e7eb);border-radius:16px;padding:14px;text-decoration:none;color:inherit;transition:transform .2s ease,box-shadow .2s ease;}
.sp-tool:hover{transform:translateY(-3px);box-shadow:0 12px 24px -14px rgba(15,23,42,.3);}
.sp-tool b{display:block;font-size:13.5px;color:var(--ink,#0f172a);}
.sp-tool small{font-size:12px;color:var(--muted,#64748b);}
.sp-tool .sp-card-ic{width:40px;height:40px;font-size:19px;border-radius:12px;}

.sp-empty{text-align:center;color:var(--muted,#64748b);padding:36px 20px;background:rgba(255,255,255,.9);border:1px dashed var(--border,#e5e7eb);border-radius:16px;}

@keyframes sp-rise{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:none;}}
@keyframes sp-float{from{transform:translate(0,0);}to{transform:translate(-18px,14px);}}
@keyframes sp-bob{0%,100%{transform:translateY(0);}50%{transform:translateY(-4px);}}

@media(max-width:1100px){.sp-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:640px){
  .crp-page{padding:20px 16px 60px;}
  .sp-hero{padding:20px 18px;border-radius:18px;}
  .sp-hero h1{font-size:24px;}
  .sp-hero-ic{width:52px;height:52px;font-size:25px;border-radius:15px;}
  .sp-stat{min-width:0;flex:1 1 40%;padding:8px 10px;}
  .sp-stat b{font-size:17px;}
  .sp-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
  .sp-card{padding:14px 12px;gap:10px;border-radius:16px;}
  .sp-card-ic{width:40px;height:40px;font-size:19px;}
  .sp-card h3{font-size:14px;overflow-wrap:normal;word-break:normal;hyphens:auto;}
  .sp-card-top{flex-direction:column;align-items:flex-start;gap:8px;}
  .sp-tools{grid-template-columns:1fr;}
  .sp-h2 small{display:none;}
  .sp-ch{padding:12px 12px;gap:10px;}
  .sp-ch-num{width:36px;height:36px;font-size:14px;}
  .sp-ch-go{display:none;}
  .sp-pyq{flex-wrap:wrap;}
  .sp-pyq .sp-go{margin-left:0;width:100%;}
}
@media(max-width:380px){.sp-grid{grid-template-columns:1fr;}}
@media (prefers-reduced-motion: reduce){
  .sp-hero,.sp-card,.sp-ch,.sp-hero-ic,.sp-hero::before,.sp-hero::after,.sp-more::after{animation:none !important;}
}