/* ==========================================================================
   Fuller Living — Courses (Coming Soon)
   Emotional objective: anticipation, never pressure.
   ========================================================================== */

.courses-main > section { position: relative; width: 100%; }
.courses-coming { background-color: var(--color-bg-alt); }

/* ---------------------------------------------------------------- HERO ---- */
.courses-hero {
  background-color: var(--fl-cream);
  background-image:
    radial-gradient(80% 70% at 82% 0%, rgba(46, 139, 139, 0.14) 0%, rgba(46, 139, 139, 0) 60%),
    radial-gradient(80% 80% at 8% 100%, rgba(196, 160, 184, 0.2) 0%, rgba(196, 160, 184, 0) 60%);
}
.courses-hero__inner {
  max-width: 44rem;
  margin-inline: auto;
  text-align: center;
}
.courses-hero h1 { margin: var(--space-sm) 0; }
.courses-hero__subhead {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: var(--text-h4);
  color: var(--fl-teal-deep);
  line-height: var(--leading-snug);
  margin-inline: auto;
  margin-bottom: var(--space-md);
  max-width: 40ch;
}
.courses-hero__body {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  margin-inline: auto;
  margin-bottom: var(--space-lg);
}

/* (The .courses-badge pill now lives in style.css — shared with the Install page.) */

/* -------------------------------------------------- WHAT'S COMING --------- */
.courses-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  max-width: 60rem;
  margin-inline: auto;
}
.course-card {
  position: relative;
  padding: var(--space-xl);
  padding-top: var(--space-2xl);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-container);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.course-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--fl-teal), var(--fl-sage), var(--fl-periwinkle));
}
.course-card__status {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  padding: 0.3em 0.8em;
  border-radius: var(--radius-pill);
  background-color: var(--fl-mauve-tint);
  color: #8a5d78;
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.course-card__tag {
  display: inline-block;
  margin-bottom: var(--space-sm);
  font-family: var(--font-ui);
  font-size: var(--text-eyebrow);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fl-teal-deep);
}
.course-card h3 { margin: 0 0 var(--space-sm); font-size: var(--text-h3); }
.course-card p { margin: 0; color: var(--color-text-muted); }

.courses-grid__note {
  max-width: 46rem;
  margin: var(--space-xl) auto 0;
  text-align: center;
  font-family: var(--font-heading);
  font-style: italic;
  color: var(--color-text-muted);
}

/* ----------------------------------------------------------- WAITLIST ----- */
.courses-waitlist { background-color: var(--color-bg); scroll-margin-top: 6rem; }
.courses-waitlist__card {
  max-width: 48rem;
  margin-inline: auto;
  padding: clamp(2rem, 1.4rem + 3vw, 4rem);
  text-align: center;
  border-radius: var(--radius-container);
  border: 1px solid var(--color-border);
  background-color: var(--fl-teal-tint);
  background-image:
    radial-gradient(90% 120% at 100% 0%, rgba(109, 148, 116, 0.25) 0%, rgba(109, 148, 116, 0) 60%),
    radial-gradient(90% 120% at 0% 100%, rgba(196, 160, 184, 0.22) 0%, rgba(196, 160, 184, 0) 60%);
}
.courses-waitlist__card h2 { margin-bottom: var(--space-sm); }
.courses-waitlist__card > p {
  max-width: 44ch;
  margin: 0 auto var(--space-lg);
  color: var(--color-text-muted);
}

.courses-form {
  max-width: 34rem;
  margin-inline: auto;
  text-align: left;
}
.courses-form__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}
.courses-form__field label { display: block; margin-bottom: var(--space-2xs); }
.courses-form__submit { width: 100%; }

.courses-waitlist__note {
  margin: var(--space-md) auto 0;
  max-width: 40ch;
  font-size: var(--text-sm);
  color: var(--color-text-subtle);
}
.courses-waitlist__note a { color: var(--color-link); }

/* ---------------------------------------------------------- RESPONSIVE ---- */
@media (min-width: 560px) {
  .courses-form__row { grid-template-columns: 1fr 1fr; }
  .courses-form__submit { width: auto; }
}
@media (min-width: 768px) {
  .courses-grid { grid-template-columns: 1fr 1fr; }
}