/* ═══════════════════════════════════════════════════════════════════
   SCHOOL — interaktívny sprievodca (spotlight + bublina). Flat + teal.
   ═══════════════════════════════════════════════════════════════════ */

/* Klik-blokátor cez celú plochu (v „Ďalej" režime user nasleduje sprievodcu) */
.school-backdrop {
  position: fixed; inset: 0; z-index: 20000;
  background: transparent; pointer-events: auto;
}
.school-backdrop.is-solid { background: rgba(6, 8, 11, 0.78); }

/* Diera — priehľadné okno na zasvietený prvok; okolie stmavené cez box-shadow */
.school-hole {
  position: fixed; z-index: 20001; border-radius: 12px; pointer-events: none;
  background: transparent;
  border: 2px solid rgba(0, 212, 170, 0.9);
  box-shadow: 0 0 0 9999px rgba(6, 8, 11, 0.78), 0 0 22px rgba(0, 212, 170, 0.55);
  transition: left 0.25s ease, top 0.25s ease, width 0.25s ease, height 0.25s ease;
}

/* Bublina */
.school-bubble {
  position: fixed; z-index: 20002; width: 320px; max-width: calc(100vw - 24px);
  background: #14171d; border: 1px solid rgba(0, 212, 170, 0.4); border-radius: 16px;
  padding: 16px 16px 14px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
  transition: left 0.25s ease, top 0.25s ease;
}
.school-x {
  position: absolute; top: 11px; right: 11px; width: 26px; height: 26px; border-radius: 7px;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); color: rgba(255,255,255,0.6);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.school-x:hover { background: rgba(255,255,255,0.12); color: #fff; }
.school-x svg { width: 14px; height: 14px; }
.school-step { font-size: 10.5px; letter-spacing: 0.14em; font-weight: 700; color: var(--accent, #00d4aa); }
.school-title { font-size: 16px; font-weight: 700; color: #fff; margin: 6px 0 6px; padding-right: 22px; }
.school-body { font-size: 13px; line-height: 1.55; color: rgba(255,255,255,0.75); }
.school-tip {
  display: flex; align-items: flex-start; gap: 8px; margin-top: 11px; padding: 9px 11px;
  background: rgba(0,212,170,0.08); border-radius: 10px; font-size: 12px; line-height: 1.5; color: #9fb8b0;
}
.school-tip-ic { color: var(--accent, #00d4aa); flex-shrink: 0; margin-top: 1px; }
.school-tip-ic svg { width: 15px; height: 15px; }
.school-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; }
.school-dots { display: flex; gap: 6px; }
.school-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.2); transition: all 0.15s ease; }
.school-dot.is-active { width: 16px; border-radius: 3px; background: var(--accent, #00d4aa); }
.school-actions { display: flex; align-items: center; gap: 8px; }
.school-btn { font-family: inherit; font-size: 12.5px; font-weight: 700; padding: 8px 15px; border-radius: 9px; cursor: pointer; border: 1px solid transparent; transition: all 0.15s ease; }
.school-btn-ghost { background: transparent; color: rgba(255,255,255,0.6); }
.school-btn-ghost:hover { color: #fff; }
.school-btn-primary { background: var(--accent, #00d4aa); color: #042b23; }
.school-btn-primary:hover { filter: brightness(1.07); }