/* Signup: a page to put your name down — for a guest list, as a promoter.
   What it is about on one side (the event's poster, title, when and where,
   or a programme's benefits), the form in a card on the other; stacked on a
   phone, where the poster stays out of the form's way.

   <div class="signup">
     <div class="signup__intro">
       <div class="signup__poster">…</div>
       <p class="signup__eyebrow">…</p>
       <h1>…</h1>
     </div>
     <section class="card">…</section>
   </div> */
.signup {
  align-items: start;
  display: grid;
  gap: var(--space-l);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 48rem) {
  .signup {
    gap: var(--space-xl);
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  }
}

.signup__intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}

.signup__poster {
  display: none;

  img {
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-overlay);
    inline-size: 100%;
  }
}

@media (min-width: 48rem) {
  .signup__poster {
    display: block;
    max-inline-size: 20rem;
  }
}

.signup__eyebrow {
  color: var(--color-accent-text);
  font-size: var(--step--1);
  font-weight: var(--weight-semibold);
}

.signup__benefits {
  color: var(--color-muted);
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding-inline-start: var(--space-s);
}

/* What happened, in place of the form: the accent's mark, then the words */
.signup__outcome {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: var(--space-s);

  p {
    color: var(--color-muted);
  }
}

.signup__mark {
  align-items: center;
  background: var(--color-accent-fill);
  block-size: 3rem;
  border-radius: var(--radius-pill);
  color: var(--color-on-accent);
  display: inline-flex;
  inline-size: 3rem;
  justify-content: center;

  .icon {
    --icon-color: currentColor;
    --icon-size: 1.5rem;
  }
}

/* What comes next, numbered */
.signup__steps {
  counter-reset: signup-step;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  inline-size: 100%;

  li {
    align-items: flex-start;
    background: var(--color-surface-1);
    border-radius: var(--radius-m);
    counter-increment: signup-step;
    display: flex;
    gap: var(--space-s);
    padding: var(--space-s);
  }

  li::before {
    align-items: center;
    background: var(--color-surface-3);
    block-size: 2rem;
    border-radius: var(--radius-pill);
    content: counter(signup-step);
    display: inline-flex;
    flex: none;
    font-size: var(--step--1);
    font-weight: var(--weight-semibold);
    inline-size: 2rem;
    justify-content: center;
  }
}