/* SEEK2LRN — Classes: the two animated device stages (#one-on-one's phone,
 * #group-tutoring's laptop). Same scroll-stage pattern as the landing's
 * "international courses" screen (seek2lrn-landing/editorial/international.html,
 * landing-editorial.css "4. international courses", landing-editorial.js): a
 * tall runway, a sticky inner pinned at the viewport, progress 0..1 driving
 * motion. The device markup + turn logic live in classes-stage.js; this file
 * is only the runway/sticky layout, the flat device chrome, and the cube's
 * structural rules (its geometry is inline, em-scaled — see the JS).
 *
 * Everything here is under an .s2c- prefix, scoped by .s2t-page's tokens
 * (--s2e-blue/--s2e-ink/--s2e-muted/--s2e-line/--s2e-display/--s2e-body).
 */

/* ── runway + sticky stage ── */
.s2t-page .s2c-stage { position: relative; background: #fff; }
.s2t-page .s2c-stage[data-s2c-stage="solo"] { height: 260vh; }
.s2t-page .s2c-stage[data-s2c-stage="group"] { height: 300vh; }

.s2t-page .s2c-stage-inner {
  position: sticky;
  top: 58px; /* the fixed nav's height */
  height: calc(100vh - 58px);
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 4vw;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5vw;
  overflow: hidden;
}

.s2t-page .s2c-stage-copy { flex: 1 1 380px; max-width: 460px; }
.s2t-page .s2c-stage-copy h1,
.s2t-page .s2c-stage-copy h2 {
  font-family: var(--s2e-display); font-weight: 300; letter-spacing: -0.02em;
  font-size: clamp(2.1rem, 3.6vw, 3.4rem); line-height: 1.05; margin: 0 0 1rem;
}
.s2t-page .s2c-stage-copy h1 em,
.s2t-page .s2c-stage-copy h2 em { font-style: normal; color: var(--s2e-blue); }
.s2t-page .s2c-stage-copy p { color: var(--s2e-muted); font-size: 1.02rem; line-height: 1.65; max-width: 440px; }

.s2t-page .s2c-stage-device {
  position: relative;
  flex: 0 0 auto;
  width: min(40vw, 340px);
  height: min(62vh, 540px);
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 760px) {
  .s2t-page .s2c-stage[data-s2c-stage="solo"] { height: 200vh; }
  .s2t-page .s2c-stage[data-s2c-stage="group"] { height: 220vh; }
  .s2t-page .s2c-stage-inner {
    top: 52px; height: calc(100vh - 52px);
    flex-direction: column; justify-content: center;
    gap: 1.6rem; padding: 1.5rem 6vw;
  }
  /* flex: 0 0 auto, not the desktop 1 1 380px: stacked, that basis became a
     380px HEIGHT and pushed the device off the bottom of the screen */
  .s2t-page .s2c-stage-copy { flex: 0 0 auto; max-width: none; text-align: center; }
  .s2t-page .s2c-stage-copy p { margin: 0 auto; }
  .s2t-page .s2c-stage-device { width: min(58vw, 260px); height: min(40vh, 380px); }
}

/* ── the device wrap: what fades/scales across the phone-to-laptop handoff ── */
.s2t-page .s2c-device-wrap {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  opacity: 1; transform: scale(1);
  transition: opacity 0.4s ease, transform 0.4s ease;
  will-change: opacity, transform;
}
.s2t-page .s2c-device-wrap.s2c-outgoing,
.s2t-page .s2c-device-wrap.s2c-incoming { opacity: 0; transform: scale(0.92); }

/* ── phone (#one-on-one) ── */
.s2t-page .s2c-phone {
  position: relative;
  width: clamp(150px, 15vw, 210px);
  aspect-ratio: 9 / 19;
  border: 2px solid var(--s2e-ink);
  border-radius: 22px;
  background: var(--s2e-ink);
  padding: 9px 7px;
  font-size: clamp(8px, 0.95vw, 12px); /* drives the cube's em geometry inside */
}
.s2t-page .s2c-phone-cam {
  position: absolute; left: 50%; top: 5px; width: 5px; height: 5px; margin-left: -2.5px;
  border-radius: 50%; background: rgba(255, 255, 255, 0.4);
}
.s2t-page .s2c-phone-screen {
  position: relative; width: 100%; height: 100%;
  background: #fff; border-radius: 14px; overflow: hidden;
  display: flex; flex-direction: column;
}
.s2t-page .s2c-phone-pane {
  flex: 1 1 50%; min-height: 0; position: relative;
  display: flex; align-items: center; justify-content: center;
}
.s2t-page .s2c-phone-pane--master { background: var(--s2e-blue); border-bottom: 2px solid var(--s2e-ink); }
.s2t-page .s2c-phone-pane--student { background: var(--s2e-tint); }
.s2t-page .s2c-phone-label {
  position: absolute; top: 8px; left: 0; right: 0; text-align: center;
  font-family: var(--s2e-body); font-size: 0.72rem; font-weight: 500;
  text-transform: capitalize;
}
.s2t-page .s2c-phone-pane--master .s2c-phone-label { color: rgba(255, 255, 255, 0.8); }
.s2t-page .s2c-phone-pane--student .s2c-phone-label { color: var(--s2e-muted); }

/* ── laptop (#group-tutoring) ── */
.s2t-page .s2c-laptop { position: relative; width: min(100%, 520px); font-size: clamp(7px, 0.85vw, 11px); }
.s2t-page .s2c-laptop-screen {
  position: relative; aspect-ratio: 16 / 10.6;
  border: 2px solid var(--s2e-ink); background: var(--s2e-ink); padding: 8px;
}
.s2t-page .s2c-laptop-cam {
  position: absolute; left: 50%; top: 4px; width: 4px; height: 4px; margin-left: -2px;
  border-radius: 50%; background: rgba(255, 255, 255, 0.4);
}
.s2t-page .s2c-laptop-inner {
  position: relative; width: 100%; height: 100%; background: #fff; overflow: hidden;
  display: flex; flex-direction: row;
}
.s2t-page .s2c-lap-pane { flex: 1 1 50%; min-width: 0; position: relative; display: flex; align-items: center; justify-content: center; }
.s2t-page .s2c-lap-pane--master { background: var(--s2e-blue); border-right: 2px solid var(--s2e-ink); }
.s2t-page .s2c-lap-pane--kids { background: var(--s2e-tint); }
.s2t-page .s2c-lap-pane--master .s2c-phone-label { color: rgba(255, 255, 255, 0.85); }
.s2t-page .s2c-lap-pane--kids .s2c-phone-label { color: var(--s2e-muted); }
.s2t-page .s2c-laptop-deck {
  position: relative; height: 12px; width: 112%; margin-left: -6%;
  border: 2px solid var(--s2e-ink); border-top: none; background: var(--s2e-ink);
}
.s2t-page .s2c-laptop-deck span {
  position: absolute; left: 50%; top: -2px; width: 14%; height: 3px;
  transform: translateX(-50%); background: var(--s2e-line);
}

/* the row of student cubes on the laptop screen */
/* two by two, spaced in em (a % gap in a shrink-to-fit box resolves to ~0,
   which piled the cubes on each other) */
.s2t-page .s2c-kidrow { display: grid; grid-template-columns: repeat(2, auto); gap: 2.2em 2.6em; margin-top: 1.2em; }

/* ── the cube (ported from seek2lrn-landing/seek2lrn-landing.php
 * s2l_blm_rubik(); the geometry itself stays inline like the PHP output —
 * only the structural rules are lifted out here). Width/height/perspective
 * are set inline in `em`, sized off the font-size on .s2c-phone/.s2c-laptop
 * above, so one responsive font-size scales every cube inside a device
 * together. Border widths stay in px (the house's 2px ink-rule convention),
 * which is why they're set inline per-face rather than here. ── */
.s2t-page .s2c-cube-stage { position: relative; }
.s2t-page .s2c-cube-pose {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  transform: rotateX(-24deg) rotateY(30deg);
}
.s2t-page .s2c-cube-top {
  position: absolute; left: 0; top: 0;
  transform-style: preserve-3d;
  will-change: transform;
}
.s2t-page .s2c-cube-bottom { position: absolute; left: 0; transform-style: preserve-3d; }

/* ── reduced motion: a still composition, no runway, no sticky-jack ── */
@media (prefers-reduced-motion: reduce) {
  .s2t-page .s2c-stage[data-s2c-stage] { height: auto; }
  .s2t-page .s2c-stage-inner {
    position: static; height: auto;
    flex-wrap: wrap; padding: 4.5rem 4vw;
  }
  .s2t-page .s2c-device-wrap { position: relative; inset: auto; transition: none; }
}

/* the laptop is landscape: its stage gets a wider device column than the
   phone's (340px), and its cubes scale with the column via the font-size */
.s2t-page .s2c-stage[data-s2c-stage="group"] .s2c-stage-device { width: min(44vw, 520px); }
.s2t-page .s2c-stage[data-s2c-stage="group"] .s2c-laptop { width: 100%; font-size: clamp(7px, 0.95vw, 12px); }
@media (max-width: 760px) {
  /* the laptop inside is absolutely placed, so the box needs its own height:
     the 16:10.6 screen plus the deck */
  .s2t-page .s2c-stage[data-s2c-stage="group"] .s2c-stage-device { width: 88vw; height: calc(88vw * 10.6 / 16 + 24px); }
  .s2t-page .s2c-stage[data-s2c-stage="group"] .s2c-laptop { font-size: clamp(6px, 2.1vw, 10px); }
}