/* ===========================================================================
   JUST CREATE — one class
   ========================================================================= */

.crumbs {
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
  font-size: .88rem; color: var(--ink-muted);
  padding-block: 1.4rem .2rem;
}
.crumbs a { color: var(--ocean-deep); }
.crumbs a:hover { text-decoration: underline; }
.crumbs span { color: var(--ink-faint); }

.class-page {
  display: grid;
  /* ⚠ THE DETAILS COLUMN COMES SECOND IN THE MARKUP AND FIRST ON A PHONE.
     On a desktop the flyer is the thing that catches the eye, so it takes
     the wide column; on a phone the question is "when is it and can I get
     in", so the side column is ordered above the picture. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
  gap: clamp(1.6rem, 4vw, 3.5rem);
  align-items: start;
  padding-block: clamp(1rem, 3vw, 2rem) var(--rhythm);
}

.class-flyer {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow);
  background: var(--paper-2);
}
.class-flyer img { width: 100%; height: auto; }
.class-main .sample-note { margin-top: .6rem; }

.class-written { margin-top: 2rem; }
.class-written p { font-size: 1.06rem; }
.class-written h3 { margin-top: 1.8rem; }
.class-written .notice { margin-top: 1.6rem; }

.tick-list { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .5rem; }
.tick-list li { position: relative; padding-left: 1.7rem; }
.tick-list li::before {
  content: '';
  position: absolute;
  left: 0; top: .55em;
  width: 9px; height: 5px;
  border-left: 2px solid var(--leaf-deep);
  border-bottom: 2px solid var(--leaf-deep);
  transform: rotate(-45deg);
}

/* ---- the side column ------------------------------------------------------ */
.class-side {
  position: sticky;
  top: 100px;
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(1.3rem, 3vw, 1.9rem);
}
.class-side h1 { font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: .7em; }

.fact-list { margin: 0 0 1.4rem; display: grid; gap: .2rem; }
.fact-list dt {
  display: flex; align-items: center; gap: .45rem;
  font-family: var(--display);
  font-size: .82rem;
  font-weight: 700;
  color: var(--ink-muted);
  margin-top: .9rem;
}
.fact-list dt:first-child { margin-top: 0; }
.fact-list dd {
  margin: 0 0 0 1.55rem;
  color: var(--ink);
  font-size: 1.02rem;
  white-space: pre-line;
}

.book-block {
  padding-top: 1.3rem;
  border-top: 1px solid var(--hairline);
  display: grid;
  gap: .7rem;
}
.places {
  font-family: var(--display);
  font-weight: 700;
  color: var(--leaf-deep);
  margin: 0;
}
.places--low { color: var(--warn); }
.places--full { color: var(--ink-muted); }

.book-row { display: flex; gap: .6rem; }
.book-row select { flex: 0 0 42%; }
.book-row .btn { flex: 1 1 auto; }

.side-extras {
  margin-top: 1.1rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--hairline);
  display: flex;
  gap: .6rem;
  flex-wrap: wrap;
}

/* ========================================================================= */
@media (max-width: 900px) {
  .class-page { grid-template-columns: 1fr; }
  .class-side { position: static; order: -1; }
  .class-flyer { max-width: 560px; }
}