.classroom-activity {
  --classroom-ink: #1d1c15;
  --classroom-paper: #fef9ee;
  --classroom-line: #7c7766;
  container-type: inline-size;
  width: 100%;
  padding: clamp(16px, 2vw, 24px);
  overflow: hidden;
  color: var(--classroom-ink);
  font-family: "jf-openhuninn", sans-serif;
}

.related-classroom-feature {
  margin-bottom: clamp(24px, 4vw, 42px);
}

.related-classroom-feature .classroom-activity {
  width: 100%;
}

.classroom-activity *,
.classroom-activity *::before,
.classroom-activity *::after {
  box-sizing: border-box;
}

.classroom-activity__header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  width: min(100%, 960px);
  margin: 0 auto 36px;
  text-align: center;
}

.classroom-activity__header h2 {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  font:
    700 clamp(36px, 5vw, 50px) / 1 "jf-openhuninn",
    sans-serif;
}

.classroom-activity__header span {
  flex: 0 0 3px;
  width: 3px;
  height: 42px;
  background: var(--classroom-ink);
}

.classroom-activity__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: min(100%, 960px);
  margin: 0 auto;
  gap: 14px;
  align-items: start;
}

.classroom-activity__board {
  background: #fff;
}

.classroom-activity__board {
  border: 1px solid var(--classroom-ink);
}

.classroom-activity__legend-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(230px, 0.85fr);
  gap: 14px;
  align-items: stretch;
  padding: 14px;
}

.classroom-activity__legend ul {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.classroom-activity__legend li {
  display: flex;
  gap: 11px;
  align-items: center;
  justify-content: center;
  padding: 8px;
  text-align: left;
}

.classroom-activity__legend li > span {
  width: auto;
}

.classroom-activity__legend li.is-cat { background: #fff1f0; }
.classroom-activity__legend li.is-shen { background: #f0f9ff; }
.classroom-activity__legend li.is-ip { background: #fdf4ff; }

.classroom-activity__legend i {
  flex: 0 0 15px;
  width: 15px;
  height: 15px;
  border: 1px solid var(--classroom-ink);
}

.classroom-activity__legend .is-cat i { background: #f16f78; }
.classroom-activity__legend .is-shen i { background: #73a7ee; }
.classroom-activity__legend .is-ip i { background: #b894e2; }

.classroom-activity__legend strong,
.classroom-activity__legend small { display: block; }
.classroom-activity__legend strong {
  font-size: clamp(16px, 1.55vw, 18px);
  line-height: 1.15;
}
.classroom-activity__legend small {
  margin-top: 2px;
  color: #6a6558;
  font-size: clamp(12px, 1.55vw, 16px);
  line-height: 1.35;
}
.classroom-activity__legend a {
  color: inherit;
  text-decoration: none;
}

.classroom-activity__legend a:hover,
.classroom-activity__legend a:focus-visible {
  color: var(--pink-strong);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.classroom-activity__note {
  position: relative;
  margin: 0;
  padding: 11px 13px;
  border: 1px solid rgb(29 28 21 / 18%);
  background: #fffbe8;
  box-shadow: 2px 3px 5px rgb(0 0 0 / 8%);
  transform: rotate(1deg);
}

.classroom-activity__note::before {
  content: "";
  position: absolute;
  top: -9px;
  left: 50%;
  width: 62px;
  height: 18px;
  border: 1px solid rgb(0 0 0 / 5%);
  background: rgb(255 255 255 / 62%);
  transform: translateX(-50%) rotate(-2deg);
}

.classroom-activity__note > span { font-weight: 800; text-decoration: underline; }
.classroom-activity__note p {
  margin: 6px 0 0;
  font-size: clamp(12px, 1.6vw, 14px);
  line-height: 1.5;
}

.classroom-activity__board {
  --classroom-blackboard-width: clamp(15px, 5.8vw, 56px);
  --classroom-seat-gap: clamp(1px, 0.7vw, 7px);
  --classroom-map-font-size: 18px;
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  min-width: 0;
  max-width: 100%;
  padding: clamp(12px, 1.6vw, 18px);
  box-shadow: 3px 4px 0 rgb(29 28 21 / 9%);
}

@supports (width: 1cqi) {
  .classroom-activity__board {
    --classroom-blackboard-width: clamp(15px, 5.8cqi, 56px);
    --classroom-seat-gap: clamp(1px, 0.7cqi, 7px);
    /* 18px at the full-size board, scaled down with its RWD width. */
    --classroom-map-font-size: min(18px, 1.95cqw);
  }
}

.classroom-activity__front-wall {
  display: grid;
  grid-template-columns:
    var(--classroom-blackboard-width)
    minmax(0, 1fr)
    minmax(0, 7fr);
  gap: var(--classroom-seat-gap);
  margin-bottom: var(--classroom-seat-gap);
}

.classroom-activity__pillar {
  aspect-ratio: 1;
  border: 1px solid var(--classroom-ink);
  background: #f4f4f4;
}

.classroom-activity__balcony {
  display: grid;
  grid-column: 2 / -1;
  place-items: center;
  width: 100%;
  margin: 0;
  padding: clamp(2px, 0.65cqi, 6px) clamp(4px, 1.25cqi, 12px);
  border: 1px solid var(--classroom-ink);
  background: #f2ede2;
  font-size: var(--classroom-map-font-size);
  font-weight: 800;
  line-height: 1.05;
  text-align: center;
}

.classroom-activity__room {
  display: grid;
  grid-template-columns:
    var(--classroom-blackboard-width)
    minmax(0, 1fr)
    minmax(0, 7fr);
  gap: var(--classroom-seat-gap);
  min-height: 0;
  flex: 1 1 auto;
  width: 100%;
}

.classroom-activity__podium {
  display: grid;
  grid-template-rows: repeat(5, 1fr);
  gap: var(--classroom-seat-gap);
  min-height: 0;
  border: 1px solid var(--classroom-ink);
  background: #f7f5ef;
  font-size: var(--classroom-map-font-size);
  font-weight: 800;
  line-height: 1.05;
  text-align: center;
}

.classroom-activity__podium > span {
  display: grid;
  place-items: center;
}

.classroom-activity__podium > span:first-child { grid-row: 1; }
.classroom-activity__podium > span:last-child { grid-row: 5; }

.classroom-activity__podium > .classroom-activity__seat {
  grid-row: 3;
  width: calc(100% + 2px);
  margin-right: -1px;
  margin-left: -1px;
  height: 140%;
  align-self: center;
  z-index: 1;
}

.classroom-activity__blackboard {
  display: grid;
  min-height: 0;
  place-items: center;
  border: 1px solid var(--classroom-ink);
  background: #f4f4f4;
  color: var(--classroom-ink);
  font-size: var(--classroom-map-font-size);
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.08em;
  writing-mode: vertical-rl;
}

.classroom-activity__seats {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-template-rows: repeat(5, 1fr);
  gap: var(--classroom-seat-gap);
  min-width: 0;
  min-height: 0;
}

.classroom-activity__seat {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 0;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  overflow: hidden;
  padding: clamp(1px, 0.3cqi, 3px) clamp(1px, 0.42cqi, 4px) clamp(1px, 0.42cqi, 4px);
  border: 2px solid currentColor;
  background: #fff;
  color: inherit;
  text-decoration: none;
  text-align: center;
  transition:
    transform 180ms ease,
    box-shadow 180ms ease;
}

.classroom-activity__photo-frame {
  position: relative;
  display: grid;
  width: 100%;
  min-height: 0;
  flex: 1 1 auto;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgb(29 28 21 / 10%);
}

.classroom-activity__seat--cat .classroom-activity__photo-frame { background: #fff1f0; }
.classroom-activity__seat--shen .classroom-activity__photo-frame { background: #f0f9ff; }
.classroom-activity__seat--ip .classroom-activity__photo-frame { background: #fdf4ff; }

.classroom-activity__seat img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 180ms ease;
}

.classroom-activity__seat strong,
.classroom-activity__portrait-placeholder {
  position: relative;
  z-index: 1;
}

.classroom-activity__seat strong {
  margin-top: clamp(1px, 0.3cqi, 3px);
  font-size: var(--classroom-map-font-size);
  line-height: 1.2;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.classroom-activity__seat-role {
  display: block;
  margin-top: 1px;
  font-size: 0.65em;
  font-weight: normal;
  line-height: 1.2;
}

.classroom-activity__seat--cat { color: #d91d2b; }
.classroom-activity__seat--shen { color: #075bc8; }
.classroom-activity__seat--ip { color: #7051b7; }
.classroom-activity__seat.is-empty {
  padding: 0;
  border: 1px dashed #b9b5ab;
  background: transparent;
  opacity: 0.85;
}
.classroom-activity__portrait-placeholder {
  opacity: 0.45;
  font-size: var(--classroom-map-font-size);
}

.classroom-activity__seat.is-clickable { cursor: pointer; }

.classroom-activity__seat.is-clickable:hover {
  z-index: 2;
  box-shadow: 4px 6px 0 rgb(29 28 21 / 18%);
  transform: translateY(-4px) scale(1.025);
}

.classroom-activity__seat.is-clickable:hover img { transform: scale(1.04); }

.classroom-activity__seat.is-clickable:focus-visible {
  z-index: 3;
  outline: 3px solid #1264d5;
  outline-offset: 3px;
  box-shadow: 4px 6px 0 rgb(29 28 21 / 18%);
  transform: translateY(-3px);
}

body.classroom-map-preview {
  min-height: 100vh;
  margin: 0;
  background: #fef9ee;
}

body.classroom-map-preview > [data-classroom-map] {
  width: min(1180px, calc(100% - 32px));
  margin: 24px auto;
  border: 1px solid #e7e2d7;
  box-shadow: 2px 3px 12px rgb(0 0 0 / 9%);
}

/* Keep the full seating plan inside a desktop viewport without narrowing it. */
@media (min-width: 901px) {
  .classroom-activity__board {
    height: min(720px, calc(100dvh - 200px));
    aspect-ratio: auto;
  }
}

@media (max-width: 900px) {
  .classroom-activity__legend-card {
    grid-template-columns: 1fr;
  }
  .classroom-activity__photo-frame {
    aspect-ratio: 1;
  }
}

@media (max-width: 620px) {
  .classroom-activity { padding: 18px 14px; }
  .classroom-activity__header { margin-bottom: 28px; }
  .classroom-activity__legend ul { grid-template-columns: 1fr; }
  .classroom-activity__board { padding: clamp(5px, 1.5cqi, 14px); }
  .classroom-activity__balcony { width: 100%; }
  .classroom-activity__legend li {
    justify-content: flex-start;
    padding: 10px clamp(18px, 8vw, 44px);
  }
  .classroom-activity__legend strong { font-size: clamp(16px, 5vw, 20px); }
  .classroom-activity__legend small { font-size: clamp(12px, 3.5vw, 14px); }
}

@media (prefers-reduced-motion: reduce) {
  .classroom-activity__seat,
  .classroom-activity__seat img { transition: none; }
}