/* One class's page (templates/public/class.html, pages/views.py
 * render_class_page).
 *
 * Page-only rules, outside the 15 KB component budget, in the class window's
 * look (css/windows/class-window.css): the time panel, the places as words,
 * the rule above the button. A phone reads it in one column with the booking
 * box right after the time; from 900 px the box stands beside the text and
 * stays in view. A guest's page carries the bridge, so every box sets its
 * own margins and every link its own decoration (CONVENTIONS.md 6.4).
 */

.ui-classpage {
  position: relative;
  padding: var(--ui-space-5) 0 var(--ui-space-9);
}

.ui-classpage__inner {
  display: flex;
  flex-direction: column;
  gap: var(--ui-space-4);
}

.ui-classpage__back {
  margin: 0;
  font-size: var(--ui-text-sm);
}

.ui-classpage__back-link {
  color: var(--ui-color-ink-soft);
  font-weight: var(--ui-weight-medium);
  text-decoration: none;
}

.ui-classpage__back-link:hover {
  color: var(--ui-color-brand);
}

.ui-classpage__back-link:focus-visible,
.ui-classpage__link:focus-visible,
.ui-classpage__text-button:focus-visible {
  outline: 2px solid var(--ui-color-focus);
  outline-offset: 2px;
}

/* The layout: intro, box, more. One column; from 900 px the box on the
   right for both rows, sticky under the header. */
.ui-classpage__layout {
  display: grid;
  gap: var(--ui-space-6);
  grid-template-columns: minmax(0, 1fr);
}

.ui-classpage__intro,
.ui-classpage__more {
  display: flex;
  flex-direction: column;
  gap: var(--ui-space-5);
  min-width: 0;
}

@media (min-width: 900px) {
  .ui-classpage__layout {
    grid-template-columns: minmax(0, 1fr) 22rem;
    grid-template-areas: "intro book" "more book";
    column-gap: var(--ui-space-7);
    align-items: start;
  }

  .ui-classpage__intro {
    grid-area: intro;
  }

  .ui-classpage__more {
    grid-area: more;
  }

  .ui-classpage__book {
    position: sticky;
    top: calc(4.5rem + 1px + var(--ui-space-5));
    grid-area: book;
  }
}

@media (min-width: 1200px) {
  .ui-classpage__layout {
    grid-template-columns: minmax(0, 1fr) 24rem;
  }
}

/* The picture: the homepage photo at 3:2, or the poster whole on a quiet
   panel, never cropped. */
.ui-classpage__photo {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--ui-radius-lg);
  background: var(--ui-color-sunken);
}

.ui-classpage__poster-frame {
  display: flex;
  justify-content: center;
  padding: var(--ui-space-4);
  border-radius: var(--ui-radius-lg);
  background: var(--ui-color-sunken);
}

.ui-classpage__poster {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 32rem;
  margin: 0;
  border-radius: var(--ui-radius-sm);
}

/* The head: studio, name, subtitle, chips. */
.ui-classpage__head {
  display: flex;
  flex-direction: column;
  gap: var(--ui-space-2);
}

.ui-classpage__where,
.ui-classpage__place-name {
  display: flex;
  align-items: center;
  gap: var(--ui-space-2);
  margin: 0;
}

.ui-classpage__where {
  color: var(--ui-color-brand);
  font-family: var(--ui-font-heading);
  font-size: var(--ui-text-2xs);
  font-weight: var(--ui-weight-medium);
  letter-spacing: var(--ui-tracking-eyebrow);
  text-transform: uppercase;
}

.ui-classpage__dot {
  display: block;
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--ui-radius-pill);
  background: var(--ui-color-dot-1);
}

.ui-classpage__dot--2 {
  background: var(--ui-color-dot-2);
}

.ui-classpage__title,
.ui-classpage__subtitle {
  margin: 0;
}

.ui-classpage__subtitle {
  color: var(--ui-color-ink-soft);
  font-size: var(--ui-text-lg);
  font-weight: var(--ui-weight-medium);
  line-height: var(--ui-leading-snug);
}

.ui-classpage__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ui-space-2);
  margin: var(--ui-space-1) 0 0;
  padding: 0;
  list-style: none;
}

/* The time panel: the day, the hours large, and the places as words. */
.ui-classpage__time {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ui-space-3);
  padding: var(--ui-space-4) var(--ui-space-5);
  border-radius: var(--ui-radius-md);
  background: var(--ui-color-sunken);
}

.ui-classpage__when {
  display: flex;
  flex-direction: column;
  gap: var(--ui-space-1);
  margin: 0;
}

.ui-classpage__date {
  color: var(--ui-color-ink-soft);
  font-size: var(--ui-text-xs);
  font-weight: var(--ui-weight-medium);
}

.ui-classpage__hours {
  color: var(--ui-color-ink-strong);
  font-family: var(--ui-font-heading);
  font-size: var(--ui-text-xl);
  font-weight: var(--ui-weight-semibold);
  letter-spacing: var(--ui-tracking-tight);
  line-height: var(--ui-leading-tight);
}

.ui-classpage__places {
  display: inline-flex;
  align-items: center;
  gap: var(--ui-space-2);
  margin: 0;
  padding: var(--ui-space-2) var(--ui-space-3);
  border-radius: var(--ui-radius-pill);
  background: var(--ui-color-tint-1-bg);
  color: var(--ui-color-tint-1-ink);
  font-size: var(--ui-text-xs);
  font-weight: var(--ui-weight-semibold);
}

.ui-classpage__places--few {
  background: var(--ui-color-tint-5-bg);
  color: var(--ui-color-tint-5-ink);
}

.ui-classpage__places--full {
  border: 1px solid var(--ui-color-line);
  background: var(--ui-color-surface);
  color: var(--ui-color-ink-soft);
}

.ui-classpage__places-dot {
  display: block;
  flex: none;
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: var(--ui-radius-pill);
  background: currentColor;
}

/* The booking box. */
.ui-classpage__book {
  display: flex;
  flex-direction: column;
  gap: var(--ui-space-4);
  padding: var(--ui-space-5);
  border: 1px solid var(--ui-color-line);
  border-radius: var(--ui-radius-lg);
  background: var(--ui-color-card);
  box-shadow: var(--ui-shadow-raised);
}

.ui-classpage__book-title,
.ui-classpage__price {
  margin: 0;
}

.ui-classpage__price {
  color: var(--ui-color-ink-strong);
  font-size: var(--ui-text-lg);
  font-weight: var(--ui-weight-semibold);
}

.ui-classpage__muted {
  color: var(--ui-color-ink-muted);
  font-size: var(--ui-text-sm);
  font-weight: var(--ui-weight-regular);
}

.ui-classpage__form {
  display: flex;
  flex-direction: column;
  gap: var(--ui-space-3);
  margin: 0;
}

.ui-classpage__rule,
.ui-classpage__note {
  margin: 0;
  color: var(--ui-color-ink-soft);
  font-size: var(--ui-text-sm);
  line-height: var(--ui-leading-normal);
}

.ui-classpage__deadline {
  color: var(--ui-color-ink-strong);
}

.ui-classpage__state,
.ui-classpage__result {
  margin: 0;
  font-weight: var(--ui-weight-semibold);
}

.ui-classpage__result {
  color: var(--ui-color-seats-many);
}

.ui-classpage__result--failed {
  color: var(--ui-color-seats-few);
}

.ui-classpage__consent {
  display: flex;
  align-items: flex-start;
  gap: var(--ui-space-2);
  margin: 0;
  font-size: var(--ui-text-sm);
  line-height: var(--ui-leading-normal);
  cursor: pointer;
}

.ui-classpage__check {
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  margin: 0.125rem 0 0;
  accent-color: var(--ui-color-brand);
}

.ui-classpage__link,
.ui-classpage__text-button {
  color: var(--ui-color-brand);
  font-weight: var(--ui-weight-semibold);
  text-decoration: none;
}

.ui-classpage__link:hover,
.ui-classpage__text-button:hover {
  color: var(--ui-color-brand-hover);
}

.ui-classpage__text-button {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: var(--ui-weight-semibold);
  cursor: pointer;
}

/* A training's modules, total and rules. */
.ui-classpage__modules {
  display: flex;
  flex-direction: column;
  gap: var(--ui-space-2);
}

.ui-classpage__label {
  margin: 0;
  color: var(--ui-color-ink-strong);
  font-size: var(--ui-text-sm);
  font-weight: var(--ui-weight-semibold);
}

.ui-classpage__module-list {
  display: flex;
  flex-direction: column;
  gap: var(--ui-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ui-classpage__module {
  margin: 0;
  border: 1px solid var(--ui-color-line);
  border-radius: var(--ui-radius-sm);
}

.ui-classpage__module-label {
  display: flex;
  align-items: flex-start;
  gap: var(--ui-space-3);
  padding: var(--ui-space-3);
  cursor: pointer;
}

.ui-classpage__module--closed {
  background: var(--ui-color-sunken);
  color: var(--ui-color-ink-muted);
}

.ui-classpage__module--closed .ui-classpage__module-label {
  cursor: default;
}

.ui-classpage__module-text {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}

.ui-classpage__module-name {
  font-size: var(--ui-text-sm);
  font-weight: var(--ui-weight-semibold);
}

.ui-classpage__module-when,
.ui-classpage__module-closed {
  font-size: var(--ui-text-xs);
}

.ui-classpage__module-closed {
  color: var(--ui-color-seats-few);
  font-weight: var(--ui-weight-semibold);
}

.ui-classpage__module-price {
  flex: none;
  font-size: var(--ui-text-sm);
  font-weight: var(--ui-weight-semibold);
  white-space: nowrap;
}

.ui-classpage__total,
.ui-classpage__saving,
.ui-classpage__empty {
  margin: 0;
  font-size: var(--ui-text-sm);
  font-weight: var(--ui-weight-semibold);
}

.ui-classpage__saving {
  color: var(--ui-color-seats-many);
}

.ui-classpage__empty {
  color: var(--ui-color-seats-few);
}

.ui-classpage__rules {
  display: flex;
  flex-direction: column;
  gap: var(--ui-space-1);
  padding: var(--ui-space-3);
  border-radius: var(--ui-radius-sm);
  background: var(--ui-color-sunken);
}

.ui-classpage__rules-text {
  margin: 0;
  color: var(--ui-color-ink-soft);
  font-size: var(--ui-text-xs);
  line-height: var(--ui-leading-normal);
}

/* Description, trainer and place. */
.ui-classpage__section {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--ui-space-3);
  padding-top: var(--ui-space-5);
  border-top: 1px solid var(--ui-color-line);
}

.ui-classpage__section-title,
.ui-classpage__text,
.ui-classpage__address,
.ui-classpage__place-link {
  margin: 0;
}

.ui-classpage__text {
  line-height: var(--ui-leading-relaxed);
}

.ui-classpage__person {
  display: flex;
  align-items: center;
  gap: var(--ui-space-4);
}

.ui-classpage__person-photo,
.ui-classpage__initials {
  flex: none;
  width: 4rem;
  height: 4rem;
  border-radius: var(--ui-radius-pill);
}

.ui-classpage__person-photo {
  display: block;
  margin: 0;
  object-fit: cover;
}

.ui-classpage__initials {
  display: grid;
  place-items: center;
  background: var(--ui-color-tint-2-bg);
  color: var(--ui-color-tint-2-ink);
  font-weight: var(--ui-weight-bold);
}

.ui-classpage__person-text {
  display: flex;
  flex-direction: column;
  gap: var(--ui-space-1);
  min-width: 0;
}

.ui-classpage__person-name,
.ui-classpage__person-short {
  margin: 0;
}

.ui-classpage__person-name {
  font-weight: var(--ui-weight-semibold);
}

.ui-classpage__person-short {
  color: var(--ui-color-ink-soft);
  font-size: var(--ui-text-sm);
}

.ui-classpage__place-name {
  font-weight: var(--ui-weight-semibold);
}

.ui-classpage__address {
  color: var(--ui-color-ink-soft);
  font-style: normal;
}

.ui-classpage__details {
  display: flex;
  flex-direction: column;
  gap: var(--ui-space-3);
  margin: 0;
}

.ui-classpage__detail {
  display: grid;
  gap: var(--ui-space-1);
}

.ui-classpage__detail-key,
.ui-classpage__detail-value {
  margin: 0;
}

.ui-classpage__detail-key {
  color: var(--ui-color-ink-muted);
  font-size: var(--ui-text-xs);
  font-weight: var(--ui-weight-semibold);
}

@media (min-width: 600px) {
  .ui-classpage__detail {
    grid-template-columns: 8rem minmax(0, 1fr);
    gap: var(--ui-space-3);
  }
}