/* =========================================================
   COURSES PAGE — styles + scroll animations
   Extends style.css design tokens
   ========================================================= */

/* Header/nav styling (including .header-solid) now lives in assets/css/header.css */

/* =========================================================
   PAGE INTRO
   ========================================================= */
.page-intro{
  padding:160px 0 56px;
  background:var(--white);
  text-align:center;
}
.page-intro-inner{
  max-width:720px;
  margin:0 auto;
}
.page-intro-heading{
  font-size:40px;
  font-weight:800;
  letter-spacing:-0.02em;
  color:var(--navy);
  margin:0 0 20px;
}
.page-intro-body{
  font-size:18px;
  line-height:1.75;
  color:var(--muted);
  margin:0;
}

@media (min-width:768px){
  .page-intro{ padding:180px 0 72px; }
  .page-intro-heading{ font-size:52px; }
}

/* =========================================================
   COURSE GRID
   ========================================================= */
.course-grid-section{
  padding:32px 0 80px;
  background:var(--white);
}
.course-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:24px;
}
.course-card{
  position:relative;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-card);
  padding:32px 28px;
  transition: transform 320ms cubic-bezier(.2,.8,.2,1), box-shadow 320ms ease, border-color 320ms ease;
}
.course-card:hover{
  transform:translateY(-6px);
  box-shadow:0 24px 48px -24px rgba(11,31,58,0.35);
  border-color:transparent;
}
.course-number{
  display:inline-block;
  font-size:13px;
  font-weight:800;
  letter-spacing:0.08em;
  color:var(--primary);
  background:var(--sky);
  padding:4px 10px;
  border-radius:999px;
  margin-bottom:16px;
}
.course-card-heading{
  font-size:21px;
  font-weight:800;
  color:var(--navy);
  margin:0 0 12px;
  letter-spacing:-0.01em;
}
.course-card-body{
  font-size:15.5px;
  line-height:1.7;
  color:var(--muted);
  margin:0;
}

@media (min-width:640px){
  .course-grid{ grid-template-columns:1fr 1fr; }
}

@media (min-width:1024px){
  .course-grid{ grid-template-columns:1fr 1fr 1fr; }
  .course-card{ padding:40px 32px; }
}

/* =========================================================
   SCROLL-REVEAL ANIMATION SYSTEM
   Elements start hidden/offset, animate in via JS toggling
   .in-view once they enter the viewport (IntersectionObserver).
   ========================================================= */
.reveal{
  opacity:0;
  transform:translateY(28px);
  transition: opacity 700ms cubic-bezier(.2,.7,.2,1), transform 700ms cubic-bezier(.2,.7,.2,1);
}
.reveal.in-view{
  opacity:1;
  transform:translateY(0);
}

/* Staggered reveal for grid children: each card gets an incremental delay */
.course-grid .course-card{ transition-delay: calc(var(--reveal-index, 0) * 90ms); }

@media (prefers-reduced-motion: reduce){
  .reveal{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
  .course-card{ transition-delay:0ms !important; }
  .course-card:hover{ transform:none; }
}