/* ==========================================================
   Shared styles for the course landing pages
   (coaching-class/<course>-sitarganj/). Each page adds its
   own stylesheet for its hero art and interactive section.
   ========================================================== */

/* ---------- Hero ---------- */
.course-hero h1{ font-size: clamp(2.2rem, 1.5rem + 3vw, 3.4rem); line-height:1.08; }
.course-hero-lead{ color:#FBE6D4; max-width:540px; font-size:1.05rem; }
.course-hero-lead strong{ color:#fff; }
.course-hero-stats{ display:flex; flex-wrap:wrap; gap:1.8rem; margin-top:2rem; }
.course-hero-stats b{ display:block; font-family: var(--font-display); font-size:1.7rem; color:#fff; line-height:1.1; }
.course-hero-stats span{ font-size:.78rem; font-weight:600; color:#FBE6D4; }

/* ---------- Intro ---------- */
.course-hindi{ border-left:3px solid var(--coaching-accent); padding-left:1rem; font-size:.95rem; }

/* ---------- Learning journey ---------- */
.journey-step{
  background:#fff; border:1px solid var(--line); border-radius: var(--radius-md); padding:1.2rem 1rem; height:100%;
  box-shadow: var(--shadow-soft); text-align:center; transition: transform .3s ease, box-shadow .3s ease;
}
.journey-step:hover{ transform: translateY(-5px); box-shadow: var(--shadow-lift); }
.journey-num{
  display:inline-flex; align-items:center; justify-content:center; width:2.4rem; height:2.4rem; border-radius:50%;
  background: var(--coaching-accent); color:#fff; font-family: var(--font-display); font-weight:800; margin-bottom:.7rem;
  box-shadow: 0 0 0 6px rgba(217,114,44,.15);
}
.journey-step h6{ font-family: var(--font-display); color: var(--navy); font-weight:700; }
.journey-step p{ font-size:.82rem; line-height:1.5; }

/* Optional animated variant: wrap the steps in .journey.reveal with a .journey-line path behind them */
.journey{ position:relative; }
.journey-line{ position:absolute; left:0; right:0; top:-6px; width:100%; height:60px; z-index:0; }
.journey-path{
  fill:none; stroke: var(--coaching-accent); stroke-width:3; stroke-dasharray: 8 10; opacity:.5;
  stroke-dashoffset: 400; transition: stroke-dashoffset 3s ease;
}
.journey.is-visible .journey-path{ stroke-dashoffset: 0; }
.journey-steps{ position:relative; z-index:1; }
.journey .journey-step{ opacity:0; transform: translateY(20px); }
.journey.is-visible .journey-step{ opacity:1; transform:none; transition: opacity .5s ease calc(var(--i) * 150ms), transform .5s ease calc(var(--i) * 150ms), box-shadow .3s ease; }
.journey.is-visible .journey-step:hover{ transform: translateY(-5px); box-shadow: var(--shadow-lift); }

/* ---------- Near you ---------- */
/* Several cards stacked in one column: drop card-soft's height:100% so they don't overflow */
.stack-cards > .card-soft{ height:auto; }
.area-tags{ display:flex; flex-wrap:wrap; gap:.4rem; }
.area-tags span{ background: var(--paper-dim); color: var(--coaching-accent); font-weight:700; font-size:.78rem; padding:.3rem .75rem; border-radius:999px; }

/* ---------- Shared bits for the games ---------- */
.game-card{
  background:#fff; border-radius: var(--radius-lg); border:1px solid var(--line); box-shadow: var(--shadow-soft);
  padding:1.6rem; height:100%;
}
.pill-btn{
  border:1.5px solid var(--line); background:#fff; border-radius:999px; padding:.3rem .85rem; font-size:.8rem; font-weight:700;
  color: var(--slate); transition: .2s;
}
.pill-btn:hover{ border-color: var(--coaching-accent); color: var(--coaching-accent); }
.pill-btn.is-active{ background: var(--coaching-accent); border-color: var(--coaching-accent); color:#fff; }
.game-msg{ font-size:.88rem; font-weight:600; min-height:1.4em; }
.game-msg.ok{ color: var(--study-accent); }
.game-msg.err{ color:#B8422E; }