/* ----------------------------------------
   Lessons Page
---------------------------------------- */

/* Layout + spacing -------------------------------------------------------- */

#lessons-who .container,
#lessons-work .container,
#lessons-flow .container,
#schedule .container {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--site-gutter);
}

#lessons-who,
#lessons-work,
#lessons-flow,
#schedule {
  padding: clamp(3rem, 6vw, 5rem) 0;
}

/* Typography helpers ------------------------------------------------------ */

.page-leadin {
  max-width: 72ch;
  margin: 0 auto clamp(1.25rem, 2.2vw, 1.75rem);
  line-height: 1.7;
}

/* Constrain long paragraphs where needed */
#lessons-overview .text-content p,
#lessons-auditions .cta-text,
#schedule header.style1 p {
  max-width: 72ch;
  margin: 0 auto;
}

/* Optional: if you re-enable a lead-in in the Who section */
#lessons-who .page-leadin {
  max-width: 72ch;
  margin: 0 auto clamp(1.25rem, 2.2vw, 1.75rem);
  line-height: 1.7;
  font-size: clamp(1.05rem, 1.2vw, 1.15rem);
  color: #1f2a33;
  text-align: center;

  background: rgba(255, 255, 255, 0.82);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  box-shadow: var(--card-shadow);
}

/* Hero tweak (if used) */
#hero-message .hero-quote {
  font-size: 3rem;
}

/* Cards grid -------------------------------------------------------------- */

.cards-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: stretch;
}

@media screen and (max-width: 900px) {
  .cards-grid {
    grid-template-columns: 1fr;
  }
}

.cards-grid .card {
  background: rgba(255, 255, 255, 0.8);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  padding: clamp(1.25rem, 2.2vw, 1.9rem);
  text-align: center;
  transition:
    transform 180ms ease,
    box-shadow 180ms ease;
}

.cards-grid .card:hover {
  transform: translateY(-4px);
  box-shadow: var(--card-shadow-hover);
}

.cards-grid .card h3 {
  margin: 0 0 0.85rem;
  font-size: clamp(1.35rem, 1.8vw, 1.85rem);
  color: #cd533b;
}

.cards-grid .card p {
  max-width: 46ch;
  margin: 0 auto;
  font-size: clamp(1rem, 1.05vw, 1.15rem);
  line-height: 1.75;
  color: #243447;
}

/* CTA block (auditions) --------------------------------------------------- */

.cta-block {
  max-width: 900px;
  margin: 3rem auto 0;
  text-align: center;
}

.cta-text {
  max-width: 72ch;
  margin: 0 auto 1rem;
}

.cta-block .actions,
#lessons-who .actions {
  text-align: center;
  margin-top: 1rem;
}

/* Lists + checklist ------------------------------------------------------- */

.subhead {
  margin: 0 0 0.75rem;
  font-size: clamp(1.15rem, 1.4vw, 1.35rem);
  color: #cd533b;
}

.bullets,
.checklist {
  max-width: 62ch;
  margin: 0 0 1.75rem;
  padding-left: 1.15rem;
  line-height: 1.7;
}

.bullets li,
.checklist li {
  margin: 0.35rem 0;
}

/* Checklist visual */
.checklist {
  list-style: none;
  padding-left: 0;
}

.checklist li {
  position: relative;
  padding-left: 1.6rem;
}

.checklist li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: #cd533b;
  font-weight: 800;
}

/* Split layout (single definition) --------------------------------------- */

.split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;

  background: rgba(255, 255, 255, 0.72);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  padding: clamp(1.25rem, 2.5vw, 2rem);
}

@media screen and (max-width: 900px) {
  .split {
    grid-template-columns: 1fr;
  }
}

.wrapper.style2 .split {
  background: rgba(255, 255, 255, 0.65);
}

.split .subhead {
  margin-top: 0;
}

.split .bullets,
.split .checklist {
  max-width: none;
}

/* Feature band ------------------------------------------------------------ */

.feature-band {
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: center;

  background: rgba(255, 255, 255, 0.72);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  padding: clamp(1.25rem, 2.5vw, 2rem);
}

@media screen and (max-width: 980px) {
  .feature-band {
    grid-template-columns: 1fr;
  }
}

.feature-media img {
  width: 100%;
  height: auto;
  border-radius: calc(var(--card-radius) - 2px);
  display: block;
}

.feature-copy .page-leadin {
  margin-bottom: 1rem;
}

/* Who Lessons Are For: two-lane opener ----------------------------------- */

#lessons-who .who-grid {
  max-width: 980px;
  margin: 0 auto;

  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: center;

  background: rgba(255, 255, 255, 0.55);
  border-radius: 14px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  padding: clamp(1.25rem, 2.5vw, 2rem);
}

@media screen and (max-width: 900px) {
  #lessons-who .who-grid {
    grid-template-columns: 1fr;
  }
}

/* Left stripe */
#lessons-who .who-left {
  border-left: 4px solid #cd533b;
  padding-left: 1.25rem;
}

#lessons-who .who-left .subhead {
  margin: 0 0 0.9rem;
}

#lessons-who .checklist li {
  font-size: clamp(1.1rem, 1.15vw, 1.25rem);
}

/* Right column photo */
#lessons-who .who-right {
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}

#lessons-who .who-photo {
  border-radius: 8px;
  overflow: hidden;
  position: relative;
}

#lessons-who .who-photo img {
  width: 100%;
  height: 100%;
  min-height: 260px;
  object-fit: cover;
  display: block;
  filter: saturate(0.9);
}

/* Lesson flow: vertical steps -------------------------------------------- */

#lessons-flow .lesson-steps {
  max-width: 920px;
  margin: 0 auto;
  display: grid;
  gap: clamp(1rem, 2.2vw, 1.5rem);
}

#lessons-flow .step {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 1.25rem;
  align-items: center;

  background: rgba(255, 255, 255, 0.68);
  border-radius: 12px;
  padding: clamp(1rem, 2.2vw, 1.5rem);

  border: none;
  box-shadow: var(--card-shadow);
  border-left: 4px solid rgba(205, 83, 59, 0.55);
}

#lessons-flow .step-num {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display: grid;
  place-items: center;

  background: rgba(205, 83, 59, 0.12);
  color: #cd533b;
  font-weight: 900;
  font-size: 1.25rem;
  line-height: 1;
}

#lessons-flow .step-body h3 {
  margin: 0 0 0.35rem;
  font-size: clamp(1.2rem, 1.35vw, 1.45rem);
  color: #cd533b;
}

#lessons-flow .step-body p {
  margin: 0;
  font-size: clamp(1.05rem, 1.1vw, 1.2rem);
  line-height: 1.7;
  color: #243447;
}

@media screen and (max-width: 600px) {
  #lessons-flow .step {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 1rem;
  }

  #lessons-flow .step-num {
    width: 38px;
    height: 38px;
    font-size: 1.05rem;
  }
}

/* ----------------------------------------
   Schedule section
---------------------------------------- */

#schedule .schedule-grid {
  display: grid;
  grid-template-columns: minmax(320px, 520px) minmax(420px, 1fr);
  gap: clamp(2rem, 4vw, 3.25rem);
  align-items: center;
}

/* Left column */
#schedule .schedule-copy {
  max-width: 520px;
  display: grid;
  gap: 1.1rem;
  justify-content: flex-start;
}

/* Headline + intro */
#schedule .schedule-copy h3 {
  margin: 0;
  font-size: clamp(1.8rem, 2.2vw, 2.2rem);
  line-height: 1.15;
  color: #cd533b;
  text-align: left;
}

#schedule .schedule-intro {
  margin: 0;
  max-width: 46ch;
  font-size: clamp(1.05rem, 1.15vw, 1.15rem);
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.92);
  text-align: left;
}

/* Buttons */
#schedule .actions {
  margin: 0.25rem 0 0.25rem 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  justify-content: flex-start;
}

#schedule .actions .button {
  min-width: 260px;
  text-align: center;
}

/* Deposit details callout */
.schedule-note {
  max-width: 44ch;
  margin-top: 0.25rem;
  padding: 0.75rem 0 0.25rem 1rem;

  background: none;
  border-left: 3px solid rgba(205, 83, 59, 0.8);
}

.schedule-note-title {
  margin-bottom: 0.4rem;
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
}

.schedule-note-list li {
  margin: 0.2rem 0;
  font-size: 1.02rem;
  color: rgba(255, 255, 255, 0.88);
}

#schedule .schedule-note-list {
  margin: 0;
  padding-left: 1.05rem;
  line-height: 1.65;
}

#schedule .schedule-note-list li::marker {
  color: rgba(255, 255, 255, 0.55);
}

/* Right column */
#schedule .schedule-widget-wrap {
  width: 100%;
  display: flex;
  justify-content: flex-end;
}

#schedule #schedule-widget {
  width: 100%;
  max-width: 820px;
  min-width: 520px;
}

/* Stack */
@media screen and (max-width: 1100px) {
  #schedule .schedule-grid {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  #schedule .schedule-copy {
    max-width: 560px;
    width: 100%;
  }

  #schedule .actions {
    justify-content: center;
  }

  #schedule .schedule-widget-wrap {
    justify-content: center;
  }

  #schedule #schedule-widget {
    min-width: 0;
    max-width: 740px;
  }
}

#schedule .schedule-details {
  max-width: 46ch;
  padding: 1rem;
  /* border-left: 3px solid rgba(205, 83, 59, 0.75); */
  color: rgba(255, 255, 255, 0.88);
  /* background-color: rgba(255, 255, 255, 0.08); */
}

#schedule .schedule-details-title {
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.9rem;
  margin: 0 0 0.5rem 0;
  color: rgba(255, 255, 255, 0.9);
}

#schedule .schedule-details-list {
  margin: 0;
  padding-left: 1.05rem;
  line-height: 1.7;
}

#schedule .schedule-details-list li {
  margin: 0.25rem 0;
  font-size: 1.02rem;
}

