/* ==========================================================================
   Abracabazza — Magic Lessons (lessons.html)
   Charcoal sections under hairlines like the homepage FAQ, one red band for
   How it works (the About Barry red). The FAQ and the closing invitation reuse
   .faq and .invite from sections.css. Tokens come from :root in styles.css.
   Mobile first; the same 900px breakpoint as the rest of the site.
   ========================================================================== */

.lessons-page {
  --red-deep: #8e111a;
}

/* --------------------------------------------------------------------------
   Opening: copy left, a card turned over in front of a Rider back right.
   -------------------------------------------------------------------------- */

.lessons-hero {
  padding: clamp(2.5rem, 7vw, 6rem) var(--gutter) clamp(4rem, 10vw, 7rem);
  /* The turned card back can reach past the gutter; never let it scroll the page. */
  overflow-x: clip;
}

.lessons-hero__inner {
  display: grid;
  gap: clamp(3rem, 8vw, 4rem);
  align-items: center;
  max-width: 1320px;
  margin-inline: auto;
}

.lessons-hero__copy {
  display: grid;
  justify-items: start;
}

.lessons-hero .section-title {
  font-size: clamp(2.8rem, 11vw, 6rem);
}

.lessons-hero__lede {
  max-width: 42ch;
  margin: clamp(1.25rem, 3vw, 1.75rem) 0 0;
  font-size: clamp(1.05rem, 1rem + 0.4vw, 1.3rem);
  line-height: 1.6;
  color: var(--ink-soft);
}

.lessons-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.75rem;
  margin-top: clamp(2rem, 5vw, 2.5rem);
}

.lessons-cta {
  min-height: 52px;
  padding-inline: 1.75rem;
}

.lessons-hero__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--gold-light);
  font-weight: 600;
  text-underline-offset: 0.25em;
}

.lessons-hero__link:hover {
  color: var(--gold);
}

.lessons-hero__note {
  max-width: 46ch;
  margin: 1.5rem 0 0;
  padding-left: 1rem;
  border-left: 2px solid var(--gold);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

/* The two cards. */
.lessons-hero__art {
  position: relative;
  width: min(100%, 22rem);
  margin-inline: auto;
  padding: 1rem 2.5rem 2rem 0;
}

.lessons-card {
  aspect-ratio: 5 / 7;
  border-radius: 16px;
  box-shadow:
    0 0 0 1px rgba(214, 173, 98, 0.45),
    0 40px 70px -30px rgba(0, 0, 0, 0.95);
}

.lessons-card--back {
  position: absolute;
  inset: 0 0 1rem 2.5rem;
  aspect-ratio: auto;
  border: 7px solid #fbf9f3;
  background: #fbf9f3 url("../assets/img/card-back.webp") center / cover;
  transform: rotate(8deg);
  transform-origin: 30% 90%;
}

.lessons-card--face {
  position: relative;
  display: grid;
  place-items: center;
  width: 86%;
  background: radial-gradient(130% 90% at 50% 0%, rgba(142, 17, 26, 0.35), transparent 60%), #0e0b0c;
  outline: 1px solid rgba(214, 173, 98, 0.22);
  outline-offset: -9px;
  transform: rotate(-5deg);
}

.lessons-card__pip {
  width: 38%;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.6));
}

.lessons-card__index {
  position: absolute;
  top: 7%;
  left: 9%;
  display: grid;
  justify-items: center;
  gap: 0.2rem;
  color: var(--gold);
  font-family: var(--font-brand);
  font-size: clamp(1.25rem, 4vw, 1.6rem);
  line-height: 1;
}

.lessons-card__index b {
  font-weight: 700;
}

.lessons-card__index svg {
  width: 0.8em;
  height: 0.8em;
  fill: currentColor;
}

.lessons-card__index--end {
  top: auto;
  left: auto;
  right: 9%;
  bottom: 7%;
  transform: rotate(180deg);
}

@media (min-width: 900px) {
  .lessons-hero__inner {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: clamp(3rem, 6vw, 6rem);
  }

  .lessons-hero__art {
    width: min(100%, 25rem);
  }
}

@media (max-width: 479.98px) {
  .lessons-hero__actions {
    width: 100%;
  }

  .lessons-cta {
    width: 100%;
    letter-spacing: 0.14em;
  }

  .lessons-hero__art {
    width: min(78%, 18rem);
  }
}

/* --------------------------------------------------------------------------
   Content sections: heading left, content right from 900px, like the FAQ.
   -------------------------------------------------------------------------- */

.lessons-section {
  padding: 0 var(--gutter) clamp(4rem, 11vw, 8rem);
}

.lessons-section__inner {
  display: grid;
  gap: clamp(2rem, 6vw, 3rem);
  max-width: 1320px;
  margin-inline: auto;
  padding-top: clamp(4rem, 11vw, 8rem);
  border-top: 1px solid var(--line);
}

.lessons-section__intro {
  display: grid;
  gap: 1rem;
  align-content: start;
}

.lessons-section__intro .section-title {
  font-size: clamp(2.2rem, 7vw, 3.75rem);
}

.lessons-section__intro p:not(.eyebrow) {
  max-width: 38ch;
  margin: 0;
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.2rem);
  line-height: 1.6;
  color: var(--ink-soft);
}

.lessons-section__body {
  display: grid;
  gap: clamp(1.5rem, 4vw, 2rem);
  align-content: start;
  min-width: 0;
}

.lessons-section h3 {
  margin: 0;
  font-size: clamp(1.05rem, 1rem + 0.35vw, 1.3rem);
  font-weight: 600;
  line-height: 1.3;
}

.lessons-section__body p {
  margin: 0;
  line-height: 1.6;
  color: var(--ink-soft);
}

/* The small print that says what Barry confirms. */
.lessons-aside {
  font-size: 0.9375rem;
}

.lessons-aside::before {
  content: "";
  display: inline-block;
  width: 1.5rem;
  height: 1px;
  margin-right: 0.75rem;
  vertical-align: middle;
  background: var(--gold);
}

@media (min-width: 900px) {
  .lessons-section__inner {
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    column-gap: clamp(3rem, 6vw, 6rem);
  }
}

/* Who it's for: four rows under hairlines, each with a suit. */
.lessons-who {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--line);
}

.lessons-who li {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr);
  column-gap: 1rem;
  row-gap: 0.4rem;
  padding: 1.25rem 0;
  border-top: 1px solid var(--line);
}

.lessons-who__pip {
  grid-row: span 2;
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 0.3rem;
}

@media (min-width: 900px) {
  .lessons-who li {
    padding: 1.5rem 0;
  }
}

/* What you could learn: plain cards, two across from 600px. */
.lessons-topics {
  display: grid;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lessons-topic {
  display: grid;
  align-content: start;
  gap: 0.5rem;
  padding: clamp(1.25rem, 3vw, 1.75rem);
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg-raised);
}


@media (min-width: 600px) {
  .lessons-topics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Formats: three plain panels. */
.lessons-formats {
  display: grid;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lessons-format {
  display: grid;
  align-content: start;
  gap: 0.5rem;
  padding: clamp(1.25rem, 3vw, 1.75rem);
  border: 1px solid var(--line);
  border-top: 2px solid var(--gold);
  border-radius: 2px 2px 6px 6px;
}


@media (min-width: 700px) {
  .lessons-formats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Pricing: the factors as a quiet list in a raised panel. */
.lessons-section__body .lessons-price__lede {
  max-width: 52ch;
  font-size: clamp(1.05rem, 1rem + 0.35vw, 1.25rem);
  color: var(--ink);
}

.lessons-price {
  padding: 1.25rem 1.5rem;
  border-left: 2px solid var(--gold);
  background: var(--bg-raised);
}

.lessons-section__body .lessons-price__label {
  margin-bottom: 0.9rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
}

.lessons-price__factors {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lessons-price__factors li {
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.9375rem;
  color: var(--ink-soft);
}

/* --------------------------------------------------------------------------
   How it works: the one red band, four numbered steps.
   -------------------------------------------------------------------------- */

.lessons-steps {
  padding: clamp(4rem, 11vw, 8rem) var(--gutter);
  background: var(--red-deep);
}

.lessons-steps__inner {
  max-width: 1320px;
  margin-inline: auto;
}

.lessons-steps .eyebrow {
  color: var(--gold-light);
}

.lessons-steps .section-title {
  max-width: 22ch;
  font-size: clamp(2.2rem, 7vw, 3.75rem);
}

.lessons-steps__list {
  display: grid;
  gap: 2rem;
  margin: clamp(2.5rem, 6vw, 4rem) 0 0;
  padding: 0;
  list-style: none;
}

.lessons-steps__list li {
  display: grid;
  align-content: start;
  gap: 0.6rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(245, 239, 228, 0.3);
}

.lessons-steps__num {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6vw, 3.5rem);
  line-height: 1;
  color: var(--gold-light);
}

.lessons-steps h3 {
  margin: 0;
  font-size: clamp(1.05rem, 1rem + 0.35vw, 1.25rem);
  font-weight: 600;
  line-height: 1.3;
}

.lessons-steps p {
  margin: 0;
  line-height: 1.6;
  color: var(--ink-soft);
}

@media (min-width: 600px) {
  .lessons-steps__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(1.5rem, 4vw, 3rem);
  }
}

@media (min-width: 1024px) {
  .lessons-steps__list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}