/* =====================================================================
   OSE · Classroom · styles/components/classroom.css
   ---------------------------------------------------------------------
   "Lớp nhỏ" as a picture and as numbers: an illustrated seating plan
   (a teacher at the front, an assistant inside the U, exactly 15 seats)
   beside the class facts as .stat items. Answers a parent's question:
   how many children share my child's teacher?
   Component tokens only: --classroom-*. The figures use stat.css.

   Markup
     <div class="classroom">
       <figure class="classroom__figure">
         <div class="classroom__plan" role="img" aria-label="Minh hoạ …">
           <span class="classroom__seat"></span>          × 15, FIRST
           <span class="classroom__teacher"><span class="classroom__role">Giáo viên</span></span>
           <span class="classroom__assistant"><span class="classroom__role">Trợ giảng</span></span>
         </div>
         <figcaption class="classroom__caption">Minh hoạ · …</figcaption>
       </figure>
       <div class="classroom__data">
         <ul class="classroom__stats" role="list">
           <li class="stat">…</li>   × 4 (stat.css)
         </ul>
         <p class="classroom__note">…</p>
       </div>
     </div>
   The plan is ONE image to assistive tech (role="img" + a Vietnamese
   aria-label, which must say it is an illustration); everything inside is
   presentational. It is an illustration, not the real room: keep the word
   "Minh hoạ" in the label and the caption.

   Plan     a 7 × 6 grid of named areas (no inline positions). The seats are
            the first 15 children, in the order a pen would trace the U:
            s1–s5 down the left arm, s6–s10 along the back, s11–s15 up the
            right arm — so a stagger over .classroom__seat fills the U in
            one stroke. Teacher at the front (top centre), assistant inside
            the U. Seats are --classroom-seat-size discs (24 → 36px); the
            plan is never wider than --classroom-plan-max, so the spacing
            stays even from 360px up.
   Static   all 15 seats filled: the end state of the classroom scene.
            Transform and opacity of seats, teacher and assistant are free
            for it.
   Layout   < 64em  plan, then the facts. >= 64em plan | facts, two halves.
   Static, no interactive states. No JS.
   ===================================================================== */

@layer components {
  .classroom {
    display: grid;
    gap: var(--classroom-gap);
    align-items: center;
  }

  @media (min-width: 64em) {
    .classroom {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      column-gap: var(--classroom-column-gap);
    }
  }

  .classroom__figure {
    display: grid;
    justify-items: center;
    gap: var(--classroom-caption-gap);
    min-inline-size: 0;
  }

  .classroom__plan {
    display: grid;
    grid-template-areas:
      ".  .  .  t  .   .   .  "
      "s1 .  .  .  .   .   s15"
      "s2 .  .  .  .   .   s14"
      "s3 .  .  a  .   .   s13"
      "s4 .  .  .  .   .   s12"
      "s5 s6 s7 s8 s9 s10 s11";
    grid-auto-columns: minmax(0, 1fr);
    gap: var(--classroom-plan-gap);
    inline-size: 100%;
    max-inline-size: var(--classroom-plan-max);
    forced-color-adjust: none;
  }

  .classroom__seat,
  .classroom__teacher,
  .classroom__assistant {
    position: relative;
    justify-self: center;
    align-self: center;
    inline-size: var(--classroom-seat-size);
    block-size: var(--classroom-seat-size);
    border-radius: var(--classroom-seat-radius);
  }

  .classroom__seat {
    background-color: var(--classroom-seat);
  }

  .classroom__seat:nth-child(1) { grid-area: s1; }
  .classroom__seat:nth-child(2) { grid-area: s2; }
  .classroom__seat:nth-child(3) { grid-area: s3; }
  .classroom__seat:nth-child(4) { grid-area: s4; }
  .classroom__seat:nth-child(5) { grid-area: s5; }
  .classroom__seat:nth-child(6) { grid-area: s6; }
  .classroom__seat:nth-child(7) { grid-area: s7; }
  .classroom__seat:nth-child(8) { grid-area: s8; }
  .classroom__seat:nth-child(9) { grid-area: s9; }
  .classroom__seat:nth-child(10) { grid-area: s10; }
  .classroom__seat:nth-child(11) { grid-area: s11; }
  .classroom__seat:nth-child(12) { grid-area: s12; }
  .classroom__seat:nth-child(13) { grid-area: s13; }
  .classroom__seat:nth-child(14) { grid-area: s14; }
  .classroom__seat:nth-child(15) { grid-area: s15; }

  /* The adults: rings, so the 15 filled seats stay the subject. */
  .classroom__teacher,
  .classroom__assistant {
    border: var(--classroom-adult-border-width) solid var(--classroom-adult-border);
  }

  .classroom__teacher {
    grid-area: t;
  }

  .classroom__assistant {
    grid-area: a;
  }

  /* Role label under its ring, centred on it, outside the grid flow. */
  .classroom__role {
    position: absolute;
    inset-block-start: calc(100% + var(--classroom-role-gap));
    inset-inline-start: 50%;
    translate: -50% 0;
    color: var(--classroom-role-color);
    font: var(--classroom-role-font);
    letter-spacing: var(--classroom-role-tracking);
    white-space: nowrap;
  }

  .classroom__caption {
    color: var(--classroom-caption-color);
    font: var(--classroom-caption-font);
    letter-spacing: var(--classroom-caption-tracking);
  }

  /* ---- Facts -------------------------------------------------------- */
  .classroom__data {
    display: grid;
    gap: var(--classroom-data-gap);
    min-inline-size: 0;
  }

  .classroom__stats {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--classroom-stats-gap);
    padding: 0;
    list-style: none;
  }

  .classroom__note {
    max-inline-size: var(--classroom-note-max-width);
    color: var(--classroom-note-color);
    font-size: var(--classroom-note-font-size);
  }
}