/*
 * dojo/edition. CUBE order: block root, composition, blocks (dates, actions, flyer,
 * picker), exceptions (data-state, data-scarce, data-ready).
 * Tokens: assets/css/tokens.css. Shared helpers (.dojo-sr, .dojo-button): landing.css.
 * No !important, no @layer.
 */

.dojo-edition {
  color: var(--dojo-c-text);
  font-family: var(--dojo-font-text);
  font-size: var(--dojo-step-0);
  line-height: 1.6;
}

.dojo-edition *,
.dojo-edition *::before,
.dojo-edition *::after {
  box-sizing: border-box;
}

.dojo-edition :is(p, ol, figure, fieldset, legend) {
  margin: 0;
  padding: 0;
}

.dojo-edition .dojo-edition__panel {
  display: grid;
  justify-items: start;
}

/* Only the selected edition shows once the module runs; without it every one is in the page. */
.dojo-edition[data-ready] .dojo-edition__panel:not([data-selected]) {
  display: none;
}

/* Block: the schedule, top to bottom by importance. Rhythm is margins on the fluid scale, never a uniform gap. */
.dojo-edition .dojo-edition__eyebrow {
  color: var(--dojo-c-accent);
  font-size: var(--dojo-step--1);
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.2;
  text-transform: uppercase;
}

.dojo-edition .dojo-edition__dates {
  margin-block-start: var(--dojo-space-2xs);
  color: var(--dojo-c-strong);
  font-family: var(--dojo-font-display);
  font-size: var(--dojo-step-3);
  font-weight: 800;
  line-height: 1.1;
  text-wrap: balance;
}

/* The time closes the dates' line: the same line, plain weight, the text face. */
.dojo-edition .dojo-edition__hours {
  color: var(--dojo-c-text);
  font-family: var(--dojo-font-text);
  font-size: var(--dojo-step-1);
  font-weight: 400;
  white-space: nowrap;
}

.dojo-edition .dojo-edition__others {
  margin-block-start: var(--dojo-space-2xs);
  font-size: var(--dojo-step--1);
}

/* Block: the price, in three levels. The figure is the one strong thing; the deposit and the fine print are quiet. */
.dojo-edition .dojo-edition__price {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dojo-space-3xs) var(--dojo-space-xs);
  align-items: baseline;
  margin-block-start: var(--dojo-space-m);
}

.dojo-edition .dojo-edition__price span {
  font-size: var(--dojo-step--1);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dojo-c-strong);
}

.dojo-edition .dojo-edition__price strong {
  color: var(--dojo-c-accent);
  font-family: var(--dojo-font-display);
  font-size: var(--dojo-step-4);
  font-weight: 800;
  line-height: 1.1;
}

.dojo-edition[data-layout="price"] .dojo-edition__price strong {
  font-size: var(--dojo-step-4);
}

.dojo-edition .dojo-edition__deposit {
  margin-block-start: var(--dojo-space-3xs);
  color: var(--dojo-c-text);
  font-size: var(--dojo-step-0);
}

/* The deposit is what they pay now: the amount carries the weight. */
.dojo-edition .dojo-edition__deposit strong {
  color: var(--dojo-c-strong);
  font-weight: 700;
}

.dojo-edition .dojo-edition__fine {
  margin-block-start: var(--dojo-space-2xs);
  color: var(--dojo-c-muted);
  font-size: var(--dojo-step--1);
}

/* The date, framed: the same hairline as the seats pill, so both read as the edition's facts. */
.dojo-edition .dojo-edition__when {
  justify-self: start;
  padding: var(--dojo-space-xs) var(--dojo-space-s);
  border: var(--dojo-hairline) solid var(--dojo-c-edge);
  border-radius: var(--dojo-radius);
}

.dojo-edition .dojo-edition__when > p:first-child {
  margin-block-start: 0;
}

/* Seats and cutoff side by side under the price; they wrap to two lines only when the line is too short. */
.dojo-edition .dojo-edition__availability {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dojo-space-2xs) var(--dojo-space-s);
  align-items: center;
  margin-block-start: var(--dojo-space-xs);
}

.dojo-edition .dojo-edition__availability > p {
  margin-block-start: 0;
}

/* The seats left: its own small plain-text indicator under the price, not a control. Calm above five; from five down
   the accent (the word "solo" carries the urgency, so colour is never the only signal). */
.dojo-edition .dojo-edition__seats {
  margin-block-start: var(--dojo-space-xs);
}

.dojo-edition .dojo-seats {
  display: inline-flex;
  gap: var(--dojo-space-2xs);
  align-items: center;
  justify-self: start;
  padding: 0.125rem var(--dojo-space-xs);
  border: var(--dojo-hairline) solid var(--dojo-c-edge);
  border-radius: 999px;
  color: var(--dojo-c-muted);
  font-size: var(--dojo-step--1);
  font-weight: 400;
  line-height: 1.3;
}

.dojo-edition .dojo-seats[data-scarce] {
  border-color: var(--dojo-c-accent);
  color: var(--dojo-c-accent);
}

/* Block: the actions row (the button and its quiet sibling) */
.dojo-edition .dojo-edition__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dojo-space-2xs) var(--dojo-space-m);
  align-items: center;
  margin-block-start: var(--dojo-space-m);
}

/* Block: flyer */
.dojo-edition .dojo-edition__flyer {
  display: grid;
  gap: var(--dojo-space-2xs);
  inline-size: 100%;
  max-inline-size: 34rem;
}

.dojo-edition .dojo-edition__img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  box-shadow: var(--dojo-lift);
}

/* Block: carousel. The flyer first, then the course photos, in a square frame reserved up front (no layout shift). */
.dojo-edition .dojo-carousel {
  position: relative; /* the controls sit on the photo */
  display: grid;
  gap: var(--dojo-space-xs);
  inline-size: 100%;
  max-inline-size: 34rem;
}

.dojo-edition .dojo-carousel__track {
  display: flex;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  list-style: none;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}

.dojo-edition .dojo-carousel__slide {
  flex: 0 0 100%;
  min-inline-size: 0;
  max-inline-size: none;
  margin: 0;
  padding: 0;
  scroll-snap-align: start;
}

.dojo-edition .dojo-carousel__slide figure {
  display: grid;
  gap: var(--dojo-space-2xs);
}

.dojo-edition .dojo-carousel__slide .dojo-edition__img {
  aspect-ratio: 1;
  box-shadow: none;
}

/* Course photos fill the square; a flyer keeps its own shape on a matte tinted by the surface (pale on ink, dark on paper). */
.dojo-edition .dojo-edition__photo .dojo-edition__img {
  object-fit: cover;
}

.dojo-edition .dojo-edition__flyer .dojo-edition__img {
  background: color-mix(in srgb, var(--dojo-c-strong) 8%, transparent);
  object-fit: contain;
}

/* Block: carousel controls. A white pill on the photo, bottom right; dark grey glyphs. It floats, so showing it
   once the module loads shifts nothing. */
.dojo-edition .dojo-carousel__controls {
  position: absolute;
  inset-block-end: 0.5rem;
  inset-inline-end: 0.5rem;
  display: flex;
  gap: 0;
  align-items: center;
  padding: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--dojo-paper) 82%, transparent); /* quiet: the photo still shows through */
}

.dojo-edition .dojo-carousel__controls[hidden] {
  display: flex;
  visibility: hidden;
}

.dojo-edition .dojo-carousel__btn {
  display: inline-grid;
  flex: none;
  place-items: center;
  inline-size: 2.25rem; /* 36px: above the 24px minimum, small on the photo */
  block-size: 2.25rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--dojo-text);
  cursor: pointer;
  transition: none;
}

.dojo-edition .dojo-carousel__btn[hidden] {
  display: none;
}

.dojo-edition .dojo-carousel__btn:hover {
  color: var(--dojo-ink);
}

.dojo-edition .dojo-carousel__btn:focus-visible {
  outline: 0.125rem solid var(--dojo-ink);
  outline-offset: -0.25rem;
}

.dojo-edition .dojo-carousel__icon {
  inline-size: 1rem;
  block-size: 1rem;
  fill: currentcolor;
}

.dojo-edition .dojo-carousel__pos {
  min-inline-size: 3.5ch;
  margin: 0;
  color: var(--dojo-text);
  font-size: var(--dojo-step--1);
  font-variant-numeric: tabular-nums;
  text-align: center;
}

/* Exceptions: the toggle shows pause while playing and play once paused */
.dojo-edition [data-action="toggle"] .dojo-carousel__play,
.dojo-edition [data-action="toggle"][data-state="paused"] .dojo-carousel__pause {
  display: none;
}

.dojo-edition [data-action="toggle"][data-state="paused"] .dojo-carousel__play {
  display: inline;
}

@media (prefers-reduced-motion: reduce) {
  .dojo-edition .dojo-carousel__track {
    scroll-behavior: auto;
  }
}

/* Block: the editions as option cards (only when several are open). They ARE the dates: title, the Saturdays, time and seats. */
.dojo-edition .dojo-edition__picker {
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.dojo-edition .dojo-edition__picker legend {
  padding: 0;
  margin-block-end: var(--dojo-space-xs);
}

.dojo-edition .dojo-choices {
  display: grid;
  gap: var(--dojo-space-xs);
}

.dojo-edition .dojo-choice {
  display: flex;
  gap: var(--dojo-space-s);
  align-items: flex-start;
  padding: var(--dojo-space-s);
  border: var(--dojo-hairline) solid var(--dojo-c-edge);
  border-radius: var(--dojo-radius);
  cursor: pointer;
}

.dojo-edition .dojo-choice:hover {
  border-color: var(--dojo-c-muted);
}

.dojo-edition .dojo-choice:has(input:checked) {
  border-color: var(--dojo-c-strong);
  background: color-mix(in srgb, var(--dojo-c-strong) 8%, transparent);
  box-shadow: inset 0.25rem 0 0 var(--dojo-c-dash);
}

.dojo-edition .dojo-choice input {
  flex: none;
  inline-size: 1.25rem;
  block-size: 1.25rem;
  margin: 0.25rem 0 0;
  accent-color: var(--dojo-c-accent);
}

.dojo-edition .dojo-choice__text {
  display: grid;
  gap: var(--dojo-space-3xs);
  min-inline-size: 0;
}

/* The last line of a card: the seats indicator, then the enrollment cutoff (wraps when narrow). */
.dojo-edition .dojo-choice__foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dojo-space-3xs) var(--dojo-space-s);
  align-items: center;
}

.dojo-edition .dojo-choice__closes {
  color: var(--dojo-c-muted);
  font-size: var(--dojo-step--1);
  line-height: 1.3;
}

.dojo-edition .dojo-choice__title {
  color: var(--dojo-c-accent);
  font-size: var(--dojo-step--1);
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.3;
  text-transform: uppercase;
}

.dojo-edition .dojo-choice__days {
  color: var(--dojo-c-strong);
  font-family: var(--dojo-font-display);
  font-size: var(--dojo-step-1);
  font-weight: 800;
  line-height: 1.2;
  text-wrap: balance;
}

.dojo-edition .dojo-choice__meta {
  color: var(--dojo-c-muted);
  font-size: var(--dojo-step--1);
}

/* Without the module every edition's details are on the page, so each names its edition; with it only the chosen one shows. */
.dojo-edition .dojo-edition__for {
  color: var(--dojo-c-accent);
  font-size: var(--dojo-step--1);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.dojo-edition[data-ready] .dojo-edition__for {
  display: none;
}

/* Exception: nothing open */
.dojo-edition .dojo-edition__none {
  padding-block: var(--dojo-space-2xs);
  padding-inline: var(--dojo-space-m) 0;
  border-inline-start: var(--dojo-border) solid var(--dojo-seal);
}

/* Block: the summary card (layout "summary"), beside the enrollment form. The chosen date and what it costs, from the
   start: the edition, its Saturdays and time, then the price and the reservation advance, then the seats. */
.dojo-edition[data-layout="summary"] .dojo-edition__panel {
  display: grid;
  gap: var(--dojo-space-s);
  justify-items: stretch; /* both boxes take the column's full width */
}

/* The date box is filled; the cost box only outlined, so the two read as separate things. */
.dojo-edition .dojo-summary__date {
  display: grid;
  gap: var(--dojo-space-3xs);
  padding: var(--dojo-space-m);
  border-inline-start: 0.25rem solid var(--dojo-seal);
  background: var(--dojo-wash);
}

.dojo-edition .dojo-summary__cost {
  padding: var(--dojo-space-s) var(--dojo-space-m);
  border: var(--dojo-hairline) solid var(--dojo-c-edge);
}

.dojo-edition .dojo-summary__eyebrow,
.dojo-edition .dojo-summary__title {
  margin: 0;
  color: var(--dojo-c-accent);
  font-size: var(--dojo-step--1);
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.3;
  text-transform: uppercase;
}

.dojo-edition .dojo-summary__eyebrow {
  color: var(--dojo-c-muted);
}

.dojo-edition .dojo-summary__days {
  margin: var(--dojo-space-3xs) 0 0;
  color: var(--dojo-c-strong);
  font-family: var(--dojo-font-display);
  font-size: var(--dojo-step-1);
  font-weight: 700;
  line-height: 1.2;
}

.dojo-edition .dojo-summary__hours {
  color: var(--dojo-c-text);
  font-family: var(--dojo-font-text);
  font-size: var(--dojo-step-0);
  font-weight: 400;
  white-space: nowrap;
}

.dojo-edition .dojo-summary__money {
  display: grid;
  gap: var(--dojo-space-2xs);
  margin: 0;
}

.dojo-edition .dojo-summary__money div {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--dojo-space-s);
  align-items: baseline;
  justify-content: space-between;
}

.dojo-edition .dojo-summary__money dt {
  color: var(--dojo-c-text);
  font-size: var(--dojo-step--1);
}

.dojo-edition .dojo-summary__money dd {
  margin: 0;
  color: var(--dojo-c-strong);
  font-family: var(--dojo-font-display);
  font-size: var(--dojo-step-1);
  font-weight: 800;
}

/* The advance is what they transfer now: the strongest figure of the card. */
.dojo-edition .dojo-summary__money [data-strong] dt {
  color: var(--dojo-c-strong);
  font-weight: 700;
}

.dojo-edition .dojo-summary__money [data-strong] dd {
  color: var(--dojo-c-accent);
  font-size: var(--dojo-step-2);
}

.dojo-edition .dojo-summary__seats {
  margin: var(--dojo-space-2xs) 0 0;
}

/* The time at the end of the dates' line: the same line, plain weight, quieter. */
.dojo-edition .dojo-choice__hours {
  color: var(--dojo-c-text);
  font-family: var(--dojo-font-text);
  font-size: var(--dojo-step-0);
  font-weight: 400;
}